\(@^0^@)/

예전에 추천받아서 구매했던 책인데, 한 장도 읽지 않고 구매와 동시에 빳빳한 상태로 책장에 바로 꽂아 두었다가 최근에 진행하는 프로젝트의 리팩터링과 사용성을 생각해 보니, 해당 책이 떠올라서 읽게 되었음. (사용자를) 생각하게 하지 마! 웹과 모바일 사용성 원칙으로 디자인하는 UX 스티브 크룩 지음, 이미령 옮김 스티브 크룩의 사용성 제1원칙 : 사용자를 고민에 빠뜨리지 마라! 사용자가 사이트를 보며 고민하지 않고 명확하게 해결할 수 있어야 된다. 즉, 자명하게 이해되는 페이지, 아니면 최소한 설명이 없어도 이해할 수 있는 페이지를 만들어야 한다. 우리가 실제 웹을 사용하는 방법 사용자는 웹 페이지를 읽지 않는다, 훑어본다. 웹은 도구에 불과하다, 필요 이상의 것을 읽을 시간이 없다. 모든 것을 읽을 필..

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

- 9월 프리 온보딩 챌린지 : TypeScript 초반에 저녁때문에 1부 TS관련 강의는 듣지 못하고, 2부 Q&A 부분만 들었다ㅠ 회사 정보 파악 thevc 잡플래닛 크레딧잡 블라인드 혁신의 숲 + 구글링 회사에 역질문 하기 개발 문화 개발 스터디 유무 개발 프로세스 (막장은 대답 못함) 코드 리뷰 (조심) 입사 기준 최소 2군데 이상 합격했을 때 1개만 합격했을 경우에는 이성적인 판단 어려움. 3개 이상 합격할 때 연봉협상에 좋음. 합격 후 한 달을 미뤄라. (그래야 2-3주 정도의 시간을 벌 수 있음.) 이력서 & 면접 최소 한 달에 한번 면접 보기 면접과 프로젝트로 이력서 업데이트 어떻게 기술적으로 해결했는지 포트폴리오보다 중요한 것 내가 지원한 포트폴리오를 안 보고, 그냥 사전과제를 주는 경우..

- 9월 프리 온보딩 챌린지 : TypeScript TypeScript JavaScript and More JavaScript에 추가 구문 IDE와 통합 => 오류 캐치 신뢰할 수 있는 결과 어파치 javaScript로 변환 JavaScript가 지원되는 모든 곳에서 실행 (브라우저, Node.js, Deno 등) 규모에 따른 안정성 JavaScript를 이해하는 타입 추론을 사용 추가적인 코드 없이도 훌륭한 도구 제공 취업 준비도 MVP 지속적인 지원으로 계속 피드백을 받아야 한다. 또한 떨어지기만 하고 아무런 행동을 하지 않으면 안 된다. 받은 피드백으로 이력서를 수정하고, 공부를 해야 함. 연봉 협상 회사 규모에 따라 다름. 큰 회사인 경우에는 테이블이 있어서, 그 체계를 깨지 않으려고 노력한다. ..

❗ 서버 연결 프런트에서 프런트로 요청이 가는 희귀한 현상.. 서버를 연결하는데 서버 포트인 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 ..