Homile

✅ 오늘 한 일

S3를 통한 최종 배포

• 스택오버플로우의 모든 기능을 구현하지 못한 것은 아쉽지만 팀원들과 정한 기능은 완벽하게 구현해서 만족스럽다.
• 실 개발 기간은 주말 제외 평일만으로 기준으로 두었을 때 7일이다. (화면 정의서, 사용자 요구사항 정의서 등 기획관련 및 배포 제외)
• 메인을 위한 도약의 발판이라고 생각하면서 서로 공부하면서 모르는 것을 백엔드, 프론트엔드 나누지않고 모두가 함께 극복할 수 있었던 것이 가장 좋은 기회였다고 생각한다.

메인화면

• 메인화면의 나의 파트는 상단 Navbar, 왼쪽 사이드바였다.
• navbar
  • 비로그인, 로그인 시 나타나는 화면이 다르다는 것을 깨닫고 상태관리도구인 redux를 사용하여 로그인 여부를 판단하고 navbar의 출력되는 화면을 변경해 주었다. (메인화면, 회원가입 및 로그인 두 개의 gif를 보면 다름을 알 수 있다.)
• 왼쪽 사이드바
  
  • 스택오버플로우와 비슷하게 구현하게 되어 만족스러웠다.
  • 구현과정 중 어려웠던 점은 해당 버튼을 클릭시 이동이되면서 클릭한 버튼의 색상을 바꿔주는 것이 조금 어려웠지만 NavLink를 사용하여 해결 할 수 있었다.
  • React에는 구현시 편하게 할 수 있는 라이브러리가 다양하게 존재하여 개발하는 과정이 편해졌다. 하지만, 회사 입사를 위해선 JS로 구현 과제를 해결해야 하는 경우가 많이있기 때문에 프로젝트가 끝난다면 JS만으로 구현해볼 예정이다. (요즘은 프레임워크(React, vue 등)를 사용하여 구현 과제를 하는 경우도 있다함.)

회원가입 및 로그인

• 회원가입 및 로그인은 팀원이 맡아서 해결했다.
• redux에 대해 알려드리며 새로고침, localstorage에 담는 방법을 같이 해결했다.

질문 작성

• 질문작성은 나의 파트였다.
• 작성란을 구현하던 중 오른쪽에 있는 아코디언을 구현하는 것이 조금 어려웠지만 한번 해봤던 내용이어서 해결했다.
• CRUD를 다 구현했는데 이것은 이미 스터디, 코드스테이츠 과정에서 3번이상 구현해봤기에 조금은 쉽게 구현했다.

댓글 작성 및 삭제

• 댓글관련도 나의 파트였다.
• 파트를 너무 많이 가져온 것 같았다... 메인에서는 기간이 길기 때문에 팀원분들에게 더욱 다양한 파트를 줄 수 있도록 해야겠다. (나의 파트도 챙기면서...)
• 댓글작성의 경우 질문작성과 틀이 똑같아서 구현하는 것에 어려움은 없었던 것 같다.

📝 아쉬웠던 점

• 스택 오버플로우에는 다양한 기능이 존재했지만 많이 구현하지 못한것이 가장 아쉬웠다.
• 코드를 작성할 때 팀원들이 알아보기 편하도록 작성하지 못하여 어떤 코드인지 한번에 이해하지 못하는 일이 있었다. 이것은 유지보수를 할 때 좋지 못한 코드가 될 수 있다는 것을 뼈저리게 느끼게 되었다. 다음부터는 코드를 깔끔하게 작성하고 폴더 및 파일을 정리하는 습관을 가지도록 해야겠다.
• 팀원들과의 소통을 많이 하지 못했던것 같다. 물론 하루에 한번 또는 이틀에 한번은 꼭 얘기를 나눠봤던 것 같지만 매일 매일 어떤 부분을 하고 있는지는 알 수 있는 계기가 적었다. 메인에서는 더욱 많은 소통을 해야 겠다.

📌 해야할 일

• 메인 프로젝트 관련 주제 생각하기
• 기획 공부

✅ 오늘한 일

로그아웃 기능 구현

옵션 버튼을 클릭했을 경우 드롭다운이 나타나면서 log out 버튼을 클릭하여 로컬스토리지의 memberId,token 값을 지워주고, 리덕스에 isLogin 이라는 로그인 여부를 판단해주는 상태를 false로 바꿔주었다.

로그아웃을 하게되면 Ask Question 버튼이 사라지게 작업을 해주었다. (리스트 부분은 아직 진행하지 않음..) 버튼이 있어도 상관은 없었다. 백엔드분들이 user의 토큰이 header로 넘어오지 않으면 작성되지 않게 막아두셨다고 한다.

그리고 로그인을 했을 때, user생성일이 담긴 memberId라는 값이 응답값으로 오는데 이것을 가지고 로그인한 유저가 작성한 글인지 판별하여 Edit, Delete 버튼의 유무를 나타낼 수 있게 진행했다. 

이부분은 전에 리덕스와 로컬스토리지를 거즌 16시간 정도 학습을 진행했던 것 같았다... (리덕스를 잘 못썻기때문에 많은 시간을 투자하여 내것으로 만들었다...)

리덕스 자료정리 링크: https://velog.io/@homile/React-redux-사용하기

📌 해야할 일

• 최종 배포
• 메인 프로젝트 주제 생각해보기

✅ 오늘한 일

로그인 유지

우리팀은 쿠키대신 로컬스토리지에 토큰값을 담아주기로 했다. 그렇기 때문에 리덕스를 사용하여 토큰값이 있을 경우를 로그인중이라고 알려주는 역할을 하면 될 것 같았다. 하지만, 아래와 같은 오류가 발생했고, 해답 또한 찾아냈다.

• 오류: 처음엔 리덕스에 담아서 로그인 중이라는 것을 알려주면 된다고 생각하였지만, 스토어에 담긴 상태값은 웹 브라우저를 새로고침 할 때, 초기화가 된다고 한다. 이사실을 모르고 ‘왜?자꾸 로그아웃이 되는가?’ 에 대한 의문을 품어 다양한 방법으로 시도를 하였다.
• 해답: 로그인 중인 상태를 App.js 파일에서 처리를 해주면 된다. 우리팀의 경우 로그인시 헤더에 담겨서 넘어오는 토큰을 로컬스토리지에 담고 있다. 이때, 로컬스토리지에 담긴 토큰의 값이 undefined가 아니라면 로그인 중인 상태인 것을 App.js에서 판별해주면된다. 그냥 판별하게 될 경우 에러가 나니 useEffect를 사용하여 화면이 처음 렌더링 될 때 판별을 해주는 코드를 작성하니 새로고침이 되도 로그인 유지가 되고 있었다.

//App.js
useEffect(() => {
    if(localStorage.getItem("authorization") !== null){
        dispatch(loginSuccess());
    }
}, [])

📌 해야할 일

• 로그아웃 기능 구현
• 최종 배포

✅ 오늘한 일

백엔드와 통신하기 및 코드 수정

백엔드분들이 질문 작성, 수정, 보기, 삭제, 답변 작성, 수정, 삭제, 보기까지 API가 구현되었다고 하셔서 요청에 대한 응답값을 작성된 코드에 매칭시켜서 코드를 수정했다. 부분적으로 수정만 하면 되는 부분이라 다행이었다.

코드를 수정 중 데이터가 한차례 늦게 오는 경우가 있엇다. 비동기 처리를 제대로 해주지 않아서 문제가 생겼던것 같다.... 그래도 해결은 했다.!! 

코드를 수정하고 난 뒤 질문 삭제하기를 진행하던 중 새로운 오류를 발견하게 되었다. 이래서 테스트 과정은 꼭 필요한 것 같다. 해당 증상은 질문에 답변이 있을 경우 질문이 삭제가 되지 않는 문제였다... 이부분에 대한 오류가 있음을 백엔드분께 전달 드렸더니 거의 바로 수정해주셨다.!! O-O 그래서 바뀐 것으로 테스트를 진행하니 질문에 답변이 있어도 삭제가 되었다!!!!

이틀간 수정작업만 진행해서 해당 사진은 첨부할 생각을 하지 못했었다... 메인에서는 하루에 작업한 내용을 적고 사진을 미리 찍어둬야겠다.

지금까지 프로젝트 일차별 회고의 날짜가 몰아서 작성된 것 같지만 노션에서 작성한 내용을 옮겨적고 있어서 게으른 사람이 되는 느낌이다..
꼭 하루에 벌어진 일은 당일 작성할 수 있도록 해보자!

📌 해야할 일

• 로그인 유지
• 로그아웃 기능 구현
• 최종 배포

✅ 오늘한 일

로그아웃 드롭다운 메뉴 틀 구현

한동안 너무 힘을 많이 썻는지 살짝 피곤한 날이었다. 그래서 간단하지만 생각을 조금 해야하는 작업을 진행하기로 했다. ;ㅅ;b

로그인 시 나타나는 navbar 옵션버튼을 클릭할 경우 드롭다운이 출력되며 log out을 할 수 있는 버튼이 생긴다. 이것을 구현하기로 했다.

이전에 컴포넌트 만들기를 해보면서 드롭다운을 한번 작업해 본적이 있어서 비슷하게 진행했다. 그 당시에는 div 태그로만 작성했지만 이번에는 ul, li 태크를 사용하여 리스트 형으로 작업을 해주었다.

그렇게 완성된 드롭다운이 아래와 같은 화면이다. 하지만, 여기서 문제인점은 log out을 누르거나 외부 배경을 누를 경우 드롭다운이 닫혀야 하는 것을 구현하지 못했다. ;-; 여러가지 시도(useRef 사용 등)를 해보았지만 먼가 로직이 꼬였는가 잘 되지 않았다. 

이에 따른 코드를 조금 더 찾아봐야 겠다..... ㅠㅠ

📌 해야할 일

• 드롭다운 버튼클릭, 외부 배경 클릭 시 드롭다운 축소 구현
• 백엔드와 통신, API 명세서에 맞는 응답값으로 코드 수정
• 로그인 유지
• 로그아웃 기능

✅ 오늘한 일

답변 작성 기능 구현

답변을 작성할 경우 title을 뺴고 내용만을 작성하여 데이터를 서버로 전달하고 해당 데이터를 바로 받아와서 작성된 답변이 실시간으로 보이도록 했다. 작업을 하던중 실시간으로 보여주려 했으나 새로고침을 해야 볼 수 있었다. 이것은 windows.location.reload()를 사용하여 새로고침을 하여 해결했다.

답변 수정 페이지 구현

답변 수정하기 페이지의 로직도 질문 수정하기 로직이랑 똑같은 형식으로 진행된다. 그리고 두 개의 컴포넌트를 처음에 하나로 사용했었는데 질문하기에는 title이 존재하고, 답변 수정 페이지에는 title이 존재하지 않아서 삼항연산자를 사용해 하나의 컴포넌트로 사용하려 했지만 아직 실력이 부족했던 것 같다. 다음에는 조금 더 컴포넌트를 재사용할 수 있도록 작성해봐야겠다.

질문 수정 페이지 구현 글: https://homile.tistory.com/170 

백엔드 서버와 통신

백엔드 서버와 통신을 해보았다. 서버와 통신을 하기전 axios를 사용하여 서버에 요청하느 코드를 작성해 두어야 했기에 JSON 서버를 사용하여 통신을 했었다. 이제 백엔드분들이 서버를 구현하셨다고 하여 우리 코드를 하드코딩하여 통신이 되는지 여부를 확인했고, 회원가입, 질문작성, 질문수정 기능에 대한 통신 테스트를 했다.

테스트를 하던 중 CORS 오류가 있어서 프로트쪽에서 package.json 파일에 Proxy 설정을 해주고 백엔드분들이 CORS 에러를 잡아주어 원활한 테스트를 할 수 있었고 요청에 따른 응답값이 잘 넘언오는 것을 확인했다.

JSON 서버 데이터를 구성할 때 API 명세서와 조금 다르게 작성이 되어 이부분을 고치는 수정 작업이 필요해졌다... 메인 프로젝트때는 처음부터 API 명세서에 맞춰서 JSON 서버 데이터를 구성해 봐야겠다.

📌 해야할 일

• 로그아웃 드롭다운 메뉴 틀 구현
• 로그아웃 기능 구현
• API 명세서에 맞춰서 코드 변경하기
• 로그인 유지