들어가며 메인 프로젝트를 배포하고 부트캠프를 수료하자마자 원티드 프리온보딩 프로그램에 참여하게 되면서 이제야 프로젝트 회고를 작성하게 되었다. 한 달 동안 기업과제를 하면서 다른 사람 코드도 많이보고 기능 구현도 여러 가지 해보다 보니 실력이 늘기는 늘었는지 예전에 짰던 코드들에서 부족한 부분이 많이 보였던 것 같다. 회고를 작성하면서 리팩터링은 어떻게 하면 좋을지 정리해보고자 한다. 프로젝트 소개 프로젝트 작업기간 2022.09 ~ 2022.10 (30일) 스터디와 프로젝트의 팀원을 구하기가 어렵다는 기존의 문제점을 극복하고자 쉽고 빠르게 게시글을 작성하여 팀원을 구할 수 있도록 구현했습니다. 기존의 스터디, 프로젝트 모집글들은 어떤 기술 스택을 이용하는지, 어떤 분야의 팀원을 모집하는지 모호했습니다...

💻 들어가며 오늘까지 완성을 하려고 했으나 여전히 오류는 계속나고 수정할 부분이 많이 보인다 우선 내일 오후부터는 발표자료 제작에 들어가야하기 때문에 오전에 빠르게 useEffect가 제대로 적용 안 되는 부분하고 폰트, css 수정을 완료하기로 계획을 세웠다. 📚 구현기능 필터 기능 추가 (모집 분류, 모집 기한) 이제 특정 조건에 맞는 데이터의 상태를 변화시키는 것은 고민만 조금 하면 원하는 데이터로 useState 훅을 통해서 바꿀 수 있게 되었다. 하지만 여러 필터, 조건이 겹치니까 알 수 없는 오류가 하나 발생하고 있는데 아마 useEffect문제이거나 if, else if를 통해 조건을 거는 과정에서 잘못된 부분이 있는 듯 하다 useEffect는 진짜 문법만 외우고 동작 원리는 잘 모르는 상..

💻 들어가며 로그인상태에 따라 게시글 작성, 마이페이지, 조회페이지가 다르게 보이도록 기능을 구현했다. 메인프로젝트 초반부에 로그인이 구현되는 것만 확인하고 이번에 API요청시에 JWT를 담아 보내면 서버에서 로그인이 안 됐으면 오류를 보내거나 로그인 된 사용자면 그에 맞는 response를 보내주도록 구현되었다 일단 로컬스토리지에 토큰을 저장하기때문에 Context API을 이용한 로그인 구현은 필요없게 된 것 같은데 기능 구현이 끝나고 시간이 남으면 상태관리 라이브러리를 이용해 로그인 상태를 유지하는 코드로 리팩토링도 해봐야겠지싶다. 📚구현기능 로그인 폼 로그인에 성공시 로컬스토리지에 jwt 저장 oauth는 미구현상태지만 어떤 로직으로 돌아가는지 공부를 해서 구현에는 어려움 없을 듯 해보임 Reac..

💻 들어가며 기능 구현하면서 eslint에서 prettier랑 줄바꿈 옵션이 충돌이 난 건지 계속해서 오류가 나왔다..😥 치명적인 영향을 미치지는 않았지만 새로고침 할때마다 계속 브라우저에 오류를 내서 가만히 냅둘 수 없어서 구글링을 시작했다 스택오버플로우에서 방법은 찾았는데 적용을 해보니 해결이 안 됐다.. 원인은 잘 모르겠고 기능구현하기 바빠 죽겠는데 빨리 해결해야겠다 싶어서 그냥 특정 줄만 eslint 옵션을 끌 수 있는 주석을 달아 해결했다. eslint-disable-next-line prettier/prettier 옵션을 줘서 해결했는데 부분에만 적용되는 옵션이라서 완벽한 해결방법은 아니라서 조금 아쉽지만 중요한 부분은 아니라 일단 넘어가기로했다 프로젝트 끝나고도 eslint, prettier..

💻 들어가며 벌서 프로젝트 마감까지 약 2주정도 남았다 멘토님께서 마지막 1주일은 배포, 버그수정에 힘을 써야 하니 앞으로 1주일 뒤인 10월 4일까지는 기획한 기능을 구현을 마칠 것을 권장하셨다 전체 게시글 조회에서 상태관리할 게 꽤 있어서 골칫거리가 될 것 같은데 이제는 기능 구현할 수 있는 시간이 얼마 남지않아 서비스와 사용자 경험에 끼치는 영향, 투입되는 공수를 따져 우선순위를 잘 매겨 순서대로 처리해야할 필요성을 느꼈다. ⚒️ 구현 기능 context API 로그인 구현 로그인 처리시 백엔드에서 넘어오는 jwt 토큰을 전역상태에 저장해주기 위해서 redux toolkit 대신 context API 를 이용하기로했다 이유는 프로젝트에서 필요한 상태를 관리하는데 context로도 충분히 구현 가능할..

📚 오늘 한 것 stack 이미지 적용 json dummy data 작성 Board 전체 틀 css 작성 Stack 이미지 적용 stack을 array 형태로 저장한 다음 map 메소드를 사용하고 리터럴 문법을 이용해 서버에서 가져오는 string형태의 스택을 기준으로 적절한 이미지가 나오도록 작성함 json dummy data 작성 멘토님께서 백엔드측에서 API 구현해주는 것을 기다리는 것이 아니라 구성된 API 명세서를 기반으로 dummmy data를 작성해서 빨리빨리 페이지에 디자인된 화면을 퍼블리싱하는 것이 우선이라고 하셔서 적극 반영해서 API처럼 작동하는 json server에 더미를 작성해주고 페이지에 띄우는 것을 시작했다 API가 완성되기 전에 백에서 오는 Json 형태의 데이터를 어떻게 ..

들어가며 메인 프로젝트를 들어가며 1주마다 개발일지를 작성하려고했는데 며칠만 지나도 뭐 했는지 어떤 고민을 했는지 잊게 되는 경우가 많아 그날 바로바로 기록하는 것이 더 기억에 남고 좋은 기록을 할 수 있을 것 같아 매일매일 작성을 하기로 했다 멘토링 메인프로젝트를 진행하면서 1주일에 한 번씩 현업을 하고계신 멘토님께 멘토링을 받을 수 있는 기회가 있는데 프로젝트를 진행하면서 궁금한 점 또 취업, 개발 정보에 대한 질문을 드리고 받은 답변을 정리해봤다. 컴포넌트 나누는 팁 명확한 기준이 있는 건 아니지만 한 번이라도 재활용하는 컴포넌트는 분리를 할 것 eslint 설정에 까다로운 부분이 많았는데 꼭 필요한가? 너무 많은 시간을 잡는 경우 버려라, prettier만 써도 충분함 객체에서 id를 new Da..