1. 프로젝트 기간

• 2021 / 02 / 22 ~ 2021 / 02 / 26 - 1차 클론
• 2021 / 03 / 02 ~ 2021 / 03 / 12 - 2차 리액트 전환

2. 적용 기술

• HTML, CSS
• JavaScript
• React
• SCSS
• Fetch API
• Git

3. 주요 기능

• 로그인 & 메인 페이지 레이아웃 구현
• 로그인 페이지 주요 기능
  ✅ 회원가입 및 로그인 기능 구현
  ✅ 양식에 맞지 않는 입력 시 경고 표시
  ✅ 회원정보 인증 & 인가를 통한 로그인 기능 추가 구현
• 메인 페이지 주요 기능
  ✅ 사용자 검색 기능 구현 ( 자바스크립트 & 리액트 )
  ✅ 좋아요, 댓글 기능 구현 ( 자바스크립트 & 리액트 )
  ✅ 스토리 및 피드 이미지 슬라이드 구현 ( 자바스크립트 & 리액트 )
  ✅ 피드 무한 스크롤 구현 ( 자바스크립트 )
  ✅ 게시물 등록 구현 ( 리액트 )
  ✅ 추천 리스트 팔로우 구현 ( 리액트 )
  ✅ 피드 삭제 기능 구현 ( 리액트 )

4. 프로젝트 후기

4-1. 자바스크립트와 리액트 차이

• 자바스크립트 클론 후 느낀점
  ❌ 반복되는 HTML 구조 및 자바스크립트 코드가 많아진다.
  ❌ DOM 에 접근하고 이벤트 함수를 작성하기까지 코드가 길어진다.
  ❌ innerHTML 을 통한 HTML 요소 추가를 위한 코드의 가독성이 떨어진다.
• 리액트 전환 후 느낀점
  🟢 DOM 에 직접 접근하지 않고 JSX 와 props , state 를 이용하여 뷰를 바로 작성해갈 수 있었다.
  🟢 map 함수를 활용해 반복되는 HTML 구조를 해결할 수 있었다.
  🟢 node.js 를 사용해 필요한 패키지들을 설치해 바로 사용할 수 있었다.
  🟢 공통되는 HTML 구조를 컴포넌트 단위로 나누어 재사용이 가능했다.
  🟢 컴포넌트 단위로 분리하여 수정하고 싶은 부분을 쉽게 찾을 수 있었다.
  🟢 CRA 를 통해 기본적인 개발 환경을 자동으로 세팅해줘 개발하기 편리했다.

4-2. 백엔드와 HTTP 통신

• 자바스크립트로 구현했을 때는 로컬에서 데이터를 만들어 직접 구현했다.
• 필요한 데이터들을 직접 찾고 저장하여 개발 외에 보내는 시간이 너무 많았다.
• 리액트로 전환하면서 fetch() 함수를 활용했다.
• 백엔드 분들과 함께 데이터를 통신하며 요청과 응답을 통해 원하는 데이터를 보내고 받아봤다.
• 모든 데이터들을 요청을 통해 받아오기 때문에 실행되는 함수들의 구조를 변경해야했다.
• fetch() 함수를 사용하며 느낀점
  ✅ 정확한 key 와 url 의 path 를 입력해줘야한다.
  ✅ token 을 저장해 다음 요청부터 헤더에 포함하여 사용자를 확인할 수 있었다.
  ✅ 초기 렌더링 시 데이터 요청이 필요하면 fetch() 함수를 componentDidMount 메소드 안에 작성한다.
  ✅ 에러 메시지를 통해 잘못된 부분을 바로 확인할 수 있었다.

4-3. git-flow

• 팀으로 구성되어 리액트 초기세팅을 진행했다.
• 깃 명령어에 대해 모르는 부분이 많았는데 직접 해보면 이해할 수 있었다.
• branch 를 만들고 작업 후 해당 브랜치로 푸쉬하여 PR 생성했다.
• 다른 팀원들 또는 멘토분들의 리뷰를 통해 수정해야될 부분들을 알 수 있었다.
• 공통되는 파일 및 폴더를 사용하여 merge 시 에러가 발생할 수 있음에 주의해야한다.

4-4. 주요 기능 구현 (GIF)

✅ 회원가입 컴포넌트

• 아이디와 패스워드는 길이, 이메일과 핸드폰 번호는 정규 표현식을 이용했다.
• 입력한 정보를 백엔드에게 보내 res.message 가 SUCCESS 일 경우 성공
• 잘못된 양식 또는 이미 가입된 정보가 있을 경우 실패

✅ 로그인 컴포넌트

• 아이디는 이메일 정규 표현식, 비밀번호는 길이로 true, false 를 확인했다.
• 로그인 성공시 백엔드로부터 token , username 을 받아 스토리지에 저장한다.

✅ 검색 및 스토리 슬라이드

• 스토리 리스트 박스의 clinentWidth 와 이미지 전체 길이의 합의 차이값을 이용해 움직이는 값을 조절했다.
• filter , includes 메소드를 사용하여 검색기능을 구현했다.

✅ 추천 리스트 팔로우

• componentDidMount 에서 추천 리스트를 fetch() 로 받아와 리렌더링한다.
• 클릭 이벤트로 팔로우 state 값을 변경하여 백엔드로 POST 요청을 보내 새로고침 시 해당 추천이 제외된 리스트를 받아와 렌더링한다.

✅ 피드 & 좋아요 & 댓글

• 댓글 리스트를 컴포넌트로 분리하여 댓글 추가 시 댓글 갯수만큼 리렌더링 된다.
• 각 댓글, 피드의 고유한 id 와 filter 메소드로 삭제 기능을 구현했다
• 저장된 token 과 id 로 다른 사용자의 댓글은 삭제할 수 없게 구현했다.
• setTimeout 함수로 좋아요 연속 클릭과 요청을 방지했다.
• 댓글의 갯수가 5개 이상일 경우 더보기 버튼이 활성화된다.

✅ 게시물 등록

• 이미지 url 을 담은 배열과 입력한 내용의 값을 서버에 전달했다.
• 뷰에 바로 적용이 안 되고 새로고침 시 추가된걸 확인할 수 있어서 코드를 수정해야한다.
• 메인 컴포넌트에서 피드 데이터를 받아오는 함수를 props 로 게시물 등록 버튼의 클릭 이벤트에 전달하여 문제를 해결했다.
• 컴포넌트를 나누면서 자식 컴포넌트의 state 변화를 부모 컴포넌트에 전달하는 개념이 아직 부족한 것 같다.

5. 프로젝트를 마치며

• 리액트 활용과 백엔드로부터 데이터를 받아 웹 페이지를 만들어볼 수 있어 좋은 경험이 됐다.
• 기능구현만큼 리팩토링의 중요성을 알 수 있었다.
• 리액트의 state 와 props 를 정확히 이해하고 있어야 원하는 뷰를 보여줄 수 있다.
• SCSS 의 다양한 기능은 아직 활용해 보지 못해 다음 프로젝트 때 해보면 좋을 것 같다.

깃허브 주소 👉 18-React-Westagram-3