목록전체 글 (150)
On a couch
문제 상황 난생 처음 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를 사용하는 과정에 대해 설명이 잘 되어 있어서 이해에 도움이 ..
도시님이랑 페이지 단위로 나누어 작업하다보니 메인페이지에서 주로 보이는 것들을 대부분 담당하고 있다. 프리 프로젝트 때와 완전히 반대로 맡아 작업중이다. 오히려 좋아.. 칼럼그리드 작업을 제대로 시작하기도 전에 난관에 부딪혔다. 그동안은 리스트 불러오고 필터링하는 기능이 우선이라 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)이 변경되어도 이것을 사용하는 곳에서 리렌더링이 일어난다. 적으면서 따라가보니 저..
callback 함수 부분을 읽다가 promise를 설명하면서 generator 함수를 사용하는 것을 보았다. 써 본 적이 없어 낯설었는데, 스터디원 한 분이 좋은 자료를 찾아주셨다! https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36 💡🎁 JavaScript Visualized: Generators and Iterators ES6 introduced something cool called generator functions 🎉 Whenever I ask people about generator func... dev.to 개념 generator 함수는 ES6에서 소개되었다. 일반 함수가 run-to-completion..
버튼 컴포넌트 만들기 드디어 피그마로 세팅을 픽스하고 작은 컴포넌트 만들기를 시작했다. 가장 많이 쓰이고 기초적인 요소는 아무래도 버튼과 창이어서, 도시님과 각각 나누어 맡았다. 일단 Globalstyle에서 되도록 공통적인 스타일을 미리 정해두고, 각 페이지의 중간 단계 컴포넌트마다 사용하는 특징적인 형태에 맞춰 덮어썼다. 사용처 별 사용 방식을 생각해서 짜다 보니 생각보다 오래 걸렸다. props로 값을 받아 재사용시켜야 하는 경우도 있고, 데이터 배열에서 map 돌려서 텍스트를 넣는 경우도 있고.. 이 단계에서 자연스럽게 페이지 구조와 컴포넌트 구조도 나누게 됐다. * 검색한 것 : 버튼에 이모지 삽입하는 방법. 이모지도 결국 유니코드로 표현되는 것이라 텍스트로 취급하면 되는 거였다. https:/..
배경 프리 프로젝트 때는 '일단 스스로 사용 방법을 익히고 본다'는 심정으로 styled-component를 이렇게 저렇게 만지고 고민해가면서 사용방법을 익혔다. 그런데 아무래도 이걸 사용하는 best practice를 모르다 보니 긴가민가 하면서 헤메는 데 시간이 많이 들었다. 예를 들면 styled component를 각 레벨별로 따로 만들어야 하는지, 아니면 하나의 컴포넌트 안에서 내부 element를 class로 선택해야 하는지 몰라 갈팡질팡했다. 그래서 이번 main project에 들어서면서는 아예 처음부터 best practice를 따라하며 사용법을 배우고, 여기에서 우리에게 필요한 부분만 따 오고 싶었다. 튜토리얼 기준은 이 영상으로 잡았다. https://www.youtube.com/wa..