소파에서 개발하기

어제 정답률 가장 낮은 걸 2시간동안 풀어서, 정답률 높은 건 훨씬 금방 풀 수 있겠다고 생각했는데 천만의 말씀이었다. 어제 그 속도가 메서드를 바로바로 검색해가면서 푼 속도였다는 걸 잊고 기고만장했다. 흑흑. 문제 더보기 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다. 전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 "지도 1"과 "지도 2"라고 하자. 지도 1 또는 지도 2 중 어..

본격적으로 취준과 코테 준비가 시작되었다. 스터디에서 프로그래머스 문제 중 정답률 낮은 것들을 함께 시간 정해 풀기로 했는데 오랜만에 알고리즘 문제를 푸니 필요한 메서드들을 다 까먹어서, 기억을 더듬고 검색해 가면서 풀었다. 이런 메서드 잘 공부해두는 것도 중요하겠다. 문제 더보기 문제 설명 문제 설명 신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다. 각 유저는 한 번에 한 명의 유저를 신고할 수 있습니다. 신고 횟수에 제한은 없습니다. 서로 다른 유저를 계속해서 신고할 수 있습니다. 한 유저를 여러 번 신고할 수도 있지만, 동일한 유저에 대한 신고 횟수는 1회로 처리됩니다. k번 이상 신고된 유저는 게시판 ..

메인 프로젝트에 접어들면서 '드디어 타입스크립트를 적용할 때인가..!'하고 두근두근했지만 '잘못하면 빨간줄 잡다가 끝날 수 있다'는 멘토님의 조언에 꿈을 잡깐 접었었다. 어제 수료했으니 자유의 몸(?)이 된 지금 다시 시작하련다. 시작에 앞서 이 아티클을 읽었는데 전반적인 목표를 가늠하는 데 도움이 되었다. 단계별 목표를 제시해 주어서 공부하는 중간중간 읽고 이정표를 세우기 좋을 것 같다. https://yozm.wishket.com/magazine/detail/1376/ TypeScript는 어떻게 공부해야 하나요? | 요즘IT 지금 현재 개발하는 상황을 보면 TypeScript는 피할 수 없는 하나의 대세가 된 것 같습니다. TypeScript가 나온 이후로 점점 TypeScript로 만들어지고 있는..

보호되어 있는 글입니다.

토큰 로그인.. 정말 우여곡절이 많았다. '완성'이라는 건 오류가 나지 않고 동작하도록 만들었다는 뜻이다. 사실상 오늘까지가 개발을 할 수 있는 마지막 날이고 이후부터는 발표 준비를 해야 했었는데, 오늘 오후까지도 해결이 되지 않아 너무 초조했다. 도대체 무엇이 오류인지 잡히지가 않아서, 맘먹고 노트에 손글씨로 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을 위아래로 조정했다. 처음엔 당..

프로젝트를 진행하며 react에서 state 변화와 리렌더링 시점의 관계에 대해 궁금증이 생겼다. 뭐라고 검색해야 할 지 모르고 있다가 오늘 배칭이라는 용어를 알게 되고, 궁금증에 대한 답을 어느 정도 얻었다. * 발단이 된 영상 : batching이 뭔지 대략 알려줌 https://youtu.be/wZiOGxOhJNs * 그 뒤 batching이 '하나의 함수 스코프 안에서 여러 개의 state를 변경할 경우 이를 한 번의 리렌더링으로 묶어서 진행하는 기능'이라는 것을 알게 됨. 이게 17버전까지는 이벤트함수에서만 자동으로 적용되고 비동기 함수에서는 적용되지 않았지만, 18부터는 모든 함수에서 디폴트가 되었다고 한다. https://merrily-code.tistory.com/226 미리 만나보는 au..

지난 번 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를 사용하는 과정에 대해 설명이 잘 되어 있어서 이해에 도움이 ..