후니's Blog

스코프, 스코프 체인

2022.03.29

스코프 자바스크립트의 변수에는 유효 범위가 있음 변수와 같은 식별자에 대한 유효 범위를 스코프라고 함 유효범위는 전역공간과 지역공간으로 크게 두가지로 나뉘며, 이에따라 변수 또한 전역변수와 지역변수로 나뉨 전역 변수 스크립트 영역 어디에도 힘을 발휘 할 수 있는 변수 변수가 어떤 블록안에 들어가있지 않을 경우 전역변수라 함 지역 변수 정해진 영역에서만 힘을 발휘하는 변수 보통 블록 { } 안이나, 함수 안에서만 변수에 접근할 수 있음 스코프 체인 식별자의 유효범위 즉, 스코프를 안에서부터 밖으로 검색해 나가는 것을 스코프 체인이라고 함 컨텍스트는 해당 코드의 외부환경정보를 수집해 올 때 스코프 체인이 발생 └ a가 1이 되는 이유 : 바로 위 식별자의 Environment를 참조해오기 때문 ① 먼저 ou..

React/2022-上

Class / Functional Component (클래스형 컴포넌트, 함수형 컴포넌트)

2022.03.28

React에서 Functional Component는 없는 단어이다. 우선, 공식 사이트를 보게 되면, Functional Component(함수형 컴포넌트)라는 말은 존재하지 않는다. Functional Component(함수형 컴포넌트) 대신 Function Component(함수 컴포넌트)라고 찾아보게 된다면, 이에 대한 설명은 찾아볼 수 있다. 이에 대한 이유는, Function Component(함수 컴포넌트)는 참조 투명할 수도, 아닐 수도 있기 때문에 "Functional"(함수형) 수식어를 붙이는 것은 오해를 불러 일으킬 수도 있기 때문이다. └ 참조 투명성에 대해서는 알아서 검색해보길 추천한다! ※ 과거에는 공식 사이트에서도 "Functional Component" (함수형 컴포넌트) 라..

Web Basic/JavaScript

실행 컨텍스트와 호이스팅

2022.03.28

스택 & 큐 스택 출입구가 하나인 우물 형태의 데이터 구조 스택의 입력과 출력 순서 스택의 출입구는 하나 입력의 순서와 출력의 순서가 다름 입력 순서 : 1 - 2 - 3 - 4 - 5 출력 순서 : 5 - 4 - 3 - 2 - 1 큐 양방향 출입이 가능한 파이프 형태의 데이터 구조 큐의 입력과 출력 순서 입구와 출구가 다름 → 제일 먼저 들어간 데이터가 제일 먼저 나옴 입력의 순서와 출력의 순서가 같음 입력 순서 : c - b - a 출력 순서 : c - b - a 실행 컨텍스트와 호이스팅 실행 컨텍스트 실행할 코드에 제공할 환경정보를 모아둔 객체 자바스크립트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경정보를 모아 컨텍스트를 구성하고, 해당 컨텍스트를 콜스택에 쌓아둠 실행 컨텍스트를 생성하기 ..

React/2022-上

React state, props

2022.03.27

State & Props Props, State 란? 데이터를 다룰 때 사용되는 개념 State 란? 컴포넌트의 상태를 나타냄 가변 데이터 (컴포넌트의 내부에서 선언되기 때문) 직접 변경 가능 만약 state가 변경되면 컴포넌트를 다시 렌더링 해야함 외부에 공개하지 않고, 컴포넌트가 스스로 관리함 state로 사용하는 것은 컴포넌트의 상태값을 나타내기 위한 것들(리스트에서 선택된 값, 체크박스에서 체크된 값 등) └ 위의 예시는 + 버튼을 누르면, 화면에 표시된 값을 1 증가 시키는 코드 ┌ State를 사용하기 위해 useState라는 Hook을 사용해야 함 ├ useState는 State 변수의 초기값을 매개변수로 전달하여 호출하고, 결과값으로는 배열을 반환함 ├ 반환된 배열에서는 useState 함..

React/2022-上

JavaScript와 TypeScript

2022.03.27

JavaScript JavaScript 란? 웹 개발에 주로 사용됨 웹 페이지를 대화식으로 만드는 프로그래밍 언어 폼 유효성 검사, 애니메이션 적용 및 이벤트 생성을 수행 클라이언트 측 스크립팅 언어 └ 사용자가 웹 브라우저를 열고 웹 페이지를 요청하면 해당 요청이 웹 서버로 이동함 멀티 스레딩, 멀티 프로세싱 기능이 없음 예시 코드 └ 정적 타입을 지원하지 않으므로 어떤 타입의 반환값을 리턴해야 하는지 명확하지 않음 TypeScript TypeScript 란? MS에서 개발하여 2012년 10월에 첫 출시됨 오픈소스 프로그래밍 언어로 어떤 브라우저나 호스트, 운영체제에서도 동작함 ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러를 사용하지 않아도 됨 정적 타입 언어로 컴파일 시..

React/2022-上

filter, map, every

2022.03.27

filter filter() 메서드 자바스크립트 배열의 내장 함수 주어진 함수의 테스트를 통과하는 모든 요소를 모아(true면 요소를 유지, false면 버림) 새로운 배열을 반환함 callback 함수는 호출되는 배열을 변화시키지 않음 따라서, 내가 원하는 값들을 필터링 할 수 있음 ※ callback 함수는 3개의 인수와 함께 호출됨 ┌ ⑴ 처리할 현재(대상) 요소값 ├ ⑵ 처리할 현재(대상) 요소의 인덱스 └ ⑶ filter을 호출한 배열 객체(=순회되는 배열 객체) 기본 사용법 filter()을 활용한 검색 예시 └ profiles 배열에 들어있는 profile.detail이 age를 포함하고 있으면 profiles 배열로 구성 filter()을 활용한 삭제 예시 └ profiles 배열에서 pr..

React/2022-上

container-presentation

2022.03.27

container-presentation Container(컨테이너) 란? 컴포넌트의 로직에 관한 대부분의 것들을 다룸 특히 API 호출, 데이터 조작, 이벤트 처리 등의 작업을 함 데이터와 데이터 조작에 관한 함수를 만들고 presentation에 제공함 Presentation(프리젠테이션) 란? UI에 표시할 요소를 만드는 부분 state를 직접 조작하지 않고, container에서 내려준 props의 함수에 의해 state를 변경함 이에 따라, useState, useCallback, dispatch 등 state와 관련된 훅이 하나도 없음 container-presentation(컨테이너-프리젠테이션) 란? 로직을 수행하는 컴포넌트와 markup을 통해 UI를 보여주는 컴포넌트가 분리된 것 이에 ..

React/2022-上

Destructuring Assignment (구조 분해 할당)

2022.03.27

Destructuring Assignment (구조 분해 할당) Destructuring Assignment란? 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식 객체 및 배열 리터럴 표현식을 사용하면 쉽게 데이터 뭉치를 만들 수 있음 구조 분해 할당의 구문은 위의 표현식과 비슷 하지만, 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의함 배열 구조 분해 기본 변수 할당 선언에서 분리한 할당 변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있음 기본값 변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용함 변수 값 교환하기 하나의 구조 분해 표현식만으로 두 변수의 값을 교환할 수 있음 구조 분해 할..

전체 글

스코프, 스코프 체인

Class / Functional Component (클래스형 컴포넌트, 함수형 컴포넌트)

실행 컨텍스트와 호이스팅

React state, props

JavaScript와 TypeScript

filter, map, every

container-presentation

Destructuring Assignment (구조 분해 할당)

티스토리툴바