일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- function
- VUE
- redux
- Number
- BIND
- 객체
- 투두리스트
- null
- typescript
- const
- 리액트
- 컴포넌트
- 데이터 타입
- this
- 라우터
- react
- ES6
- 모던
- var
- 스코프
- js
- 타입스크립트
- 모던 자바스크립트
- 뷰
- let
- Interface
- 자바스크립트
- 함수
- todolist
- CSS
- Today
- Total
목록전체 글 (83)
홍준혁
react query에서 무한스크롤을 구현하려면 useInfiniteQuery라는 훅을 제공합니다. 하지만 먼저 서버쪽에서 페이지네이션을 구현해야 합니다. 현 HLOG서버의 get /post의 반환값은 모든 포스트를 반환하게 됩니다. 이를 페이지네이션을 반환하는 방식으로 변환해보도록 하겠습니다. 페이지네이션 방식에는 offset방식과 cursor방식이 있는데, offset방식은 limit, offset쿼리를 사용하여서 페이지를 구분합니다. >이런 방식에 클릭하는 네이게이션을 사용할 때 주로 사용하는 방식이죠. cursor기반 방식은 무엇일까요? 최근 idx를 기준으로 구분하는 방식입니다. 이는 저희가 구현하려는 무한스크롤 방식에 적합합니다. const page = Number(req.query.page)..
React에서 테스트를 하는 방법을 알아보도록 하겠습니다. HLOG를 개발하면서 테스트의 중요성을 깨닫게 되었는데요, 가장 중요한 이유는 사람은 언제나 실수를 한다는 점입니다. 사람은 완벽하기 않기 때문에 하나하나 테스트를 하게 되면 굉장히 귀찮은 작업이 될 수 있습니다. 또한, 테스트 과정에서 놓치는 부분이 있을 수도 있죠. 그래서 이러한 테스트 코드를 자동화를 시켜 검증 단계에서 실수할 여지를 줄여주는 것이 중요하다고 생각하게 되었습니다. 두 번째로, 리펙터링을 하는 데 있어서 굉장히 유용하다고 생각하게 되었습니다. 리펙터링이란, 코드의 기능은 바꾸지 않으면서 내부 구조를 개선하는 작업을 의미하는데요, 이러한 작업이 필요한 이유는 유지보수에 용이하기 때문입니다. 그래서 테스트 코드로 케이스를 작성한 ..
안녕하세요? 오랜만에 블로그 포스팅을 하는 것 같습니다. 몇 개월 동안 정말 열심히 달려오느라 블로그 관리할 시간이 없었어요. 거두절미하고 이번 글의 주제는 HLOG 리펙터링이에요. 기존의 레거시 코드를 전부 효율적이고 읽기 편한 코드로 변환하는 작업을 하려고 해요. 또한, 기술 스택도 기존에 사용해보지 않았던 SWR(Data-fetching Library)를 사용해서 작업을 해보려고 합니다. 그리고 Next.js를 벗어나 React를 이용해서 개발을 진행하려고 합니다. 그리고 기존에 미약했던 반응형 디자인 시스템도 새로 구축해보려고 합니다. 이번 리펙터링의 최대 목표는 선언적으로 코딩하기입니다. 트러블 슈팅 - React-Router-Dom사용 시, 직접 주소 입력을 할 때 Cannot GET이 뜨는 ..
React에서 토큰 기반 인증을 어떤 식으로 하는 것이 가장 효율적일까요? 많은 방법이 있겠지만 이번 포스트에서는 제가 생각했을 때 가장 효율적이라고 생각하는 인증 방식을 기술하려고 합니다. 먼저 토큰이 흘러가는 방식을 한번 생각해봅시다. AccessToken으로 인증을 진행하게 됩니다. 만약 AccessToken이 만료된다면 RefreshToken으로 Refresh를 해주어야 하죠. 왜 AccessToken을 계속 사용하지 않고 Refresh를 주기적으로 해주어야 할까요? 그 이유는 보안에 있습니다. AccessToken이 중간에 탈취된다면 정보 누출의 위험이 있겠죠. 그래서 AccessToken의 만료기간을 짧게 주고 RefreshToken의 만료기간을 길게 유지해 인증을 유지하는 것입니다. 위 스펙..
https://hong-jh.tistory.com/entry/React-Query%EC%99%80-%EC%A0%84%EC%97%AD-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC React Query와 전역 상태 관리 전역 상태 관리 라이브러리인 리덕스로 대부분의 프로젝트를 진행을 했었는데, 사용하면서 느낌 문제점은 다음과 같습니다. - 대부분의 전역 상태는 비동기 통신을 위해서 쓰이고 있다. - Store의 hong-jh.tistory.com 위 글에서 작성한 내용을 실제로 사용하려면 개념적으로 아직 무리가 있다고 생각해서 좀 더 실무적인 방법으로 정리한 글이다. FE에서 상태관리란 무엇인가? 상태 : 언제든지 변경될 수 있는 저장된 데이터 (관리해야 하는 데이터들) - 애플리케이..
전역 상태 관리 라이브러리인 리덕스로 대부분의 프로젝트를 진행을 했었는데, 사용하면서 느낌 문제점은 다음과 같습니다. - 대부분의 전역 상태는 비동기 통신을 위해서 쓰이고 있다. - Store의 역할이 너무 비대하다. - 보통 비동기 전역 상태는 data, error, loading이 세가지로 나누는데 그럼, 전역으로 관리하는 상태가 많아진다면 비효율적일 것이다. - 순수 클라이언트의 전역 상태와 비동기 전역 상태와 비교했을 때 비동기 전역 상태가 월등하게 많다. 해결 방안은 무엇일까요? - store에서 비동기 통신하는 부분들을 걷어내고 온전한 Client의 상태만을 남겨 놓는다. - Store밖에서 서버와 관련된 상태 관리방안 마련한다. - (중요) 서버와 관련된 상태는 전역 상태처럼 사용할 수 있어..