소소해서 소중한 일상

호출 스택은 동기 코드를 담당하고, 이벤트 루프는 비동기 코드를 담당한다 백그라운드 background 는 타이머를 처리하고 이벤트 리스너를 저장하는 공간이다 타이머 함수가 실행되면 백그라운드에서 시간을 재다가 지정 시간이 되면 콜백 함수를 태스크 큐로 보낸다 태스크 큐 task queue 는 실행될 콜백 함수들이 대기하고 있는 공간이다 큐 queue 는 우리말로 '줄' 이라는 뜻이다 태스크 큐에 먼저 들어온 함수부터 실행된다 다만 태스크 큐도 함수를 직접 실행하지 않는다 함수는 호출 스택에서만 실행된다 호출 스택에 들어와야 함수가 호출(실행) 된다고 생각하면 된다 태스크 큐에서 호출 스택으로 함수를 이동시키는 존재가 바로 이벤트 루프 이다 호출 스택 호출 스택은 바닥이 막히고 천장은 뚫린 하나의 통이다..

블록 스코프와 함수 스코프 모든 변수는 스코프 scope, 범위 가 있다 var 은 함수 스코프, let 은 블록 스코프이다 함수 안에 선언된 변수는 함수 바깥에서는 접근할 수 없다 이처럼 함수를 경계로 접근 가능 여부가 달라지는 것을 함수 스코프(함수만 신경씀) 라고 한다 함수 스코프를 다르게 말하면 함수를 끝날 때 함수 내부의 변수도 같이 사라진다고 할 수 있다 var 는 함수 스코프라서 if 문 안에 들어 있어도 if 문 바깥에서 접근할 수 있다 let 은 블록 스코프(블록을 신경씀) 이다 블록은 if 문, for 문, while 문, 함수에서 볼 수 있는 중괄호 ({ })를 의미 블록 바깥에서는 블록 안에 있는 let 에 접근 할 수 없다 let 뿐만 아니라 const 도 블록 스코프를 가진다 블..

동기 synchronous 는 앞선 작업이 완전히 끝난 후에 다음 작업이 실행되는 것 비동기 asynchronous 는 앞선 작업이 끝나지 않았는데도 다음 작업이 실행되는 것 setTimeout( ) 타이머 함수 중에서 가장 자구 사용하는 setTimeout( ) 함수는 지정한 시간 뒤에 코드가 실행 첫 번째 인수로 콜백함수, 두 번째 인수는 밀리초 단위이므로 초에 1000을 곱함 setTimeout(함수, 밀리초); 첫 번째 인수에 넣는 함수를 외부에서 가져올 수 있다 setTimeout( ) 함수를 비동기라고 하는 이유는 setTimeout( ) 뒤에 나오는 코드를 더 먼저 실행하기 때문 setTimeout( ) 에 넣은 함수는 동기 코드가 모두 실행되고 난 뒤 실행 setInterval( ) 자바스..

JavaScript Function 화살표 함수 () => {} vs function () {} const double = function (x) { return x * 2; }; console.log('double: ', double(7)); // 14 const doubleArrow = (x) => x * 2; //const doubleArrow = x => x * 2; () 매개변수가 1개면 생략 가능 console.log('double: ', doubleArrow(7)); // 14 객체를 반환 할 시, ({name: huisu}) IIFE 즉시실행함수 Immdiately-Invoked Function Expression const a = 7; function double() { console.l..

Destructuring Assigment MDN 배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장할 수 있도록 해주는 것 데이터 뭉치 (그룹화)를 쉽게 만들 수 있다. const fruits = ['🍌','🍓','🍏','🍆'] const banana = fruits[0]; // 🍌 const strawberry = fruits[1]; // 🍓 const apple = fruits[2]; // 🍏 const eggplant = fruits[3]; // 🍆 너무 비효율적 😖 간단하게 만들어보자!! 😁 const fruits = ['🍌','🍓','🍏','🍆']; const [ banana, strawberry, ...others] = fruits; console.log(banana) // 🍌 consol..

기획안 작성하기 SMART 방법론 소개 Specific(구체적) Measurable(측정 가능한) Achievable(달성 가능한) Realistic(현실적) Time-bound(기한이 있는) 저는 제공해주신 노션 템플릿을 이용해서 정리하였습니다 https://nomadcoders.co/faq/challenge/schedule-contest FAQ › 클론코딩 컨테스트 진도표 – 노마드 코더 Nomad Coders 챌린지 소개. 과제 제출 방법. 수강생 후기 및 졸업작품 등. nomadcoders.co 진도표를 기준으로 기획을 작성하였으며, 마크업 작업은 가능하면 1일 이상 넘기지 않게 할 것이며, 기능 구현에 조금 더 우선순위를 둘 것입니다. 기능 관련에 대해서는 깃의 이슈를 이용해서 정리 및 적용을 ..

리스트(List and Key) React list and key(공식문서) 아래는 map()함수를 이용하여 numbers 배열의 값을 두배로 만든 후 map()에서 반환하는 새 배열을 doubled 변수에 할당하고 로그를 확인하는 코드이다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); 이 코드는 콘솔에 [2, 4, 6, 8, 10]을 출력합니다. React에서 배열을 엘리먼트 리스트로 만드는 방식은 이와 거의 동일하다. 이 코드를 실행하면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다. “key”는 엘리먼트 리스트를 만들 때 포함해야 하는 특수..

React ?? 라이브러리는 개발 편의를 위한 도구의 모음 (= 공구) 프레임워크는 기반 구조까지 잡혀있음 (= 공장) React를 배워야 하는 이유 생태계 (구글링) 크다 해당 기술에 대한 관심도/ 실제 사용 빈도/ 사용자수 관련 라이브러리(도구)가 많고, 문제 해결할 방법을 찾기 쉽고, 나와 같은 고민을 한 혹은 했던 사람이 많고, 실무에서 사용할 확률이 높다. 새로운 기술을 배우는 시작점으로 좋다 생태계가 점점 성숙해지면서 기술적으로 확실한 장점이 있다. DOM (Document Object Model) 문서를 논리 트리로 표현한다. https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model 순수 자바스크립 특정 라이브러리나 프레임워크를..

JS 데이터 MDN 문자 String: 전역 객체는 문자열(문자의 나열)의 생성자입니다. 자주 사용되는 Methods String.prototype.indexOf() indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 - 1을 반환합니다. const result = "Hello world!".indexOf("world"); const result2 = "Hello world!".indexOf("huisu"); console.log(result); // 6 console.log(result2); // -1 length() 메소드는 문자열의 길이를 측정하여 숫자로 반환한다 const str = "01 23"; console.log(..

데이터 타입 확인 // getType.js export default function getType(data) { return Object.prototype.toString.call(data).slice(8, -1); } // main.js import getType from './getType'; console.log(getType(123)); console.log(getType(false)); console.log(getType(null)); console.log(getType({})); console.log(getType([])); 산술, 할당 연산자 arithmetic operator console.log(1 + 2); console.log(5 - 8); console.log(3 *..