js

[JavaScript] 조건문 - if, switch

조건문 조건문은 특정한 조건에 따라 코드 진행을 달리하는 분기처리를 하는 문법으로, Javascript에서는 if문과 switch문을 많이 사용하며, 논리 연산자와 삼항 연산자로도 사용이 가능하다. 조건문 if문 if문은 소괄호 안의 조건식이 참이 될 때, 중괄호 안의 코드를 실행 시킨다. const age = 21 if(age >= 20){ console.log("성인 입니다.") } // 성인 입니다. 조건문 if else문 단순하게 나이가 20살 이상일 때뿐만 아니라 20살이 아닐 때라는 분기처리를 희망하면 else를 아래와 같이 사용한다. if문의 모든 조건들의 해당되지 않는 나머지 경우의 수일 때 else 중괄호 안의 식이 실행이 된다. const age = 18 if(age >= 20){ co..

[Javascript] 반복문 - for, for each, for in, for of

반복문 Javascript에서 코드를 특정한 횟수를 반복하거나 리스트 형태의 데이터를 순회하고 싶을 때 반복문을 사용 합니다. 주로 많이 사용하는 반복문은 for을 이용한 횟수를 중요시하는 반복문들이 있습니다. for for each for in for of 반복문 for 반복문 for은 코드를 특정한 횟수를 반복할 때 사용합니다. for (let i = 0; i 조건식 -> 반복 코드 -> 후위식의 순서대로 진행 되며, 반복하다가 조건식이 false일 때 반복을 멈춥니..

[JavaScript] Hoisting

Hoisting Hoisting이란 변수의 선언만을 해당 스코프의 맨 위로 끌어올리는 것을 의미한다. 아래의 예시를 보고 이해해보자. 아래의 1번을 보면, x는 console.log아래에서 선언과 초기화가 이루어져있는 데도, Error가 아닌 undefiend가 나오고 있다. 이것이 Hoistring의 예시라고 생각하면 된다. 1번처럼 작성한 코드가 Hoistring으로 2번처럼 아래에서 선언된 변수가 선언만은 위에서 되어 undefined가 나오는 것이다. // 1번 console.log(x) // undefiend var x = 1 // 2번 var x console.log(x) x = 1 그렇다면 Hoisting이 안 된다면 어떻게 될까 아래의 예시를 보면 Hoisting이 되지 않는다면 Refer..

[JavaScript] Event Loop

JavaScript에는 동시성 모델인 Event Loop, Call Stack, Callback Queue가 있다. Event Loop EventLoop는 여러개의 스레드를 사용하고, 그 중 우리가 작성한 JavaScript가 실행되는 스레드를 메인 스레드라한다. 이 메인 스레드는 Node JS 프로세스에서는 하나만 존재하며, 한 순간에 한 줄씩 실행된다. 하지만 그 이외의 일을 하는 워커 스레드는 여러개가 존재할 수 있다. Call Stack Call Stack이란 지금 시점까지 호출된 함수들의 Stack이다. 여기서 Stack은 자료 구조 중 하나며, 아래에서 위로 차곡 차곡 쌓이지만, 위에서부터 빼내는 자료 구조다. 즉 함수가 호출 될 때 마다 하나 씩 쌓이고, 리턴 할 때 빠지게 된다. 이벤트 루..

[React] useReducer에 대해서 알아보자.

우리가 어떠한 상태를 관리할 때는 useState()를 사용해서 해왔지만, useState()는 컴포넌트 내부에서 이루어진다는 것이 있다. 그러기에, A 컴포넌트에서 B 컴포넌트로 상태 전달할 때의 어려움도 존재하였다. 이를 해결 하는 방법이 useReducer다. useReducer는 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리 시킬 수 있기에, 컴포넌트 바깥에 작성하거나, 다른 파일에서 작성 하고 불러와서 사용할 수도 있다. useReducer에서 reducer는 현재 상태(state)와 액션 객체(action)를 파라미터로 받아 새로운 상태를 반환하는 함수다. reducer에서 반환하는 상태는 곧 컴포넌트가 가지게 될 새로운 상태가 된다. 여기서 action은 상태를 업데이트를 하기 위한 정보..

[React] useCallback 사용하기.

해당 자료로 공부하고 정리한 게시글 입니다. https://www.daleseo.com/react-hooks-use-callback/ useCallback useCallback은 useMemo와 더불어, 성능의 최적화를 위해서 사용하는 React Hook으로, useMemo가 값을 memoization 하기 위한 훅이였다면, useCallback은 함수를 memoization하기 위한 훅이다. useCallback은 2개의 인자를 받는 데, 첫번째 인자는 콜백 함수, 두번째 인자는 의존성 배열을 받게 되며, 첫번째 인자로 넘어온 함수를 의존성 배열 내의 값이 업데이트 될 때까지 저장해두고 사용할 수 있다. 예를 들dj add() 함수는 a와 b를 받아 더한 후 반환하는 함수이고, 컴포넌트 함수 안에서 선..

[Node JS] 01. Node JS 시작하기(Setting)

01. Node JS 설치하기 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치 확인 방법 Terminal을 열어서 아래의 명령어를 입력한다. node --version 위의 이미지와 같이 설치한 Node JS의 버전이 나오면 설치가 완료된 것이다.