[6주차] 포켓돈 미션 제출합니다. by 9yujin · Pull Request #10 · CEOS-Developers/react-blog-15th

9yujin · 2022-05-20T16:03:13Z

배포링크

https://react-blog-15th-dhra2rce1-9yujin.vercel.app/

TODO

기본적인 CRUD를 구현합니다.
메인 페이지, 포스트 상세 페이지, 에디터 페이지로 구성합니다.
메인 페이지에서는 각 포스트들의 제목과 작성 날짜를 리스트 형태로 보여줍니다.
포스트 상세 페이지에서는 제목, 작성일, 본문의 내용을 표시합니다.
포스트를 수정할 때에는 기존에 작성된 내용을 에디터 페이지로 불러옵니다.
포스트 삭제 기능을 구현합니다.
성능 최적화를 위한 방법을 적용해 봅니다.
[Optional] 웹 폰트를 사용합니다.
[Optional] 카테고리 기능을 구현합니다.

Directory Structure

/pages: auto routed pages by next.js
- index.tsx: Entry point file that renders the React component tree
- _app.tsx: providers
- store.tsx: store setup
- rootReducer.tsx: root reducer (optional)
/store
- /modules
  - todoSlice.tsx: 리듀서 모듈
  - index.tsx: 리듀서 모듈 통합
- index.tsx: (store 생성 && wrapper 생성)
/freatures: contains all feature folders
- /todos: a single feature folder
  - Todos.tsx: a React component
/hooks: custom hooks
/shared: util functions, interfaces, enums
/styles: global style (+reset), theme (+media query)

Key Questions

Next.js를 사용하는 이유, SEO란?

Next.js는 React를 기반으로 한 Framework이며, SSR를 구현하고 SEO에 유리하기 때문에 사용한다. Next.js는 Server에서 받은 사용자의 접속 요청을 초기에 SSR방식으로 렌더링 될 HTML을 보내고, 브라우저에서 JavaScript를 다운로드하고 React를 실행하기 때문에 SEO가 가능하다. 또한 다른 페이지로 이동할 경우 CSR방식으로 Server가 아닌 브라우저에서 처리함으로써 SPA장점도 유지할 수 있다.

SSR 구현의 편의

SSR 이나 Code Splitting 같은 기능을 직접 구축하여 사용하는 것은 유지보수 측면에서 부담이 된다.

Next.js의 작동원리

초기에 사용자가 Server에 페이지 접속을 요청하면, SSR 방식으로 랜더링 될 HTML을 보낸다.

브라우저에서 JavaScript를 다운로드하고 React를 실행한다.

사용자, 페이지가 서로 상호작용하여 다른 페이지로 이동할 땐, SSR이 아닌 CSR 방식으로 브라우저에서 필요한 작업을 처리한다.

검색 엔진 최적화 (Search Engine Optimization)

CSR은 검색 엔진 최적화에 불리하기 때문에 SSR을 구현하여 검색 엔진 최적화를 실현할 수 있다.

검색 엔진 작동 원리

검색 엔진 봇들은 사이트의 데이터를 크롤링 할 때, JavaScript 파일을 해석할 수 없다는 특징을 가졌다. 때문에 HTML 파일에서 크롤링을 진행한다.

CSR 방식은 Client 측에서 페이지를 구성하기 전까지 HTML에 아무것도 없으므로 데이터를 수집할 수 없는 상태이기 때문에 검색 엔진 노출이 불리하다.

반면 SSR은 Server 측에서 화면을 그려서 보내주는 방식이다. 때문에 HTML 안에 이미 컨텐츠들을 포함하고 있는 상태이며, 크롤러 봇들이 데이터를 수집하는데 수월하다.

성능 최적화를 위해 사용한 방법

포스트 상세 페이지의 경우 SSG로 구현했습니다. SSR, SSG에 대한 이해가 부족하여, 리덕스 내의 전역 상태를 업데이트 하는 과정에서 생긴 오류를 해결하지 못하고 과제를 제출합니다.

전반적인 협업 과정

각자 이름으로 브랜치를 만들어서 기능단위로 작업 후 dev 브랜치에 merge 하며 진행했습니다. 본 프로젝트에서는 깃 플로우를 공부해서 체계적인 협업을 진행해야겠다고 생각했습니다.

9yujin

feat: 리덕스 모듈 추가

chore: 전역 상태 초기화 JSON 데이터 기반으로 변경

chore: RTK 적용 action 완성

feat: use next redux wrapper

…드 추가

…into 9yujin

chore: RTK logger middleware 추가, RootState, AppDispatch type export 코…

9yujin

backup

mockdata

feat: editor/[postId] page 구현

feat: 새 글 작성 버튼 구현

feat: 수정 후 홈 화면으로 이동

9yujin

fix: build error

chaaerim

안녕하세요! 6주차 코드리뷰 파트너 김채림입니다 !!
만드신 블로그 보고 벨로그가 떠올라서 반가웠습니다🤗 (벨로그 의도하신거 맞겠ㅈ ㅛ ..? )
다만 리덕스를 사용해본적이 없어 공부한다는 마음으로 책 펴놓고 코드를 봤어요 ,,
어디서 오류가 발생했는지 찾아보고 싶었는데 리덕스 코드를 자세히 보는 것이 처음이라 아무 도움도 드리지 못한 것 같아 죄송해요,, , ㅠ
저희도 리덕스를 사용해볼까 고민중이었는데 코드 보고 많이 배워갑니다.
그럼 스터디 시간에 뵙겠습니다!!!!!!!!

chaaerim · 2022-05-22T07:58:05Z

components/PostItem.tsx

+import React from 'react';
+import styled from 'styled-components';
+import dayjs from 'dayjs';
+function PostItem({ data }: any) {


앗 any 발견 ,,, ~ . ~

chaaerim · 2022-05-22T08:01:41Z

components/PostItem.tsx

+  overflow: hidden;
+  text-overflow: ellipsis;


우와 말줄임 이렇게 표시하면 되는군요

chaaerim · 2022-05-22T08:28:14Z

store/modules/postsSlice.tsx

@@ -0,0 +1,43 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';


어려운 리덕스... 첫줄부터 공부하고 갑니다.........

chaaerim · 2022-05-22T08:34:02Z

store/modules/postsSlice.tsx

+      const newPost: IPost = {
+        postId: nextPostId,
+        title: action.payload.title,
+        content: action.payload.content,
+        date: action.payload.date,
+      };


리덕스 상태를 변경시키기 위해서는 action을 호출해야한다는게 이거였군요,,

chaaerim · 2022-05-22T08:53:21Z

pages/editor/index.tsx

+  function handleSubmitBtnClick() {
+    const now = dayjs();
+    const postToAdd = {
+      postId: 'dummy',
+      title: title,
+      content: content,
+      date: now.format(),
+    };
+    addPostTrigger(postToAdd);
+    const nextPostId = posts.length + 1;
+    // router.push(`/detail/${nextPostId}`);
+    router.push(`/`);


여기서 저장은 되는 것 같은데 메인 페이지에서 기존 게시물을 누르면(어떤 게시물을 눌러도) 바로 array가 4개로 다시 세팅되어 버리네요ㅠ 오류를 찾고 싶은데 리덕스를 처음봐서 잘 안보여요 흐흐흐긓ㄱ

siwonblue

안녕하세요.
코드리뷰 파트너 전시원입니다.
홍대 시험기간이라고 들었는데 과제 하시느라 정말 수고 많으셨습니다.

스터디때 뵙겠습니다.
감사합니다.
시원 드림.

siwonblue · 2022-05-22T08:58:14Z

assets/json/posts.json

+    {
+      "postId": "1",
+      "title": "포켓돈짱",
+      "content": "삽질하느라 죽는줄 알았슴다...ㅠㅠㅠ흐극긓흑흑 \n이렇게 줄바꿈도 할 수 있어요.",


규진 성우팀이 늦길래 의아해서,
많은 기능을 넣으려다 시간 부족으로 그럴 거라 생각했는데 역시 맞는 거 같네요 ㅎㅎ..

siwonblue · 2022-05-22T09:00:55Z

components/PostItem.tsx

+import styled from 'styled-components';
+import dayjs from 'dayjs';
+function PostItem({ data }: any) {
+  const date = dayjs(data.date).format('YYYY.MM.DD');


siwonblue · 2022-05-22T09:08:54Z

pages/detail/[id].tsx

+  h1 {
+    color: ${({ theme }) => theme.color.blue};
+    font-size: 2rem;
+    font-weight: 700;
+    padding: 50px 0;
+  }
+
+  button {
+    margin-left: 10px;
+    font-size: 1rem;
+  }


이런 식으로 설정가능한지 처음 알았네요 배워갑니다

siwonblue · 2022-05-22T09:16:02Z

pages/editor/index.tsx

+    e:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>
+  ) {
+    const { value, name } = e.target;


저는 handler 를 두 개 썼는데 이런 식으로 하나로 할 수도 있군요!

9yujin and others added 30 commits May 18, 2022 22:30

feat: initial setting

8898131

Initial commit

bba4578

Initial commit

e629a1e

feat: index page style

97c4ce4

Merge pull request #1 from pokedon-front/9yujin

078fd89

9yujin

feat: 리덕스 모듈 추가

9dd6abf

Merge pull request #2 from pokedon-front/24siefil

139dbd9

feat: 리덕스 모듈 추가

chore: 전역 상태 초기화 JSON 데이터 기반으로 변경

464fc9f

Merge pull request #3 from pokedon-front/24siefil

d0b690b

chore: 전역 상태 초기화 JSON 데이터 기반으로 변경

chore: RTK 적용 action 완성

197c05a

chore: RTK 디랙토리 구조 변경

1f974bd

Merge pull request #4 from pokedon-front/24siefil

f8d3c63

chore: RTK 적용 action 완성

feat: use next redux wrapper

e267d03

Merge pull request #5 from pokedon-front/9yujin

18bd00e

feat: use next redux wrapper

chore: RTK logger middleware 추가, RootState, AppDispatch type export 코…

0036953

…드 추가

머지용 커밋

59f46b1

Merge branch 'dev' of https://github.com/pokedon-front/react-blog-15th …

7823ee3

…into 9yujin

Merge pull request #6 from pokedon-front/24siefil

576f8ac

chore: RTK logger middleware 추가, RootState, AppDispatch type export 코…

머지용 커밋

96f5ea9

feat: detail page

5f99549

feat: getstaticpaths in detail page

df0b2d6

Merge pull request #7 from pokedon-front/9yujin

47e8080

9yujin

backup

af7b2c4

Merge pull request #8 from pokedon-front/24siefil

24341b4

backup

mockdata

823b8e9

Merge pull request #9 from pokedon-front/9yujin

bb129fc

mockdata

feat: editor/[postId] page 구현

b257b3b

Merge branch 'dev' of github.com:pokedon-front/react-blog-15th into dev

671a325

feat: editor/index 구현

63a7c9f

Merge pull request #11 from pokedon-front/24siefil

f4c82e3

feat: editor/[postId] page 구현

sungwoo-shin and others added 9 commits May 20, 2022 22:39

feat: 새 글 작성 버튼 구현

142d46c

Merge pull request #12 from pokedon-front/24siefil

a365d9d

feat: 새 글 작성 버튼 구현

feat: 수정 후 홈 화면으로 이동

5132e6e

Merge pull request #13 from pokedon-front/24siefil

347cb2f

feat: 수정 후 홈 화면으로 이동

머지용 커밋

ff0325b

머지용 커밋

555dad6

Merge pull request #14 from pokedon-front/9yujin

8f0b7e5

9yujin

fix: build error

11cf9dd

Merge pull request #15 from pokedon-front/9yujin

71a2583

fix: build error

chaaerim reviewed May 22, 2022

View reviewed changes

siwonblue reviewed May 22, 2022

View reviewed changes

9yujin and others added 2 commits May 22, 2022 21:58

Update README.md

4884086

Update README.md

8ff31a0

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[6주차] 포켓돈 미션 제출합니다.#10

[6주차] 포켓돈 미션 제출합니다.#10
9yujin wants to merge 41 commits intoCEOS-Developers:mainfrom
Team-PokeDon:dev

9yujin commented May 20, 2022 •

edited

Loading

Uh oh!

chaaerim left a comment

Uh oh!

chaaerim May 22, 2022

Uh oh!

chaaerim May 22, 2022

Uh oh!

chaaerim May 22, 2022

Uh oh!

chaaerim May 22, 2022

Uh oh!

chaaerim May 22, 2022

Uh oh!

siwonblue left a comment

Uh oh!

siwonblue May 22, 2022

Uh oh!

siwonblue May 22, 2022

Uh oh!

siwonblue May 22, 2022

Uh oh!

siwonblue May 22, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		@@ -0,0 +1,43 @@
		import { createSlice, PayloadAction } from '@reduxjs/toolkit';

Conversation

9yujin commented May 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

배포링크

TODO

Directory Structure

Key Questions

Next.js를 사용하는 이유, SEO란?

성능 최적화를 위해 사용한 방법

전반적인 협업 과정

Uh oh!

chaaerim left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

siwonblue left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

9yujin commented May 20, 2022 •

edited

Loading