소개
마플, 뱅크샐러드 거쳐 현재는 당근에서 프론트엔드 엔지니어로 일하고 있습니다.
"난 네가 필요해", "너의 존재가 나에게 힘이 돼"라는 말을 좋아합니다. 이웃의 필요를 채워주고 힘이 되어 주는 것, 그게 사랑이라고 믿습니다. 좋은 강의로 여러분의 필요를 채우고 힘이 되어드릴 수 있도록 노력하겠습니다.
강의
전체3수강평
- 분량에 비해 가격이 비싼것 같습니다 ㅜ
매일매일꾸준히
2024.07.25
4
- Next.js의 은총알이 되는 강의입니다. 덕분에 많이 배웠어요!
스타현이
2024.07.16
2
게시글
질문&답변
2024.10.12
다크모드 적용
안녕하세요! 라이브러리를 사용하지 않은 이유에 대해 질문 주셨네요 🙂 크게 두가지 이유가 있었습니다. 가급적이면 TailwindCSS 외의 추가 라이브러리를 사용하지 않고 구현하고 싶었습니다. 암묵지를 최대한 줄이고 싶었어요. 제가 해당 라이브러리의 존재를 몰랐습니다. 알았다고 하더라도 1번의 이유로 지금처럼 구현했을 거 같아요. 답변이 되셨으면 좋겠네요! 다른 질문 있으시면 언제든 편하게 남겨주세요!
- 1
- 2
- 59
질문&답변
2024.10.02
PPR 적용 한 후 에러가 났습니다.
안녕하세요! PPR 적용까지 오셨군요! 고생 많으셨습니다. 설치된 Next.js 버전을 봤을 때 Canary 버전이 아닌 것 같아요. PPR은 현재 Preview 기능으로 Canary 버전을 설치하셔야 활용해보실 수 있어요. Next.js 공식 문서를 참고하셔서 Canary 버전으로 Next.js를 설치해보시고 다시 시도해봐주세요! https://nextjs.org/docs/messages/ppr-preview 이후에도 문제가 있다면 언제든 질문 남겨주세요. 감사합니다.
- 1
- 2
- 82
질문&답변
2024.09.11
CRA에서 Next.js로 마이그레이션하기에서 compilerOptions.moduleResolution bundler 불가
안녕하세요! 질문 남겨주셔서 감사합니다. 정확하게 말씀해주셨습니다. 말씀주신 것처럼 tsconfig.json 의 compilerOptions.moduleResolution 에 "bundler" 값은 TypeScript 5 이상에서 지원합니다. 때문에 해당 강의 중에 TypeScript 버전을 올리고 있습니다. 섹션 5. Next.js 설치하고 설정 파일 만들기 영상 의 15초 지점을 참고해주세요. 질문 남겨주셔서 다시 감사드리며, 영상 확인 후에도 문제가 있다면 질문 남겨주세요! 다른 질문도 언제나 환영입니다 🙂
- 0
- 1
- 44
질문&답변
2024.08.09
next/image에 대한 질문
안녕하세요. 이미지 컴포넌트에 대해 질문 남겨주셨네요! AWS로 배포했을 때 next/image 때문에 비용이 더 올라 가나요? next/image 가 서버를 활용해 이미지 최적화를 하기 때문에 어느정도의 서버 운용 비용을 증가 시킬 수 있다는 의미로 질문을 해석했습니다. 이미지의 갯수, 페이지 방문 트래픽에 따라 차이가 있을 수 있지만 일반적인 경우라면 next/image 를 사용한다고 해서 크게 차이날 정도는 아닐 것으로 예상합니다. next/image가 비용이 비싸다면 어떤 경우에 사용하는지 궁금 합니다. 이미지는 웹 서비스의 성능에 가장 많은 영향을 끼치는 요소입니다. 특히, LCP라고 부르는 지표 에 큰 영향을 줍니다. 때문에 이미지 로딩 성능을 개선하면 웹 서비스의 성능 향상에 지대한 영향을 끼칠 수 있습니다. 이를 위해 Next.js에서는 next/image 를 제공합니다. next/image 는 다음과 같은 장점을 가지고 있습니다. 디바이스 환경에 맞는 이미지 사이즈, 포맷으로의 자동 매칭 레이아웃 시프팅 이슈 해결 (레이아웃 시프팅:이미지 로드 전과 후의 크기 차이에서 발생하는 레이아웃 트러짐 현상) 이미지 지연 로딩으로 초기 로딩 속도 개선 장점에 대한 자세한 내용은 공식 문서 를 확인해보시면 좋을 것 같습니다. 결국 next/image 를 사용했을 때의 장점이 어느정도의 비용 발생보다 큰 가치를 제공한다고 판단했을 때 next/image 를 쓰는 것이라 말할 수 있을 것 같습니다. 질문 남겨주셔서 감사합니다.
- 1
- 1
- 91
질문&답변
2024.08.09
데이터 재검증 방법
안녕하세요! 질문 남겨주셔서 감사합니다. 하나씩 답변드려볼게요! 클라이언트 컴포넌트에서 어떠한 동작을 수행한 후 데이터를 재검증 하려면 route handler로 요청을 보내고 route handler 내에서 revalidateTag 등을 사용하는 방법밖엔 없는걸까요? revalidateTag 를 사용하는 이유에 대해 생각해보면 좋을 것 같습니다. 해당 함수는 캐시된 데이터를 비우고 새로운 데이터를 사용할 수 있도록 만들기 위해 사용합니다. 강의에서 캐시된 데이터는 서버에 존재하는 상태입니다. 때문에 서버에 있는 캐시를 비우기 위해 Route Handler 를 이용해 서버에서 revalidateTag 를 호출해 캐시를 비워야만 합니다. Route Handler 를 이용하지 않고 서버에서 캐시를 비우는 방법으로는 Server Actions를 활용하는 방법이 있을 수 있습니다. 이는 강의에서 다루지 않았지만 공식 문서 에서 다루고 있는 방식을 참고하시면 좋을 것 같습니다. 결국 서버에서 캐시된 값은 서버에서 해제 해야 한다는 것이 규칙임을 알 수 있습니다. 직접 새로고침하지 않고 캐시를 지움과 동시에 바로 화면상의 모습도 갱신하려면 어떻게 해야 하나요? 새로고침 없이 화면 상의 모습을 갱신하기 위해선 클라이언트 컴포넌트를 사용해야 합니다. 새로고침 없이 데이터 갱신이 필요한 곳을 모두 클라이언트 컴포넌트로 활용하는 방법입니다. 이는 기본적인 React 활용 방식과 동일하게 API 응답값을 useState 와 같은 상태로 저장해서 관리하는 방식입니다. next.js에서도 react처럼 axios를 많이 사용하나요? 이번 App Router가 등장한 Next.js 13 이후에는 fetch 사용을 권장하고 있습니다. 캐시와 같은 성능 향상의 이점을 보기 위함입니다. 하지만 사용성 등에서 불편함을 느끼고 Axios와 같은 라이브러리를 쓰는 사례도 많습니다. 관련 사례를 소개하는 글을 남겨둘게요! https://blog.deercorp.com/next-js-app-router-and-fetch-library/ 추가 질문 있으시면 언제든 남겨주세요! 답변이 도움되셨으면 좋겠습니다. 감사합니다.
- 1
- 2
- 92