1차 프로젝트 회고록 : Thread 주요 기능 구현

📍Overview

1. 개발 기간 : 2023년 09월 11일 ~ 2023년 09월 15일

2. 개발 인원 : 프론트엔드 3명, 백엔드 3명

3. 개발 내용 : 인스타그램 쓰레드 주요 기능 구현 (아래 구현 필요사항 참고)

4. 기술 스택 : React, Sass, html, node.js

5. 사용 툴 : github, notion, trello, vscode
   *Trello를 사용하여 scrum, sprint 진행

---

📍 구현 필요사항

1차 프로젝트 주제는 인스타그램의 쓰레드 기능을 구현하는 것이다.
프로젝트를 시작하기에 앞서 기능정의서를 살펴보고, 각 페이지마다 어떤 디자인과 기능으로 구성되어 있는지 확인해보았다.

우리팀에서 구현해야할 내용은 아래와 같다.

• 로그인
• 회원가입
• 회원가입 완료
• 쓰레드 목록 확인
• 쓰레드 작성

이 중에 내가 맡은 부분은

• 회원가입 완료
  ❶ UI 구현
  ❷ 각 버튼에 라우팅 기능 적용

• 쓰레드 작성
  ❶ UI 구현
  ❷ 쓰레드 작성란 구현 및 작성된 쓰레드를 백엔드로 전달
  ❸ 각 버튼에 라우팅 기능 적용

---

📍 작업 내용

css를 잘 다루지 못하는 나에게 꼭 필요한 내용이라 열심히 했다.
Sass로 처음 UI를 그려본 역사적인 순간이다,, 🤩🤩 야호
지금은 이렇게 간단한 페이지 만드는데도 오랜 시간이 걸리고 어설프지만
여러번 반복하다 보면 척척 만들 수 있겠지 ?

아무튼 이렇게 UI를 그리고 각 버튼에 라우팅을 해줬다.
확인 버튼을 누르면 로그인 페이지로 넘어가고, 뒤로 버튼을 클릭하면 이전 페이지로 넘어간다. onClick에 만들어놓은 함수를 넣으면 해당 페이지로 이동!

  const joinDoneBtn = () => {
    navigate('/');
  };

  const backBtn = () => {
    navigate('/main');
  };

이 화면은 쓰레드 작성 페이지다.
사용자가 등록한 프로필 사진과 닉네임이 좌측 상단에 보여지고,
그 아래에는 텍스트를 작성할 수 있는 박스가 있다.

하단의 취소버튼을 누르면 쓰레드 목록(이전페이지)로 이동할 수 있고,
게시 버튼을 누르면 작성된 게시글이 업데이트 된 쓰레드 목록 페이지로 이동한다.
이 과정에서 작성된 게시글 내용을 백으로 전달해야 한다.

const uploadBtn = () => {
    fetch('❶ API주소', {
      ❷ method: 'POST',
       headers: {
       ❸'Content-Type': 'application/json;charset=utf-8',
       ❹ Authorization: '토큰', //로그인 때 받은 액세스 토큰
      },
     ❺ body: JSON.stringify({
        content: post,
      }),
    })
     ❻ .then(res => res.json())
     ❼ .then(data => console.log(data));

    navigate('/post');
  };

이렇게 fetch 함수를 써서 백엔드와 통신할 수 있다.

❶ API 주소는 백엔드 측에서 전달받아야 한다.
*http:// , IP주소 , 포트번호 , 엔드포인트

❷ method에는 GET, POST 등의 HTTP method를 입력한다.
*GET은 데이터를 가져오는 것. POST는 주고 받는 것.
이번에는 데이터를 보내는 것이니 POST로 작성했다. 매서드 값을 입력하지 않으면 GET으로 자동설정 된다.

❸ node.js와 통신할때는 content-type을 꼭 명시해야 한다.
그렇지 않으면 요청할 때 body가 안들어감.

❹ 로그인 때 백엔드에서 전달 받은 액세스 토큰이다.
게시글 작성은 권한이 있는(계정이 있는) 유저만 작성이 가능하기 때문에 토큰이 필요하다.

❺ body에는 JSON 형태로 주고 받을 데이터를 넣는다.
*백에서 알아볼 수 있는 언어로 전달해야하는데 그게 json파일이다.

❻ 첫 번째 then에서는 서버에서 보내준 response를 Object 형태로 변환한다.
res에는 내가 원하는 데이터 혹은 에러메세지가 들어있다.
then()으로 받은 json 형태의 res 값을 프론트에서 알아볼 수 있는 js 언어로 변환한다.(json이라고 적혀있어서 헷갈리기 쉬움)
*화살표 함수를 씀으로써 res.json() 전에 return이 생략된 것을 알 수 있다. 단순 리턴은 이렇게 생략 가능.

같은 코드임
.then(res => res.json())
.then(res => {return res.json()})

❼ 두 번째 then에서는 object로 변환한 response를 console.log로 확인한다.

---

  const deleteBtn = () => {
    if (post.length > 1) {
      const isConfirmed = window.confirm(
        '작성한 글이 모두 삭제됩니다. 취소하시겠습니까?',
      );
      if (isConfirmed) {
        navigate('/post'); 
      }
    } else {
    }
  };

해당 사항은 구현 필요사항은 아니었지만 필요한 기능같아서 한 번 추가해봤다.
게시글을 작성한 후에 취소 버튼을 누르면 바로 이전화면으로 넘어가는 것이 아니라, 알럿창을 띄워주는 것이다.

알럿창에서 취소를 누르면 아무런 이벤트가 발생하지 않으며, 확인을 누르면 작성한 내용이 모두 삭제되며 이전 화면으로 이동한다.

📍느낀점

1. 깃 사용법이 익숙치 않아서 중간 중간 시간을 많이 뺏겼다.
   커밋을 해야 하거나 브랜치 이동을 해야할 때마다 무거운 마음,,,
   그래도 이번 프로젝트를 계기로 깃과 많이 친해진 것 같아 다행이다🙂
   앞으로 더 친해지자

2. 팀 프로젝트 진행하다보니 팀원 간의 소통이 진짜 중요하다고 느꼈다.
   매일 아침 10시에 팀원들과 데일리 스탠드업 미팅을 진행했는데, 그 시간을 많이 활용을 못한 것 같다. 래영님이 주신 피드백을 반영해서 진행할 수 있도록 해야겠다.

[데일리 스탠드업 미팅 피드백 사항]
1. 팀원 중 한명이 주도권을 잡고 진행
2. 한명씩 돌아가면서 진행 상황 공유
3. 회의록 작성 필요
4. 1:1로 대화가 필요할 경우 미팅 이후에 따로 진행
(팀원 공유가 필요 없는 사항일 경우만 해당)