Front-end11 잘못된 추상화 바로잡기 - DRY(Don't Repeat Yourself) 출처: https://swizec.com/blog/dry-the-common-source-of-bad-abstractions/ 이번 글에선 외부 자료를 참고하여 리팩토링의 첫번째인 반복되는 코드줄이기 (DRY: Don't Repeat Yourself)를 해본다. 왜 DRY를 사용할까?console.log(1)console.log(2)console.log(3)console.log(4)// ... 우리는 항상 이런 코드는 반복문을 사용해서 DRY 코드로 바꿔야 한다. for (let i = 1; i 아주 기본적인 예시로 실무에서 이런 코드는 쓸 일이 없을거다. 하지만 여기에 몇가지 예시를 더 해본다면 비슷하게 적용할 수 있다. 예를 들어const NavigationMenu = () => { return .. 2024. 8. 7. Next.js 14 SSR, Tanstack Query prefetchQuery 활용법 With LCP 단축으로 웹 성능 개선 기존 아트인포 는 CSR Suspense 방식으로 메인페이지가 구현되어 있었다.성능 측정을 하였을때 LCP에서 아쉬운 결과가 나왔다.Largest Contentful Paint(LCP)란?LCP는 뷰포트 내에서 가장 큰 콘텐츠 요소의 로드 시간을 측정하는 성능 지표로, 페이지가 사용자에게 시각적으로 준비되기까지 걸리는 시간을 나타냅니다. 이는 빠르고 매력적인 사용자 경험을 만드는 데 중요한 요소입니다. 출처: https://web.dev/articles/optimize-lcp?hl=ko 최대 콘텐츠 렌더링 시간 최적화 | Articles | web.devLCP 분석 및 개선이 필요한 주요 영역을 파악하는 방법에 관한 단계별 안내web.dev 아트인포 특성상 이미지 위주의 컨텐츠로 이미지 포멧변환.. 2024. 7. 24. Next.js 14 Next-auth를 사용한 로그인 구현 Next-auth란?Next.js에서 사용하는 인증 라이브러리로 소셜 로그인을 간단하게 구현 할 수 있고일반적인 백엔드서버와의 로그인 방식(JWT)도 적용이 가능하다.오늘은 내가 아트인포에 적용한 방식에 대해 얘기해 보려한다. /api/auth/[...nextauth]/route.tsconst handler = NextAuth(authOptions)export { handler as GET, handler as POST }export const authOptions = { pages: { signIn: "/auth/sign-in", signOut: "/auth/sign-in", error: "/auth/sign-in", }, session: { maxAge: 60 * 60 * .. 2024. 7. 23. Next.js 14 디렉터리 구조 Next.js 뿐만 아니라 개발을 처음 시작할 당시부터 폴더, 컴포넌트 구조 등 아키텍처에 관한 고민들은 항상 많았습니다.그래서 현재 아트인포의 구조를 정리해보았습니다. my-app/│├── components/ # 재사용 가능한 컴포넌트│ ├── common/ # 전역적으로 사용되는 컴포넌트 (버튼, 헤더, 푸터 등)│ ├── container # 컨테이너 컴포넌트 │ ├── list # 예: NewsList, JobsList, LessonsList 사용하는 컴포넌트가 적어 하위폴더를 구분 x│ ├── card # 예: NewsCard, JobCard, LessonCard │ ├── form # job,les.. 2024. 7. 22. 이전 1 2 3 다음
