Project/pre-project15 pre-project 9일차 (22.08.30. 질문, 답변 수정 페이지 구현) ✅ 오늘한 일 질문 수정 페이지 구현 질문 상세 페이지에 작성된 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.. 2022. 9. 6. pre-project 8일차 (22.08.29. 질문 상세페이지 구현) ✅ 오늘한 일 질문 상세 페이지 구현 먼저 틀을 잡는게 꽤나 고생을 했었다. Navbar와 크기가 비슷하게 어우러져야 했던게 가장 큰 이유였다. 해당 글을 클릭했을 때 주소값에 질문의 ID를 Param에 담아서 전달해 오면 Param에 담긴 ID로 get요청을 하여 ID에 해당하는 질문에 대한 정보를 나타내는 것으로 시작했다. 아직 없는 데이터들은 하드코딩을 하여 일반적인 텍스트를 담아두었다. Vote 버튼, history, 뒤로가기 등이 있다. 오른쪽 사이드바의 경우 메인에서 나와있는 팀원이 만들어둔 메인 사이드바를 가져와서 배치시켰다. 이유는 CSS 부분을 조금적게 하고 기능적인 부분에 조금더 비중을 두기 위해서였다. 프리프로젝트인 만큼 디자인 쪽 보다는 백엔드와의 통신, 기능 부분을 자세히 해보는 .. 2022. 9. 6. pre-project 7일차 (22.08.28. S3 1차 배포) ✅ 오늘한 일 AWS S3 1차 배포 코스에서 알려준 내용은 하나의 인스턴스에서 EC2, S3를 결합하여 배포하는 형식으로 알려주었다. 하지만 이번에는 백엔드 계정, 프론트엔드 계정을 따로 두어 배포해보기로 하였다. 아이디 공유가 신경쓰였기 때문이지만 IAM를 사용하여 권한을 부여한 계정을 팀원에게 전달하는 방식도 있긴하지만 프리티어가 몇개까지 적용되는지 알 수 없어서 따로 계정을 사용하기로 했다. 그래서 완성은 되지 않았지만 1차적으로 npm run build를 진행하고 배포해보았다. 코스에서 배운대로 webpack.config 파일 같은 설정을 하고 빌드를 해보려 했지만 조금 에러가 많이 생겨서 일반 빌드를 진행했다. 배포 결과는.... 좋은 결과였다. 하지만, 이미지가 제대로 적용되지 않는 상황이 .. 2022. 9. 5. pre-project 6일차 (22.08.27. 질문 작성 페이지 구현) ✅ 오늘한 일 질문 작성 페이지 구현 해당 페이지를 작성할 때 가장 고생했던 부분은 배경에 이미지를 넣는 것이었다. 로봇이랑 체크 박스가 담긴 이미지 인데 svg파일로 되어있고 원하는 위치에 올리는 것이 너무 힘들었지만 div로 감싸서 위치를 맞추고 배경을 넣었더니 해결이 되었다. (동기분의 조언으로 완료!!) 제목과 내용이 비어있을 경우 empty title, body라는 내용이 출력되도록 유효성 검사까지 진행했다. 제목과 내용을 작성하고 post yourt question버튼을 클릭했을 때 axios.post를 사용하여 데이터가 서버쪽에 담기는 지 확인하기위해 JSON 서버를 사용하여 API 명세서에 맞춰 틀을 구현하였다. 아직 백엔드분들이 서버 로직을 구현하는 단계였기 때문에 확인을 하려면 JSON.. 2022. 9. 5. pre-project 5일차 (22.08.26. 메인 왼쪽 사이드바 구현) ✅ 오늘한 일 메인 왼쪽 사이드바 구현 메인 왼쪽에 있는 사이드바를 구현했다. 해당 버튼을 클릭시 화면이 바뀌면서 색상도 클릭한 버튼에 고정이 되어야 한다. 이를 NavLink라는 는 태그를 사용하여 해결했다. 또한, 스크롤을 내릴 때 Navbar와 왼쪽 사이드바가 같이 내려와야 했다. 이것은 왼쪽사이드바에 sticky라는 옵션을 설정하여 해결했다. 📌 해야할 일 왼쪽 사이드바 크기 조정 질문 작성 페이지 구현 2022. 9. 5. pre-project 4일차 (22.08.25. Navbar 구현) ✅ 오늘한 일 Navbar 구현 스택 오버플로우의 상단에 있는 Navbar를 구현했다. 구현하는 과정에서 생각했어야 했던 점은 로그인했을 때와 로그인을 하지 않았을 때의 Navbar가 다르다는 것이었다. 이것을 일단 하드 코딩을 하여 login 여부를 state로 구성하여 true, false를 수동으로 변경해가면서 구성을 했다. 상단에 고정하는 것과 크기를 조정하는 것이 꽤나 시간이 걸렸다. 📌 해야할 일 프로필 사진 클릭시 마이페이지 이동 로그인 화면 오른쪽 메뉴 드롭다운 구성 크기조정 2022. 9. 5. 이전 1 2 3 다음
