배경예전에 웹 서비스 캐시 똑똑하게 다루기 라는 글을 읽었다. 과연 똑똑하게 다루는 방법은 뭘까? 지금 내가 하는 프로젝트는 어떤 방법을 사용해야할까? 타사 서비스들은 어떻게 다루고 있을까? 이런 여러가지 고민들을 했고 정리해보려고 한다. 기초 지식캐시 컨트롤에 대한 기초 내용은 다루지 이 글에서 다루지 않습니다. 다만 필수적인 내용만 가볍게 정리하고 넘어갑니다. no-cache: 브라우저(로컬) 캐시를 사용하지 않는다. 단, cdn(중간서버) 캐싱은 사용한다.(사용 전 서버에 재검증)no-store: 모든 캐시(브라우저, cdn)를 사용하지 않는다.max-age: 브라우저 캐시 유지 시간s-max-age: cdn 캐시 유지 시간public: 브라우저와 중간 서버가 모두 캐시를 저장할 수 있음privat..
배경이전에 면접, 과제 등에서 스택, 큐에 대한 질문을 받은적이 있다. 그때는 실무 경험이 없었기 때문에 막연히 이론적 지식만으로 답변을 했었떤 것 같다. 조금이지만 경험이 쌓인 지금 그 때로 돌아가서 답변해보려고 한다. 실무에서 마주한 문제js script 최적화웹에서 js를 사용하려면 script 태그를 사용해야한다. 그리고 async, defer 속성을 통해 실행 순서를 제어할 수 있다. 아래는 과거 기술면접을 준비하면서 적었던 내용이다.- DOM을 따라 반드시 순서대로 실행되어야 한다면 이 방식을 사용하면 스크립트가 로드되기 전에 함수를 실행할 수 있고, 로드된 후에는 순차적으로 실행된다. 더 생각해보기- 전역객체를 두개나 만들었다. 이게 최선일까? 하나로 줄일수는 없을까?- body에 appe..
배경과거 객체지향 강의에서 추상화, 카테고라이즈에 대해 배웠다. 그런데 나는 이런 것들을 실제로 사용하고 있는걸까? 하는 의문점들이 조금씩 들던와중에 실무에 적용할일이 생겼다. 배경 설명- Foo라는 enum이 존재한다.- enum이 자주 추가되지는 않지만 계속해서 추가되는건 확실하다.- 프론트엔드, 백엔드 모두에서 전역적으로 사용된다.- 경우에 따라 특정 enum 값만 허용되어야 한다.- input이 전체 enum인데 outpt은 특정 enum으로 필터링해야한다.- enum에 매핑되는 value가 존재하는 경우가 있다.- enum이 추가될 때마다 전체 시스템을 점검해야하므로, 많은 시간이 소요된다. 고민나는 Foo enum을 추가해야하는 요구사항을 받았다. 또한 기존과는 약간 다른 타입의 enum이였다..
배경요즘 쇼츠가 유행이다. 나도 도파인 터지는 쇼츠에 빠져있다. 그런데 사용하다보니 어떤 플랫폼은 사용성이 좋은데 어떤 플랫폼은 사용성이 좋지 않았다. 특히 내가 성능이 안좋은 스마트폰을 사용중이라서 이게 더 심하게 체감되었다. 왜 이런 차이가 발생하는걸까? 가볍게 몇개의 플랫폼의 쇼츠를 들어가서 분석해보겠다. 분석하기네이버 쇼츠예시 링크 동영상 목록 api 살펴보기- `GET ~/cards` API에 cards라는 데이터가 있다.- cards는 배열이고 length가 4다.- 단, 맨 처음에는 length가 1인 api를 호출하고 끝난 시점에 length가 4인 api를 호출한다.- 내부에는 썸네일, 동영상 등 다양한 정보가 들어있다. 왜 4개의 데이터만 불러올까?- 쇼츠는 슥슥 내리는 사용성을 가진 ..
배경리액트를 클래스형으로는 꽤 많이 구현해 보고 블로그에 글도 적었다. 언젠가 한 번쯤은 함수형을 구현해봐야지라고 생각했는데 생각보다 좀 늦었다. 너무 많은 내용을 적으면 글을 쓰는 사람도 읽는 사람도 힘들 것 같아서 조금씩 나눠서 몇차례에 거쳐 글을 써보려고 한다.첫번째 목표: 하나의 useState 만들기1-1.jsfunction useState(initialState) { let state = initialState; const setState = (nextState) => { state = nextState; render(); }; return [state, setState];}function Counter() { const [count, setCount] = useState(..
개발을 하게 되면 비동기 함수를 사용하게 되는 경우가 생긴다. 그리고 이를 효율적으로 처리하기 위한 방법을 예제와 함께 알아보자. 1. 한 개의 비동기 함수1-1. 비동기 함수 실행 여부와 다른 코드가 상관이 없는 경우일반적으로는 메인 함수의 어디에서 함수를 호출하던지 상관이 없다.물론 특이한 케이스도 존재한다. 예를들어 만약 해당 함수가 오래걸리는 함수고 함수를 실행시키는 즉시 api를 호출시키고 싶다면 맨 위에서 호출해야된다.function main1_1() { foo(); delay(300); bar();} 1-2. 하나의 비동기 함수가 실행된 이후에 실행할 코드가 있는 경우위와 달리 delay라는 함수가 실행된 이후에 bar가 실행되어야하는 경우가 있다.웹에서는 api 호출 후 해당 데이터..
배경'프론트엔드에서 테스트 코드가 중요하다 vs 중요하지 않다' 항상 나오는 말이다. 시리즈 b 스타트업에서 일하는 3년차 프론트개발자인 나의 시선은 어떨까? 정리되어 있지 않은 내면의 생각들을 정리해보고 싶어졌다. 아마 조금만 시간이 지나면 지금 나의 생각도 바뀌게 될 것이다. 생각이 바뀌기전에, 지금의 기억을 잊어버리기 전에 정리해보겠다.테스트 코드와 개발 시간최근에 유스콘이라는 곳에서 `자동차 정비사 개발자가 되다`라는 세션을 들었다. 정비를 하려면 자동차를 뜯고 고장난 곳을 고치고 다시 조립해서 테스트를 한다고 했다. 그리고 정비가 잘못되었다면 다시 뜯어야하는데 길게 걸리는 경우는 일주일동안 뜯어야하고 힘도 많이 든다고 했다. 그런데 개발자는 딸깍 하니 테스트 코드가 바로 나오니 얼마나 쉽냐는..
컴포넌트를 잘 만드는 방법 2편(리액트)
배경 약 1년 반 전 컴포넌트를 잘 만드는 방법(리액트) 글을 썼다. 우연히 출퇴근길 개발 읽기에 올라갔고 많은 사람들이 내가 쓴 글을 읽었다. 1년 반이 지난 지금 나는 컴포넌트에 대해서 얼마나 잘 알고 있을까? 2편을 적어보면서 스스로 판단해보기로 했다. 컴포넌트를 잘 만드는 방법 2편인 만큼 아주 기본적인 내용은 생략한다. 실무에서 누구나 겪을만한 내용들을 다뤄보겠다. composition pattern 정의 컴포지트 패턴(Composite pattern)이란 객체들의 관계를 트리 구조로 구성하여 부분-전체 계층을 표현하는 패턴으로, 사용자가 단일 객체와 복합 객체 모두 동일하게 다루도록 한다. - by 위키피디아 정의만 봐서는 알기 힘드니 어떤 경우에 사용할 수 있는지 또한 어떤 장점이 있는지 예..