Homile

✅ 오늘한 일 질문 수정 페이지 구현 질문 상세 페이지에 작성된 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..

✅ 오늘한 일 메인 왼쪽 사이드바 구현 메인 왼쪽에 있는 사이드바를 구현했다. 해당 버튼을 클릭시 화면이 바뀌면서 색상도 클릭한 버튼에 고정이 되어야 한다. 이를 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..

✅ Github 레포지토리 팀원 추가 코드스테이츠에서 팀장마다 레포지토리를 하나씩 할당 해주었으며 해당 레포지토리에 팀원들을 초대하고 권한을 부여했습니다. 이 과정에서 나의 권한을 admin에서 write로 낮춰 다른 분들의 권한 수정을 하지 못하고 있었는데 어드민권한을 부여했던 팀원에게 연락하여 권한을 다시 부여받았다. 휴 ;-; ✅ 사용자 요구사항 정의서 작성 스택오버플로우에 어떠한 기능이 있고 해당 기능의 역할이 무엇인지를 서술하는 시간을 팀원들과 같이 작업을 했다. 작업을 하는 중 우리가 할 수 있는 만큼 지정하여 작성을 하였고 추가적으로 작업할 수 있는 내용은 추후 추가하기로 하였다. 가장 메인 기능으로는 질문하기, 답변하기, 로그인, 회원가입 등의 기능이 있었다. 사용자 요구사항 정의서는 이번..

✅ 프로젝트 주제 발표, 팀원 발표, 툴 세팅 📌 프로젝트 주제 및 목표 주제: Stack Overflow 사이트 클론 코딩 일반적인 클론코딩이라고 생각할 수 있겠지만 Stack Overflow는 React로 구성되어 있지않아 변경하는데 시간이 조금 걸릴 것이라 생각했고, 기획단계가 사라져서 코드를 구현하는데 시간을 조금 더 쓸 수 있을 것이라고 생각했다. Pre-Project 목표 프로젝트에 대한 기본적인 이해도를 높입니다. 프로젝트에서 필요한 Github 이해도를 높입니다. 프로젝트에 대한 문서작성 능력을 향상 시킵니다. 팀 커뮤니케이션 이해도를 높입니다. ✅ 팀원 발표 및 툴 세팅 팀원은 4~5명으로 구성됐고 4인조는 (프론트2, 백엔드2)이었고, 5인조는 프론트나 백엔드가 1명더 많은 구조로 팀원..