ougi FE

오늘은 제가 얼마 전에 간단한 메모 어플리케이션을 만들며 편리하게 사용했던 json-server의 사용법에 대해 다뤄보겠습니다 정말 간단하고 유용해서 다들 사용해봤으면 좋겠습니다 그럼 먼저 json-server가 무엇인지 알아볼까요?🔧 json-server란?json-server는 json파일을 활용해사용하여 간단한 시뮬레이션을 위한 REST API Mock server를 구축할 수 있는 툴입니다서버가 개발되기 전이나 공부를 할 때 사용하기 좋습니다REST API Mock Server실제 서버를 대신하여 가상의 API 응답을 제공하는 도구입니다. 이를 통해 개발자는 실제 서버가 준비되기 전에 API를 테스트하거나 프론트엔드 작업을 진행할 수 있습니다. Mock Server는 미리 정의된 가짜 데이터를 ..

저는 요즘 프로젝트를 진행하면서 저장소(LocalStorage와 SessionStorage)를 제대로 활용하지 못하고 있다는 생각이 들었습니다. 그래서 조금 더 깊이 이해하고자 이렇게 글을 쓰게 되었습니다. 그리고 쿠키도 비슷한 기능을 가지고 있는 것으로 알고 있어 쿠키까지 조사하게 되었습니다.💾 LocalStorage란?데이터를 저장합니다도메인 별로 남아있습니다시간 제한이 없습니다 브라우저가 꺼져도 남아있습니다값을 지우려면 직접 삭제해야 합니다장점저장된 데이터가 서버로 저장되지 않아서 트래픽을 줄일 수 있습니다단점HTML5 미만의 브라우저에서는 지원을 하지 않습니다💾 SesstionStorage란?데이터를 저장합니다브라우저가 종료될 때까지 데이터가 존재합니다세션이 종료되면 없어집니다소멸 타이밍이 존..

저는 최근 이 단어를 자주 들었는데 뜻은 대충 알고 있었지만 장단점이나 차이점을 더 자세히 알고 싶어 이렇게 글을 쓰게 되었습니다📌SSR(Server Sider Rendering)이란? 서버쪽에서 렌더링을 하여 화면을 보여주는 방식을 말합니다 보통 MPA에서 SSR로 렌더링합니다서버로부터 완전하게 만들어진 HTML 파일을 받아와 화면을 그리기 때문에 첫 화면 로딩 속도가 빠릅니다전통적인 웹은 대부분 SSR이었다고 합니다장단점장점첫페이지 로딩속도가 빠릅니다검색엔진 최적화가 가능합니다단점서버가 과부하될 수 있습니다렌더링될 때마다 화면이 깜박입니다초기로딩 이후 페이지 이동 시 CSR보다 속도가 느립니다TTV(Time To View, 사용자가 화면을 보는 시점)와 TTI(Time To Interact, 사용자..

오늘은 제가 React를 공부하기 시작했을 때 처음 봤는데 아직까지 패키지 매니저에 대해 알지 못하고 사용하고 있어 이렇게 글을 쓰게 되었습니다  패키지매니저란?패키지매니저는 개발에 필요한 여러 패키지를 설치하고 또 수정하고 업데이트하는 등 작업을 편리하게 해주는 도구입니다그리고 패키지들을 의존성 있게 관리해줍니다쉽게 말하자면 프로젝트에 사용되는 패키지를 쉽게 관리하고 설치해주는 하나의 도구라고 할 수 있습니다  🏆 패키지 매니저 중 대표 3가지npm패키지매니저의 시초라고 하고 node.js에 내장이 되어 있기 때문에 추가적인 설치는 필요하지 않습니다그리고 모듈들을 직접 개발하지 않고 다른 사용자가 만들어놓은 다양한 모듈을 다운로드하여 이용할 수 있습니다그리고 가장 오랜 시간 많은 사용자들이 사용을 해..

저는 이번 주 선배님들과 스터디를 하다가 선배님들이 모두 번들링에 대해 한번씩 이야기 하시는 것을 들었습니다번들링이 무엇인지 물어보셨지만 저는 대답을 하지 못하여서 아쉬웠습니다 다음에는 더 당당하게 답 하기 위해 이렇게 관련된 내용들과 함께 글을 쓰게 되었습니다 ㅠㅠ🏗️ 빌드(Build)란?코드가 브라우저에서 실행될 수 있도록 변환되는 과정입니다 그렇다면 대체 왜? 빌드를 해야 할까요?바로 웹 사이트가 로드되는 속도를 빠르게 하고 웹사이트를 효율적이게 하기 위해 입니다!!그렇게 하기 위해서는 번들링(Bundling)이라는 작업을 필요시 합니다 그렇다면 이제 번들링에 대해 알아야 겠죠? 💐번들링(Bundling)이란?파일 크기를 줄이고 여러 파일들을 하나로 묶는 것입니다 번들링을 하면 네트워크 요청 수..