10/16

프로젝트 계획서 작성

10/19

회원가입 폼 Ant-design + axios + storybook 적용시키기

10/20

19일 내용에서 추가로 Context-API 적용 시켜서 처리하기

기존에 Api쪽에서 데이터 처리하는 부분을 다른 곳에서도 처리할 수 있게 구현

function LoginForm() {
  const [userId, setUserId] = useState(null)
  const state = useUsersState()
  const dispatch = useUsersDispatch()
  const { data: users, loading, error } = state.users

  useEffect(() => {
    if (state.user.data) {
      console.log('로그인 성공')
    } else {
      console.log('로그인 실패')
    }
  }, [state])

 ....
 

해당 state 부분을 LoginForm에서 사용할 수 있게 만든다.

10/21

1. 기존 20일에 사용한 코드를 내가 이해할 수 있는 Context API 코드로 수정했다.
2. 회원가입 폼을 ant-design을 통해 간단히 만들었다.

10/22

1. 로그아웃 버튼을 구현하여 해당 버튼을 누르면 세션스토리지의 해당 로그인 토큰과 관련된 부분을 제거한다.

10/24

1. 팀원이 나의 코드가 필요하여 develop으로 PR을 보내 이를 merge 시켰고 다른 팀원도 이를 적용하기 위해
2. 간단하게 CSS 전반적 적용 및 Email outline 추가

1. git branch merge

로컬에서 develop 으로 브런치 옮기신다음에 pull로 최신으로 땡겨받고 (내가 올린 merge한 PR부분)
다시 각자 브런치로 가서 merge한 후 작업한다. 

• 간단히 원격에서 khw970421코드를 develop으로 PR을 한 것을 merge 했으므로 해당 부분은 만약 다른 사람의 경우
  로컬 develop 브랜치에서 해당 부분을 pull하고 로컬 develop과 khw970421의 코드를 merge(병합) 시키면 코드가 동기화된다.

• vscode에서 병합의 경우 분기병합을 이용한다.

• 분기병합을 누르면 원하는 분기할 대상을 선택할 수 있다.
  (예를들어 khw970421 브랜치에 develop을 병합하기 원하면 develop 브랜치를 병합할 분기로 선택하여 적용하면 된다. )

2. 회원가입 / 로그인 폼 CSS

• 로그인 폼

linear-gradient를 통해 배경이 매력적으로 만들었고 가입하기 부분이 좀더 잘보이게 font-weight:bold를 부여하였다.

• 회원가입 폼

Email icon이 보이게 import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons' MailOutlined를 사용하였고 이메일을 입력하지않으면 오류가 뜨게 Input 태그 타입을 지정했다.

        <Input
          prefix={<MailOutlined className="site-form-item-icon" />}
          type="email"
          placeholder="Email"
        />

10/25

1. 중간 발표 ppt 1차 작성
2. create에 meta 데이터 추가도 정상적으로 추가되는지 체크
3. 팀원에게 Rest API 관련 token 개념 설명하기

10/26 (TIL링크)

1. 사용자 정보 수정 API 작성 및 페이지 컴포넌트 작성
2. 사용자 비밀번호 정보 수정 API 작성 및 페이지 컴포넌트 작성
3. 해당 1,2번의 API와 컴포넌트 모듈 분리
4. axios에서 body와 header태그 및 Authorization token 넣는 방법 이해

10/27

1. 내정보페이지 수정에서 가져온 사진을 보여주고 원하는 파일을 업로드하고 관련 내용을 props 및 styled 컴포넌트와 useState , useEffect 사용

10/28 (TIL링크)

1. 세션스토리지 모듈 분리
2. getAuthUser 코드 수정

10/29 (TIL링크)

11/1 (TIL링크)

사진 업로드 기능 구현

11/3

1. 전반적인 UI 디자인 변경

기존에 각각의 페이지 마다도 통일되지않았던 디자인을 통일시켰다.

2. 삭제기능 구현

const onClickDeleteBtn = (removeId) => {
    setPostList(
      postList.filter(({ postId }) => {
        return postId !== removeId ? true : false
      }),
    )
  }

기존에 삭제 후 새로고침처럼 다시 처음 고정된 채널에 돌아가는 것을 막고자 구현을 하였고
PostList를 가지고 있는 배열을 순회하며 삭제할 같은 아이디라면 그 대상만 배열에서 없애준 리턴값을 setPostList를 통해 useState의 값을 변경해주어
렌더링이 되면서 삭제가 되듯이 UI에서 결과를 확인할 수 있다.

3. merge 에러 해결

4. netlify 배포

배포시 주의할 점
github와 특정 branch와 연결시켜 사용하면 더 쉽게
해당 브랜치가 업로드되면 저절로 netlify 내용도 바뀌게 한다.

회고

공통 목표

• 바텀 업 방식으로 컴포넌트를 모듈화 하여 개발을 진행 하기로 함
• 기능 중심 개발하기
• 개발자 역량에 맞게 개발하기 (각자 할 수 있는 만큼)
• 각자의 잘하는 영역을 담당하기

좋았던 부분

• 팀원끼리 트러블 없이 팀프로젝트를 수행한 것이 다행이라고 생각한다
• 팀원들간의 알고 있는 지식이 다르기 때문에 React에 이해가 높은 팀원이 다른 팀원을 알려주고 API 다루는 것에 이해가 높은 팀원이 다른 팀원을 알려주면서 팀원 전체의 이해도를 높이는 노력을 수행했다
• 프로젝트간 오프라인 만남을 늘려, 서로의 에러를 가까이서 고민하고 함께 해결하려고 노력했다.

아쉬웠던 부분

• 기획을 더 구체적으로 하지 못한 점
• API 부분을 개발할 때 비슷한 코드임에도 각자 함수를 만들고 나중에 수정하려니 시간도 많이 들어간 부분이 API 코드를 미리 전체적으로 통합했으면 어떨까 하는 아쉬움이 있다
• 컴포넌트 분리화를 통해 모듈 관리하기
• useCallback, useMemo 등을 활용하여 컴포넌트 최적화 작업하기
• UX를 신경 쓰지 못한 점(e.g. header의 로고를 클릭하면 메인페이지를 이동하는 등)
• Storybook을 이용하여 UI 문서화 작업하기
• 디자인을 최종 프로젝트 전날에 급하게 바꾼 것에 대해 Canva 와 같은 디자인 로고를 만드는 페이지를 통해 미리 디자인(로고)을 조금은 만들어 두었어야 한다고 생각이 든다
• 프로젝트에 대한 소통이 잘 되지 못한 점

프로젝트 개인 후기

나 : 과거에 팀플을 해본적은 있었지만 이렇게 각각 브랜치를 파서 합치고 하는 것은 처음이었어서 그 과정에서 과거에 두려워했던 충돌 에러도 해결해볼수 있는 경험이었고, 팀원간의 요구사항을 맞추며 서로 모르는 부분을 공유하고 팀원간의 이해도를 맞추며 혼자 하면서는 알수없었던 팁이나 방법, 툴 등을 배울수있었다. 리액트를 처음 배워 쓰다보니 프로젝트 기간동안 이해하고 습득하는 시간이 부족했어서 많은 기능구현을 못한것은 아쉬웠다.

A : 팀장으로서 부족했던 능력으로 여러 아쉬움이 있었다. 또한 컴포넌트 적화 및 분리를 제대로 못한 것에 대해 많이 아쉬움이 있지만 추후에 리팩토링을 거치면서 지속적으로 업데이트 할 예정이다. 비동기 처리, 낙관적 업데이트, 컴포넌트 렌더링 과정 등 많은 지식과 경험을 쌓을 수 있어서 매우 좋았다.

B : Git으로 프로젝트를 진행한 것이 처음이었기 때문에 미숙한 점이 많았지만, 팀원들의 도움으로 프로젝트 및 커밋 메시지 관리 방법을 배워서 좋았습니다. 아쉬운 점은 기능이나 화면 구성 및 역할분담을 더 세밀하게 하지 못한 것과, 리액트 이해도가 부족하여 팀에 많은 기여를 하지 못한 것 입니다.
또한 컴포넌트 최적화 및 분리를 제대로 못한 것에 대해 많은 아쉬움이 있지만 추후에 리팩토링을 거치면서 지속적으로 업데이트 할 예정이다.
비동기 처리, 낙관적 업데이트 , 컴포넌트 렌더링 과정 등 많은 지식과 경험을 쌓을 수 있어서 매우 좋았다.