Homile

✅ 오늘 한 일 S3를 통한 최종 배포 스택오버플로우의 모든 기능을 구현하지 못한 것은 아쉽지만 팀원들과 정한 기능은 완벽하게 구현해서 만족스럽다. 실 개발 기간은 주말 제외 평일만으로 기준으로 두었을 때 7일이다. (화면 정의서, 사용자 요구사항 정의서 등 기획관련 및 배포 제외) 메인을 위한 도약의 발판이라고 생각하면서 서로 공부하면서 모르는 것을 백엔드, 프론트엔드 나누지않고 모두가 함께 극복할 수 있었던 것이 가장 좋은 기회였다고 생각한다. 메인화면 메인화면의 나의 파트는 상단 Navbar, 왼쪽 사이드바였다. navbar 비로그인, 로그인 시 나타나는 화면이 다르다는 것을 깨닫고 상태관리도구인 redux를 사용하여 로그인 여부를 판단하고 navbar의 출력되는 화면을 변경해 주었다. (메인화면,..

✅ 오늘한 일 로그아웃 기능 구현 옵션 버튼을 클릭했을 경우 드롭다운이 나타나면서 log out 버튼을 클릭하여 로컬스토리지의 memberId,token 값을 지워주고, 리덕스에 isLogin 이라는 로그인 여부를 판단해주는 상태를 false로 바꿔주었다. 로그아웃을 하게되면 Ask Question 버튼이 사라지게 작업을 해주었다. (리스트 부분은 아직 진행하지 않음..) 버튼이 있어도 상관은 없었다. 백엔드분들이 user의 토큰이 header로 넘어오지 않으면 작성되지 않게 막아두셨다고 한다. 그리고 로그인을 했을 때, user생성일이 담긴 memberId라는 값이 응답값으로 오는데 이것을 가지고 로그인한 유저가 작성한 글인지 판별하여 Edit, Delete 버튼의 유무를 나타낼 수 있게 진행했다. 이..

✅ 오늘한 일 로그인 유지 우리팀은 쿠키대신 로컬스토리지에 토큰값을 담아주기로 했다. 그렇기 때문에 리덕스를 사용하여 토큰값이 있을 경우를 로그인중이라고 알려주는 역할을 하면 될 것 같았다. 하지만, 아래와 같은 오류가 발생했고, 해답 또한 찾아냈다. 오류: 처음엔 리덕스에 담아서 로그인 중이라는 것을 알려주면 된다고 생각하였지만, 스토어에 담긴 상태값은 웹 브라우저를 새로고침 할 때, 초기화가 된다고 한다. 이사실을 모르고 ‘왜?자꾸 로그아웃이 되는가?’ 에 대한 의문을 품어 다양한 방법으로 시도를 하였다. 해답: 로그인 중인 상태를 App.js 파일에서 처리를 해주면 된다. 우리팀의 경우 로그인시 헤더에 담겨서 넘어오는 토큰을 로컬스토리지에 담고 있다. 이때, 로컬스토리지에 담긴 토큰의 값이 unde..

✅ 오늘한 일 백엔드와 통신하기 및 코드 수정 백엔드분들이 질문 작성, 수정, 보기, 삭제, 답변 작성, 수정, 삭제, 보기까지 API가 구현되었다고 하셔서 요청에 대한 응답값을 작성된 코드에 매칭시켜서 코드를 수정했다. 부분적으로 수정만 하면 되는 부분이라 다행이었다. 코드를 수정 중 데이터가 한차례 늦게 오는 경우가 있엇다. 비동기 처리를 제대로 해주지 않아서 문제가 생겼던것 같다.... 그래도 해결은 했다.!! 코드를 수정하고 난 뒤 질문 삭제하기를 진행하던 중 새로운 오류를 발견하게 되었다. 이래서 테스트 과정은 꼭 필요한 것 같다. 해당 증상은 질문에 답변이 있을 경우 질문이 삭제가 되지 않는 문제였다... 이부분에 대한 오류가 있음을 백엔드분께 전달 드렸더니 거의 바로 수정해주셨다.!! O-O..

✅ 오늘한 일 로그아웃 드롭다운 메뉴 틀 구현 한동안 너무 힘을 많이 썻는지 살짝 피곤한 날이었다. 그래서 간단하지만 생각을 조금 해야하는 작업을 진행하기로 했다. ;ㅅ;b 로그인 시 나타나는 navbar 옵션버튼을 클릭할 경우 드롭다운이 출력되며 log out을 할 수 있는 버튼이 생긴다. 이것을 구현하기로 했다. 이전에 컴포넌트 만들기를 해보면서 드롭다운을 한번 작업해 본적이 있어서 비슷하게 진행했다. 그 당시에는 div 태그로만 작성했지만 이번에는 ul, li 태크를 사용하여 리스트 형으로 작업을 해주었다. 그렇게 완성된 드롭다운이 아래와 같은 화면이다. 하지만, 여기서 문제인점은 log out을 누르거나 외부 배경을 누를 경우 드롭다운이 닫혀야 하는 것을 구현하지 못했다. ;-; 여러가지 시도(u..

✅ 오늘한 일 답변 작성 기능 구현 답변을 작성할 경우 title을 뺴고 내용만을 작성하여 데이터를 서버로 전달하고 해당 데이터를 바로 받아와서 작성된 답변이 실시간으로 보이도록 했다. 작업을 하던중 실시간으로 보여주려 했으나 새로고침을 해야 볼 수 있었다. 이것은 windows.location.reload()를 사용하여 새로고침을 하여 해결했다. 답변 수정 페이지 구현 답변 수정하기 페이지의 로직도 질문 수정하기 로직이랑 똑같은 형식으로 진행된다. 그리고 두 개의 컴포넌트를 처음에 하나로 사용했었는데 질문하기에는 title이 존재하고, 답변 수정 페이지에는 title이 존재하지 않아서 삼항연산자를 사용해 하나의 컴포넌트로 사용하려 했지만 아직 실력이 부족했던 것 같다. 다음에는 조금 더 컴포넌트를 재사..

✅ 오늘한 일 질문 수정 페이지 구현 질문 상세 페이지에 작성된 title, body의 데이터를 Link 컴포넌트를 사용하여 질문 수정 페이지로 이동하면서 url에 state값으로 질문의 아이디값, 제목, 내용을 넘겨준다. 이동된 페이지에서 useLocation을 사용하여 url에 담아둔 state값을 useState에 할당하고 input에 defaultvalue를 설정해주어 수정전 작성 내용을 보여준다. 이후 수정이 된다면 state값이 변하고, 이 값을 axios를 사용하여 서버측에 headers에 토큰값과 함께 넘겨준다. // QuestionViewer.js Edit // QuestionEdit.js const location = useLocation(); const [questionPost, se..

✅ 오늘한 일 질문 상세 페이지 구현 먼저 틀을 잡는게 꽤나 고생을 했었다. Navbar와 크기가 비슷하게 어우러져야 했던게 가장 큰 이유였다. 해당 글을 클릭했을 때 주소값에 질문의 ID를 Param에 담아서 전달해 오면 Param에 담긴 ID로 get요청을 하여 ID에 해당하는 질문에 대한 정보를 나타내는 것으로 시작했다. 아직 없는 데이터들은 하드코딩을 하여 일반적인 텍스트를 담아두었다. Vote 버튼, history, 뒤로가기 등이 있다. 오른쪽 사이드바의 경우 메인에서 나와있는 팀원이 만들어둔 메인 사이드바를 가져와서 배치시켰다. 이유는 CSS 부분을 조금적게 하고 기능적인 부분에 조금더 비중을 두기 위해서였다. 프리프로젝트인 만큼 디자인 쪽 보다는 백엔드와의 통신, 기능 부분을 자세히 해보는 ..

✅ 오늘한 일 AWS S3 1차 배포 코스에서 알려준 내용은 하나의 인스턴스에서 EC2, S3를 결합하여 배포하는 형식으로 알려주었다. 하지만 이번에는 백엔드 계정, 프론트엔드 계정을 따로 두어 배포해보기로 하였다. 아이디 공유가 신경쓰였기 때문이지만 IAM를 사용하여 권한을 부여한 계정을 팀원에게 전달하는 방식도 있긴하지만 프리티어가 몇개까지 적용되는지 알 수 없어서 따로 계정을 사용하기로 했다. 그래서 완성은 되지 않았지만 1차적으로 npm run build를 진행하고 배포해보았다. 코스에서 배운대로 webpack.config 파일 같은 설정을 하고 빌드를 해보려 했지만 조금 에러가 많이 생겨서 일반 빌드를 진행했다. 배포 결과는.... 좋은 결과였다. 하지만, 이미지가 제대로 적용되지 않는 상황이 ..

✅ 오늘한 일 질문 작성 페이지 구현 해당 페이지를 작성할 때 가장 고생했던 부분은 배경에 이미지를 넣는 것이었다. 로봇이랑 체크 박스가 담긴 이미지 인데 svg파일로 되어있고 원하는 위치에 올리는 것이 너무 힘들었지만 div로 감싸서 위치를 맞추고 배경을 넣었더니 해결이 되었다. (동기분의 조언으로 완료!!) 제목과 내용이 비어있을 경우 empty title, body라는 내용이 출력되도록 유효성 검사까지 진행했다. 제목과 내용을 작성하고 post yourt question버튼을 클릭했을 때 axios.post를 사용하여 데이터가 서버쪽에 담기는 지 확인하기위해 JSON 서버를 사용하여 API 명세서에 맞춰 틀을 구현하였다. 아직 백엔드분들이 서버 로직을 구현하는 단계였기 때문에 확인을 하려면 JSON..