728x90 반응형 React5 [Next.js] 버전 13+으로 업데이트하기 요즘 pages 디렉토리를 사용한 Next.js 이전 버전의 프로젝트에서 Next.js 13+@ 버전으로 이동하는 작업을 하고 있다. 사실 이전 작업 방법에 대해선 Next.js Docs에 잘써있는데, 그래도 한번 쓱 번역하면서 직접 처음부터 끝까지 글을 한번 쭉 보면 머리에 더 쏙쏙 박히는 것 같아서 한글로 대충 번역을 했다. 근데 이걸 또 공유해달라는 친구가 있어서 정말 러프하게 내가 보려고 대충 쓴 글이지만 블로그에 기록으로 남기려고 한다. 업데이트하는 방법은, 페이지 단위로 아래 글에 적힌 번호 순서대로 쓱쓱 따라가면 된다. 1. npm install next@latest ㄱㄱㄱ 2. src/안에 app 디렉토리를 만든다. 3. Root Layout 폴더를 만든다 - app/layout.tsx e.. 2023. 10. 7. Custom Hook Custom hook이란? React의 커스텀 훅(custom hook)은 리액트의 함수형 컴포넌트에서 상태 또는 사이드 이펙트가 있는 로직을 재사용하기 위해 캡슐화할 수 있는 특정 네이밍 규칙을 따르는 함수이다. 커스텀훅을 사용하면 복잡한 로직을 재사용가능한 함수로 만들어버릴 수 있는데, 이렇게 할 경우 코드가 깰끔해지고 컴포넌트 내 관심사 분리를 유지하기 쉬워진다. 일반 함수 vs. 커스텀훅 커스텀훅 또한 함수라고 했는데, 그렇다면 일반 함수와 커스텀 훅의 차이는 무엇일까? 1. 네이밍 규칙 커스텀훅들은 "use"라는 이름으로 시작해야 한다(예: useFetchData). 이를 통해 리액트가 이 친구가 커스텀훅이라는걸 알 수 있게 되고, 리액트 내부에서 진행되는 특정 최적화 작업의 대상이 될 수 있다.. 2023. 8. 16. [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (2) (feat. getBoundingClientRect()) 본 포스팅은 전편 [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1)에 이어서 작성한 글입니다! 전편: 2021.08.25 - [Learn to Code] - [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) 요즘 파이널 프로젝트로 만든 사각사각을 전면 개편하고 있다. 처음 개발 당시 UI와 기능 구현에 급급해 큰 신경을 써주지 못했던 최적화라던가 좀 더 세밀한 기능 구현이라던가와 같은 부분들 seo-tory.tistory.com 지난번 편에선 Drag & Drop API를 사용해서 ⬅️요쪽에서 ➡️요쪽으로 (??) 옮기는 코드를 어떻게 작성하면 되는지 그 단계를 살펴보았다. 이번엔.. 2021. 8. 26. [프로젝트] 실시간 화상채팅앱을 개발했어요! (feat. Socket.IO & WebRTC) 🎞 YouTube 발표 영상 GitHub: https://github.com/codestates/sagaksagak-client Wiki: https://github.com/codestates/sagaksagak-client/wiki 발표자료: https://drive.google.com/file/d/1bcdIMkNRRMhKfTnFa8Q-156mqki6uf8V/view 세오GitHub: https://github.com/ksyksy815 이번 포스트에선 이제 막 마무리짓게 된 실시간 멀티유저 화상채팅 기능을 구현한 파이널 프로젝트에 대해서 소개하고자 한다. 📃 개요 사람들마다 공부 스타일은 모두 다르다. 어떤 사람들은 아주 조용한 곳에서 혼자 있을 때 엄청 집중을 잘하고, 어떤 사람들은 카페나 도서관같은.. 2021. 7. 21. [React] 커스텀 훅(Custom Hook)을 사용한 간단한 회원가입 페이지 만들기 React Hook 등장 배경 리액트에서 훅(Hook)이란 함수 컴포넌트에서 리액트의 기능들을 사용하게 해주는 함수이다. 훅은 2019년 2월 16일에 나온 React 16.8부터 사용이 가능하게 되었기 때문에, 리액트가 처음 출시된 2013년 5월부터 2019년까지 약 6년 동안은 리액트의 여러 기능들을 사용하기 위해선 함수 컴포넌트가 아닌 클래스 컴포넌트만을 사용해야한다는 제약이 있었다. 클래스 컴포넌트는 코드를 작성함에 있어서 직관적이지 못하거나 코드를 길게 만드는 요소들이 상당히 많이 있었다. 예를 들어, 똑같은 기능의 코드임에도 불구하고 컴포넌트의 생명주기(lifecycle) 메소드에 맞추어 따로 작성을 해서 로직이 분리되는 경우가 발생한다던가, 아니면 메소드를 사용하기 위해 끊임없이 bind(.. 2021. 6. 5. 이전 1 다음 728x90 반응형
