이 기술 블로그를 만들기 위해 5년을 미뤘다.

웹 페이지는 브라우저에서 서버에 http 요청을 보내 데이터를 받아와서 화면에 보여줍니다. 이를 http 통신이라고 부르죠. 즉, 브라우저에서 화면을 보여주기 위해서는 서버와의 통신이 꼭 필요합니다. 물론 화면을 보여주는 것 외에도 로그인 등 특정 버튼을 클릭했을 때 어떠한 동작이 일어나도록 요청하는 경우도 포함됩니다. 기본적으로 아래와 같은 기능들은 일반적인 http 요청으로 구현이 가능합니다. 회원 로그인 상품 목록 보여주기 장바구니 담기 왜냐하면 단순히 서버로 요청을 보내고, 필요한 경우 데이터를 전달받아 화면에 뿌려주기만 하면 되기 때문이에요. 클라이언트에서 요청을 보내면, 서버는 요청에 대한 데이터와 함께 응답을 보냅니다. 클라이언트는 해당 응답의 데이터로 사용자에게 보여줄 화면을 렌더링하거나 ..

캐시란 데이터에 빠르게 접근하기 위해 자주 사용되는 데이터나 값을 미리 복사해 놓는 임시 장소를 의미한다. 캐시를 적용하기 좋은 데이터는 다음과 같다. - 자주 참조되는 데이터 - 자주 변경되지 않는 데이터 - 동일한 입력에 대해 동일한 출력을 보장하는 데이터 프론트엔드에서는 서버에 요청을 보내고 응답을 받아 화면을 렌더링하는 경우가 많다. 네트워크를 통해 서버에 데이터를 요청하게 되면, 해당 서버가 응답을 반환할 때까지 페이지가 로드되지 않는다. 페이지 로딩에 필요한 css, js, html, 이미지 등의 정적 리소스를 캐싱하여 사용하게 되면, 요청을 보내는 네트워크 요청 횟수를 줄일 수 있을 뿐만 아니라 서버 응답을 기다려야 할 필요도 없기 때문에 사용자에게 보다 빠르게 화면을 보여줄 수 있다. 이러..

SSR(Server-side Rendering) SSR은 서버에서 페이지를 렌더링하는 방식으로, Next.js와 PHP, ASP 등이 이에 속한다. SSR의 동작 방식은 다음과 같다. 1. 클라이언트가 특정 페이지를 요청한다. 2. 서버에서는 해당 페이지에 필요한 데이터를 포함한 HTML 파일을 클라이언트에 전달한다. 3. 클라이언트에서는 해당 HTML 파일을 파싱하면서 필요한 정적 리소스(CSS, 이미지 등)와 자바스크립트 파일을 다운로드하며, 페이지를 렌더링한다. 이 때 사용자는 렌더링된 페이지를 볼 수는 있지만 아직 클릭 등의 인터렉션은 할 수 없다. 4. 클라이언트에서 다운로드한 자바스크립트 파일을 실행한다. 5. 페이지 인터렉션이 가능해진다. SSR의 특징은 다음과 같다. 1. 최초 페이지 로딩..

오늘은 프론트엔드 개발에서 많이 사용되는 디바운싱과 쓰로틀링 개념에 대해 araboza. 디바운싱과 쓰로틀링은 성능을 목적으로 자바스크립트의 이벤트를 제어하기 위해 사용되는 기법이다. 디바운싱(debouncing) 디바운싱은 스위치 회로에서 채터링(바운싱) 현상을 해결하기 위해 사용되는 개념이다. 기본 상태가 LOW, 스위치를 눌렀을 때의 상태가 HIGH인 스위치가 있다고 하자. 스위치를 한 번만 눌렀다 떼는 경우에도 눌림 상태일 때의 지속 시간이나 외부 진동, 충격에 의해 스위치가 여러 번 눌린 것처럼 동작하게 되는데, 이러한 현상을 바운싱이라고 한다. 바운스 구간의 값을 무시하기 위해 처음 HIGH 값으로 상태가 바뀌었을 때부터 특정 시간 동안은 판단을 지연했다가 해당 시간 이후에도 HIGH 상태라면..

개발을 하다 보면 헷갈리는 동기와 비동기, 블로킹과 논 블로킹의 개념을 정리해 보자. 한 줄 요약을 하자면 블로킹/논 블로킹은 제어권, 동기/비동기는 요쳥/완료 시간을 기준으로 개념을 이해하면 된다. 먼저 블로킹과 논 블로킹의 개념을 이해해 보자. 블로킹(blocking) 자신의 작업을 진행하다가 다른 작업이 시작되면 다른 작업이 끝날 때까지 기다림 호출된 다른 작업에게 제어권을 다른 작업에게 넘겨주고 해당 작업이 종료되면 제어권을 반환받아 작업 재개 논 블로킹(Non-blocking) 호출된 다른 작업에게 제어권을 넘겨주지 않으므로 다른 작업과는 관련 없이 자신의 작업을 진행 호출한 다른 작업에서 바로 리턴 블로킹과 논 블로킹은 제어권을 어느 작업이 갖고 있는 지에 따라 다르다. A 함수에서 B 함수를..

개발을 하다 보면 API 요청을 보낼 때 CORS 에러와 마주칠 수 있다. 처음엔 CORS가 뭐지? 에러 이름이구나! 하고 가볍게 넘겨짚기만 하고 따로 깊게 찾아보지는 않았었다. 하지만 이런 공부 부채들이 쌓이면 쌓일 수록 난 개발자가 아닌 무지성으로 코딩만 하는 기계가 될 뿐이라는 것을 알게 되고... 뒤늦게 쌓아놨던 CORS에 대해 공부를 하면서 알게 된 내용을 정리해 보려고 한다. 먼저, CORS에 대해 알아보기 전에 SOP에 대해 알아보자. SOP(=Same-Origin Policy, 동일 출처 정책)란? 같은 origin 내에서만 데이터 통신이 가능한 브라우저의 정책 CSRF(=Cross-Site Request Forgery) 공격을 막기 위한 방법 중 하나 CSRF이란, 허용되지 않은 orig..

HTTP(HyperText Transfer Protocol)이란? 웹(WWW) 상에서 하이퍼 텍스트를 주고받기 위한 프로토콜을 말한다. 프로토콜이란 데이터 전송을 위한 규칙을 말하며, HTML 뿐만 아니라 이미지, 동영상, 음성 등의 파일도 전송이 가능하다. HTTP의 특징으로는 다음과 같다. 무상태성(stateless) HTTP는 요청에 대한 상태를 가지지 않음 각각의 요청은 독립적이므로 이전 요청과 다음 요청은 서로 영향을 주고받지 않음 상태(로그인 상태 등)를 전송하기 위해 세션, 쿠키 사용 비연결성(Connectionless) 요청을 주고받을 때만 연결을 유지하고 요청이 끝나면 연결을 끊음 연결 유지에 대한 자원을 아낄 수 있음 서버-클라이언트 구조 일반적으로 클라이언트는 웹 브라우저를 의미, 서..