❌ 에러 발생 분명히 aws 태그가 들어간 게시글이 있음에도 불구하고 aws이 있는 게시글을 보려고 클릭해도 정상 작동하지 않는 것을 확인했다. 기존에 만났던 에러들은 콘솔창에서 error를 보여줬기 때문에 그 부분만 찾으면 구글링하거나 코드를 수정하면 되는데 이런 경우에는 찾기가 힘든 것 같다고 느꼈다. ⚠️ 에러 원인 기존에는 파일마다 고정 데이터들을 선언 할당해서 사용했었는데 재사용성이 높은 데이터를 한 곳으로 분리해서 사용하려고 리팩터링한 부분에서 aws의 철자가 틀린 듯 했다. 데이터를 콘솔찍어보면서 확인해보니 백에서 넘어오는 techStackName과 프론트에서 고정 데이터로 가지고 있는 값이 달라서 발생한 문제였다. ✅ 에러 해결 Aws 를 AWS로 바꿈으로써 간단하게 해결할 수 있었다. 처..

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

💻 들어가며 오늘 특정 조건에 맞는 게시글만 보이도록 필터를 거는 작업을 하고 있는데 지금 백엔드에서 넘어오는 데이터로 구현하려면 배열안의 객체안의 배열과 배열을 비교해서 필터를 걸어야하는데 이 부분이 막혀서 거의 오늘 반나절을 잡아먹었다.. 그런데 시간을 썼는데도 해결을 못 해서 배포가 코 앞인데 배포를 먼저한 다음 기능을 추가해서 반영할지 기능을 완성한 다음에 배포를 해야할지 정해야할 것 같다 📚 구현기능 인기 스택 순위 컴포넌트 기술 스택 필터 (구현중) 기술 스택 하나는 필터링할 수 있도록 구현했는데 여러개의 조건이 걸렸을 경우를 아직 해결 못 함 🤔 느낀점 이제 마감일이 다가오니까 시간적으로 압박이 느껴진다. 좀 여유를 가지고 검색해보면서 기능을 구현하면 오히려 더 효율적으로 기능을 구현할 수 ..

💻 들어가며 메인 프로젝트를 진행하면서 웹 서비스를 제작하면서 상태관리가 점점 더 중요해지는 것 같다 Nav바에 있는 상태를 형제관계에있는 컴포넌트에 전달해야하는 상황을 구현하기 위해 Context API 공부를 하면서 새롭게 알게된 사실도 있었다 - context 사용하면 컴포넌트 재사용 어려워짐 - prop drilling 피하기 위한 목적이라면 component composition을 먼저 고려해보자 📚구현기능 nav 조건부 렌더링 로그인 상태에 따른 조건부 렌더링 로컬스토리지에 토큰을 저장해놓은 후 토큰 유무에 따라 다른 nav바가 렌더링되도록 구현 특정 페이지 Nav 숨김 처리 import { useLocation } from "react-router-dom"; const locationNow ..

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

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

💻 들어가며 골칫거리같던 회원가입과 로그인을 어느정도 마무리하고 본격적으로 게시판 제작에 들어갔다 사용자가 원하는 기술스택이 있는 글을 버튼을 눌러 필터를 설정할 수 있도록 만들고 있다. 그냥 슬쩍 눈으로 보기에는 그렇게 어려워보이는 기능은 아니었지만 각 기술스택 이미지마다 클릭이 된 상태인지 클릭 되지 않은 상태인지 관리하고 조건에 맞는 게시글을 보여줘야하기 때문에 기능에 비해서 복잡한 구조를 가지고 있다는 것을 느꼈다 🛠️ 구현기능 API 통신 분리 멘토링 받은 내용대로 화면을 그리는 영역과 api 통신을 하는 영역을 나누어서 관리를 할 수 있도록 만들었다 처음 만들때는 오히려 구조가 복잡해지는 것 아닌가 싶었는데 한 번 만들어보니 코드의 역할이 확실히 분리되니 가독성도 좋아지고 코드를 수정하기도 용..

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