소개
프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀
🚀 SW마에스트로 Expert 취업 멘토링
🚀 Naver Boostcamp BE 멘토 경험
🚀 FE 7Code 로드맵 강의 제작
강의
전체3수강평
게시글
질문&답변
2024.05.07
8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다.
1.강의 7.7 챕터가 문제가 있었네요. ㅠㅠㅠ ( 수정 했어요. ) 2.아래 코드 참고해 주시면 됩니다.~ https://github.com/dodokyo/yt-music-clone/blob/ch7-done/app/(site)/page.tsx
- 1
- 1
- 32
질문&답변
2024.05.02
changer라는 컴포넌트를 사용하는 이유
1) 배경화면 변경은 기본적으로 클라이언트 사이드 로직 처리 입니다. HeaderBgChanger 는 클라이언트단에서 배경 변경 처리를 위해서 만든 컴포넌트 입니다. zustand 의 전역 상태에 대응하기 위해 클라이언트 컴포넌트로 작성했어요. 이를 구현하기 위해 hook을 사용했죠. 하지만, 이슈가 있죠. 바로 초기 디폴트 배경화면이 보였다가 useEffect에 의해 변경됩니다. 2) 위 한계점을 서버 컴포넌트에서 처리 가능합니다. ( next.js 라서 가능한거죠.) 워크북에 있는 미션 내용중 하나 입니다. 참고해주세요.! ServerSide에서 초기 이미지 랜더링에 대해 처리할 수 있도록 리팩토링 하실 수 있어요. 하지만, 사용자의 인터렉션에 의해 배경화면이 바뀌는 부분은 ClientSide처리(useEffect) 를 쓰셔야 합니다.
- 0
- 2
- 53
질문&답변
2024.04.26
컴포넌트 만들때에는 jsx를 사용하는 이유?
좋은 질문 남겨주셨군요.! 1.jsx 사용한 이유는 View 만 담당하는 컴포넌트는 수정이 잦을 수 있기 때문에, 향후 유지보수를 위해 JS로 작성했습니다. tsx로 작성하는게 시간은 많이 들고 실수는 적어집니다. ( 생산성 vs 안정성 무엇이 중요한지에 따라 결정해주세요. ) *실무에서 수십, 수백개의 컴포넌트를 만드실텐데 모두 TS로 작성하고 타입이 꼬이는것을 상상해보세요. *하지만 그럼에도 충분히 개발 시간이 있고, 0.05%의 실수도 용납이 안된다면 Type으로 꽉잡는게 좋죠. React.FC 사용해주셔도 무관합니다. 가장 큰 이유중 하나가 children 입니다. 근데 리액트 18 업데이트로, FC의 암시적인 children이 삭제되었습니다. 해당 변경 사항은 https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210 에서 확인할 수 있습니다. + 실수로 올바르지 않은 타입을 컴포넌트 인자로 넘기는것을 잘 막았다면 큰틀에서 문제없다고 생각합니다.
- 0
- 1
- 119
질문&답변
2024.04.21
Hot reload 오류 문의 드립니다.
해결방법 1. 버전 낮추기 최신버전에서는 종종 이슈들이 나올 수 있습니다. npx create-next-app@latest 으로 설치하는 것 대신 npx create-next-app@14.1.0 으로 해주시면 오류가 해결될 수 있습니다. 해결방법 2. 커뮤니티에서 이슈해결한 방법 따라하기 https://github.com/vercel/next.js/discussions/60185#discussioncomment-8979577 그리고 이제 작동합니다 🤷♂ . 또한 여기에 있는 다른 사람들이 제안한 대로 .next 폴더를 삭제하고 작동하지 않는 vs-code를 다시 시작했습니다. 처음에는 작동하지만 다시 컴파일하는 동안 파일을 변경하면 내부 서버 오류가 발생합니다. 그래서 나는 다음 13번에서 next.config.js 파일에 대한 변경 사항을 주석 처리하기 시작하고 다음 14번에서 image.domains 코드를 image.remotePatterns로 업데이트하기로 결정했습니다. 또한 swcMinify: true를 제거하는 동안 어떤 이유로든 작동하게 되었습니다. 이것이 도움이 되기를 바랍니다. 어느 시점에서 이것이 작동하지 않으면 반드시 다시 보고하겠습니다. https://github.com/vercel/next.js/discussions/60185 위 링크를 참고해주세요.
- 0
- 2
- 138
질문&답변
2024.04.17
멀티 선택 단축키
맥북 기준 : 옵션 + 쉬프트 누르고 드래그하시면 됩니다. ~ ( 윈도우 : 마우스로 선택하기 Shift + Alt + 마우스 드래그 ) 참고 : https://tttap.tistory.com/185
- 0
- 1
- 94