서론React에서 타이머(setTimeout)를 이용하여 일정 시간 후에 특정 함수를 호출하는 기능을 구현하던 중,함수 내부에서 참조하는 상태(state)가 최신값이 아닌 과거 값으로 작동하는 문제가 발생했다. 문제 원인을 체크해보니 React의 비동기 렌더링 이슈가 아닌 자바스크립트의 클로저(Closure)의 특징으로 발생한 것이라는 걸 알게 되었다.문제 상황const goToMaintainPage = () => { // 작업 상태값을 저장하고 다음 페이지로 이동// mySwrState : 생성한 커스텀 useSWR 임 setMySwrState({ ...mySwrState, director: directorName, // useState 값(생성했다고 가정) workerNumber:..

이벤트 객체 웹 서핑시 특정 이미지나 카드를 클릭하거나 드래그 → 이렇게 클릭이나 드래그하는 일을 이벤트라 함 학습 목표 * 기초적인 event 이해와 event handler를 element에 적용하기 - onclick event - onclick 에 직접 할당하는 것과 addEventListener의 차이 - eventHandler 함수를 만들고, eventHandler의 첫 번째 인자 사용하는 법 이벤트 객체 ex) POS기 만들기 예제 화면에 아메리카노나 카페라떼를 클릭하는 각각의 버튼 존재(아메리카노/카페라떼 버튼) 두개의 버튼을 클릭할 때 각각 ‘아메리카노를 클릭하셨습니다’ ‘카페라떼를 클릭하셨습니다’ 라고 출력하자 let menus = document.querySelectorAll("butt..

원시 자료형과 참조 자료형 원시 자료형: 고정된 저장 공간 사용 참조 자료형: 동적으로 변하는 저장 공간 사용(함수, 배열, 객체 등) 학습 목표 * 원시 자료형과 참조 자료형의 구분이 필요한 이유? * 원시 자료형과 참조 자료형의 차이? * 원시 자료형은 변수에 값이 할당되고 참조 자료형은 “주소”가 할당된다 * 참조 자료형은 동적으로 크기가 변하는 특별한 보관함을 사용한다원시, 참조 자료형 쉽게 이해하기 원시 자료형: 값(value)가 stack에 직접적으로 저장되어 있다. 값을 stack 보관함에서 바로 꺼내오는 구조 참조 자료형: 보관함에 값이 저장이 된 것이 아니라 어디를 참조 해라는 “주소”가 저장되어 있다. 그 주소에 해당하는 값은 heap에 저장이 되어 있어서 보관함에서 주소를 보고 hea..

배열, 객체 배열과 객체라는 개념을 통해, 수 많은 데이터를 한 번에 처리 배열과 객체는 참조 타입(reference type) 데이터 참조 타입 데이터는 이전에 학습한 원시 타입(숫자, 문자열, boolean, undefined 등) 데이터와 다른 성격을 가짐 배열 기초 학습 목표 [배열 기초] * 용어들에 대한 이해 - index, element, length - arr[0], push, pop * 배열에서 특정 인덱스의 요소(element)를 조회하거나 변경 * 이중 배열: 배열의 요소가 배열 * 이중 배열의 요소를 조회, 변경 [배열의 반복] * 배열의 요소를 반복적으로 불러오는 방법 * 배열에 각 요소에 대해 반복하는 코드 실행 - 기본적인 for문을 응용한 다양한 for문 만들기 - 반복문에 ..

ch – 반복문 단순한 반복을 보다 효율적이고 간결하게 할 수 있도록 하는 반복문 [학습 목표] for문과 문자열, 숫자를 이용해 반복적으로 코드를 실행 기본적인 for문 (for (let i = 0; i < 5; i++))을 응용한 다양한 for문 생성 for문과 while문의 차이 이해 반복문에 조건문을 적용하여 특정 조건에서만 반복문 실행되게 하기 이중 for문에 대한 이해 반복문 기초 반복문: 같거나 비슷한 코드를 여러 번 실행시켜야 할 때 쓰는 구문 → 반복할 조건을 코드로 작성 for 구문 반복할 조건을 초기화, 조건식, 증감문 순으로 넣어준다 for(초기문;조건문;증감문){ //반복할 내용 } ex) let sum=1; for(1et n=2;n

# ch-조건문(conditional) - truthy, falsy가 조건문에서 작동하는 방식 이해 - 비교 연산자를 통한 엄격한 비교(===, !==) 이해 - if, else if, else를 이해 - 논리연산자(&&, ||, ! …) 사용해보기 - 복잡한 조건문을 활용하여 실생활 문제 해결 알고리즘 구현 # 조건문 기초 Boolean 타입에 대한 이해 조건문은 어떤 조건을 판별하는 **기준**을 만드는 것 조건문에는 반드시 **비교 연산자**가 필요 , ===(같다), !==(다르다) 비교의 결과는 항상 Boolean, 즉 true 또는 false 이다 ==, != 은 느슨한 비교이므로 사용하지 않는 것이 좋다! → 예외 케이스가 많아서 정확한 결과를 도출하기 어렵기 때문 # 조건문 사용..