브라우저 렌더링 과정 브라우저 (browser) → 인터넷을 통해 웹 페이지에 접근하고, 그래픽, 텍스트, 멀티미디어 등을 표시하는 소프트웨어 웹 페이지를 해석하고 화면에 표시하는 역할 다양한 운영체제 및 플랫폼 지원 사용자 경험 형성 및 쉬운 웹 탐색 도움 ex) Chrome, Firefox, Torch, Safari, Internet Explorer, MS Edge 렌더링 과정 1. HTML 파싱 웹 페이지의 HTML 문서를 파싱하여 DOM 트리를 생성. 이 과정에서 HTML 태그, 요소, 속성을 인식하고 계층 구조로 구성 2. CSS 파싱 CSS 파일 및 스타일 정보를 파싱하여 CSSOM 생성. CSSOM은 각 HTML 요소에 대한 스타일 정보를 제공 3. 렌더링 트리 구축 DOM 트리와 CSSOM을 결합하여 렌더링 트리를 생성. 렌더링 트리는 화면에 실제로 렌더링될 요소만을 포함하며, 레이아웃과 스타일 정보를 고려 render tree 4. 레이…

CSR vs SSR Client-Side Rendering (CSR) → 웹 애플리케이션의 초기 페이지 로딩 후, 웹 브라우저에서 JavaScript가 실행되고, JavaScript 코드를 통해 동적으로 콘텐츠를 가져와서 화면에 렌더링하는 방식 서버에서 초기 페이지 로딩 → 클라이언트에서 JS 실행 → 동적 데이터 요청 → 데이터 처리 및 렌더링 Sever-Side Rendering (SSR) → 서버 측에서 초기 페이지 렌더링을 수행하고 완전한 HTML 페이지를 클라이언트로 제공하는 방식 서버에서 초기 페이지 렌더링 → HTML 페이지 전송 → 클라이언트에서 초기 페이지 로딩 → 동적 데이터 요청 → 클라이언트 측 렌더링 CSR 🆚 SSR CSR SSR 장점 - 빠른 초기 페이지 로딩 - 부드럽고 빠른 페이지 간 전환 - 서버 부하 감소 - SEO 용이성 - 초기 로딩 후 완전한 페이지 (UX향상) 단점 - SEO 취약 - 초기 페이지 로딩 이후 백엔드 …

Recoil 업데이트와 구독이 가능하다. atom이 업데이트 되면, 해당 atom을 구독하고 있던 모든 컴포넌트들의 state가 새로운 값으로 리렌더링 된다.동일한 atom을 여러 컴포넌트에서 구독할 수 있다.atom은 라고 하는 고유한 id로 구분된다. 동일한 atom을 여러 컴포넌트에서 구독할 수 있다. 동일한 atom을 여러 컴포넌트에서 구독하고 있다면 해당 컴포넌트들은 같은 state를 공유하고 있는 것이며, 상태가 업데이트 되면 해당 atom을 구독 중인 모든 컴포넌트들이 리렌더링된다. hooks  : atom을 읽고 쓰려고 할 때  : atom을 읽기만 할 때  : atom에 쓰려고만 할 때  : atom을 초깃값으로 초기화할 때 Redux 🆚 Recoil 상태 저장 상태 변경 장점 단점 사용 Redux 중앙 스토어 액션을 통해 디스패치 중앙 집중화된 상태 관리로 상태 예측 가능, 높은 미들웨어 활용성, 신뢰성 있는 라이브러리, 디버깅 용이성…

Redux : 애플리케이션의 상태를 보유하고 관리하는 하나의 공간 : 애플리케이션에서 스토어에 운반할 데이터(객체 형태) : 현재 상태와 액션을 받아서 새로운 상태를 반환하는 순수 함수 → 자바스트립트 상태 관리 라이브러리 Single source of truth : 전체 상태는 하나의 중앙 저장소(단일 소스)에 저장된다. State is read-only : 액션이라는 객체를 통해서만 상태를 변경할 수 있다. (불변성 유지) Changes are made with pure functions : 변경은 순수함수로만 가능하다. 사용 전역 상태가 필요할 때 상태가 자주 업데이트 될 때 상태를 업데이트하는 로직이 복잡할 때 애플리케이션이 클 때 상태가 업데이트되는 시점을 관찰해야 할 때 장점 중앙 집중화된 상태 관리 불변성 시간 여행 디버깅 컴포넌트 간 데이터 공유 테스트 용이성 단점 복잡성 (작은 규모에 부적합) 설정 및 사용 코드 필요 오버헤드

메모이제이션 (Memoization) → 연산의 계산 결과를 메모리에 저장해두고, 동일한 계산이 필요할 때 이전에 저장한 값을 재사용하는 기법 useMemo 컴포넌트 내부에서 계산된 값 메모이제이션 이전 계산 값 재사용 계산 비용이 높은 연산 결과 캐싱하는 데 유용 useCallback 함수를 메모이제이션 불필요한 렌더링 방지 이벤트 핸들러 함수나 콜백 함수 메모이제이션 할 때 사용 React.memo 컴포넌트 자체를 메모이제이션 이전 렌더링 결과 재사용 컴포넌트 중복 렌더링 방지 필요성 복잡한 연산 수행 시 결과를 재사용함으로써 불필요한 자원 소모 줄임 동일한 계산 반복 수행 방지로 코드 실행 속도 향상 동일한 입력값에 대해 동일한 결과 반환으로 일관성 제공 중복 렌더링 방지 ⇒ 성능 향상 references 👉 https://velog.io/@hsk10271/TIL-30

Key Props → Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움 리액트 요소를 고유하게 식별하는 데 사용 key 값은 문자열 또는 숫자 동일한 리스트나 배열 내에서 고유해야 함 사용법 ⇒ key 값을 부여하지 않으면 error 발생 필요성 성능 최적화 : 변경된 부분만 업데이트하고 불필요한 렌더링 방지 유일성 보장 : key는 각 항목을 고유하게 식별 → key를 제대로 사용하지 않으면 예기치 않은 버그 또는 성능 문제 초래 references 👉 https://velog.io/@jenny87879/React-key-props

React Hooks Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. → 은 함수형 컴포넌트에서 사용하던 기능을 사용할 수 있게 해주는 함수 사용 배경 클래스형 컴포넌트는 문법이 어렵고, 코드의 재사용성이 낮으며 축소가 어려움 이러한 클래스형 컴포넌트의 단점을 보완하기 위해  등장 함수형 컴포넌트에서는 클래스형 컴포넌트의 장점인 State나 Life Cycle Method을 다루는 기능 사용 불가능 → 이를 해결하기 위해  등장 사용 규칙 Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다. 최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요. React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 …

클래스형 & 함수형 컴포넌트 클래스형 컴포넌트 (class component) class 키워드 필요 Component로 상속 필요 render() 메소드 필수 함수형 컴포넌트 (function component) state, lifeCycle 관련 기능 사용 불가능 → Hook 사용 Lifecycle mount : 컴포넌트가 생성될 때 클래스형 함수형 update : 컴포넌트가 업데이트 될 때 클래스형 함수형 unmount : 컴포넌트가 사라질 때 클래스형 함수형

라이프사이클 (Lifecycle) 컴포넌트 생명 주기 (Component Lifecycle) : 생성(mounting) → 업데이트(updating) → 제거(unmounting) mount : 컴포넌트가 생성될 때 update : 컴포넌트가 업데이트 될 때 가 바뀔 때 가 바뀔 때 부모 컴포넌트가 될 때 로 강제로 렌더링 트리거할 때 unmount : 컴포넌트가 사라질 때

라이프사이클 메서드 (Lifecycle Method) render 클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드 메서드가 호출되면 와 의 값을 활용하여 아래의 것 중 하나를 반환 React 엘리먼트 배열과 Fragment Portal 문자열과 숫자 Booleans / null / undefined 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과 반환 mount constructor 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를 구현하지 않아도 됨 에 객체를 할당하여 지역 state를 초기화 인스턴트에 이벤트 처리 메서드를 바인딩 componentDidMount 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출 초기화 작업, 네트워크 요청하기 적절 update componentDidUpdate 갱신이 일어난 직후에 호출 이전과 현재의 props를 비교하여 네트워크 요청할 때 …

클로저 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. Lexical Scope 변수나 함수의 유효 범위를 결정하는 규칙 해당 변수나 함수가 코드에서 어디에 선언되었는지에 따라 스코프가 정적으로 결정 프로그램을 작성할 때 코드 구조에 따라 스코프 설정 이를 통해 변수와 함수가 어디서 유효한지 예측 가능 Closure → 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때도 그 스코프에 접근할 수 있게 하는 기능 사용 이유 Private 변수/함수 : 변수와 함수를 외부에서 접근할 수 없도록 보호 가능 → 정보 은닉(Encapsulation) 구현 가능 지속성 : 함수가 선언될 때의 환경 기억 → 변수 값의 지속성을 유지하고, 다음 호출에서 사용 가능 콜백 함수 및 비동기 프로그래밍 : 콜백 함수로 전달되는 상태 정보 유지 및 비동기 작업에서 중요한 역할 모듈 패턴 : 모듈화된 코드를 작성 가능 → 코드의 구조화 및 재사용성 상승 메모리 관리 : …

동기 & 비동기  : 순서대로 일을 처리하는 방식  : 순서대로 일을 처리 하지 않고 빨리 처리할 수 있는 것들을 먼저 처리하는 방식 동기(Synchronous) 직렬적으로 작업 수행 요청을 보냈다면, 응답을 받아야 다음 동작 수행 가능 순차적으로 실행 어떤 작업이 수행중이라면 뒤의 작업은 대기 블로킹(작업 중단) 발생 비동기(Asynchronous) 병렬적으로 작업 수행 현재 작업의 종료여부와 무관하게 다음 작업 실행 완료 순서가 보장되지 않음 블로킹 발생하지 않음 비동기 방식이 필요 이유 → 자바스크립트는 동기 방식의 언어이지만, 비동기 방식이 필요하다. 예를 들어, 로딩되는 데 30초 이상이 걸린다고 할 때 웹 페이지는 이 동작이 끝날 때까지 화면에 나타나지 않거나 다음 동작을 수행하는데 지장을 주게 된다. 따라서 이런 상황을 방지하기 위해 비동기 방식이 필요하다. 응답성 향상 블로킹 발생 방지 더 나은 UX 제공 리소스 사용 최적화 비동기 방식 사용 Ca…

호이스팅 JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 로 선언한 변수의 경우 호이스팅 시 로 변수를 초기화합니다. 반면 과 로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. → 코드가 실행되기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상 코드 실행 전에 변수 및 함수 선언이 메모리에 할당되어 해당 스코프 내에서 사용될 수 있도록 실제 할당은 선언 위치에 따라 결정 발생 이유 → 자바스크립트 변수 생성과 초기화(선언과 할당)가 분리되어 진행되기 때문 생성 단계: 변수와 함수 선언을 위한 메모리 공간 할당 실행 단계: 코드 순서대로 실행 할당 및 실제 변수 값 결정 변수 호이스팅 → 함수 스코프 : 함수 내에서 선언된 경우 함수 내에서만 유효한 범위를 가짐 ⇒ 해당 스코프 내에서 변수와 함수를 어디서든 사용 가능 → 변수가 호이스팅되어 선…

이벤트 위임 이벤트 위임(Event delegation) 하나의 좋은 예시는 일련의 리스트 아이템들입니다 — 만약 각각이 선택되었을 때 메시지를 띄우기(pop up)를 원한다면, 여러분은  이벤트 리스너를 부모 에 설정할 수 있고, 이벤트들은 리스트 아이템들에서 까지 올라갈 것입니다. → 이벤트 버블링/캡처링을 이용한 것으로, 여러 하위 요소마다 각각 이벤트 핸들러를 할당하지 않고, 공통되는 상위 요소에 이벤트 핸들러를 할당하여 이벤트를 관리하는 방식 여러 개의 이벤트 리스너를 최소화하여 효율적 코드 간결, 유지보수 용이 더 적은 이벤트 리스너 → 메모리 사용 최적화 DOM 계층의 다양한 수준에서 이벤트 처리 가능 이벤트 위임 X → 반복문을 통해 각 li 요소마다 이벤트 리스너 추가 이벤트 위임 O → 모든 li 요소의 공통 상위 요소인 ul에 이벤트 리스너 추가 ⇒ li 요소 클릭 시 ul 요소로 이벤트 버블링 references 👉 https://c4u…

버블링 & 캡처링 이벤트 전파 계층적 구조 → 연쇄적 이벤트 흐름 발생 ⇒ 이벤트 전파(Event Propagation) : 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정 버블링(Bubbling) : 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파 (기본값) 캡쳐링(Capturing) : 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달 버블링 → 한 요소에 이벤트가 발생되면, 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파 a 요소 클릭했을 때 stopPropagation 전파를 멈추는 메서드 a 요소 클릭했을 때 캡처링 → 한 요소에 이벤트가 발생되면, 그 요소의 자손 요소의 이벤트도 같이 발생되는 이벤트 전파 a 요소 클릭했을 때 → capture를 true로 설정한 parent 요소의 이벤트가 먼저 동작 a 요소 클릭했을 때 → 바깥쪽에서…

var let const var  문은 변수를 선언하고, 선택적으로 초기화할 수 있습니다. 변수 선언하는 예약어 같은 변수명 재선언 가능 예약어 변수명으로 사용 가능 함수 레벨 스코프 최근 거의 사용 X let  명령문은 블록 스코프의 범위를 가지는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있습니다. 변수 선언하는 예약어 같은 변수명 재선언 불가능 예약어 변수명으로 사용 불가능 블록 레벨 스코프 const  선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 상수 선언하는 예약어 초기화 필수 재선언 불가능 재할당 불가능 참조 값 내부 값 바꾸는 건 가능 블록 레벨 스코프

async & await 객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 를 사용하여 결과를 반환합니다. → Promise의 단점을 보완해주는 비동기 처리 방식 async 함수 선언 시 함수 앞에 promise 객체 반환 awiat promise 객체 앞에 promise가 완료될 때까지 대기 async 함수 내부에서만 사용 가능 사용 await 키워드를 붙인 비동기 작업이 완료될 때까지 대기했다가 다음 작업을 수행한다. Promise VS async/await Promise → promise 체이닝으로 인한 의 가능성 (가독성 저하) → 문을 통해 에러 핸들링 async/await → 중첩 없이 간결하게 표현 가능 → 문을 통해 에러 핸들링 (에러 발생 위치 알기 쉬움) → 비동기 작업 흐름을 명확하게 보여줌 try-catch 블록 실행 블록 내에서 예…

Promise → 콜백 함수의 단점(콜백지옥)을 보완하기 위해 ES6에 도입된 비동기 처리에 사용되는 객체  객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. 상태 대기(pending) 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled) 연산이 성공적으로 완료 → 결과값 반환 거부(rejected) 연산이 실패 → 에러 반환 메서드 promise.then() resolve / reject 상태일 때 호출 매개변수: resolved일 때 실행할 함수, rejected일 때 실행할 함수 promise.catch() rejected 상태이거나 에러가 발생했을 때 실행(에러 핸들링) 매개변수: 에러가 발생했을 때 실행할 함수 promise.finally() Promise의 resolve / reject 결과와 상관 없이 지정된 함수 실행 Callback VS Promise Callback → 콜백이 중첩되면서 콜백 지옥 발생 가능…

Callback Function 콜백 함수 콜백함수: 파라미터로 함수를 전달하는 함수 → 파라미터로 함수를 전달 받아 함수의 내부에서 실행하는 함수이다. 콜백함수를 사용하는 대표적인 이유는, 동기와 비동기를 함께 썼을 때 순서를 보장할 수 있기 때문이다. 콜백을 중첩해서 원하는 순서대로 실행하도록 코드를 짤 수도 있다. 콜백이 대표적으로 쓰이는 곳은 데이터 통신이다. 사용 원칙 익명 함수 사용 함수의 이름이 없는 익명 함수를 사용한다. 함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다. 함수 이름 전달 자바스크립트는 함수 자체를 객체로서 전달이 가능한 특징이 있기에, 정의해둔 함수를 ()를 붙이지 않고 함수 이름만 호출 함수의 인자로 전달하는 방식으로 사용한다. 콜백 지옥 콜백지옥: 콜백 함수가 중첩되어 가독성이 떨어지는 형태 비동기 호출이 자주 일어나는 경우 콜백 지옥이 발생하기 쉽다. 콜백지옥이 있다면 가독성이 좋지 않고 유지보수 및 수정이 어려워진다. 이를…

Semantic Markup 정의 시맨틱이란 “의미론적인”이란 뜻을 가지며 마크업이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 이란 의미를 잘 전달하도록 HTML 문서를 작성하는 것을 말한다. 작성 방법 → 태그를 용도에 맞게 사용하여 작성한다. 헤더/푸터에  와  사용 메인 컨텐츠에  과  사용 독립적인 컨텐츠에  사용 최상위 제목으로  사용 순서가 없는 목록으로  과  사용 내비게이션에  사용 주요 콘텐츠 이외의 참고가 될 수 컨텐츠에 사용 사용 이유 웹 접근성 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미있는 마크업을 통해 그 의미를 더 잘 파악할 수 있다. 코드 가독성 의미 없는 div를 전부 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 쉽고, 유지 보수가 용이하다. 검색엔진 최적화 (SEO) 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기에 검색엔진 최적화에 유리하다.

display 태그는 컨텐츠 크기와 상관 없이 한 줄을 차지하는 태그인  요소와 컨텐츠 크기만큼 차지하는 태그인  요소가 있다. 너비와 높이를 지정해주는 width, height 속성은 block 요소만 사용 가능하다. inline 요소는 적용해도 변화가 없다. 이런 특성을 변경해주는 속성이 이다. 정의 block 컨텐츠 크기와 상관 없이 한 줄을 차지. 너비와 높이를 지정할 수 있다. p, div, ul, li, h1-h6 inline 컨텐츠 크기만큼 차지. width, height 속성을 적용해도 변화가 없다. span, a, img, button display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다. 속성 외부 속성  : 요소를 사라지게 한다.  : block 요소를 inline 요소처럼 사용한다.  : inline 요소를 block 요소처럼 사용한다.  :…

position 정의 CSS  속성은 문서 상에 요소를 배치하는 방법을 지정한다. 속성 값 static 기본 값. 요소를 일반적인 문서 흐름에 따라 배치하며, top, right, bottom, left, z-index 속성이 아무런 영향을 주지 않는다. relative 요소를 일반적인 문서 흐름에 따라 배치하며, top, right, bottom, left 값에 따라 offset을 적용한다. offset은 다른 요소에는 영향을 주지 않아 레이아웃에서 요소가 차지하는 공간은 static과 같다. z-index 값이 auto가 아니라면 새로운 쌓임 맥락을 생성한다. absolute 요소를 일반적인 문서 흐름에서 제거하고, 레이아웃에 공간도 배정하지 않는다. 가장 가까운 static이 아닌 다른 포지션 값을 가진 부모를 기준으로 상대적으로 배치한다. 상위 요소 중 static이 없을 시 초기 컨테이닝 블록을 기준으로 삼는다. 최종 위치는 top, right, bottom, l…

SCSS 정의 란 CSS pre-processor(전처리기)로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다. 사용 중괄호와 세미콜론을 모두 사용한다. 특징 변수(Variable) 할당 자주 사용하는 속상 값을 변수로 지정하여 재사용할 수 있다. 중첩(Nesting) 구문 중첩 구문을 사용해 가독성을 높일 수 있다. 모듈화(Modularity) 를 사용하여 파일을 모듈화 할 수 있다. 믹스인(Mixins) 함수처럼 default parameter를 지정할 수 있고, parameter를 받아 속성을 부여할 수 있다. 확장 / 상속 (Extend / Inheritance) 를 사용하여 scss 속성 집합을 상속 받을 수 있다. 연산자(Operators) div, random, max, min, sin, cos 등 여러 가지 수학적 기능을 사용할 수 있다. 장점 선택자를 중첩하여 반복되는 부모 요소 사용 감소 …