CS
Hoisting이란?
함수가 실행되기 전에 안에 있는 변수들을 범위의 최상단으로 끌어올리는 것
var
- 호이스팅시 변수의 선언과 초기화(undefined으로) 같이 시켜버림
- 값 할당은 나중에 할당을 한다.
- 변수 선언은 호이스팅 되지만, 값 할당은 호이스팅되지 않음. - 함수만 지역변수로 호이스팅이 되고, 나머지는 다 전역변수로 올려버린다.
- 중복선언 가능. ES6 let을 사용함으로써 해결.
TDZ란?
Temporal Dead Zone (임시적으로 죽어있는 영역)
변수 선언 let, const와 TDZ의 관계
- let과 const도 호이스팅에 의해 변수 선언이 범위의 최상단으로 올라간다.(스코프 단에서).
하지만 할당한 변수가 나오기 전까지는 메모리 할당이 되지 않아 해당 변수는 참조에러를 일으키게 된다.
변수의 생성과정
- 선언 단계
- 초기화 단계
- 할당 단계
var
1. 선언 및 초기화 단계
2. 값 할당 단계
✅ 초기화 : undefined를 할당해주는 단계
let
1. 선언 단계
2. 초기화 단계
3. 할당 단계
값을 변경할 수 있는 let은 선언 후, 초기화를 거친 후에 값을 할당한다.
const
1. 선언 + 초기화 + 할당 단계
상수선언이기 때문에, 선언과 동시에 초기화 시킨 후, 값이 할당되어야 한다.
예시 코드
let name;
name = "Kim";
var age;
age = 50;
const gender;
gender = "male"; // SyntaxError 출력. 선언하면서 바로 값을 할당하지 않았기 때문parameter와 argument의 차이
parameter
- 함수를 정의할 때 사용되는 변수
argument
- 실제로 함수가 호출될 때, 넘겨지는 변수값
function minus (num1, num2) {
return num1 + num2;
}
// num1과 num2는 parameter이다.
minus(10, 20);
// 10과 20은 argument이다. 프레임워크와 라이브러리 차이점
라이브러리
- 쉽게 대체할 수 있음.
- 정해진 규칙이 없고, 내가 필요할 때 불러서 쓸 수 있음.
- 예시로 TailWind CSS가 있음. CSS 파일을 만들어서 직접 적용시킬 수 있지만, 편리하고 빠르게 CSS를 적용시키기 위해서 TailWind CSS 라이브러리를 사용한다.
프레임워크
- 내가 정해진 규칙틀에 따라 코드 구조를 작성하는 것. (자율성이 떨어짐)
- 정해진 규칙대로 파일 구조 및 폴더 이름을 구성했기 때문에, 작업 도중에 변경하기 매우매우매우 까다롭다.
- 예시로
DJango에서 사이트의 url을 바꾸고 싶다면url.py파일에 코드를 작성해야하는 것을 들 수 있다.
캐시의 장단점과 어떤 부분에 캐시가 활용되는가?
캐시란?
자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소.
저장 공간이 작고, 비용이 비싼 대신 빠른 성능을 제공한다.
CPU 내부에 캐시가 위치해있고 가장 최근 요청들을 저장해 놓고 또 요청이 있었을 때 캐시에 있는 데이터를 제공하는 방식으로 동작한다.
캐시를 사용하기 좋은 경우
- 접근 시간에 비해 원래 데이터에 접근하는 시간이 오래 걸리는 경우(서버의 균일한 API 데이터)
- 반복적으로 동일한 결과를 돌려주는 경우 (이미지나 썸네일 등등)
캐시 장점
- 접근 속도가 빠르다
하드웨어에서 성능이 좋은 이유로, 물리적인 위치가 가깝기 때문이다.
전기가 이동할 길이가 짧기 때문에 이동하는 시간이 덜 걸린다.
캐시 단점
- 저장공간의 사이즈가 작다. 가격도 비싸다.
프론트엔드에서 캐시가 활용되는 영역
- 웹 캐시(HTTP 캐시)
- 서버로 부터 요청받은 자원들을 저장한다. (웹 문서, 이미지 등)
- 브라우저 캐시(로컬, 세션 스토리지)
- 사용자 인허가와 관련 데이터는 세션스토리지.
- 무관할 경우 로컬 스토리지. 예시로 어떤 웹 사이트에서 사용자가 입력 중인 Form을 저장할 때 활용한다.
- 실제 메모리 캐시
- 직접 다룰 경우가 잘 없다.
React-Query를 사용하면, 실제 메모리에 캐싱 처리한다고 알고있다.
- 직접 다룰 경우가 잘 없다.
React
왜 사용하는가?
- 자바스크립트 라이브러리로써, User Interface를 손쉽게 만들 수 있게 해줌.
(웹, 모바일 앱을 손쉽게 만들수 있게 해준다.) - 심플한 정적 사이트부터 복잡한 규모까지 다룰 수 있다.
- React를 배워두면 React Native(App) 및 데스크탑 App인 React + Electron 개발에도 활용 가능하다.
- CSR
- Client Side Rendering- 사용자 측에서 렌더링하는 방식. 모든 코드를 다 다운받은 뒤, 사용자 화면에 UI가 그려지고, 렌더링된다.
컴포넌트 단위로 UI, Event에 반응하는 JS 라이브러리.
Components
- 독립적, 고립적인 요소
- 재사용 가능한 요소
요약
컴포넌트들의 집합체이다.
좋은 컴포넌트란 다른 컴포넌트들과 연결되지 않고 독립적이며, 재사용성이 높아야 한다.
컴포넌트를 나누는 기준
- 재사용성 (DRY, Don't Repeat Yourself)
재사용 가능한 로직이나 코드들은 컴포넌트로 재사용할 수 있어야 한다. - 단일책임 (SR, Single Responsibility)
하나의 UI애서 많은 일을 시키는 것이 아닌, 하나의 기능을 담당하도록 잘게잘게 기능을 세부적으로 쪼개어야 한다.
React 동작 원리
- Virtual DOM Tree와 Previous Tree를 비교한 후, 변경된 요소만 실제 HTML DOM Tree에 반영시킴으로써 UI를 효율적으로 화면에 띄워준다.
요약
데이터를 State(내부 상태) Props(외부로 부터 전달받은 상태)가 있음.
두 가지의 데이터를 나타내는 Render가 있음.
상태가 변경될때마다 Re-render된다.
실제로 변경된 부분만 화면에 업데이트 된다.
React Hook이란?
재사용 가능한 함수 로직.
Hooks은 (함수들은) 값의 재사용이 아니라, ⭐️로직의 재사용을 위한 것임.클래스 컴포넌트의 단점을 보완한 함수형 컴포넌트.
클래스 컴포넌트의 단점
- 어려움
- this 바인딩 이슈
- 로직들을 재사용하기 어려움
대표적인 React Hook
- useState : 상태관리 로직
- useEffect : 컴포넌트 생애주기 관리 로직
