상태관리에 대해서 고민해보게 되었다

약 두 달 좀 안되게 블로그를 작성하지 않았던 것 같다.변명 아닌 변명을 해보자면 좀.. "응, 바빴다!"약 5개월의 구직 기간을 가진 것이 빛을 본 것 마냥, 좋은 기회를 얻게 되었고, 좋은 곳에 취직을 하게 되었다.생각보다 내게 주어진 책임이 막중했으며, 그것을 지

어떻게 보면 오래 걸린 것일지도, 또 지금 시장을 비추어 보면 빨리 된 것일지도.. 일단 자체적인 서비스를 제작하는 곳에서 내 커리어를 시작하겠다 라는 목표는 이루어냈다. 지인들은 _일단 SI/SM, 에이전시에서라도 실력을 쌓아라, 수도권은 현재 힘드니 지방권을 찾

이전에 NextJS + Typescript + TailwindCss 를 모두 첨 사용하여 3일내에 배우고 3일안에 간단한 클론 프로젝트를 했던 경험이 있다.그래서 이번엔 어차피 도전의 목적이 강한 프로젝트라 CSR말고 SSR 프레임워크를 사용해보자! 라는 의미로 썼는데

본 포스트는 패스트캠퍼스의 한 번에 끝내는 프론트엔드 개발 초격차 패키지 online 의 리액트 프로파일러를 통하여 각 컴포넌트를 비교, memoization을 활용한 성능 개선을 하는 부분을 학습 후 정리한 포스트입니다.메모이제이션을 어떻게 활용해야는지 헷갈렸던 차에

이번에는 웹을 만드는 사람으로써 고객에게 가장 거슬릴 수 있는 **트래픽에 관련된 이슈**를 프론트엔드 관점에서 조금이나마 해결할 수 있는지 작성해보려고 한다. 그동안 개인적으로는 트래픽은 대부분 서버에서 얼마나 해당 기능에 대한 많은 요청을 견뎌낼 수 있는지를 보는

Lazy와 SSR이 어떻게 보면 비슷하지 않을까?

FOUC Error 발생 NextJS에서 styled-compoent를 사용하려다 발생한 오류이다. Warning: Prop className did not match. Server: "sc-dcrmVg jFNoJa" Client: "sc-bgqQcB gBPwub"

인간은 어쩔 수 없이 계속해서 진행되는 망각을 완전히 막을 수 없다고 생각한다. 그런 의미로 오늘은 NextJS를 다시 되짚어보면서 Layout을 입혀보려고 한다.

금일 23년 5월 26일, 그룹바이에서 진행하는 오프라인 스타트업 채용박람회에 선정되어 다녀와봤다.

그동안 나는 스스로의 힘으로 무언가를 이루고 싶은 생각에 겁~나 많은 검색을 통해 문제에 대한 힌트 및 정보를 얻고 해결해 왔다.

이제 Webpack을 통하여 본격적인 Optimize를 진행해보려고 한다! 사실 Webpack5가 도입이 되면서 아주 기본적인 최적화를 default로 진행을 해준다고 한다. 하지만, 이외의 Plugin과 Optimaization 옵션을 적절하게 사용하면 번들크기를

React Lazy는 React 16버전부터 지원하게 된 API로 구성 요소의 코드 로드를 해당 컴포넌트가 처음 렌더링될 때까지 연기할 수 있는 기능을 가지고 있다. 다시 말해 **Lazy Loading**이다. 또한 Javascript Chunk file로 분리해주

이전 글의 연장선이다.이전 글이 Webpack 도입에 관하였던 내용이었다면, 이번 글은 기존에 있던 라이브러리 들과의 충돌을 해결하는 내용을 담았다.기본적으로 webpack에서 해야될 세팅을 다 끝냈다고 생각했다. 왜냐면 공식문서가 하라는 기본대로 다 했기에 말이다.

사실 저번 포스팅을 작성하면서 프로젝트를 보다가 뒤늦게 알았다.

📖 이전 성능 개선 편을 참고해주세요. \[1. 성능 개선 \[2. 성능 개선 \[3. 성능 개선 \[4. 성능 개선 첫번째 컨텐츠가 페인트되는 지표를 바탕으로 개선점을 찾아주는 FCP관련 분석을 따로 필터링하여서 위의 사진과 같이 나타내어보았다.자바스크립트 줄이기

📖 이전 성능 개선 편을 참고해주세요. \[1. 성능 개선 2. 이미지 용량 줄이기

📖 이전 성능 개선 편을 참고해주세요. \[1. 성능 개선 2. 이미지 용량 줄이기최적화를 정~말 많이 해야되겠다는 것을 전편 LightHouse를 통해서 알게 되었다. 아무리 클라이언트 서버이지만 52점은 개선해야할 부분이 많다는 의미를 내포하고 있다.그래도 이번

원래 같았으면 이전 포스트 다음으로 바로 성능 개선에 관한 이야기를 다루려고 했는데, 어떠한 기업에서 RN으로 실시간 과제를 본다고 해서 호다닥 공부해 봐야되기에 다음으로 미루겠습니다 ; (위에서 짧게 말했듯이 오늘은 처음으로 맛보는 React Native 초기 설정에

Lighthouse는 웹 앱의 성능, 품질 및 정확성을 개선하기 위한 오픈 소스 자동화 도구입니다. 페이지를 감사할 때 Lighthouse는 페이지에 대해 일련의 테스트를 실행한 다음 페이지가 얼마나 잘 수행되었는지에 대한 보고서를 생성합니다. 여기에서 실패한 테스트