React - westagram

:: 구현 목표 (해당 브랜치에서 구현하고자 하는 하나의 목표를 설정합니다.)

• Login | useNavigate Hook 을 이용한 페이지 전환
• Login | 사용자 입력 데이터 저장
• Login | 로그인 버튼 활성화 (validation)
• Main | 댓글 기능
• Main | 댓글 컴포넌트화 + props로 데이터 전달
• Main | mock data를 활용하여 여러 개의 댓글 및 피드 구현
• 로그인 & 회원가입 실습

:: 구현 사항 설명 (작업한 내용을 상세하게 기록합니다.)

1. useNavigate Hook 을 이용한 페이지 전환
   => 로그인 페이지 버튼을 누르면 메인 페이지로 전환되게 하기 위해서 useNavigate Hook 을 이용합니다.해당 함수를 navigate 라는 변수에 useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 저장합니다.navigate 의 인자로 Router.js 에서 설정한 path를 넘겨주면 해당 경로로 이동할 수 있습니다.

2. 사용자 입력 데이터 저장 기능 구현
   => useState Hook 을 사용하여 id와 pw 데이터를 저장합니다.첫번째 변수에는 상태값이 저장되는 state 변수명이고, 두번째 변수에는 해당 state를 변경시킬 함수를 적어줍니다.로그인 화면에서 id, pw 값을 변경될때 발생하는 onChange={} 이벤트에 state를 변경시킬 함수를 넣어서 관리합니다.

3. 입력한 id 와 pw 가 기준에 맞는 경우 로그인 버튼 색상 활성화
   => id 와 pw input 에 onInput={} 이벤트에 조건이 부합할 경우 버튼이 활성화 될 함수를 넣어서 관리합니다.버튼 활성화 조건은 삼항 연산자를 활용하여 부여합니다. (ex. ID - @ 포함 / PW - 5글자 이상)

4. 댓글 기능 구현
   => 사용자가 쓰는 input 창에 적은 댓글이 배열 데이터로 댓글이 저장되어 보여질 곳으로 전달되어야 합니다.이에 따라 state의 값을 [] 배열로 주었습니다. 또한 댓글을 적고 이를 엔터키를 누르거나 버튼을 클릭하여 게시가 되게끔 구현하기 위해서,input과 button 태그를 감싸는 from 태그에 onSubmit 이벤트를 주었습니다. onSubmit 이벤트는 배열 데이터로 저장된 댓글 배열들과 새로 추가될 댓글들을 병합해주기 위해 spread 연산자를 활용했습니다.이후 Array.map 배열 메소드를 사용하여 저장된 댓글 배열들이 실제로 보여지게 될 해당 div 태그 안에 map 메소드의 value 값이 보여지게 하였습니다.

5. 댓글 컴포넌트화 + props 로 데이터 전달
   => 댓글 하나를 컴포넌트화 시켜서, 부모 state에 저장된 댓글 데이터에 Array.map 메소드를 사용해 댓글 갯수만큼 댓글 컴포넌트가 나타나도록 합니다. 이때 props 를 사용하여 필요한 데이터를 넘겨주고, 자식 컴포넌트 안에서 전달받아 댓글이 보이도록 구현하였습니다.

6. mock data를 활용하여 여러 개의 댓글 및 피드 구현
   => 실제 백엔드 API에서 응답값의 형태인 json 파일에 백엔드 API를 모방하는 mock data 를 만들어 줍니다.이후 댓글 및 피드 컴포넌트에서 mock data를 호출합니다. fetch 함수를 사용하여 http 요청을 보낼 주소를 적고 응답이 오면 이를 json 형태로 변환해주고, 댓글이 배열 형태로 저장될 수 있는 로직을 적어줍니다. 이때, fetch 함수 자체가 side effect 이므로 useEffect 안에 넣어줘서 렌더링에 영향을 주지 않도록 해줍니다. 부모 state에 저장된 댓글 배열들을 Array.map 메소드를 사용하여 피드 컴포넌트에 나타나도록 합니다. props 를 사용하여 데이터를 전달하고, 피드 컴포넌트 안에서 전달받아 구현하였습니다.

7. commit a324498da9582 live review 후 피드백 반영

• 6번처럼 Asides 컴포넌트로 따로 만들어주고 mock data, fetch 함수, map 메소드를 사용하여 구현하였습니다.
• '계산된 속성명' 을 이용하여 inputHandler 함수 합쳐서 코드를 좀 더 간결하게 만들어 주었습니다.
• main feed input 창에 '' 으로 게시 이벤트를 작동하였을 때, 댓글을 입력하라는 alert 창을 뜨게 구현하였습니다.
• mixin 과 variables 를 사용하여 scss를 좀 더 간결하게 만들어 주었습니다.
• common.scss, reset.scss 를 index.js 에서 적용하도록 수정하였습니다.
• scss property 순서를 컨벤션에 맞게 수정하였습니다.
• 전체적으로 불필요한 주석들을 삭제하였습니다.

:: 성장 포인트 (해당 기능을 구현하며 고민했던 사항이나 새로 알게된 부분, 어려웠던 점 등을 작성합니다.)

• useState 라는 Hook의 사용하여 이를 활용하는 방법에 대하여 자세히 알게 되었습니다. state를 변경시킬 함수를 통해서 state 값을 계속 변화시켜 주는 과정이 재미있었고 앞으로 능숙하게 쓸 수 있도록 많은 연습이 필요할 것 같습니다.

• 과제에서 언급한 event.target.value 라는 값이 어떤 것인지 console.log 를 이용하여 콘솔창을 통해 눈으로 확인해보면서 왜 이 값을 state 값을 변화해주는 함수의 인자로 넣어주는지 자세하게 알 수 있었습니다. console.log()의 필요성과 중요성에 대해 잘 알게 되었고, 앞으로 해당 함수를 많이 활용해야 겠다고 생각했습니다.

• 컴포넌트 분리하고 props 를 통해서 필요한 데이터를 넘겨주고 전달받는 과정이 이해하기 어려웠는데, 이를 실제로 구현해보면서 해당 개념에 대해서 자세히 알게 되었습니다. 이후 map 함수 적용시 key props를 부여하는 이유에 대한 블로그를 작성하면서 개념을 다시 한번 정리할 수 있어서 좋았습니다.

• 과제 재점검을 하던 도중 로그인 유효성 검사시 id 와 pw 를 입력시 한글자를 더 입력해야지만 버튼이 활성화 된다는 것을 알게되었습니다. 멘토님께 도움을 요청하고 팀원들과 함께 고민해본 결과, 유효성 검사한 결과값을 또 하나의 boolean 형태의 useState()를 만들어 이중적으로 state를 사용해서 생긴 오류라는 것을 알게 되었습니다. 따라서 유효성 검사 부분을 또 하나의 변수로 만들어서, 이를 태그에 직접 삼항연산자로 유효성검사 변수명을 넣고, 그 값이 true 일때의 클래스명, false 일때의 클래스명을 각각 부여하여 scss 파일에서 색상 변화를 주는 것으로 오류를 해결하였습니다.

• Array.map() 메소드의 사용방법이 조금 어려웠지만 이번 과제를 통해서 어떻게 활용하는 메소드 인지 자세히 알게 되었습니다. 앞으로 프로젝트 과정에서도 자주 등장할 메소드 이기 때문에, 많이 연습해보고 익숙해져서 이를 잘 활용할 수 있게끔 노력해야겠습니다.

• 코드를 작성하는 것에 그치지 않고, 제가 기능을 구현했던 코드를 팀원에게 직접 말로 설명해보면서 내가 어떤 부분을 명확하게 알지 못한채 넘어갔는지 등을 체크해 볼 수 있었습니다. 앞으로 개발자로서 어떻게 하면 팀원에게 명확하게 해당 로직에 대해 설명할 수 있을지, 더 나아가 굳이 말로 설명하지 않고 코드만 봐도 이해할 수 있는 가독성 좋은 코드의 작성 방법에 대해 계속 고민해보고 연습해야겠습니다.

• 로그인 & 회원가입 실습을 통해 백엔드의 통신과 연결하여 데이터를 주고 받는 과정이 너무 신기하고 즐거웠습니다. 해당 실습을 통해서 프로젝트를 진행할 때 왜 mock data 와 백엔드의 response 형태를 맞추고 개발을 진행해야 되는지에 대해서 명확하게 알게 되었습니다. 또한 무엇보다 백엔드와의 원활한 의사소통의 중요성을 깨닫게 되었습니다. 처음 토근을 발급받아 기쁘고 설레였던 오늘을 기억하여 더 좋은 개발자로 성장하기 위해 꾸준히 노력하겠습니다.

• peer review, live review 를 통해 팀원들과 서로의 코드를 공유하고 피드백을 받아 리팩토링을 진행하게 되었습니다. 이번 리뷰를 통해서 전반적으로 간결하고 가독성 좋은 코드로 수정할 수 있어서 좋았습니다. peer review 의 중요성은 물론 팀원간 의사소통의 중요성까지도 알게된 좋은 경험이었습니다.