Homile

✅ 오늘한 일 로그아웃 드롭다운 메뉴 틀 구현 한동안 너무 힘을 많이 썻는지 살짝 피곤한 날이었다. 그래서 간단하지만 생각을 조금 해야하는 작업을 진행하기로 했다. ;ㅅ;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..

✅ 오늘한 일 메인 왼쪽 사이드바 구현 메인 왼쪽에 있는 사이드바를 구현했다. 해당 버튼을 클릭시 화면이 바뀌면서 색상도 클릭한 버튼에 고정이 되어야 한다. 이를 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로 낮춰 다른 분들의 권한 수정을 하지 못하고 있었는데 어드민권한을 부여했던 팀원에게 연락하여 권한을 다시 부여받았다. 휴 ;-; ✅ 사용자 요구사항 정의서 작성 스택오버플로우에 어떠한 기능이 있고 해당 기능의 역할이 무엇인지를 서술하는 시간을 팀원들과 같이 작업을 했다. 작업을 하는 중 우리가 할 수 있는 만큼 지정하여 작성을 하였고 추가적으로 작업할 수 있는 내용은 추후 추가하기로 하였다. 가장 메인 기능으로는 질문하기, 답변하기, 로그인, 회원가입 등의 기능이 있었다. 사용자 요구사항 정의서는 이번..