전체 글28 브라우저 스토리지를 이용하여 네트워크 요청 줄이기 프론트엔드에서 네트워크 요청을 줄일 수 있는 두 가지 방법에 대해 다루는 글을 작성하였다.이전 글 바로가기첫번쨰 글에서 작성한 두 가지 방법은 다음과 같았다.적당한 단위를 산정하여 인피니티 스크롤 적용하기정적 페이지로 만들어 관리하기이번에는 브라우저 스토리지를 이용한 캐싱 방식에 대해서 글을 작성해보려 한다.브라우저 스토리지는 메모리보다 값을 오래 저장할 수 있도록 도와준다. Table Of Content브라우저 스토리지들의 차이점장바구니 개수 컴포넌트로 생각해보는 장바구니 개수 캐싱캐싱을 이용할 때 주로 고려해야할 것들브라우저 스토리지를 이용한 캐싱브라우저 스토리지에는 로컬 스토리지, 세션 스토리지, 쿠키가 있다.위 세개의 스토리지에 저장을 해두고 값이 갱신되지 않는 경우에 값을 그대로 받아오는 방식을.. 2023. 8. 10. 프론트엔드에서 네트워크 요청 줄이기 DAU 50만 정도의 순간 트래픽이 높은 서비스를 개발중이다.그리고 외부 API를 사용하기 때문에 트래픽 제어가 쉽지 않고 요청이 많아질 경우 비용도 높아지는 문제가 있다.또 현재 개발하고 있는 앱의 연령층은 10대, 40~50대 위주이기 때문에 데이터 비용의 부담도 유저의 이탈을 만들게되곤 한다.그렇기에 사용자 경험을 저해하지 않는 수준의 API 요청 최소화를 생각하며 개발하고 있다.시행착오를 겪으며 사용한 방법들과 고려해야했던 이유들을 다시 한번 검증하고 공유하기 위해 글을 정리한다.내용을 잘 정리하기 위해 글을 두 편으로 정리하려한다. Table Of ContentAPI 요청을 줄여야 할 때는 언제일까적당한 단위를 산정하여 인피니티 스크롤 적용하기정적 페이지로 만들어 관리하기다음 글 Table Of.. 2023. 7. 24. Node.js 버퍼를 이용하여 이미지를 만들어보자 이미지를 브라우저에 보여주거나 저장하거나 가공할 때가 있다. 그렇지만 이미지를 컴퓨터가 어떻게 이해하는지, 색상 데이터에 어떤 정보를 추가해야 완전한 이미지 파일이 되는지 모르고 있었다. 이 글은 이미지를 잘 이해하기 위해 또 이미지를 직접 가공해야 할 때를 대비해 코드로 이미지를 만들며 학습한 기록이다. Table Of Contents - Node.js에서 이미지를 읽어보며 버퍼 이해해보기 - 비트맵 이미지를 만들어보며 이미지 파일의 구성요소 알아보기 - 사용하기 쉬운 인터페이스를 고민하며 npm에 패키지 배포하기 이미지를 읽어보자. const fs = require('fs'); fs.readFile('./asset/groot.png', (err, data) => { if (err) { console... 2023. 7. 11. 상태관리 (관찰자 클래스 방식과 createStore 방식 비교해보기) 상태 관리를 어떻게 하면 좋을지는 프로젝트를 시작할 때, 혹은 상태 관리가 포함된 코드를 리뷰할 때 자주 나오는 주제이다. 라이브러리를 잘 사용하는 것도 중요하지만 결국 상태가 무엇이고 어떻게 상태관리하면 좋을지 이해한다면 능동적으로 라이브러리를 활용하거나 직접 구현하여 상태관리할 수 있을 것이다. 상태를 다루는 일반적인 방법을 살펴본 후 이를 옵저버 패턴을 이용하여 개선해 보자. 또 옵저버 패턴을 이용하여 관찰자 클래스 방식과 createStore 방식을 바닐라 JS로 구현해 보고 비교해 보자. 프론트엔드에서 상태란 이 글에서 다룰 상태는 값의 변함에 따라 화면에 반영돼야 하는 값으로 정의한다. 그렇다면 프론트엔드에서 상태의 예로는 무엇이 있을까? 이러한 탭바에서 상태는 내가 무슨 탭을 보는지(현재는 .. 2023. 5. 25. 2022년 회고 2022년이 지났다. 상용되는 프로그램을 개발 및 운영하고, 좋은 교육을 받고, 동아리를 운영하기도 하며 2022년을 보냈다. 2022년의 기억이 휘발되기 전에 2022년을 정리할 목적, 또 2023년을 잘 대비할 목적으로 글을 정리하려 한다. 충북 SW JUDGER 상반기는 학교에서 사용되는 코드 채점 프로그램을 만들며 보냈다. 갑자기 사용자가 많아지고 기능이 추가되며 프로그래밍 과제를 채점하는 기능, 각종 버그들 수정 및 UX 개선등을 2개월 안에 추가해야 했다. 교수님께서는 프론트 팀을 이끌며 개발하라 하셨고 할 지 말 지 고민할 시간조차도 부족했기에 어떻게 해야 될까?라는 생각만 했다. 평소처럼 살아서는 쉽게 될 것 같지 않아 체계를 만들었다. 루틴 만들기 학습해야 하는 부분과 개발할 내용이 동시.. 2023. 1. 11. StyleLint WebStorm에서 저장할 때 적용하기 ✅ 이 글은 다음을 다룬다. StyleLint가 무엇이고 왜 적용하는지 프로젝트에 StyleLint를 적용하는 방법 WebStorm, InteliJ 환경에서 저장 시마다 StyleLint를 적용하는 방법 StyleLint는 무엇이고 적용하면 뭐가 좋을까? StyleLint는 스타일에 컨벤션을 강제하고 에러를 피할 수 있게 도와주는 툴이다. 스타일 관련 코드가 많아질 수록 스타일이 중구난방이 되고 사실은 동작하지 않고 있는 코드들이 생길 수 있다. WeView 팀도 스타일 코드의 컨벤션을 지키고 역할을 하지 않고 있는 코드를 개발하는 시점에 잡아내기 위해 StyleLint를 적용하였다. 그러면 이제 본격적으로 적용해보자! stylelint적용하고 plugin 적용하기 stylelint를 설치하자. npm .. 2022. 12. 21. 이전 1 2 3 4 5 다음
