Total10 [게시글 상세] 게시글 상세 페이지 구조 사용자가 목록에서 읽고 싶은 게시글을 클릭하면 해당 게시글 상세 페이지로 이동한다. 백엔드에서 넘어오는 데이터는 다음과 같다.게시글 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
