\(@^0^@)/

드디어 각 페이지의 스타일링을 완성하여 1차적으로 배포를 하였다. 원래 계획은 스프린트처럼 일주일 동안 기획, 스타일링, 기능까지 완벽히 구현해서 MVP 1차 배포하고, 두 번에 나눠서 Backlog를 2차, 3차 배포하려는 계획이었는데 현실은 MVP 만으로도 1주 기획, 1주 스타일링, 1주 기능구현 ^^.. 면접준비, 알고리즘, 영어공부, 강의 듣는 등 이것저것 병렬적으로 진행해서 프로젝트에 모든 시간을 쏟지 못하고 있는 상황이라 더더욱 진행이 더디다. 혼자서 플젝하는 것 정말 쉽지 않다.. 디자인도 맘에 안 들어서 계속 수정의 수정을 거듭하고 컬러배치도 아직 맘에 안 드는데 시간을 너무 쏟는 것 같아서 일단 내버려 두었다. 조만간 다시 바꿀 예정ㅠ 그래도 프로젝트를 하니깐, 공부만 하던 것보다 확실..

프로젝트를 시작한다고 포스팅해 놓고 벌써 일주일이 지났지만 개인적인 중요한 일정들이 많이 생겨서.. 부끄럽게도 많은 진전이 없었다..ㅠ (사실 이번주도 여러 일정들이 있음 ㅠ) 프로젝트를 시작하면 "현재 공부 중인 영어, 알고리즘, CS 공부를 포기하고 프로젝트만을 진행" vs "시간표를 짜서 시간표대로 병렬적으로 공부" 사이에서 늘 고민이 되는 것 같다. 알고리즘도 영어공부도 매일 하는 것이 좋고, 그래야 실력이 향상된다 생각하기에 영어, 알고리즘과 CS공부의 양을 어느 정도 정해놓고 이후의 시간을 프로젝트에 쏟는 방향으로 결정했다. 이번 프로젝트에서 이룬 것 프로덕트 스케치 BDD SDD 도메인 구매 프로젝트 플랜 프로덕트 스케치 지난번의 워드 클라우드 구체화, 스토리 보드 및 레퍼런스 등을 참고로 ..

스프린트는 7명 정도의 팀원들이 열린 토론을 통해 프로토타입을 제작하고 고객과 함께 아이디어를 테스트하여 중요한 문제들에 대한 답을 찾는 독특한 5일짜리 과정이다. 구글 벤처스는 스프린트를 통해 지메일과 크롬, 구글 서치 등을 탄생시켰고, 페이스북과 우버, 블루보틀, 슬랙, 에어비엔비 등에서도 그 효과가 입증되었다. 의 저자이자 구글 수석 디자이너인 제이크 냅은 스프린트를 '최소의 시간으로 최상의 결과를 얻도록 조정된 최적의 프로세스'라고 소개했다. 5일 만에 "아이디어 -> 스케치 -> 설루션 -> 프로토타입핑 -> 고객 테스트"까지 완료하는 과제 해결법이다. [ 출처 : https://brunch.co.kr/@brunchjwshim/90 ] 테오의 스프린트 또한 비슷하게 진행되는 것 같다. [ 참고 ..

TypeError: Cannot read properties of null (reading 'useContext') Admin page에서 처음에 모든 userList를 받아오고, 원하는 user를 클릭할 경우 detail component가 나타난다. 해당 컴포넌트에서 user의 info를 더 자세히 확인하고 수정, 삭제할 수 있도록 구현할 예정이었음. 그렇다면 이제 TypeError가 뜬 시점을 알아보자. admin 부모 컴포넌트와 자식 컴포넌트인 userList, userInfo컴포넌트가 있는 구조이다. (userList와 userInfo는 형제 컴포넌트 인 셈.) admin component에 state를 생성하고, userList에서 원하는 user를 클릭하면 해당 user의 id를 admin ..

Axios Interceptor 어떤 api 요청을 하는 과정에서 만료된 refreshToken으로 인해 요청이 거부된 경우에는 어떻게 해야 할까? axios interceptor를 활용하여 refreshToken을 재생성 후 다시 원하는 api 요청을 시도할 수 있다. 즉, 사용자의 accessToken이 만료되었다면 자동적으로 로그아웃 돼서 다시 로그인을 요청하는 것이 일반적인 루트인데, 지난 포스팅의 usefreshToken 커스텀 훅과 Axios Interceptor를 활용하여, accessToken이 만료됐다면 새로운 token을 생성해서 기존의 token에 덮어 씌운다. 이렇게 될 경우 사용자는 token이 만료되었는지, 새로운 token으로 덮어 씌웠는지 알지도 못하고, 알 방법도 없다. t..

Router v6 + 권한 처리 1. 로그인 후 권한에 맞지 않는 route에 접근하게 될 경우 : unauthorized 페이지를 보여줌 2. 로그인 전 다른 route에 접근하게 될 경우 : login 페이지를 보여줌 위의 조건에 부합하는 로직을 작성하였음. 전역 상태를 관리하고 있는 recoil의 useRecoilState을 불러와 auth로 선언 후, const RequireAuth = ({ allowedRoles }) => { const auth = useRecoilState(Auth); const location = useLocation(); }; App컴포넌트에서 User, Manager, Admin에 대해 상수화 선언한다. ROLES에 맞게 권한을 주기 위해서, RequireAuth 컴포넌..

❗ 프로젝트 업그레이드 기존의 todo-list에서 Authorization을 조금 더 적용해보고 싶다는 생각에 서버를 구현할 때 역할을 다양하게 설정하였다. Admin, Manager, User로 각각 역할에 따른 권한을 부여받는 형태. Admin : 모든 사용자 정보 확인 가능 회원가입, 로그인, 모든 글 확인, 변경, 삭제 가능. Manager: User 정보 확인 가능 회원가입, 로그인, user, manager 글 확인 가능. User: 내 정보 확인 가능 회원가입, 로그인, user 글 확인 가능 구현을 할 때마다 계속 디렉터리 구조 수정이 반복된다... 나만 알아볼 수 있는 구조가 아니라 최대한 남들이 봐도 어떤 식으로 돌아가는지 상상할 수 있도록 생각하면서 구현하니까 계속 더 나은 방법이 ..

❗ 쉽지만은 않은 Recoil https://www.npmjs.com/package/recoil-persist 기본의 프로젝트에서 token을 전역 상태로 관리하기 위해서 recoil을 추가하였음. recoil을 사용한 이유는 리덕스를 사용한다면 기존의 코드를 엄청 많이 엎어야 해서 시간이 많이 지연될 거란 생각이 컸고, recoil이 최근에 인기 급상승 중이며, 리덕스보다 훨씬 쉽고 간편하다는 의견들이 많아서 어떤 라이브러리인지 사용해보고 싶어서 recoil로 결정하였다. 확실히 페이스북에서 만든 라이브러리라서 그런지 간결하고 기존의 익숙한 코드로 쉽게 구현할 수 있었지만, 내가 구현했던 디렉터리 구조랑 충돌이 있어서 코드를 적용하는 부분에서 조금 애먹었다ㅠ 하지만 redux를 추가했더라면, 아마 3배..

❗ 서버 연결 프런트에서 프런트로 요청이 가는 희귀한 현상.. 서버를 연결하는데 서버 포트인 3500으로 요청이 가지 않고, 자꾸 프런트 port 3000에 요청이 가는 것이다. 도대체 무엇이 문제인지 코드를 하나하나 다 살펴보았는데도 정말 집히는 게 없었다. 서버 쪽 allowedOrigins에 3000 포트 추가했고, 앞단의 baseURL에 3500 포트 추가했고, const allowedOrigins = [ "http://localhost:3500", "http://localhost:3000", ]; module.exports = allowedOrigins; import axios from "axios"; export default axios.create({ BASE_URL: "http://loca..

애초에 프로젝트가 과제 제출용이었어서 제출 기간이 지난 현재, 서버가 끊긴 상태이다. 이제까지 백 쪽을 공부한 적이 없는 나로서, 어떻게 해야 서버를 구현할 수 있을까 고민을 하다가 유튜브에 FE뿐 아니라 BE 쪽 Node.js로 TodoList 구현 영상도 있다는 것을 발견하였다. 현재 내 프로젝트가 복잡한 건 아니기에 완벽히 이해할 수는 없지만 어느 정도는 따라 할 수 있을 거라고 생각했다. 근데 내가 만약에 프로젝트를 키워서 다른 기능들을 추가해야 되는 상황이 온다면 서버 쪽을 더 키울 수 있을까...? 그럼 서버 쪽을 또 공부해야 하는데 지금 내 상황에 그게 맞는 걸까..? 어쩌면 그냥 firebase로 구현하는 것이 더 나을 수도 있겠다는 생각이 문득 들었다. 이러한 고민을 안고 Node.js ..