\(@^0^@)/

오늘 새벽 세 번째 팀 회의를 마치고 내가 제안한 아이디어들이 채택되지 않았을 때, 아쉬운 마음은 있었지만 전혀 기분 나쁘거나 별다른 생각이 안 들었는데, 자기 전에 문득 '얼굴이 보이지 않아서 기분 나빴다고 생각이 들면 어떡하나..?'라는 생각이 들었다. 캠도 켜지 않고 오로지 음성으로만 팀원들과 회의하고 소통하는 협업이 꽤 어렵다. 특히 내 말투가 이쁘고 부드러운 느낌은 아닌 거 같아서 조금 더 조심스럽고 부드럽게 말해야겠다는 다짐을 해본다. 하지만, 내 생각은 온전하게 전달할 수 있도록! 이번 기회에 소프트 스킬을 발전시켜서 더 나은 커뮤니케이터가 될 수 있도록 노력해보자. 나만 그림판이었다고 한다... 우리가 만들 서비스를 생각하며 각 페이지별로 스케치를 해서 서로 발표하는 시간을 가졌는데, 테오..

밤 11시에 시작하는 거라서, 끝나면 늦어도 새벽 3시.. 신청하려는 사람들은 본인 패턴에 대해서 잘 생각해봐야 할 것 같다. 나는 아침형 인간이 아닌데도 불구하고, 그 시간까지 사람들과 회의하며 이야기를 나누는 것이 생각보다 쉬운 일은 아닌 것 같다. 운동해서 체력을 길러야 하나 잘 시간을 놓쳐서 그런 건지, 회의 후에 잠이 안 와서 이것저것 하다가 5-6시쯤 잠이 든 거 같다. 지금 할 건 많은데 생각만큼 몸이 따라주지 않아서 오늘 이 회고를 적으며, 마음을 다시 잡아보자!!! 할 수 있다!!! 두 번째 회의 전, 고민해본 것들 우리가 만들 서비스의 궁극적인 목적은 무엇일까? 궁극적인 목적이기에, 지금 생각해둔 우리의 서비스 규모보다 조금 더 넓게 보았다. 아마 겨울뿐 아니라 모든 시즌의 스페셜 이벤..

개발 커뮤니티를 이것저것 알아보던 올 초쯤인가? 프엔 오픈 톡방 두 개에 들어갔다. 그 두개 중 한 방의 방장인 시니어 개발자가 두 달에 한 번씩쯤 스프린트를 진행한다는 것을 알게 됐고, 신청하고 싶었지만 이따금씩 결과물을 보면 대부분 숙련된 개발자들로 보여서 내가 참여하면 민폐일 것 같다는 생각에 참여를 못 하거나, 개인적인 일정으로 시간이 맞지 않아서 아쉽게 못한 경우도 있었다. 그렇게 몇 달이 흐른 11월! 드디어 테오의 스프린트에 참여하게 되었고, 어젯밤 11시에 첫 만남을 가져서, 오늘 새벽 3시 정도까지 이야기를 나누었다 (직장인들 괜찮으시려나...? 리스펙👍) 스프린트 란? 스프린트는 7명 정도의 팀원들이 열린 토론을 통해 프로토타입을 제작하고 고객과 함께 아이디어를 테스트하여 중요한 문제들..

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 ..