Age of Discovery

디벨킷 프로젝트를 타입스크립트로 열심히 마이그레이션하는 중에 react-full-page라는 라이브러리가 타입스크립트를 지원하지 않아서 생기는 오류에 대해서 정리해보려고한다. 자동으로 타입스크립트까지 지원해주는 라이브러리가 있는가 하면 스타일드 컴포넌트처럼 @types/styled-components 이런식으로 타입스크립트 패키지까지 추가설치해줘야하는 라이브러리도 있다. 하지만 저 오류메시지가 알려주는 것처럼 npm install --save-dev @types/react-full-page 명령어를 실행해 타입 패키지까지 추가설치해봐도 install자체가 안되고 온통 빨간 오류만 뜰 뿐이다. 바로 구글링에 들어갔다. https://github.com/zwug/react-full-page/issues/48..

가끔 구글검색창에 손이 가는 대로 검색하는 경우가 있다. 어떤 단어든 말이다. 우연찮게 손이 가는대로 오늘 프로젝트이름인 디벨킷을 검색해 봤는데 오잉? 익숙한 문구와 도메인이 가장 상단에 떠서 들어가 보니 우리가 만들었던 프로젝트의 웹페이지가 나왔다. 원래는 검색이 안 됐던 걸로 기억하는데 뭐지? 클라이언트 사이드 렌더링 방식으로 동작하는 SPA(이하 싱글페이지 애플리케이션) 프로젝트의 가장 큰 단점 중 하나가 검색 엔진 최적화가 안 되는 것인데 어떻게 우리 프로젝트가 검색엔진에 등록되는 것일까? 최근 SSR(이하 서버사이드 렌더링), CSR(이하 클라이언트 사이드 렌더링에 호기심이 생겨서 이것저것 공부해 보다가 이번 기회로 CSR은 어떻게 구글검색이 되는지 찾아보게 됐다. 처음엔 웹 호스팅과 서버 호스..

단기간에 결과물을 만들어내야 하는 프로젝트 특성상 타입스크립트를 선뜻 시도하지는 못했다. 타입스크립트 강의들으면서 공부하다 보니 어느 정도는 알게 됐지만 실제로 프로젝트에 적용하는 게 더 빨리 배우는 지름길이라 믿고 기존 cra로 구성한 프로젝트를 타입스크립트로 마이그레이션 해보기로 마음먹었다. 웹팩과 cra는 타입스크립트 입히는 데에 있어서 차이가 있다. 그 과정을 알아보자 1. TypeScript 추가 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 혹은 yarn add typescript @types/node @types/react @types/react-dom @types/jest 위의 명령어로 ..

https://jurgen-94.tistory.com/93 [React] - Intersection Observer로 무한스크롤 (1) 프로젝트 내에서 무한스크롤을 구현하기 위해 Intersection Observer API를 사용했으며 그 원론적인 상세내용은 React 무한 스크롤 구현하기 with Intersection Observer 🔥🔥 Intersection Observer API를 이용한 React jurgen-94.tistory.com 1탄에 이어 두번째 글!! 현 프로젝트에서 Intersection Observer를 사용하여 무한스크롤을 구현한 곳은 총 세 곳인데 우선은 공지사항을 받아오는 것부터 해보자! Intersection Observer의 동작원리에 대해서는 1탄에서 설명했고 실제로..

프로젝트 내에서 무한스크롤을 구현하기 위해 Intersection Observer API를 사용했으며 여러 곳에서 재사용하기 위해 커스텀훅으로 만들어 놓았다. 동작원리를 간단하게 설명하면 먼저 observer(관찰자)를 생성해준다 사용자가 브라우저에서 스크롤을 내려 observer가 타겟을 보게끔 해주면 추가적인 데이터를 받아와 화면에 렌더링 하는방식이다. 현재 프로젝트에서 Intersection Observer를 세개의 컴포넌트에서 사용하고 있기 때문에 커스텀 훅으로 만들었으며 그 훅을 먼저 설명하겠다. import { useEffect, useRef } from 'react'; export default function useObserver(options) { const { fetcher, depen..

간단하지만 강력하다. useModalOverlay라는 jsx파일을 만들어 준다. import { useCallback, useState } from 'react'; export default function useModalOverlay() { const [isOpen, setOpen] = useState(false); return { isOpen, open: useCallback(() => { setOpen(true); }, []), close: useCallback(() => { setOpen(false); }, []), toggle: useCallback(() => { setOpen((e) => !e); }, []), }; } 위와 같이 useCallback과 useState를 import해온 다음 ..

프로젝트를 시작하기에 앞서 디자인 패턴을 어떻게 잡을지에 대한 고민을 꽤 많이 했다. 규모가 꽤 있는 프로젝트는 처음이었기 때문에 무턱대고 진행했다가는 불상사를 겪을 수 있겠다는 마음이었다. 결과적으로 커스텀 훅 디자인 패턴을 적용하기로 결정했고 실제로도 프로젝트 중반까지는 잘 지켜졌지만 그 후엔 로직이 복잡해지면서 커스텀 훅을 만드는 것 자체에 어려움을 느꼈다. (역량 부족 이슈..) CUSTOM HOOK 패턴이란? 위와 같이 pages를 폴더별로 나눠 UI가 렌더링되는 부분을 index.jsx로 따로 두고 렌더링되는 부분이 복잡해지면 파트별로 구분해 components폴더안에 둔다. 그리고 hooks 폴더안에 메인로직을 둔 상태에서 제어하는 것이다. 위와 같은 패턴의 장점은 로직과 렌더링이 분리되어 ..