Homile

✅ 오늘한 일

AWS S3 1차 배포

코스에서 알려준 내용은 하나의 인스턴스에서 EC2, S3를 결합하여 배포하는 형식으로 알려주었다. 하지만 이번에는 백엔드 계정, 프론트엔드 계정을 따로 두어 배포해보기로 하였다. 아이디 공유가 신경쓰였기 때문이지만 IAM를 사용하여 권한을 부여한 계정을 팀원에게 전달하는 방식도 있긴하지만 프리티어가 몇개까지 적용되는지 알 수 없어서 따로 계정을 사용하기로 했다.

그래서 완성은 되지 않았지만 1차적으로 npm run build를 진행하고 배포해보았다. 코스에서 배운대로 webpack.config 파일 같은 설정을 하고 빌드를 해보려 했지만 조금 에러가 많이 생겨서 일반 빌드를 진행했다.

배포 결과는.... 좋은 결과였다. 하지만, 이미지가 제대로 적용되지 않는 상황이 발생했다. 찾아보니 num run build를 진행하면 build 폴더 → index.html 파일의 파일 경로가 /static/.../으로 절대경로 방식으로 되어 있던게 문제라고 한다. 이것을 ./static/.../이런식으로 상대경로로 바꿔주니 문제가 해결되었다. 

사실 경로는문제가 없었던듯 하다... 무슨 문제가 원인이었을지 다시 한 번 찾아봐야겠다..!

📌 해야할 일

• S3, CloudFront, Route53 에 대해 학습하기
• 질문 보기 페이지 구현

✅ 오늘한 일

질문 작성 페이지 구현

해당 페이지를 작성할 때 가장 고생했던 부분은 배경에 이미지를 넣는 것이었다. 로봇이랑 체크 박스가 담긴 이미지 인데 svg파일로 되어있고 원하는 위치에 올리는 것이 너무 힘들었지만 div로 감싸서 위치를 맞추고 배경을 넣었더니 해결이 되었다. (동기분의 조언으로 완료!!)
제목과 내용이 비어있을 경우 empty title, body라는 내용이 출력되도록 유효성 검사까지 진행했다.

제목과 내용을 작성하고 post yourt question버튼을 클릭했을 때 axios.post를 사용하여 데이터가 서버쪽에 담기는 지 확인하기위해 JSON 서버를 사용하여 API 명세서에 맞춰 틀을 구현하였다. 아직 백엔드분들이 서버 로직을 구현하는 단계였기 때문에 확인을 하려면 JSON 서버를 사용하는 것이 가장 빠른 방법이라고 생각했기 때문이다. 

post메서드가 정상적으로 작동하여 JSON 서버 db에 담기는 것 까지 확인하였다. 추후 서버와 연동시 URL 주소와 CORS 부분을 해결하면 동작 가능하도록 코드를 작성했다.

오른쪽 사이드바 구현

오른쪽 사이드바는 원래 페이지에서는 계속 스텝이 변화하면서 바뀌는 식으로 나오게 되지만 CRUD 기능에 조금더 힘을 쏟기 위해 간단하게 Step1만 틀로 구현하였다. 아코디언 형식으로 보고싶은 곳을 클릭했을 때 내용이 나오고 열려있던 내용은 닫히는 것을 구현했다.

스터디에서 컴포넌트 만들기를 한주에 하나씩 구현해내는 것을 진행했었는데 이때 한번 작성해봐서 이번 프로젝트에서 구현하는데 굉장히 많은 도움이 되었다.

📌 해야할 일

• S3 배포 테스트
• 질문 보기 페이지 구현
• 질문 수정 페이지 구현
• 답변 작성 구현
• 로그아웃 드롭다운 메뉴 구현
• 백엔드와 통신하기

✅ 오늘한 일

메인 왼쪽 사이드바 구현

메인 왼쪽에 있는 사이드바를 구현했다. 해당 버튼을 클릭시 화면이 바뀌면서 색상도 클릭한 버튼에 고정이 되어야 한다. 이를 NavLink라는 는 태그를 사용하여 해결했다.

또한, 스크롤을 내릴 때 Navbar와 왼쪽 사이드바가 같이 내려와야 했다. 이것은 왼쪽사이드바에 sticky라는 옵션을 설정하여 해결했다. 

📌 해야할 일

• 왼쪽 사이드바 크기 조정
• 질문 작성 페이지 구현

✅ 오늘한 일

Navbar 구현

스택 오버플로우의 상단에 있는 Navbar를 구현했다. 구현하는 과정에서 생각했어야 했던 점은 로그인했을 때와 로그인을 하지 않았을 때의 Navbar가 다르다는 것이었다. 이것을 일단 하드 코딩을 하여 login 여부를 state로 구성하여 true, false를 수동으로 변경해가면서 구성을 했다. 상단에 고정하는 것과 크기를 조정하는 것이 꽤나 시간이 걸렸다.

📌 해야할 일

• 프로필 사진 클릭시 마이페이지 이동
• 로그인 화면 오른쪽 메뉴 드롭다운 구성
• 크기조정

✅ 오늘 한 일

원래는 백엔드분들의 Github branch까지 관리를 하기로 했었지만 백엔드 분들이 직접하신다고 하셨다! 프론트와 백엔드의 dev branch를 나누어 두었기 때문에 괜찮다고 생각이 들었다. 백엔드 분들이 팀장의 부담감을 덜어 주시려고 말씀하셔서 감동받았다.!!🥲

Github branch 생성 및 팀원 PR, merge 테스트

• 5명 전부 PR 테스트 완료
• dev_Back: 백엔드 테스트용 브랜치
• dev_Front: 프론트 테스트용 브랜치
• dev: 프론트, 백엔드 합동 테스트 브랜치

프론트엔드 기능 별 파트 나누기

• Main 페이지 오른쪽 사이드바
• footer 구현
• Main 페이지 왼쪽 사이드바
• nav bar 구현
• 회원가입 component 구현
• 로그인 component 구현
• My Page component
• 질문 작성 component
• view component
• Main content
• 질문 필터 기능 (Advanced)
• 반응형 웹 구현 (Advanced)
• 마이페이지 (Advanced)
• 텍스트 에디터 구현 (Advanced)

백엔드 역할 분배

• 질문 / 답변 DB & API 
• 회원관리 로그인/로그아웃 DB & API 
• dev 배포 (AWS)
• production 배포 (AWS)
• github server 폴더 merge: 백엔드 서로 상대방 PR 리뷰 후 승인

📌 해야할 일

수요일부터 코드구현을 하기로 정했기 때문에 그 전에 프론트엔드 react의 기초 틀을 잡아 주기로 했다. 일단은 CRA로 react 파일을 구성하여 주고 필요한 라이브러리들을 설치해야한다.

create-react-app

• 사용할 라이브러리 설치
  • Redux
    • npm install @reduxjs/toolkit react-redux
  • Styled-component
    • npm install --save styled-components
  • router
    • npm install react-router-dom
  • axios
    
    • npm install axios
• 페이지 나누기
• 폴더 구분
• 파일 구분

✅ Github 레포지토리 팀원 추가 

코드스테이츠에서 팀장마다 레포지토리를 하나씩 할당 해주었으며 해당 레포지토리에 팀원들을 초대하고 권한을 부여했습니다. 이 과정에서 나의 권한을 admin에서 write로 낮춰 다른 분들의 권한 수정을 하지 못하고 있었는데 어드민권한을 부여했던 팀원에게 연락하여 권한을 다시 부여받았다. 휴 ;-;

✅ 사용자 요구사항 정의서 작성

스택오버플로우에 어떠한 기능이 있고 해당 기능의 역할이 무엇인지를 서술하는 시간을 팀원들과 같이 작업을 했다. 작업을 하는 중 우리가 할 수 있는 만큼 지정하여 작성을 하였고 추가적으로 작업할 수 있는 내용은 추후 추가하기로 하였다. 

가장 메인 기능으로는 질문하기, 답변하기, 로그인, 회원가입 등의 기능이 있었다. 사용자 요구사항 정의서는 이번이 2번째 작성해보는 것인데 학부생때 배웠던 것과는 조금 틀이 달랐지만 비슷하게 작성을 했다. 

라이브 세션때 다른 팀들이 한 사용자 요구사항 정의서를 보았는데 굉장히 많이 기술한 팀은 10페이지 이상이었던 것 같다. 그런걸 보면서 '아 저렇게 많이 작성했어야 했나?' 라는 생각이 들때쯤 크루분께서 많이 상세하게 작성하는 것은 좋지만 이것을 '정해진 기간내에 할 수 있는지도 판단 했으면 좋겠다' 라는 말씀을 하셔서 그나마 위안을 받은 것 같다.

✅ 화면 정의서 작성

나는 프론트엔드 개발자가 되기위한 과정을 밟고 있기 때문에 화면 정의서를 작성해야 했다. 화면 정의서를 작성하는 이유는 팀원 간의 소통을 조금 더 원할하게 할 수 있게 도와주며 특히 API 구성시 필요한 데이터를 백엔드분들께 요청을 자세하게 할 수 있기 때문에 작성해야 했다. 화면 정의서 같은 경우 첫 날에는 간단하게 스택오버플로우 사이트를 캡처하여 데이터가 필요한 부분을 체크하고 어떤 데이터가 필요한지 간단하게 팀원 전체가 모여서 회의를 하며 작성을 했다. 그리고 나중에 든 생각으로는 이렇게 해도 좋을 것 같지만 문서를 조금 더 깔끔하게 작성해서 보여주는 것이 백엔드분들께 좋을 것이라 생각하여 일과 시간이 끝난후 개인적으로 작성하여 넘겨주었다.(조금 부족했던듯....)

메인에서 작성할때는 와이어프레임으로 간단하게 화면을 구성하고 정의서를 작성해서 백엔드 분들이 API 명세서를 작성하는 동안 와이어프레임을 가지고 디자인을 작성해야 겠다.