20조 REWIND Frontend

Team

• Frontend : 오세명,한우석 (REACT)
• Backend : 오준석,최선강 (SPRING)
  
  
  

REWIND란?

• 그 동안 Backend,Frontend가 공부하고 정리했던 내용들을 각 프레임워크별 (Spring,React,Node.js)로 모두 공유할 수 있는 게시판을 구현하려고 합니다. 게시판은 기본적으로 메인페이지에 모든 프레임워크들의 게시글들이 한번에 보여지며 각 카테고리속에는 그에 해당하는 게시글들만 보여집니다. 유저는 로그인을 하여야 기본적인 서비스를 이용할 수 있습니다.

작업을 하기전 우리에게 질문을 몇가지 던져 보았다.

1. 우리가 관리해야할 state가 무엇일까?

• 애플리케이션이 동작하기 위한 핵심 데이터(App State)
  • 애플리케이션이 무엇을 지금 하고있는지 나타내는 데이터(UI State)

const store = {
  user: userReducer(state, action),
  posts: postsReducer(state, action),
  comments: commentsReducer(state, action),
};

// in userReducer, initialState
const initialState = {
  email<String>: '',
	nickname<String>: '',
};

// in postsReducer, initialState
const initialPostsState = {
  byId: {
    [포스트의 고유한 아이디1]: { postId1, title, author, contents, nickname, insertDt, commentCnt },
  },
  allIds: [1]
};

// in comments, initialState
const initialCommentsState = {
  byId: {
	  [코멘트의 고유한 아이디1]: { 코멘트 아이디1, 유저 이메일, 포스트 아이디, 닉네임, 컨텐츠, insertDt },
	},
	allIds: [1]
};

1. 우리가 관리해야할 Action은 무엇일까?

• ACTIONTYPE은 다음의 형식을 준수합니다: domain/eventName
  • domain: 액션이 일어난 카테고리
  • eventName: 액션을 구체적으로 묘사하는 것.

    (ex) 유저가 로그인을 함
    export const LOGIN = 'user/LOGIN';

1. Action에 따라 진행되는 reducer의 로직은 어떻게 되는 것일까?

   1. 유저

      export const LOGIN = 'user/LOGIN';
      export const LOG_OUT = 'user/LOG_OUT';

   2. Posts

      export const LOAD = 'posts/LOAD';
      export const CREATE = 'posts/CREATE';
      export const DELETE = 'posts/DELETE';
      export const UPDATE = 'posts/UPDATE';

   3. comments

      export const LOAD = 'comments/LOAD';
      export const CREATE = 'comments/CREATE';
      export const DELETE = 'comments/DELETE';
      export const UPDATE = 'comments/UPDATE';

1. UI는 업데이트 된 state를 기반으로 어떻게 화면을 그려줄 것일까?

pages

1. 로그인 페이지 <세명>
2. 회원가입 페이지 <세명>
3. 메인 페이지 <우석>
4. 상세 페이지 <우석>
5. 게시글 작성 페이지 <우석>

Components

1. <Header /> <세명>
2. <PostList /> <우석>
3. <Post /> <우석>
4. <CommentForm /> <세명>
5. <CommentList /> <세명>
6. <Comment /> <세명>

최근 2주동안은 개인 프로젝트라 git을 신경쓸 일이 없어서 merge를 할 일도 없고 pull과 push만 사용했는데 협업을 하며 다시 git을 사용하니 확실히 달랐다. 1주차 때 아무것도 모르면서 사용할 때랑은 다르게 체계적으로 관리 하려고 노력 했는데 세명님께서 잘 알고 계셔서 알려주신 내용을 정리해보려고 한다.

branch를 각자 사용해서 작업을 했는데 기본적인 구조는 아래와 같았다.

내가 push :
개인 branch에 push를 함 -> PR 요청 -> mrege -> 다른 팀원이 master branch에서 pull

팀원이 push :
PR요청 확인 -> merge -> (작업중인 내용이 있다면 stash) ->master branch로 이동하여 pull -> 개인 branch로 이동 -> 개인 branch에 master merge -> stash apply

이와 같은 순서로 진행을 했는데 처음 git을 쓸때처럼 난장판이 아니라 협업을 하는 느낌이 들어서 신기했다.

이번에 작업을 하며 eslint를 적용해서 진행을 했는데 너무 제약이 많아서 이제 까지 배운 강의대로 코드를 작성하면 한줄 작성 할 때마다 오류가 떠서 적용한 첫날에 한페이지도 채 작업하지 못했다. 작업속도가 너무 느려져서 진짜 하루종일 eslint와 씨름을 했는데 그냥 지워버릴까 하는 생각이 들었지만 뭔가 오기가 생겨 계속 하다보니 결국 어느정도 적응해 있는 나를 발견했다. 아마 다음주도 적용하고 프로젝트를 진행하지 않을까 싶다.

1. git 사용법은 11일에 쓰고
2. is_equal
3. redux 구조