- 전체보기(72)
- React(38)
- TIL(24)
- typescript(21)
- JavaScript(10)
- 코딩테스트(8)
- 프로그래머스(8)
- 알고리즘(8)
- vue(6)
- trouble shooting(5)
- webpack(4)
- bundle(3)
- react-query(3)
- axios(3)
- redux(3)
- lighthouse(3)
- Vue 3(3)
- 항해99(3)
- github(3)
- style-components(2)
- 최적화(2)
- minimize(2)
- Backend(2)
- nextjs(2)
- Props(2)
- router(2)
- API(2)
- 번들링(2)
- redux-toolkit(2)
- code splitting(2)
- 성능 개선(2)
- 성능 최적화(2)
- frontend(1)
- optional chaining(1)
- 동기부여(1)
- layout(1)
- 이벤트 캡쳐링(1)
- git flow(1)
- 용량(1)
- error(1)
- https(1)
- Route(1)
- bundler(1)
- 번들러(1)
- thunk(1)
- commit(1)
- vuex(1)
- splash(1)
- chunk(1)
- 성능(1)
- vite(1)
- Client Server(1)
- CSS(1)
- html(1)
- 난독화(1)
- Weekly I learned(1)
- Expo(1)
- 협업(1)
- 렌더링(1)
- tailwindCSS(1)
- 스타트업(1)
- 실전프로젝트(1)
- react native cli(1)
- WIL(1)
- infinite scroll(1)
- vue3(1)
- react native(1)
- uglify(1)
- Java(1)
- seo(1)
- next.js(1)
- 코드 스플릿(1)
- 이벤트 버블링(1)
- Android Studio(1)
- FE(1)
- profiler(1)
- compostion api(1)
- 이벤트(1)
- children(1)
- react router(1)
- Option API(1)
- git(1)
- search(1)
- JSON Server(1)
- React Profiler(1)
- Github Gist(1)
- refactoring(1)
- promise(1)
- 백엔드(1)
- gist(1)
- 이미지(1)
- optimize(1)
- PORT(1)
- 면접(1)
- 고찰(1)
- 프론트엔드(1)
- Recoil(1)
- useEffect(1)
- 그룹바이(1)
- loader(1)
- nullish(1)
- 비동기(1)
- ESLint(1)
NextJS에서 React 때처럼 바로 styled-components를 사용하면 발생하는 오류
Warning: Prop className did not match. Server: "sc-dcrmVg jFNoJa" Client: "sc-bgqQcB gBPwub"https://curo.tistory.com/entry/NextJS-%EC%BD%98%EC%86
NextJS에서 페이지들에게 옷(레이아웃) 입히기 (Feat. Children Props, NextJS Routing)
인간은 어쩔 수 없이 계속해서 진행되는 망각을 완전히 막을 수 없다고 생각한다. 그런 의미로 오늘은 NextJS를 다시 되짚어보면서 Layout을 입혀보려고 한다.
프론트엔드 개발자는 SEO를 어떻게 처리해야할까?
그동안 나는 스스로의 힘으로 무언가를 이루고 싶은 생각에 겁~나 많은 검색을 통해 문제에 대한 힌트 및 정보를 얻고 해결해 왔다.
본격적으로 Webpack Optimize 하기 (Bundle Analyzer, Chunk, Minimize, Uglify)
이제 Webpack을 통하여 본격적인 Optimize를 진행해보려고 한다! 사실 Webpack5가 도입이 되면서 아주 기본적인 최적화를 default로 진행을 해준다고 한다. 하지만, 이외의 Plugin과 Optimaization 옵션을 적절하게 사용하면 번들크기를
Webpack 만으로는 code splitting이 안된다. (React Lazy, Suspense)
React Lazy는 React 16버전부터 지원하게 된 API로 구성 요소의 코드 로드를 해당 컴포넌트가 처음 렌더링될 때까지 연기할 수 있는 기능을 가지고 있다. 다시 말해 **Lazy Loading**이다. 또한 Javascript Chunk file로 분리해주
생각보다 어려운 Webpack 번들링 (loader 관련 에러)
이전 글의 연장선이다.이전 글이 Webpack 도입에 관하였던 내용이었다면, 이번 글은 기존에 있던 라이브러리 들과의 충돌을 해결하는 내용을 담았다.기본적으로 webpack에서 해야될 세팅을 다 끝냈다고 생각했다. 왜냐면 공식문서가 하라는 기본대로 다 했기에 말이다.
성능 개선 #4. LightHouse 진단해서 나온 문제점 개선하기
📖 이전 성능 개선 편을 참고해주세요. \[1. 성능 개선 \[2. 성능 개선 \[3. 성능 개선 \[4. 성능 개선 첫번째 컨텐츠가 페인트되는 지표를 바탕으로 개선점을 찾아주는 FCP관련 분석을 따로 필터링하여서 위의 사진과 같이 나타내어보았다.자바스크립트 줄이기
성능 개선 #3. React Profiler로 컴포넌트 해부하기
📖 이전 성능 개선 편을 참고해주세요. \[1. 성능 개선 2. 이미지 용량 줄이기
📆 23.03.28 - 성능 개선 #2. 이미지 용량 줄이기
📖 이전 성능 개선 편을 참고해주세요. \[1. 성능 개선 2. 이미지 용량 줄이기최적화를 정~말 많이 해야되겠다는 것을 전편 LightHouse를 통해서 알게 되었다. 아무리 클라이언트 서버이지만 52점은 개선해야할 부분이 많다는 의미를 내포하고 있다.그래도 이번
📆 23.03.23 - 대충 React-Native Cli 맛보던 내용
원래 같았으면 이전 포스트 다음으로 바로 성능 개선에 관한 이야기를 다루려고 했는데, 어떠한 기업에서 RN으로 실시간 과제를 본다고 해서 호다닥 공부해 봐야되기에 다음으로 미루겠습니다 ; (위에서 짧게 말했듯이 오늘은 처음으로 맛보는 React Native 초기 설정에
📆 23.03.18 - 성능 개선 #1. LightHouse로 성능 파악해보기
Lighthouse는 웹 앱의 성능, 품질 및 정확성을 개선하기 위한 오픈 소스 자동화 도구입니다. 페이지를 감사할 때 Lighthouse는 페이지에 대해 일련의 테스트를 실행한 다음 페이지가 얼마나 잘 수행되었는지에 대한 보고서를 생성합니다. 여기에서 실패한 테스트
📆 23.03.15 - 개발자 채용 프로세스에 관한 스스로의 고찰💡
개발자 커리어를 이루기 위해 노력한 근 2개월 간의 얻은 점과 역경을 적은 글입니다
📆 23.03.05 - 내가 작업한 코드를 입증할 수 있는 Github Gist
요즘 이쪽 직종 회사들에 입사지원을 할 때 보통, 이력서와 자신이 그동안 만들었던 프로젝트를 정리한 포트폴리오를 제출하라고 요구하는 경우를 발견할 수 있다.
📆 23.03.01 - Vue 3 Composition API와 Option API
Vue 3가 정식화가 되었습니다. 이 포스팅은 Vue 3에서 정식으로 나오게 된 Composition API 를 다루기 때문에 이해가 어려우신 분들은 이전 포스팅 📆 23.02.10 - Vue 3..! 이전 버전과는 무엇이 달라졌을까 을 보고 와주세요.Vue 2에서도
Argument of type '() => Promise<void>' is not assignable to parameter of type 'SetStateAction<undefined>'.
Argument of type '() => Promise' is not assignable to parameter of type 'SetStateAction'. Type 'Promise' is not assignable to type 'undefined'.ts(234
📆 23.02.16 - NextJS 에서 발생되는 useEffect 의 불필요한 렌더링 줄이기
react에서 useEffect를 사용하여 해당 컴포넌트가 렌더링 될 때, 필요한 함수를 즉각 실행하게 된다. 대개로 데이터를 받아와 활용할 때 사용하는 경우가 많다.최근 NextJS 프로젝트를 진행하면서 해당 부분을 직면하게 되면서 기존 react에서 처리하던 방법과
📆 23.02.10 - Vue 3..! 이전 버전과는 무엇이 달라졌을까
기본적으로 Vue 프레임워크를 사용하고 있는 유저들은 Vue 2.x 단계를 사용하고 있었다. 그렇지만 22년 상반기부터 Vue는 공식적으로 버전 3을 내세우기 시작하였다. 여기서 Vue 2와 다른 점이 없다고 말하기도, 달라진 부분이 많아졌다 하기도 애매한 것이 이 V