소파에서 개발하기

상황 프로젝트를 하는 내내 머리를 감싸쥐게 했던 것이 바로 axios와 jwt 토큰이 메인인 로그인 기능이었다. 이 기능들을 기본 함수와 커스텀 훅을 이용해 구현했는데, 이걸 axios interceptor로 리팩토링하려고 한다. 프로젝트를 진행할 당시에도 interceptor의 존재를 알았지만 안 썼던 이유는 간단하다. 프리 프로젝트를 할 때 직접 할 수 있는 일을 라이브러리를 도입해서 쓰려다가 오히려 더 복잡해진 경험이 있어서, 할 수 있어 보이는 일에 굳이 라이브러리를 쓰고 싶지 않아서였다. 보통 interceptor를 사용하는 이유를 찾으면 주로 이런 것이 나온다. 1) api 호출할 때마다 비효율적으로 axios 인스턴스를 생성 2) axios 마다 동일한 content-type , token와..

보호되어 있는 글입니다.

토큰 로그인.. 정말 우여곡절이 많았다. '완성'이라는 건 오류가 나지 않고 동작하도록 만들었다는 뜻이다. 사실상 오늘까지가 개발을 할 수 있는 마지막 날이고 이후부터는 발표 준비를 해야 했었는데, 오늘 오후까지도 해결이 되지 않아 너무 초조했다. 도대체 무엇이 오류인지 잡히지가 않아서, 맘먹고 노트에 손글씨로 flow를 적고 이에 맞춰 콘솔을 찍으면서 처음부터 전부 다 다시 되짚어 갔다. 그런 뒤 개발자도구 네트워크 탭에 찍힌 요청헤더-응답헤더-바디를 대조해 가면서 확인했더니, 예상치 못한 로그아웃의 원인은 바로 refresh token의 유효기간이 예상했던 3분이 아닌 1분으로 설정되어 전송된 것이었다. 이를 해결하고 났더니 그 주변의 자잘한 오류들(결정적인 원인을 찾지 못하게 만들었던)도 찾아 깔끔..

여차저차해서 토큰 검사하는 커스텀훅을 만들었다. 만들고 나서 생각해보니 이것도 hook이라서 컴포넌트 최상위에서만 불러올 수 있고 조건문 아래에서 실행할 수 없다는 것에 멘붕이 왔다. 이전에 만든 useGetCards에서 힌트를 얻어, 인증 과정이 진행중인지 외부에 알려주는 authLoading 상태를 만들었다. 이 훅을 불러오는 컴포넌트에서는 useEffect에서 authLoading과 그 외 필요한 dependency에 따라 화면을 보여주는 구조로 바꾸었다. https://couch.tistory.com/228 [메인 프로젝트] 토큰 검증 커스텀훅 / invalid hook call 에러 문제 상황 난생 처음 token 로그인 기능을 만들며 여기저기 부딪혔다. token 유효성 검사 기능은 여기저기에..

문제 상황 난생 처음 token 로그인 기능을 만들며 여기저기 부딪혔다. token 유효성 검사 기능은 여기저기에서 다 쓰이다보니까 TokenAuth.js 라는 파일에 전부 만들어두고 필요한 곳에서 import해서 쓰려고 했다. 그래서 TokenAuth.js 라는 파일에 onLoginSuccess, onLogout 등등 함수를 만들고 네비게이션, 글쓰기 버튼 등에서 불러와 봤다. 문제는 onLoginSuceess, onLogout 함수들이 유저 정보를 redux에 저장하기 위해 useDispatch 훅을 사용하는데, 여기서 invalid hook call 에러가 나고 있다는 것이다. hook을 함수 최상위에서 써야 한다는 것도 알겠고, 문서를 읽으면서 'hook call'의 기준이 const dispat..

CSS로 뭔가 꾸미는 데에는 요령이 없어서 이래저래 구글링 해가면서 완성했다. 너무 정신없이 만들어서 미처 정리도 못하고 gif만 대충 올려놓고 있었다. 검색한 것 다음에 다시 떠올리지 못하면 아쉬울 것 같아서 줄글로라도 적어놓는다. 사진이 둥둥 떠 다니는 keyframe 애니메이션 검색하다 블로그에서 mac이랑 safari에서는 background-position에 keyframe 먹인 게 안 보인다고 해서 추가로 더 검색해봤던 것 같다. caniuse도 들어가봤는데 특별히 빨갛지 않았고 2021년 이후 검색결과만 필터링해 보기도 했는데 얘기가 많지 않은걸로 봐서는 써도 괜찮지 않을까 싶어서 (사실 엔진별로 설정해 놓은 게 너무 길어서 무서웠다) 계획대로 position을 위아래로 조정했다. 처음엔 당..

지난 번 sessionId를 이용한 로그인 구현 시 이론과 실재 간의 큰 벽을 느꼈다. 이번엔 나중에 헤메지 않도록 미리 몇가지 튜토리얼을 보고 어떻게 사용하는지 공부하기로 했다. 참고자료 * 토큰과 JWT 필기 내용 https://couch.tistory.com/175 [SEB TIL] 54일차 / Token OAuth 4. Token / OAuth 더보기 학습 목표 토큰의 개념을 이해할 수 있다. Refresh Token과 Access Token의 차이를 이해한다. 쿠키 / 세션 방식과 토큰 방식의 차이를 이해할 수 있다. JWT의 작동원리에 대해 이해할 couch.tistory.com * JWT 이해하기 백엔드 측에서의 설명이지만 JWT를 사용하는 과정에 대해 설명이 잘 되어 있어서 이해에 도움이 ..

도시님이랑 페이지 단위로 나누어 작업하다보니 메인페이지에서 주로 보이는 것들을 대부분 담당하고 있다. 프리 프로젝트 때와 완전히 반대로 맡아 작업중이다. 오히려 좋아.. 칼럼그리드 작업을 제대로 시작하기도 전에 난관에 부딪혔다. 그동안은 리스트 불러오고 필터링하는 기능이 우선이라 navbar 버튼을 대충 띄워놓고 썼는데, 화면에 예쁘게 정렬하려고 하니 도저히 모바일/데스크탑 2단 구성으로는 불가능해 보였다. 그래서 늘렸다 줄렸다 해 가면서 타블렛 사이즈를 끼워넣었다. 이렇게 하니 카드도 그냥 퍼센트 사이즈로 줄일 수 있어서 오히려 좋아.. 값을 다 변수로 만들어 놔서 다행이었다. 값 하나씩 찾아다니면서 수정했어야 될 뻔 ㅠ GNB NavLink 도시님 덕분에 NavLink를 알게 되었다. 'Link'에도..

계속 콘솔 찍고 API 요청에 맞춰 요청값 들어가는지 확인하고 응답 확인해 가며 만든 거라 따로 길게 적을 건 없지만 오늘 삽질한 게 너무 많아서 간단하게 적기만이라도 하려고 한다. 리스트 필터링 event.target과 event.currentTarget 분명히 카테고리 '버튼'을 클릭했는데 target으로 그 안에 있는 'div'가 들어와서 당황했다. 버블링이 일어나는 요소에서는 target과 currentTarget이 참조하는 게 다르다는 것을 처음 알았다. 내부 target을 집어내고 싶은 경우는 별로 없을 테니 웬만하면 그냥 currentTarget을 쓰는 게 좋을 것 같다. https://velog.io/@sa833591/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9C%84%EC..

튜토리얼 23만이라는 어마무시한 조회수의 무한스크롤 설명 영상을 찾았다. https://www.youtube.com/watch?v=NZKUirTtxcg 강의를 통해 새로 배운 것 커스텀 훅 제작 (1) 커스텀훅의 초기값 usestate의 초기값으로 항상 고정된 값만 줘 왔는데, 거기에 변수를 넣어서 쓰는 건 처음 해 봤다. 초기값에 변수(categoryQuery, pageNumber)를 넣고 hook 내부에서 그걸 dependency로 설정해 두면, 변수가 변경될 때마다 hook 내부에서도 변화가 일어난다. 반대로 hook 내부에서 리턴하는 값(구조분해할당으로 받아오는 loading, error, cards, hasMore)이 변경되어도 이것을 사용하는 곳에서 리렌더링이 일어난다. 적으면서 따라가보니 저..