전체 아티클73 웹앱을 위한 PWA 구현하기 - 1 목차 · PWA의 이점 · 웹앱 매니페스트(Manifest)란? · 웹앱 매니페스트(Manifest)의 설정 · 서비스 워커(Service Worker)란? · 레퍼런스 PWA의 이점 빠른 페이지 로딩 속도 Service Worker의 Cache API를 사용하여 데이터를 캐싱시킬 수 있다. 이를 통해 두 번째 방문부터 캐싱된 데이터를 통해 즉각적인 페이지 로딩을 시킬 수 있다. 이는 정적 데이터와 동적 데이터에 대한 캐싱 정책을 어떻게 정하느냐에 따라 페이지 로딩 결과가 달라지게 된다. 오프라인 지원 (네트워크에 독립적) Service Worker에 캐싱된 데이터를 가져오게 되면 네트워크가 오프라인 상태라도 서비스를 사용할 수 있게 된다. 따라서 PWA로 웹 앱을 구성하게 되면 오프라인 상태라도 브라우.. 2023. 11. 14. Recoil에 한번 빠져보려고 하는데, Redux를 첨가한.. 목차 · 상태 관리 라이브러리 포스팅을 들어가며 · Redux에 대해서 알아보자 · Redux는 세가지 원칙을 가지고 있다. · Redux는 왜 이런 공식을 통해 상태 관리를 진행할까? · Redux는 어떻게 상태를 관리할까? · Recoil에 대해서 알아보자 · Recoil의 Atom이란? · Recoil의 Selector란? · Recoil의 전역 상태 관련 Hooks · Recoil의 특징 · 레퍼런스 상태 관리 라이브러리 포스팅을 들어가며 Recoil의 경우 다양한 기업에서 편안한 사용성으로 인해 Recoil을 많이 사용하고 있으며, Redux 처럼 다양한 구성(action, reducer 등)과 같은 환경 세팅을 할 필요가 없으며 특히 비동기 요청이 매우 심플했다. 또한, 간단한 인터페이스를 .. 2023. 11. 14. PWA의 핵심, 서비스 워커가 뭘까? 목차 · 서비스 워커가 뭘까? · 서비스 워커와 웹 워커의 공통점 · 서비스 워커와 웹 워커의 차이점 서비스 워커가 뭘까? 서비스 워커는 웹 워커의 일종이다. 서비스 워커와 웹 워커는 매우 유사한 인터페이스를 갖고 있으나, 각각의 의도와 기능은 매우 다르며 공통점과 차이점은 다음과 같다. 웹 워커란? 싱글 스레드 기반으로 작동하는 자바스크립트는 싱글 스레드의 단점을 보완하기 위해 코드들이 비동기로 실행된다. 그러나 API 비동기 실행이 너무 많이 쌓이게 되면 모든 작업의 실행 속도가 느려질 수 있다. 이 문제를 해결하기 위해 나온 것이 바로 워커이다. 웹 워커 API가 멀티 스레딩을 지원하게 되어 워커를 이용하면 워커에서 작성된 스크립트는 메인 스레드에서 분기되어 독립된 스레드로 실행되기 때문에 메모리 .. 2023. 11. 12. 프론트엔드의 뜨거운 감자, 리액트 쿼리 목차 · 리액트 쿼리에 들어가면서 · 리액트 쿼리의 캐싱 처리 · StaleTime과 CacheTime · useQuery와 useMutation · 코어 프로젝트에 실제 적용해보기 · 레퍼런스 리액트 쿼리에 들어가면서 요즘 프론트엔드 개발을 진행하면서 리액트 쿼리에 대해서 많은 이야기들을 들었다. 회사 프로젝트 및 개인 프로젝트에서 많이 사용되는 라이브러리인데 눈팅만 슥 하자니 배워보고싶은 마음에 무작정 프로젝트에 적용을 하면서 배움의 기회를 얻게 되었다. 리액트 쿼리는 간단하게 말하자면 데이터 페칭, 캐싱, 서버 데이터와의 동기화를 지원해주는 라이브러리이다. 리액트 훅과 같이 쉽게 사용이 가능하며 비동기 로직을 보다 간편하게 작성하는데 도움을 준다. 그 밖에 서버 값을 클라이언트에서 사용할 때 자동으.. 2023. 10. 30. 디프만 준비해보기 (두둥-탁) 보호되어 있는 글 입니다. 2023. 10. 19. 배포를 하기에는 시간이 너무 많이 들고, 로컬 서버를 공유하고 싶다면? 목차 · 배포를 하기에는 시간이 너무 많이 들고, 로컬 서버를 먼저 공유해보고 싶어요 · Ngrok 란? · Ngrok 설치해보기 · Ngrok 실행해보기 배포를 하기에는 시간이 너무 많이 들고, 로컬 서버를 먼저 공유해보고 싶어요 사이드 프로젝트를 진행하고 있을 때였다. 퍼블리셔가 따로 없었기 때문에 퍼블리싱 업무도 도맡아 디자이너와 함께 상의해 Zepling과 Figam 툴을 사용하여 협업을 진행하였다. 매 회의때마다 `제 이번 프론트엔드 개발은 이렇게 진행을 했구요, 이렇게 UI를 구현해보았어요` 라고 말을 해도 팀원들은 끄덕끄덕, PPT로 간신히 캡쳐한 시각적인 자료가 없었기 때문에 배포를 하기 전까지는 디자이너가 자유롭게 서비스에 들어와 구현된 화면을 같이 공유해 볼 수 없다는 것이 정말 불편했.. 2023. 10. 16. 이전 1 2 3 4 5 6 7 ··· 13 다음
