seheej 님의 블로그

01. Action Creator1-1. Action Creator란?Action Creator는 Redux에서 액션 객체를 생성하는 함수Redux에서 액션 객체를 하드코딩으로 작성하는 대신, 이를 함수로 만들어 사용함으로써 코드의 유지보수성을 높이고, 오타를 방지할 수 있음특히 프로젝트 규모가 커질수록 액션 타입의 변경이 빈번하게 일어날 수 있는데, Action Creator를 사용하면 이러한 변경을 중앙에서 쉽게 관리할 수 있음1-2. Action Creator 만들기액션 value를 상수로 선언하고, 해당 상수를 이용해 액션 객체를 반환하는 함수를 만듦리듀서와 컴포넌트에서 이 Action Creator를 사용해 코드의 유지보수성을 높임// src/redux/modules/counter.jsconst..

1. 제목 및 소개제목:🎥 당무땡 - 바닐라 자바스크립트로 만든 영화 검색 사이트 프로젝트 소개:8일간의 짧은 프로젝트 기간 동안 팀원들과 협력하여 밝고 귀여운 색감의 영화 검색 사이트를 만들었습니다. 당무땡은 TMDB openAPI를 활용해 다양한 영화 정보를 제공합니다. 사용자는 카테고리별로 영화를 검색하고, 리뷰를 남길 수 있습니다.2. 프로젝트 개요프로젝트 설명:당무땡은 사용자에게 다양한 영화 정보를 제공하기 위해 TMDB openAPI를 사용하여 제작된 웹 사이트입니다. 사용자는 영화 제목 검색과 카테고리별 슬라이드 버튼을 통해 다양한 영화 리스트를 확인할 수 있습니다. 각 영화의 상세 페이지에서 리뷰를 작성, 수정, 삭제할 수 있습니다.프로젝트 링크3. 개발 과정프로젝트 기간:2024년 7월..

(1) 콜백 함수란?콜백 함수는 다른 함수의 인자로 전달되어, 필요할 때 실행되는 함수입니다. 제어권을 다른 함수에게 넘기는 것이 특징입니다.콜백 함수의 특징인자로 넘겨줌: 콜백 함수는 forEach, setTimeout 등 다른 함수의 인자로 전달됩니다.제어권 위임: 콜백 함수는 호출 시점과 방식이 인자를 받는 함수에 의해 결정됩니다.콜백 지옥: 콜백 함수를 중첩하여 사용하면 코드의 가독성이 떨어지고 유지보수가 어려워집니다.// setTimeoutsetTimeout(function() { console.log("Hello, world!");}, 1000);// forEachconst numbers = [1, 2, 3, 4, 5];numbers.forEach(function(number) { cons..

콜백 함수란?1. 콜백 함수의 정의콜백 함수는 다른 코드의 인자로 넘겨주는 함수입니다. 즉, 콜백 함수는 함수나 메서드가 필요할 때 호출할 수 있도록, 다른 함수에 전달됩니다. JavaScript에서는 setTimeout, forEach와 같은 함수가 콜백 함수를 받아들이는 대표적인 예입니다.// setTimeoutsetTimeout(function() { console.log("Hello, world!");}, 1000);// forEachconst numbers = [1, 2, 3, 4, 5];numbers.forEach(function(number) { console.log(number);}); 2. 콜백 함수의 제어권콜백 함수를 넘겨받은 코드는 언제, 어떻게 콜백 함수를 호출할지에 대한 제어권..

'&&' 문제 주어진 문제는 학생의 세 과목(국어, 영어, 수학) 점수가 모두 80점 이상인지 확인하는 함수 checkGrade를 작성하는 것입니다. 함수는 각 과목 점수가 80점 이상이면 true를 반환하고, 그렇지 않으면 false를 반환해야 합니다.const grade = { 국어: 90, 영어: 80, 수학: 100,};// 국어, 영어, 수학 점수가 모두 80점 이상이면 true, 아니면 false를 반환해주세요.function checkGrade(grade) { if (grade.국어 >= 80 && grade.영어 >= 80 && grade.수학 >= 80) { return true; } else { return false; }}console...

실행 컨텍스트는 자바스크립트 코드 실행에 필요한 환경 정보를 담고 있는 객체입니다. 실행 컨텍스트가 활성화되면 자바스크립트는 변수를 호이스팅하고, 외부 환경 정보를 구성하며, this 값을 설정합니다. 이로 인해 자바스크립트는 다른 언어와 다른 특징을 가집니다. 1. 실행 컨텍스트란?콜 스택: 실행할 코드의 환경 정보를 모아 놓은 실행 컨텍스트를 쌓아 올리는 스택. 최상단의 컨텍스트가 현재 실행 중인 코드의 환경을 제공2. VariableEnvironment와 LexicalEnvironmentVariableEnvironment (VE) 와 LexicalEnvironment (LE)둘 다 식별자 정보를 담지만, VE는 스냅샷을 유지하고, LE는 실시간으로 변경 사항을 반영구성 요소: 식별자 정보(envir..

1. 데이터 타입의 종류기본형: Number, String, Boolean, Null, Undefined, Symbol 참조형(문자 그대로 어떤 것을 참조하고 있는 것): Object(Array, Function, Date, RegExp, Map, WeakMap, Set, WeakSet)기본형과 참조형을 나누는 기준값의 저장 방식기본형: 값이 담긴 주소값을 바로 복제참조형: 값이 담긴 주소값들로 이루어진 묶음을 가르키는 주소값을 복제불변성 여부기본형: 불변하다 (메모리 관점에서)참조형: 불변하지 않다2. 메모리와 데이터에 관한 배경지식비트 (Bit = Binary Digit)컴퓨터가 이해할 수 있는 가장 작은 단위0 또는 1 두 가지 값만 가질 수 있음 (이진수 형태)바이트 (Byte)8개의 비트로 구성..

MapKey, Value을 한 쌍으로 저장Map은 Key가 정렬된 순서로 저장되기 때문기능: 검색, 삭제, 제거, 여부 확인Key에 어떤 유형의 데이터 타입이 다 들어올 수 있다.const myMap = new Map();// Map 값을 추가할 때 항상 set을 사용해야 함myMap.set('key', 'value');// get을 통해 검색myMap.get('key');대량의 데이터를 처리하기 위함이기 때문에 반복적인 부분이 중요함method: keys, values, entries// Map 생성const myMap = new Map();// myMap에 set으로 데이터 저장myMap.set('one', 1);myMap.set('two', 2);myMap.set('three', 3);console..

일급 객체란: 다른 객체들과 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가르킨다 (=다른 객체와 일반적으로 같다) 1. 변수에 함수를 할당함수가 마치 값으로 취급된다.함수가 나중에 사용될 수 있도록 조치가 되었다.const sayHello = function () { console.log("Hello!");} 2. 함수를 인자로 다른 함수에 전달콜백 함수: 매개변수로서 쓰이는 함수고차 함수: 함수를 인자로 받거나 return하는 함수콜백함수(함수로 인자로 받음)는 고차함수의 한 종류function callFunction(func) { //매개변수로 받은 변수 func가 사실, 함수다. func()}function callFunction(func) { //매개변수로 받은 변수..

1. 변수와 상수변수: 값을 메모리에 저장하고, 저장된 값을 읽어들여 재사용5가지 주요 개념변수 이름: 저장된 값의 고유 이름변수 값: 변수에 저장된 값변수 할당: 변수에 값을 저장하는 행위변수 선언: 변수를 사용하기 위해 컴퓨터에 알리는 행위변수 참조: 변수에 할당된 값을 읽어오는 것변수 선언 키워드var잘 사용하지 않음똑같은 이름으로 다시 선언할 수 있음재할당 가능let똑같은 이름으로 다시 선언할 수 없음재할당 가능const똑같은 이름으로 다시 선언할 수 없음재할당 불가능keyword재선언 (Redeclare)재할당 (Reassign)Scopevar가능가능Function-levellet불가능가능Block-levelconst불가능불가능Block-level 2. 데이터 타입숫자(Number)정수형실수형지..