Gapus Dev Blog

SSR(Server-Side Rendering) SSR는 웹 애플리케이션의 초기 로딩 시 서버에서 필요한 HTML, CSS, JS 파일을 생성하여 클라이언트로 전달하고, 이를 받아와 화면을 구성하는 방식 동작 방식 초기 요청 사용자가 웹 페이지에 접속하면, 클라이언트는 서버에 초기 페이지 로딩을 요청 서버에서 렌더링 서버는 클라이언트에게 필요한 HTML, CSS, JS 파일 등을 생성하여 응답 서버는 필요한 데이터를 가져와 페이지를 완전히 구성 후, HTML 형태로 클라이언트에 전달 클라이언트 렌더링 클라이언트는 서버로부터 받은 HTML 파일을 받아와 화면을 구성 JS파일은 주로 상화작용적인 요소나 동적인 데이터 처리를 담당 장점 초기 로딩 속도 서버에서 필요한 콘텐츠를 렌더링하여 클라이언트에게 전달하기..

CSR(Client-Side Rendering) CSR는 웹 애플리케이션의 초기 로딩 시 클라이언트로 모든 필요한 파일(HTML, CSS, JavaScript 등)을 전달하여 클라이언트에서 렌더링을 처리하는 방식 동작 방식 초기 요청 사용자가 웹 페이지에 접속하면, 서버는 클라이언트에게 필요한 파일을 제공 HTML파일에는 렌더링에 필요한 기본적인 구조와 비어있는 콘텐츠가 포함 파일 다운로드 클라이언트는 서버로부터 HTML, CSS, JS 파일 등을 다운로드 JS 파일은 주로 애플리케이션의 로직과 동적인 데이터 처리를 담당 렌더링 클라이언트는 JS를 사용하여 다운로드한 파일을 해석 DOM(Document Object Model)을 구성하여 화면을 렌더링 데이터 요청이 필요한 경우, AJAX나 API를 통해..

비동기 처리 특정 작업이 완료되기를 기다리지 않고 다음 작업을 수행하는 것 여러 작업을 동시에 처리하거나 시간이 오래 걸리는 작업을 효율적으로 가능 비동기 처리 구현 방식 콜백(callback) 함수 비동기 작업이 완료됬을때 호출되는 함수로, 작업이 완료되면 함수가 실행 비동기 작업의 결과를 처리 가능 콜백 함수를 중첩해서 사용하면 코드의 가독성과 유지 보수성이 떨어질 수 있다. 예시 function fetchData(callback) { setTimeout(function() { const data = "비동기 데이터"; callback(data); }, 2000); } function processData(data) { console.log("데이터 처리: " + data); } fetchData(p..

실행 컨텍스트 코드가 실행되는 환경 변수, 함수 선언 등의 정보를 담고있는 레코드 레코드는 실행 컨텍스트 스택에 쌓이며, 현재 실행중인 컨텍스트가 무엇인지 추적한다. 코드가 실행될 때 단계적으로 생성되며, 실행 컨텍스트 스택에 쌓이고 제거된다. 스택의 가장 상단에 있는 실행 컨텍스트가 현재 실행 중인 컨텍스트이다. 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되어 스택에 추가되며, 함수 실행이 완료되면 해당 컨텍스트가 스택에서 제거된다. 구성 요소 변수 객체 해당 컨텍스트에서 선언된 변수와 함수 선언이 저장되는 공간 이 객체는 실행 컨텍스트가 생성될 때 생성되며, 변수와 함수 선언은 초기화되지만 할당은 이후에 이뤄진다. 스코프 체인 변수 객체의 리스트로, 현재 컨텍스트의 변수 및 함수를 참조할 수 있..

쿠키 쿠키는 작은 텍스트 파일로서 웹 사이트에서 사용자의 컴퓨터에 저장 주로 사용자의 로그인 정보나 웹 사이트의 선호 설정과 같은 개인화된 데이터를 저장하는 데 사용 쿠키는 만료 기간이 설정되어 있으며, 만료일까지 유지 서버에 요청할 때마다 쿠키는 자동으로 서버로 전송되며, 웹 사이트의 기능을 지원하기 위해 사용 로컬 스토리지 로컬 스토리지는 HTML5에서 도입된 저장소 로컬 스토리지는 웹 브라우저에 데이터를 영구적으로 저장 주로 사용자의 작업 상태, 설정, 캐시 데이터 등을 저장하는 데 사용 로컬 스토리지에 저장된 데이터는 수동으로 삭제하지 않는 이상 계속해서 유지 세션 스토리지 세션 스토리지는 로컬 스토리지와 비슷하지만, 데이터의 수명이 세션에 한정 세션은 웹 브라우저가 열려 있는 동안 유지되는 사용..

클로저란? 함수와 함수가 선언된 렉시컬 환경의 조합으로 함수가 선언될 당시의 스코프 체인을 기억하고, 함수가 호출될 때에도 그 스코프 체인을 참조하여 변수에 접근할 수 있게 해준다. 동작 원리 함수가 선언될 때, 해당 함수의 렉시컬 환경이 생성된다. 이 렉시컬 환경에는 함수 내부에서 선언된 변수들과 그 값을 담고 있는 스코프 체인이 포함된다. 클로저는 외부 함수의 변수에 접근할 수 있다. 이는 내부 함수가 외부 함수의 변수를 계속해서 참조할 수 있게 해준다. 함수가 반환되거나 다른 함수에 전달될 때, 클로저가 형성된다. 예시 function outerFunction() { var outerVariable = 'Outer'; return function innerFunction() { console.log..