Youngble_개발스토리

다시한번 느끼게 된 최적화에 대한 이해한 부분에 대해서 회고록 형식으로 남겨놓고자 이렇게 쓰게 되었다. 요 몇일 여러개의 기능구현 과제를 진행을 하면서 피드백을 요청하여 받았던 부분중 하나가 메모이제이션, 최적화 부분에 신경을 쓰지 않은거 같다 라는 거였다. 솔직히 몇일안에 요구사항을 구현하는것에 포커싱을 맞추고 그 후 리팩토링 작업같은 중요하지만 부가적인 부분은 보지않는다고 생각했다. 또한 무분별하게 사용하는 최적화, 메모이제이션은 오히려 많은 비용을 발생할뿐이라는 것이 많은 사람들이 이야기하는 부분이다. 그럼에도 중요하게 생각하는 부분이 최적화부분이라고 하였고, 그렇기에 이번에 다시한번 최적화 부분을 보게 되었다. 특히 리랜더링을 방지하기 위한 React.memo 와 useCallback부분이였다. ..

오늘은 간단하게 면접때 질문 받은것 중에서도 실제 사례의 사이트를 보여주며 물어봤던게 신선해서 적어볼려고한다. 해당사이트는 spotify 였는데 지금들어가면 그러진 않은데 조금 변형해서 보여줬는지는 모르겠지만 메인화면 로드에서만 5초정도의 로딩후 내용물들이 보이는 현상이 있었다. 위의 빨간 체크박스 부분이 뜨지 않다가 생성이 되는데 이러한 현상이 왜 발생하는지에 대해서 이유를 말하는 것이였다. 두가지로 추론을 했는데 첫번재는 html, css, js 등의 리소스를 한번에 불러오는데 많은양이거나 거기에 걸리는 시간으로 인해서 뜨지 않는다는 추정이였지만 그러기에는 많은 리소스가 없을거 같았고 두번째로는 api 요청부분이 있기 때문이라고 생각했다. 그런데 메인페이지에서 api요청할게 있을까? 또는 있다고 하더..

Step 1. 왜 순수함수, 불변성을 정리하고자 하는지 2. 순수함수와 불변성은 무엇인가? 3. 리덕스/리듀서와는 무슨 관계가 있는가? 4. 미들웨어는 무슨 관계인가? 그전에 다 끝내지 못한 모던 자바스크립트 Deep Dive 책을 읽고 있는데, 이 책을 읽은지가 일년 반정도 되었고 1/3 정도만 읽었던 상태라 그전에 읽었을때 이해하는 시야와 잊어버렸던 부분을 다시 다잡기위해서 처음부터 읽기 시작했는데, 확실히 그전에 읽었을때와 지금 읽었을때 이해하는 바가 많이 다르고 현시점에서 어떻게 실질적인 실무에서 적용하는 부분인지 생각하면서 보게 된거 같다. 확실히 읽는 속도도 예전보다 빠르게 읽히기도 해서 좀더 가속도를 높이고 있다. 1. 왜 순수함수, 불변성을 정리하고자 하는지 그전 내용들은 따로 블로그에 정..

그전에 웹팩 과 바벨에 관하여 정리한적이 있는데 개념뿐만 아니라 어떠한 흐름으로 쓰는지에 대해서 좀더 디테일하게 정리하고자 한다. 순서 웹팩 적용 1. 웹팩 설치 : webpack/ webpack-cli/ webpack-dev-server 2. webpack.config.js 3. package.json scripts 빌드 명령어 3. 로더: css-loader / style-loader 4. 플러그인(Plugin) 5. 개발서버(server) 바벨 적용 1. 바벨설치: babel-loader/ @babel/core / @babel/preset-env 2. 프러그인(Plugin) 3. Preset 4. 리액트 / @babel/preset-react 5. babel-loader 웹팩 적용 1. 웹팩 설치 ..

순서 1. Lighthouse 설명 - First Contentful Paint, FCP - Speed Index, SI - Largest Contentful Paint, LCP - Time To Interactive, TTI - Total Blocking Time, TBT - Cumulative Layout Shift, CLS 이전글 웹 성능최적화 (1) 보러가기 1. Lighthouse 설명 웹 페이지의 종합 성능을 측정하는 툴로써 이전에는 따로 프로그램을 다운로드하여 사용해야했지만 이후에 구글 크롬은 브라우저에 기본내장하여 사용할 수 있도록 했다. Lighthouse를 통해 성능 점수를 매길때 6개의 지표(Metrics)가 있다. 또한 이러한 지표를 웹 바이탈(Web Vitals)이라고 한다. Fi..

순서 1. 성능 최적화는 왜 필요할까? 2. 성능 최적화는 어떻게 이루어질까? 3. 서비스 성능분석 방법 4. 성능 최적화 기법들 5. 크롬 개발자 도구 1. 성능 최적화는 왜 필요할까? 먼저 성능 최적화가 필요한 가장큰 이유는 성능이 저하되면 사용자가 떠나고 매출이 감소한다. 반대로 말하면 성능이 향상되면 사용자가 늘고 매출이 오른다. 구글이 딥 러닝 기술을 이용하여 페이지 로딩속도와 이탈률 및 전환율의 관계를 분석하였을때 다음과 같은 결과가 나왔다. 위의 결과만 보더래도 페이지 표시가 3초~10초 지연이 되면 32%~123%만큼 증가되어 이탈률을 갖게 된다는 것이다. 따라서 웹 성능을 최적화 하게되면 서비스 사용자에게 더 나은 사용자 경험(UX)를 제공하기 때문에 가입률과 전환율은 증가되고 이탈률을 ..

오늘은 Web APIs 관련해서 정리하고자한다. APIs 란? 우리가 늘상 API 라는 말을 많이 하고있지만 실질적으로 정확히 모르고 쓸때가 많다. 백엔드와 데이터를 통신할때도 API통신이라 하고 DOM을 컨트롤할때도 Browser API를 사용한다고 하는등 많은 곳에서 API라고 쓴다. 정의로는 Application Programming Interfaces(APIs)는 프로그래밍 언어에서 개발자가 복잡한 기능을 보다 쉽게 만들수 있도록 만들어진 구조이다. API는 복잡한 코드들을 제거하고 쉬운 구문으로 대체하여 사용할 수 있게 제공해주는 것이다. 정의로 말하면 솔직히 이해하기 쉽지 않다. 아래의 그림의 예시를 통해 좀더 쉽게 설명해보자. 우리가 실제로 집에서 전기를 사용한다고 했을때, 플러그 소캣에 꽂..

오늘은 프로젝트 아키텍쳐 관련하여 정리하고자한다. 순서 1. 모놀리식 아키텍처 2. 모놀리식 단점 3. 마이크로서비스 아키텍처 MSA 4. 멀티레포 장점 5. 멀티레포의 단점 6. 모노레포 모놀리식 아키텍처, Monolithic Architecture 모놀리식 아키텍처는 전통적인 소프트웨어 프로그램 모델이다. 위의 사진처럼 하나의 서비스를 위해 모든 코드와 프론트/백엔드, 로직 등 한곳에서 관리하고 빌드/배포 운영 하는 것이다. 보통 프로젝트 초기에는 코드 관리, 인지 오버헤드 및 배포의 용이성 면에서 모든 것을 한꺼번에 릴리스할 수 있기 때문에 처음 시작하는 작은 스타트업같은 경우나 소규모의 프로젝트는 흔히 모놀리식 아키텍처로 많이 진행한다고 하고 지금도 많이 쓴다. 모놀리식 단점 하지만 한곳에서 관리..

브라우저에서 해당 URL을 입력후 브라우저 렌더링 과정에 대해서 어떻게 일어나는지 정리해보자. TL;DR 렌더링 과정 1. 브라우저 주소창에 특정 주소를 입력 2. 해당 주소의 서버를 찾고 만약 캐시가 있는지 먼저 체크, 그리고 DNS(Domain Name System)가 실제 서버로 연결하고 http, https에 따라 통신한다. 3. 별도의 path없이 기본 url 요청 '/'로 보낼시 루트 설정은 기본 설정의 index.html을 요청하게되고 서버에서 루트폴더에 있는 index.html을 클라이언트쪽(브라우저)으로 보내준다. 4. 해당 index.html을 받은 브라우저에서 텍스트로 이루어진 파일을 파싱(parsing)하면서 DOM 트리 생성 5. html을 읽다 중간 link tag에서 CSS요청..

SEO 최적화는 어느정도 마무리가되어 서비스의 성능 최적화를 위하여 번들사이즈를 줄이기로 하였다. 먼저 찾아본결과 Nextjs build후에 번들의 사이즈를 알기위해서 bundle analyzer를 사용하여 사이즈를 체크하고 사용하지않는 코드와 import들을 Tree Shaking을 진행하면 된다고 하였다. 현재 Nextjs로 진행하고 있기 때문에 @next/bundle-analyzer 라이브러리를 사용하여 번들사이즈를 이미지화하여 볼수 있다. bundle-analyzer를 사용하여 보는 사이즈는 Stat size, Parsed size, Gzipped size 총 3개가 있다. Stat: 빌드된 그대로의 상태 사이즈 Parsed: 번들된 사이즈 Gzipped: 압축된 사이즈 Parsed를 줄이면 Gz..