소소해서 소중한 일상

호출 스택은 동기 코드를 담당하고, 이벤트 루프는 비동기 코드를 담당한다 백그라운드 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( ) 자바스..

프로그래밍에서 함수 function 는 특정한 작업을 수행하는 코드를 의미 함수 선언하기 이름이 없는 함수는 특별히 익명 함수 anonymous function 이라 한다 함수를 상수에 대입하지 않고 function 뒤에 함수의 이름을 넣는 방식을 함수 선언문 이라한다 함수를 상수나 변수에 대입하는 방식을 함수표현식이라 한다 화살표 기호를 사용한 함수는 화살표 함수 arrow function 이라 한다 function() {}; () => {}; function 이름 (){실행문} 이름 = function(){실행문} () => {실행문} // 또는 () => 반환식 함수 호출하기 함수를 사용하는 행위를 프로그래밍에서는 호출한다 call 고 표현한다 함수 이름에 ( )를 붙이면 함수가 실행된다 retur..

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..

React Props 복습 // App.jsx import React, { useState } from "react"; import Home from "./component/Home"; import Clip from "./component/Clip"; function App() { const [news, setNews] = useState([]); //{"status":"OK", console.log("handler up news:", news); const fecthNewsHandler = async () => { const response = await fetch( `https://api.nytimes.com/svc/search/v2/articlesearch.json?q=election&api-key..

Adding Type Safety To React Apps What ? & Way? TypeScript is a superset to JavaScript 뿌리는 여전히 자바스크립트 이다. 자바스크립트의 기본적인 문법들과 자바스크립트 코드 작성법, if 문, for 반복문, 객체 사용법등을 그대로 사용한다. 타입스크립트는 자바스크립트에 몇가지 기능을 추가한 것이다. Statically Typed의 특징을 가진다. function add(a: number, b: number) { return a + b; } add("2", "5"); // 숫자로 타입이 지정되어있기 때문에, 코드 작성시 오류 발생 add(2, 5); // 7 npm install typescript 설치하기 npx tsc 파일명.ts 컴파일..

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

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(..