12/28 내배캠 4기 react 심화 프로젝트 KPT회고 - 5분 대기조

• 팀명: 5분 대기조 : 팀원이 어려워하거나 늦잠을 잔다면 누구보다 빠르게 달려가서 도움을 주자는 마음으로 팀명을 정했습니다.
• 팀원: 임재영(팀장), 김동한, 박유진, 송지현, 최지원
• 팀 목표
  • 막히거나 모르는 거 있으면 바로 도움 요청하기.🤙🏽
  • Git merge 할 때는 실수 없이 하기 위해 다 함께 하기.
  • React와 친해지기.
  • 컨디션 관리 잘하기. 💪🏻
  • 기본 기능 구현하기.

프로젝트명

• 5G = Balance (오지는 밸런스)

• 배포: https://5-g-balance.vercel.app/
• GitHub:

GitHub - Imjaae/5G-balance

• 시연 영상:

[Team] A반 5조- 5분 대기조 밸런스 게임 프로젝트 시연

 

 

KPT 회고

 

김동한

Keep

• 무한 소통
• 기본 통일하기

Problem

• git merge
• 인기순 정렬 및 메인화면에 표시(redux devtool에는 불러왔다고 뜨는데 화면에 불러와지지 않음)

Try

• 구글링, 튜터님께 찾아가기, 팀원들에게 도움받기 삼위일체
• git - 팀원들과의 집단지성으로 해결
• 인기순 정렬

• 메인화면에 표시 - initialState에 bestBalance값을 안넣어서 못불러왔던 것

Feel

: 부족함을 많이 느꼈지만 팀원들과 서로 격려하며 열심히했다는 것이 뿌듯하다

 

---

• 박유진
  • 각 개인의 역량을 올릴 수 있는 프로젝트였다.
  • 프로젝트를 급하게 진행하는 것이 아닌 처음에 베이스를 잘 짜고 움직였다. 덕분에 꼬이는 일이 없었다.
  • 프로젝트 진행 전에 TodoList App 만들기로 먼저 공부를 했었다. 그것이 크게 도움이 되었다.
  • 게임을 만드는 글 작성 페이지를 맡았다. TodoList App과 상당히 비슷해서 머릿속에 계획이 잘 잡혔다.
  • GitHub와 팀 프로젝트 정리하는데 도움이 된 것 같아 뿌듯하다.
  Problem
  • 비밀번호 유효성 검사(정규표현식)
    • 가장 시간이 많이 든 정규표현식이다. 별거 아닌데 만만하게 볼 상대가 아니다.
    • let 뒤에 영문과 숫자 조합을 넣었다. 10개 이상의 블로그를 찾아보면서 섞이고 엉켰다. 그래서 직접 만들어 보았다.

  //비밀번호 input box 유효성 검증
  export const passwordCheck = (id) => {
    let regExp = /^(?=.*[a-zA-Z])(?=.*[0-9]).{4,20}$/;
    // 영문, 숫자 조합 4자리 이상
    return regExp.test(id);
  };
  

  • 넣는 순서
    • 아직도 만들 때마다 어떤 함수가 먼저 나와야하는지 뒤에 가야하는지 헷갈린다.
    • initialState가 먼저 호출되어야 사용할 수 있다.

  const initialState = {
      contents: "",
      nickname: "",
    };
  
  const [balance, setBalance] = useState(initialState);
  

  • 깃허브에 팀 프로젝트 크게 크게 할 때마다 merge 를 했다. 다행히 엄청 안 좋은 일은 일어나지 않았다. 어이없게 간단한 문제였다.
  Try
  • 정규표현식은 머리를 짜내어 직접 원하는대로 만들었다.
• Keep

Feel

• 이번 프로젝트에서 성장하고 있는 게 나에게 티가 났다. 휴 다행이다. 열심히 하고 싶었는데 열심히 할 수 있어서 좋았다. 정예부대와 후발대 반 다니면서 큰 도움이 되기도 했지만 무엇보다 팀 편성이 정말 잘 되었다. 함께 움직일 수 있는 마음이 잘 맞는 팀이었다. 새로운 팀 편성 될 때마다 이렇게 잘 맞는 대원들은 없을 거라고 항상 얘기해 왔는데 이번에도 감사합니다.
• 나의 역량을 이끌어 낼 수 있는 프로젝트였다. 항상 선발대 반 들어갈 만큼 잘 하는 대원들을 만나서 자신감이 떨어지고 나 자신에게 능력이 없어 보였다. 이번 팀에서는 잘해도 겸손하게 행동하시고 이끌어줘서 무언가 하고 싶은 마음이 들었고 가지고 있는 생각들을 계속해서 말할 수 있었다. 덕분에 앞으로 한 발자국 나아갈 수 있었다.
• 그래도 부족한 나이기에 꾸준히 공부할 것이다. 프로젝트에 Redux 써야하는데 입문 강의만 반복적으로 봐서 그 강의 대로만 했다. 공부하면 할 수 있기에 화이팅합시다.

---

Keep

• 팀원끼리 잘 소통하고, 도움이 필요하면 도움을 요청하고 반대로 팀원이 도움이 필요하면 같이 해결할 수 있도록 노력하는 자세.

Problem

• 투표 수에 따라 스테이서스 바를 전환하는데, 처음에는 투표수에 따라 길이를 조절하는 방식을 택했는데 한 선택지에만 투표가 되었을 경우, 투표되지 않은 선택지가 보였다. 그래서 투표 수가 1표 이상일 때만 해당 선택지의 스테이서스 바가 보이도록 삼항연산자를 사용하여 조절하였다.

Try

• 사용해보지 않았던 기능들을 사용해보려고 노력했다.

Feel

• 리액트를 처음 사용해 봤는데 자바스크립트랑 비교했을 때, 더욱 편리한 기능들이 탑재되어 있어 배우는 데에 재미를 느꼈다. 이번에는 리덕스를 잘 활용하지 못했는데 다음 번에는 리덕스를 잘 활용하여 프로젝트를 진행할 수 있도록 해야겠다.

---

Keep

• 팀원들간의 원활한 소통
• 오랫동안 붙어있는 엉덩이
• 끊임 없이 고민하기
• 모르는건 정리해서 질문하기

Problem

• axios를 사용하여 delete값을 입력해 주었다.

삭제 버튼 클릭 시 json-server의 contentsId를 삭제하는 기능을 추가했다 → 하지만 삭제버튼 클릭시 페이지를 새로고침 하지 않으면 해당 id값이 삭제되지 않았다

페이지를 새로고침 하지 않고, setComments를 활용하여 화면을 리로딩하기

Try

• axios를 사용하더라도 comments에 filter함수를 사용하여 화면에 표시하기

→ filter함수를 사용하면 조건값에 해당하는 값만 화면에 표시한다 (.map함수와는 다른 점)

filter로 contents.id와 해당 id값(contentsId)을 서로의 id가 일치한지 아닌지 true or false로 비교를 하고, !== 값이 true라면 그 값들만 화면에 표출할 수 있게 한다.

이렇게 하면 새로고침 없이도 .filter함수를 통해 바로 화면에 표시해줄 수 있다.

• 모르는걸 더 깔끔하게 정리해서 질문하기
• 오류 및 햇갈렸던 내용은 한문에 볼 수 있게 정리하기
• react , javascript기본구조 이해하기
• axios, redux 공부

Feel

• 개인적으로 많은 것들을 배우고도 아쉬움이 많았던 프로젝트이다. 기술적인 부분에서 많은 것들을 구현하지 못해 도움을 받았다. 그러다보니 내가 했다고 생각하기 보단 같이 하면서 내가 보탰다 정도의 생각이 들어 아쉬웠다. 다음에는 내가 도움을 줄 수 있게 기초부터 탄탄히 공부해 나가야 겠다