Age of Discovery

styled-components로 같은 스타일을 입히지만 각기 다른 html태그를 사용해야 될 때가 있다. 예를 들어 p태그, h1태그, span태그 등은 모두 문자를 표현하는 마크업 언어지만 성질이 다르다. 이 때 다른 성질을 유지하면서도 스타일을 같게 유지하려면 styled-component에서 as prop을 사용하면 된다. ( 타입스크립트입니다. ) const Typography = ({ as = "p", color, children, ...props }: Props) => { return ( {children} ) } 위와 같은 Typography라는 컴포넌트를 만들어서 DynamicTypography 를 리턴해주자 여기서 DynamicTypography는 Styled-component이다. 분..

사이드 프로젝트를 진행하면서 제어컴포넌트와 비제어컴포넌트에 대해 알게되었다. 리액트에서 input을 이용하는 방식 중에 state와 onChange를 이용해 실시간으로 value를 감지하며 input을 제어하는 방식이랑 ref로 렌더링은 일으키지 않으면서 input의 value값만 취하는 방식이 있다 라는 정도만 알고 있었는데 정확한 명칭이 있었다.. 같이 프로젝트 하는 분께서 https://legacy.reactjs.org/docs/uncontrolled-components.html Uncontrolled Components – React A JavaScript library for building user interfaces legacy.reactjs.org 이 링크를 주시면서 공식문서를 읽어보면 ..

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

그동안 정신이 없어서 꽤 오랜만에 글을 남겨본다...ㅎㅎ 링크게더 사이드프로젝트를 진행하면서 단순히 굴러가게 만드는 게 아니라 코드 컨벤션과 개발 문화를 정립하며 어떻게하면 반복을 줄이고 재사용할 수 있을 지를 많이 생각할 수 있게 됐다. emotionJS로 styled component를 생성하여 재사용하고 props에 따라 조건적으로 다른 스타일을 보여주는 방법을 공유하고자 한다. 사실 styled component랑 크게 다를건 없지만 https://next--emotion.netlify.app/docs/typescript Emotion - TypeScript Emotion includes TypeScript definitions for @emotion/react and @emotion/style..

리액트의 고차함수에 대해서 알게 된 내용을 정리하고자 한다. HOC(Higher-Order-Components)는 컴포넌트를 개발하는 하나의 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다. 다른 분들이 써놓으신 블로그랑 공식문서를 찾아보면서 재밌어 보였고 고오급 기술이라는게 눈에 띄어서 공부해봤다. HOC를 쉽게 정의하면 상태관리 로직을 재사용하는 컴포넌트고 생각하면 된다. 여기서 사용하는 로직은 데이터를 받아와서 뿌려주는 정도로 아주 간단하게 작성했다. 바로 코드부터 살펴보자 import React, { ComponentType } from 'react'; import axios from 'axios'; import { useEffect, useState } from 'r..

가끔 구글검색창에 손이 가는 대로 검색하는 경우가 있다. 어떤 단어든 말이다. 우연찮게 손이 가는대로 오늘 프로젝트이름인 디벨킷을 검색해 봤는데 오잉? 익숙한 문구와 도메인이 가장 상단에 떠서 들어가 보니 우리가 만들었던 프로젝트의 웹페이지가 나왔다. 원래는 검색이 안 됐던 걸로 기억하는데 뭐지? 클라이언트 사이드 렌더링 방식으로 동작하는 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..

https://jurgen-94.tistory.com/91 [React] - 라이브러리 없이 무한 슬라이드 구현 (1) 프로젝트 하면서 맡게 된 캐러셀 기능을 라이브러리없이 구현해보자! 내가 원하는 기능들은 1. 하단 동그라미 클릭시 해당 이미지로 움직이기 2. 좌우 Arrow버튼으로 이미지 슬라이드 3. 약 3초마 jurgen-94.tistory.com 이전에 했던 포스팅에 이어 이제는 실제로 함수를 만들고 동작시켜보자. useEffect훅에 handleOriginSlide가 있기 때문에 handleOriginSlide 함수먼저 살펴보자 function handleOriginSlide(index: number): void { setTimeout(() => { setNum(index); setCarous..

프로젝트 하면서 맡게 된 캐러셀 기능을 라이브러리없이 구현해보자! 내가 원하는 기능들은 1. 좌우 Arrow버튼으로 이미지 슬라이드 2. 약 3초마다 자동 슬라이드 3. 무한 슬라이드 이정도라고 할 수 있겠다. 코드를 한줄씩 파헤쳐보자 const imageBox = useRef(null); 우리가 만들 캐러셀의 사진배열들을 보관하는 div 컨테이너에 imageBox라는 변수명의 useRef를 지정해준다. 타입스크립트를 사용했기 때문에 useRef가 지정될 Dom타입을 붙여준다. const [num, setNum] = useState(1); 현재 구현하려는 기능의 핵심중의 핵심이다. 이 state를 어떻게 갖고노느냐에 따라 이미지를 좌우자재로 이동시킨다. const [carouselTransition, s..

나는 운이 정말 좋은 사람이다. 프로젝트 하나를 마친 후 교육기관의 매니저를 맡게 됐는데 동시에 다른 프로젝트에 참가하게 됐다. 이름은 링크 게더 인적 자원과 기술적 자원을 공유하는 서비스이다. 쉽게 말하면 사이드 프로젝트 모집 플랫폼 누군가 보기엔 다소 진부할 수 있는 주제이지만 이 프로젝트가 나한테 특별하게 다가오는 이유는 현업에서 일하고 계신 분들과 같이 하게 됐고 또한 그 회사의 기획자, 디자이너 분까지 모셔 기획부터 탄탄하게 진행되고 있기 때문이다 유지보수가 용이하며 동시에 클린 한 코드를 작성할 수 있는 기회에 목말랐던 나에게는 둘도 없는 찬스이지 않을까.. 지난 프로젝트에선 6주 안에 결과물을 완성시키는 게 우선이었기 때문에 시간에 쫓기며 굴러가게만 만들었다. 그에 대한 대가는 바로 손도 못..

간단하지만 강력하다. 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 폴더안에 메인로직을 둔 상태에서 제어하는 것이다. 위와 같은 패턴의 장점은 로직과 렌더링이 분리되어 ..

🟢 대표적인 3가지 리렌더링 조건 Props 변경 (=> properties의 줄임말) State 변경 부모 컴포넌트 렌더링 1️⃣ Props 변경 Props 업데이트가 일어나면 리렌더링을 한다. Props가 변경되는 건 부모 컴포넌트의 State도 변경이 일어난다는 의미이다. 부모 컴포넌트의 State 변경이 발생하면 Props도 업데이트되고, 모든 하위 컴포넌트에 대해 리렌더링이 발생한다. 2️⃣ State 변경 State 업데이트가 일어나면 리렌더링을 한다. 리액트에서 State 값이 변경되면 관련 컴포넌트들을 전부 리렌더링 한다. 리액트는 변화를 바로바로 감지하여 화면에 변경사항을 보여주기 때문이다. 3️⃣ 부모 컴포넌트 렌더링 부모 컴포넌트가 렌더링을 하면 그 자식 컴포넌트들은 모두 리렌더링 한..