0256 · FE7월 29일
[Next.js] TypeScript 프로젝트인데 왜 JavaScript가 아직도 있냐고요?
“TS로 전환했으면 다 TS로 써야지, 왜 JS가 남아있지?” 실제로 팀에 들어가 보면 src/utils/legacy.js나 scripts/deploy.js 같은 파일들이 여전히 살아있는 경우가 많다. 누군가는 이렇게 생각할지도 모른다. ? “그건 …
웹개발 · 프론트엔드 · JavaScript
#프론트엔드
9월 0장 · 통산 515장
- 0252 · FE7월 26일[Next.js] CSR과 SSR — Next.js에서의 개념과 실제 사용 방법Next.js는 React 기반 프레임워크로, CSR(Client Side Rendering)과 SSR(Server Side Rendering)을 모두 지원한다. 단순히 개념만 아는 게 아니라, Next.js에서는 이걸 어떻게 구현하는지가 핵심이다.…FE · 웹개발 · 프론트엔드
- 0251 · FE7월 26일[Next.js] Next.js에서 Hydration 에러가 발생한 이유와 해결 과정문제 상황 Next.js에서 모바일 햄버거 메뉴를 만들던 중 아래와 같은 에러가 발생했다. Error: Hydration failed because the server rendered HTML didn't match the client. 처음에는 단…FE · 웹개발 · 프론트엔드
- 0250 · FE7월 25일[Next.js] Next.js + Netlify에서 10MB GIF → 160KB MP4로 바꾸기 (feat. ffmpeg)1. 문제 상황 소개 Next.js 기반의 개인 프로젝트에서 move.gif 애니메이션을 사용했다. 처음에는 잘 작동하는 듯했지만, Netlify에 배포하고 Lighthouse 성능 점수를 확인해보니 로딩 시간 지연과 성능 저하가 발생했다. 용량: …FE · 웹개발 · 프론트엔드
- 0208 · FE7월 1일[React] 성능 잡는 Hook! useMemo, useCallback, 그리고 React.memo 정리 끝판왕React.memo : 컴포넌트 자체를 메모이제이션하여 props가 바뀌지 않으면 다시 렌더링하지 않도록 한다. 1) 사용하는 경우 부모 컴포넌트가 자주 렌더링되는데, 자식 컴포넌트의 props가 변하지 않는 경우 불필요한 리렌더링 방지 목적 2) …FE · 웹개발 · 프론트엔드
- 0197 · FE7월 1일[Next.js] 실무에서 쓰는 Next.js 구조 설계 – src, app, features, components프로젝트가 커질수록 이런 경험, 한 번쯤은 해봤을 것이다. app/, components/, utils/ 안에 파일이 정체 불명의(name.conflict)처럼 쌓이다 보니 "이걸 어디에 넣어야 하지?" 며 5분을 검색하게 된다. 누구나 겪는 이 문…FE · 웹개발 · 프론트엔드
- 0169 · FE6월 4일디자인은 디테일에 있다, ::after를 활용한 밑줄 애니메이션가운데에서 퍼지는 밑줄 효과, ::after로 만드는 동적인 스타일링 React 프로젝트에서 메뉴 탭이나 버튼과 같은 인터랙티브한 UI를 만들 때, 사용자의 선택을 시각적으로 명확하게 표현해 주는 것은 중요하다. 그 대표적인 방식 중 하나가 bord…FE · CSS · 웹개발
- 0167 · FE6월 4일React 코드의 완성도를 높이는 PropTypes와 ESLint의 만남React로 프로젝트를 진행할 때, ESLint가 아래와 같은 경고를 띄울 때가 있다. 'react/prop-types': 'desc' is missing in props validation 이 글에서는 이 경고가 왜 발생하는지, 그리고 어떻게 해결…FE · 웹개발 · 프론트엔드
- 0146 · FE4월 16일[Next.js] pages는 이제 안녕? App Router가 가져온 구조 혁신“Next.js를 배우고 있는데… /app 디렉토리?_app.tsx, _document.tsx는 이제 안 쓰는 건가요?” Next.js 13부터 등장한 App Router는 단순한 디렉토리 변경이 아니다. 파일 기반 라우팅 → 컴포넌트 기반 아키텍처…FE · 웹개발 · 프론트엔드
- 0145 · FE4월 16일[Next.js] _app.tsx와 _document.tsx 완전 이해하기"Next.js에서 컴포넌트는 익숙한데... _app.tsx는 뭐고 _document.tsx는 또 뭐지?" 처음에는 괜히 프로젝트에 붙어 있는 듯한 느낌이지만, 이 두 파일을 이해하면 Next.js의 전체 앱 구조가 눈에 들어온다. ? 건물로 비유해…FE · 웹개발 · 프론트엔드
- 0144 · FE4월 16일[Next.js] getStaticProps와 getServerSideProps, Next.js가 데이터에 진심인 이유“데이터는 언제 불러와야 하지?”“초기 로딩 화면이 자꾸 비어 있다…”“검색엔진에 내 콘텐츠가 안 보인다…” React로 웹 애플리케이션을 만들면서 이런 경험을 한 적이 있다면, 지금부터 소개할 내용이 반가울 것이다. Next.js의 getStati…FE · 웹개발 · 프론트엔드
- 0143 · FE4월 16일[Next.js] React는 왜 SEO에 약할까? Next.js가 해답이다“웹사이트를 만들었는데 아무도 안 온다…?”“구글에 검색해도 내 사이트가 안 나온다…?”이럴 땐 코드보다 먼저 SEO를 의심해야 한다. SEO란 무엇인가? SEO는 Search Engine Optimization, 즉 검색엔진 최적화를 의미한다. 말…FE · 웹개발 · 프론트엔드