Total12 [회원 정보 수정] react-hook-form 회원 정보 페이지에는 닉네임 변경, 프로필 사진 변경, 비밀번호 변경 및 계정 삭제를 할 수 있는 필드가 있다.회원가입 페이지를 맡으신 팀원 분이 react-hook-form을 사용하시면서 소개해주셔서, 나도 배워볼 겸 회원 정보 수정 페이지에 적용해보았다. react-hook-formReact Hook Form relies on uncontrolled form, which is the reason why the register function capture ref and controlled component has its re-rendering scope with Controller or useController.This approach reduces the amount of re-rendering.. 2023. 7. 19. [게시글 상세] 댓글 대댓글 CRUD 댓글 대댓글 구현은 상세 게시글 페이지 중 가장 시간을 많이 썼던 부분이다. 특징은 다음과 같다.최상단에 댓글 입력창이 있고 그 밑에 댓글과 대댓글이 보인다.댓글은 작성된 순서대로 정렬된다.댓글 창에는 본인이 쓴 글이라면 수정 및 삭제 버튼이 보인다.수정 버튼을 누르면 해당 댓글란이 기존 댓글 내용을 담은 입력창으로 바뀌고 수정 및 삭제 버튼이 등록 및 취소 버튼으로 바뀐다.삭제 버튼을 누르면 댓글이 삭제된다.'댓글 추가' 버튼을 누르면 해당 댓글 밑으로 새로운 입력창이 뜨고 대댓글을 입력할 수 있다.대댓글 입력창이 뜨면 '댓글 추가' 버튼은 '취소' 버튼으로 바뀌고, 이를 클릭하면 입력창이 사라진다.대댓글이 입력되면 해당 댓글 바로 아래에 작성 순서대로 정렬된다.댓글과 마찬가지로 수정과 삭제가 가능하다.. 2023. 7. 1. [게시글 상세] 게시글 상세 페이지 구조 사용자가 목록에서 읽고 싶은 게시글을 클릭하면 해당 게시글 상세 페이지로 이동한다. 백엔드에서 넘어오는 데이터는 다음과 같다.게시글 id게시글 카테고리게시글 제목작성자 멤버 id게시글 작성자 닉네임게시글 작성자 프로필 사진게시글 작성 시간좋아요 (눌렀으면 1, 아니면 0)좋아요 개수북마크 (눌렀으면 1, 아니면 0)고정 (눌렀으면 1, 아니면 0)태그태그 id태그댓글댓글 id작성자 닉네임작성자 프로필 사진작성 시간내용parent id 한번에 이 모든 데이터가 넘어오기 때문에, Post Detail이라는 전체를 조합하는 컴포넌트(페이지)에서 이 데이터를 받고 Props로 각 컴포넌트에 필요한 데이터를 내려주기로 했다.페이지를 구성하는 큰 단위의 컴포넌트는 다음과 같다.Post Title: 최상단의 제목란.. 2023. 6. 22. [Navbar] Redux-toolkit 활용: 로그인/비로그인 구분, 프로필 관리 회원가입 및 로그인 화면을 제외하고 나브바는 항상 좌측에 두자고 wireframe을 짰다.처음에는 디자인 및 스타일 구현에 시간을 많이 쓰고 싶지 않아서 Matine UI를 사용하기로 팀원들과 결정을 했다. Vite도 지원하니 괜찮겠다 싶어서 골랐는데, 나중에 조금씩 수정하려고 보니 이 컴포넌트는 emotion을 쓰고 있었다.우리는 styled-components를 쓰기로 한 상황이었고, 또 기존 코드에 맞춰서 수정하는 게 새로 만드는 것보다 시간이 더 걸릴 거 같았다.그래서 디자인 참고는 하되, 그냥 새로 만들자고 결정하게 되었다. 최상단은 비회원일 시 로그인 페이지로 가는 로그인 버튼, 회원일 시 본인 프로필 사진과 닉네임을 보여주도록 구현했다.그리고 원래 홈화면에 넣으려고 했던 미세먼지 알림을 그.. 2023. 6. 9. 프로젝트 시작하기: Vite + React in TypeScript + ESLint + Prettier 첫 팀 프로젝트에서 CRA를 사용하지 않고 Vite를 사용하여 프로젝트를 세팅해보았다. CRA(Create-React-App)는 여러 라이브러리나 패키지 설치 및 설정을 따로 할 필요 없이 바로 시작할 수 있는 환경을 제공해주기 때문에 간편하다는 장점이 있다. 하지만 사용하지 않는 모듈들도 많이 담고 있어 앱 자체가 크고 무겁다는 단점이 있다. 또한 번들러로 webpack을 사용하는데, webpack은 다른 번들러에 비해 속도가 느리다.반면 Vite는 CRA보다 더 빠른 개발 환경과 효율적인 프로덕션 빌드를 제공한다.https://juhyojin.tistory.com/2 Vite를 사용하는 이유Vite를 사용하는 이유는 빠른 개발 환경과 효율적인 프로덕션 빌드 때문이다. 빠른 서버 구동: esbuild로.. 2023. 6. 6. Vite를 사용하는 이유 Vite를 사용하는 이유는 빠른 개발 환경과 효율적인 프로덕션 빌드 때문이다. 빠른 서버 구동: esbuild로 사전 번들링, Native ESM을 통한 동적 Import Vite는 사전 번들링(pre-bundling)을 webpack과 비교했을 때 속도가 10~100배나 빠른 esbuild를 사용하고 있다. 사전 번들링이란 사이트를 로컬로 로드하기 전에 프로젝트 dependencies를 미리 번들로 제공하는 것을 말한다. 우리가 npm run dev 혹은 yarn dev를 입력하면, 프로젝트 전체의 모든 소스 코드들을 하나의 파일로 빌드하는 과정을 거치게 된다. 서버 실행 전에 브라우저가 이해할 수 있도록 파일들을 변환하는 과정을 거쳐야만 서버를 띄울 수가 있다. 그래서 프로젝트 규모가 클수록, 관계가.. 2023. 6. 5. Previous 1 2 Next
