전체 글
-
역행자 돈·시간·운명으로부터 완전한 자유를 얻는 7단계 인생 공략집 - 자청서평 2022. 8. 19. 17:35
타고난 운명 그대로 평범하게 사는 95퍼센트의 사람을 순리자라 하자. 그러나 정해진 운명을 거스르는 능력을 가진 5퍼센트를 역행자라고 부르자. 1. 역행자로 가는 7 단계 1. 자의식 해체 자의식 해체가 가져다주는 결과는 '자유'다. 자의식 해체의 3단계 탐색 : 자신의 기분 변화 등을 잘 관찰하고, 이 기분이 어디에서 오는지 확인한다. 인정 :기분 변화의 이유를 객관적으로 잘 살펴보고, 현재 자신의 처지와 비교해서 인정할 것은 순순히 인정한다. 전환 :인정을 통해 열등감을 해소하고, 이걸 변화의 계기로 삼기 위한 액션 플랜을 만든다. 2. 정체성 만들기 아직까지 이 책을 덮지 않고 내 얘기를 진지하게 읽어주고 있다면, 앞에서 나의 지질한 과거를 읽으면서 ‘이랬던 사람도 책을 읽고 변했는데, 나도 할 수..
-
React 최신 상태관리 라이브러리 비교하기 (feat. zustand, redux-toolkit, jotai, recoil)React 2022. 8. 16. 17:28
1. redux-toolkit(rtk)을 그만 사용하려는 이유 나의 경우 react를 시작하고 redux-saga -> mobx -> redux-saga -> redux-toolkit 순으로 사용했을 정도로 redux의 사용을 좋아하고 즐겨 사용했다. 하지만 이제 api 통신을 react-query로 변경하고 프로젝트를 진행하는 요즘에는 rtk를 통한 글로벌 상태 관리를 하는 경우가 무척 줄어들거나 아예 사용하지 않는 프로젝트들이 생겨났다. 상황이 이렇게 되니 rtk의 단점들이 보이기 시작했고 두 가지 글로벌 상태 관리 라이브러리를 선택했다. 2. zustand와 jotai 두 라이브러리는 각각 독일어와 일본어로 상태를 뜻하는 단어로 이름에서 알 수 있듯이 모두 Poimandres의 카토 다이시가 주가 ..
-
NextJS에서 react-query 사용하기Next.js 2022. 8. 15. 17:00
(해당 글은 next@12.2 react-query@3.39.1을 바탕으로 작성되었습니다.) 1. 왜 react-query인가? 이제 개발을 할 때 react-query는 필수에 가까운 요소가 됐다. 물론 NextJS를 사용하고 문서를 읽어본 사람들이라면 이런 의문을 가질 수 있다. swr이 있는데? 물론 두 라이브러리 모두 좋은 라이브러리이다. 하지만 react-query를 사용해야 되는 이유를 간략하게 설명하겠다. 1. swr은 데이터 패칭(fetching)을 위한 리액트 훅이다. 이 말을 간단하게 이야기하자면 swr과 react-query는 get을 위한 useQuery는 존재한다. 그러나 post를 위한 useMutation은 react-query에만 존재한다. 물론 swr 역시 mutate가 있..
-
NextJS 사이트맵(Site Map) 만들기Next.js 2022. 7. 14. 16:47
(해당 글은 next@12.2 next-sitemap@3.1을 바탕으로 작성되었습니다.) 1. Site Map은 왜? 모든 게 다 좋아 보이는 NextJS를 사용할 때 문제가 되는 부분이 있다. 바로 사이트맵을 생성하는 일이다. 물론 사이트맵을 생성하지 않는 방법도 있다. 실제로 구글에서는 아래와 같이 사이트 맵의 필요성을 정의하고 있다. 매우 큰 사이트. 크기로 인해 Google 웹 크롤러가 신규 또는 최근에 업데이트된 페이지를 지나칠 수 있습니다. 서로 잘 연결되지 않거나 전혀 연결되지 않는 콘텐츠 페이지를 보관 처리하는 대규모 자료실이 있는 사이트. 사이트 페이지가 서로 자연스럽게 참조되지 않는 경우 페이지를 사이트맵에 표시하면 Google이 일부 페이지를 누락하는 일이 생기지 않습니다. 연결되는 ..
-
Lazy initialization로 useState 최적화하기Tip 2022. 6. 27. 17:43
react로 프로젝트를 만들 때면 생각보다 초기값을 넣어주고 해당 값이 앱을 재 실행하기 전까지 변하지 않는 경우가 많다. 평소라면 이런 초기값 할당은 큰 문제가 없다. 하지만 초기값으로 복잡한 값을 할당하거나 한 경우 reRender를 실행할 때마다 해당 함수가 계속 재 실행되게 되어 불필요한 낭비가 발생한다. 이를 해결하는 것은 무척 간단하다. const getLocalData = () => window.localStorage('cacheCount'); // 평소 [count, setCount] = useState(getLocalData()); // Lazy Initialization [count, setCount] useState(()=> getLocalData()); 위와 같이 useState의 ..
-
M1 Mac에서 zsh + oh-my-zsh + p10k 설정하기Tip 2022. 6. 15. 12:02
해당 글은 m1 Mac OS 12.4와 iTerm2 터미널을 바탕으로 작성되었습니다. 1. Zsh의 장점 같은 이름의 파일이 있을 경우 중간자로 파일의 자동완성이 가능하다. ex. aaa-111.txt, aaa-111.pem이 있을 때 txt로 자동완성이 된다! Git의 상태 확인이 가능하다(branch 이름, track 여부 등) 명령어 별 히스토리를 제공한다. cd, vim등의 명령어를 입력한 뒤 위 방향키를 누르면 해당 명령어의 이전 기록을 자동완성시켜줌. 경로 추정이 기능이 있다. cd doc > 탭 > cd Documents 비주얼적으로 더 이쁘다! 2. oh-my-zsh oh-my-zsh은 zsh configuration을 관리하기 위한 프레임워크로 플러그인, 테마를 적용할 수 있어 zsh를 ..
-
NextJS에서 react-query SSR 데이터 사용하기Next.js 2022. 6. 7. 15:18
react-query는 개인적으로 요즘 가장 핫한 라이브러리라고 생각한다. redux의 thunkAPI 등을 많이 사용했던 이전의 방식에서 react-query를 통해 get과 post방식의 query를 손쉽게 사용할 수 있으면서 데이터를 손쉽게 cache 할 수 있다는 점에서 무척이나 매력적인 라이브러리라고 할 수 있다. nextJS는 요즘에는 react개발자라면 모두 알 정도로 유명한 프레임워크이다. 그리고 nextJS를 유명하게 만든 가장 큰 요소 중 하나는 SSR이라고 생각하는데, 아쉽게도 react-query의 hook의 경우 SSR이 아닌 CSR방식으로 데이터를 가지고 온다. 이제 본격적으로 react-query의 데이터를 SSR로 사용할 수 있는 2가지 방법에 대해 설명하겠다. 1. Init..
-
NextJS Babel에서 SWC로 이사가기 2Next.js 2022. 5. 20. 12:21
( 이 글은 next@12.1.6, antd@4.20.5를 기반으로 작성되었습니다. ) 이전 글에 이어 Babel에서 SWC로 넘어갈 수 없었던 가장 큰 이유를 해결한 방법에 대해 써보겠다. 1편에 썼던 내용 중 styled-components에 대한 swc지원은 가장 빠른 수준으로 작성되었기에 해당 부분에 대해서는 큰 문제가 없었다. 하지만 가장 큰 문제는 내가 즐겨 사용하는 antd의 customize theme를 이용하지 못하는 문제였다. 해당 기능을 NextJS에서 이용하기 위해서는 next-plugin-antd-less라는 플러그인을 사용해야 한다. 이곳에서 문제가 발생했기에 여러 시행착오를 겪어야 했다. 1. antd의 Dynamic Theme (Experimental)을 활용하기 이 방법은 ..