라이프사이클 메서드 render: 필수적인 라이프사이클 메서드 constructor: 컴포넌트 생성자 메서드 getDerivedStateFromProps: 컴포넌트가 마운트/업데이트 될 때 사용 componentDidMount: 컴포넌트 만들고 렌더링 마친 후 실행, 비동기 작업 처리 shouldComponentUpdate: props나 state 변경 시, 리랜더링 여부 지정, Boolean 타입이며 기본적으로 ture를 반환 getSnapshotBeforeUpdate: 렌더링 결과가 반영되기 직전에 호출, 업데이트 직전 값 참고할 때 사용 componentDidUpdate: 리랜더링 후 실행, getSnapshotBeforeUpdate의 반환값을 Snapshot 파라미터로 사용가능 componentW..

라이프사이클(Life Cycle) 이란? : 소프트웨어 혹은 프로그램이 특정 단계/이벤트를 거쳐 동작하는 방식을 설명하는 개념. '생성, 초기화, 실행, 종료' 되는 과정 객체 지향 프로그래밍에서 중요한 개념으로 사용됨 라이프사이클의 주요 단계 생성(Initialization) : 컴포넌트 혹은 객체가 생성되고 초기화됨. 필요한 자원을 할당하고 초기 설정을 수행 마운팅(Mounting) : 컴포넌트가 DOM에 추가되거나 객체가 사용 가능한 상태가 됨. 컴포넌트나 객체가 화면에 나타남 업데이트(Updating) : 컴포넌트/객체가 업데이트 혹은 변경 됨. 사용자 상호 작용 혹은 데이터 변경으로 업데이트가 반영 됨. 언마운팅(UnMounting) : 컴포넌트/객체가 DOM에서 제거되거나 더 이상 사용되지 않..

CSR(Client Side Rendering) : 웹 애플리케이션을 구축하는데 사용되는 하나의 렌더링 방식으로 웹 페이지 컨탠츠를 클라이언트(사용자 웹 브라우저)에서 렌더링 함. 렌더링 위치: 클라이언트 측 웹 어플리케이션의 초기 로드 시 서버에서 HTML 스켈레톤을 제공하고, 그 이후에는 클라이언트에서 JS를 사용하여 동적으로 컨탠츠를 렌더링함. 초기 렌더링 속도를 높이고 사용자 경험을 향상시킴. SPA(Single Page Application) 초기 페이지 로드 후에 페이지 간 전환이 서버로부터 새로운 HTML을 받지 않고 클라이언트 측에서 이루어지는 방식. JS프레임워크나 라이브러리(React, Angular, Vue)를 사용하여 CSR 구현 가능 장점 초기 로딩 이후에 필요한 데이터만 요청하여..

쿠키/세션/웹스토리지 쿠키(Cookies) 세션(Session) 웹 스토리지(Web Storage) 저장소 클라이언트 웹 브라우저에 저장 세션 데이터는 서버 측에 저장 클라이언트에는 세션 ID만 저장 클라이언트 측에 데이터 저장 용량 4 KB 미만 데이터 저장 가능 서버 메모리에 저장됨 쿠키보다는 크지만 용량에 한계가 있음 5MB, 브라우저마다 다름 서버 클라이언트가 웹 서버에 요청을 보낼 때 마다 관련 쿠키가 함께 전송 서버에서 관리 클라이언트 요청 간에 데이터 유지 서버와 독립적으로 작동 서버 요청 시 데이터가 자동적으로 전송되지 않음 만료 만료 기간이 있어 해당 기간이 지나면 자동 삭제 브라우저가 종료되거나 세션 타임아웃 발생 시 세션 데이터 삭제 브라우저 종료해도 데이터 지속 보안 보안에 취약함 ..

동기/비동기 차이 : 여러 작업들이 있을 때에 해당 작업들을 순차적으로 처리하는지 동시에 처리하는지에 따라 동기/비동기가 구분된다. 동기|Synchronous 하나의 작업이 끝나야 그 다음 작업이 시작된다 단순하고 직관적인 코드, 디버깅하기 쉬움 CPU나 시스템 자원의 활용이 비효율적, 블로킹 작업으로 전체 app 성능에 영향 비동기|Asynchronous 여러 작업들이 동시에 병렬적으로 진행됨 대기 시간 최소화 및 시스템 자원을 효율적으로 활용가능 네트워크 호출, 파일 읽기/쓰기, 타이머 등의 작업처리에 사용됨 비동기프로그래밍 필요성 * 성능향상: 여러 작업을 동시에 처리하여 CPU 및 리소스 사용을 효율적으로 관리할 수 있음(네트워크 요청) * 반응성 향상 * 멀티테스킹 * 블로킹 방지 * 이벤트 처..

호이스팅 JS에서 변수, 함수 선언을 현재 스코프의 맨 위로 끌어올려 코드 실행 이전에 변수 및 함수 선언이 메모리에 할당되는 것처럼 동작하게 함 변수 호이스팅 var 변수 선언이 끌어올려지고, let/const 변수선언은 블록 스코프를 가지므로 호이스팅의 영향을 덜 받음 함수 호이스팅 함수 선언문은 끌어올려지나, 함수 표현식은 호이스팅되지 않음 Reference chat-gpt