해당 글에서는 Front-end에서 용어들에 대해서 정확하게 알고 개념을 이해하기 위한 목적으로 작성한 글입니다. 1️⃣ 저장소 1. 쿠키(Cookie) 💡 웹 브라우저 상에 작은 ‘텍스트 파일’로 저장이 되는 만료 기간이 존재하는 저장소를 의미합니다. [사용 예시] 로그인 화면에서 ‘아이디 자동완성’ 기능에 사용 팝업 화면에서 ‘오늘 하루 보지 않기' 기능에 사용 미 로그인 상태에서 ‘장바구니 담기’ 기능에 사용 2. 로컬 스토리지(Local Storage) 💡 만료기간이 존재하지 않고 페이지를 변경하거나 브라우저를 닫아도 반영구적으로 유지되는 저장소를 의미합니다. 사용 예시 로그인 화면에서 ‘자동 로그인' 기능에 사용 3. 세션 스토리지(Session Storage) 💡 브라우저의 탭 안에서만 유효한..

해당 글은 렌더링에 대해 이해하고, 클라이언트, 서버 사이드 렌더링에 대해서 이해를 돕기 위한 글입니다. 1) 렌더링이란? 💡 HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다. 2) 클라이언트 사이드 렌더링(CRS: Client Side Rendering) 💡 서버에서 전체 페이지(빈 페이지)를 최초 렌더링하고 사용자가 요청할 때마다 클라이언트 내(브라우저)에서 렌더링 하는 것을 의미합니다. 💡 CSR의 동작 과정 - 초기 화면 수행 사용자가 홈페이지를 접속한 경우(최초 접속) 클라이언트는 이를 확인하고 서버로 요청합니다. 서버는 빈 페이지(HTML, CSS)를 클라이언트에게 전달합니다. (해당 페이지에는 JS 링크가 포함되어 있습니다.) 전달받은 클라이언..

해당 글에서는 React를 사용한다면 요즘 필수적으로 사용이 되는 React 웹 프레임워크인 next.js에 대해서 이해하고 왜 사용해야 하는지에 대해 공유합니다. 1) 웹 프레임워크의 동향 💡 웹 프론트엔드 개발에서 높은 점유율을 가지고 있는 ‘React’는 CSR(Client Side Rendering) 방식으로 동작을 합니다. 이에 동작 방법에 대해서 여러 가지 단점을 많이 가지고 있습니다. 그렇기에 CRS 방식과 SSR 방식의 각각의 장점을 유지하는 Next.js에 대해서 이해를 돕기 위한 글입니다. (* SSR , CSR 방식에 대한 설명은 하단에 준비되었습니다) 💡 2021년 / 2022년 Stack Overflow에서 조사한 웹 프레임워크 선호도 조사입니다. - 2021년에 React.js는..