코딩병원

[IT 상식] 모노레포란? (with Turborepo)

모노레포는 '하나의 저장소'를 의미하는 'Monolithic Repository'의 줄임말로, 많은 프로젝트를 단일 저장소에서 관리하는 방식을 말합니다. 즉, 여러 개의 소규모 레포지토리(다중 레포지토리, 또는 멀티레포) 대신 하나의 거대한 리포지토리를 사용하는 것을 의미합니다. 모노레포는 언제 사용해야 효율적일까? 유사한 서비스들을 만들 때 한 서비스의 모바일 페이지, PC 페이지를 만들어야 할 경우 공통 기능들이 존재할 수 있는데, 이 때 사용하면 효율성 증가 여러 프로젝트를 한 눈에 파악해야 할 때 하나의 저장소에 여러 프로젝트를 구성 가능 동일한 개발자 경험을 느껴야 할 때 하나의 저장소에서 동일한 린트, 프리티어를 설정해 동일한 개발자 경험 제공 모노레포의 배포 방식모노레포는 많은 장점이 있지만..

1. 웹개발/1_3_2 IT 상식 2024. 6. 30. 18:48

ERR_PNPM_ADDING_TO_ROOT 해결 방법

Pnpm으로 의존성 패키지를 설치 하였는데 아래와 같은 오류가 발생하였습니다. ERR_PNPM_ADDING_TO_ROOT Running this command will add the dependency to the workspace root, which might not be what you want - if you really meant it, make it explicit by running this command again with the -w flag (or --workspace-root). If you don't want to see this warning anymore, you may set the ignore-workspace-root-check setting to true. [에러 원인..

1. 웹개발/1_1_8 Error Handling 2024. 6. 23. 18:02

[IT 상식] pnpm을 사용하는 이유 (vs npm)

오늘은 기존의 npm과는 다른 pnpm에 대해 알아보겠습니다. 저는 npm만 사용하다가 최근에 pnpm을 알게 되었는데, 단순히 더 빠르다는 것만 알고 있었습니다. 그래서 이참에 pnpm에 대해 더 자세히 공부해 보고 싶어졌습니다. pnpm은 속도, 디스크 공간 절약, 그리고 강력한 모듈 관리 기능을 통해 기존 패키지 매니저들보다 뛰어난 이점을 제공합니다. 지금부터 pnpm의 특징과 장점을 자세히 살펴보겠습니다. Saving disk space npm을 사용할 때는 100개의 프로젝트가 동일한 의존성을 사용하면, 각 프로젝트마다 그 의존성의 복사본이 디스크에 저장됩니다. 하지만 pnpm을 사용하면, 의존성은 콘텐츠 주소 지정 저장소(content-addressable store)에 저장됩니다. 만약 각기..

1. 웹개발/1_3_2 IT 상식 2024. 6. 15. 09:40

img is a self-closing tag and must neither have `children` nor use `dangerouslySetInnerHTML`. 해결 방법

사이드 프로젝트로 코딩하던 도중, 일반적인 img태그와 Next.js에서 제공하는 Image태그를 비교하다가 아래와 같은 에러가 발생하였습니다.img is a self-closing tag and must neither have `children` nor use `dangerouslySetInnerHTML`. 해석하자면, "img는 자동 닫힘 태그로 자식을 두거나 속성으로 dangeroslySetInnerHTML을 사용해서는 안 됩니다."인데 여기서 자동 닫힘 태그란 간단하게 자식이 없는 태그입니다.// 자동 닫힘 태그// 자동 닫힘 태그 아님블라블라 // dangerouslySetInnerHTML 속성 사용 불가Example' }} /> 에러 원인이미지 태그에서 컨텐츠를 가져서 그렇습니다. 작업하다가 ..

1. 웹개발/1_1_8 Error Handling 2024. 6. 1. 11:46

[React] Flux 패턴과 Elm 아키텍처

Flux 패턴의 등장 배경아래 그림에서 보실 수 있듯이 기존의 MVC 패턴은 상태를 변경하는데 추적하고 이해하기가 매우 어려운 상황이였습니다. 페이스북 팀은 이러한 문제의 원인을 양방향 데이터 바인딩으로 봤습니다. 뷰(HTML)가 모델(자바스크립트)을 변경할 수 있으며, 반대의 경우 모델도 뷰를 변경할 수 있습니다. 이는 코드를 작성하는 입장에서는 간단할 수 있지만 코드의 양이 많아지고 변경 시나리오가 복잡해질수록 관리가 어려워집니다. 페이스북 팀은 양방향이 아닌 단반향으로 데이터 흐름을 변경하는 것을 제안하는데 이것이 바로 Flux 패턴의 시작입니다. Flux 패턴action: 어떠한 작업을 처리할 액션과 그 액션 발생 시 함께 포함시킬 데이터를 의미합니다. 액션 타입과 데이터를 각각 정의해 이를 디..

1. 웹개발/1_1_5 React JS 2024. 5. 18. 12:18

[React] 성능을 측정하는 지표 (LCP, FID, CLS, FCP, TTFB 등)

구글에서 만든 지표로 핵심 웹 지표(Core Web Vital)가 있습니다. 이것은 웹사이트에서 뛰어난 사용자 경험을 제공하는 데 필수적인 지표를 일컫는 용어입니다. 구글에서 핵심 웹 지표로 꼽는 지표는 다음과 같습니다.최대 콘텐츠풀 페인트(LCP: Largest Contentful Paint)최초 입력 지연(FID: First Input Delay)누적 레이아웃 이동(CLS: Cumulative Layout Shift)그리고 다음 두 지표는 핵심까지는 아니지만, 특정 문제를 진단하는 데 사용될 수 있습니다.최초 바이트까지의 시간(TTTB: Time To First Byte)최초 콘텐츠풀 시간(FCP: First Contentful Paint) 최대 콘텐츠풀 페인트(Largest Contentful Pa..

1. 웹개발/1_1_5 React JS 2024. 5. 11. 12:06

[Jest] MSW로 비동기 이벤트 테스트하기

MSW(Mock Service Worker)는 Node.js나 브라우저에서 모두 사용할 수 있는 모킹 라이브러리로, 브라우저에서는 서비스 워커를 활용해 실제 네트워크 요청을 가로채는 방식으로 모킹을 구현합니다. 즉, fetch로 예를 들자면, 브라우저에서는 fetch 요청을 하는 것과 동일하게 네트워크 요청을 수행하고, 이 요청을 중간에 MSW가 감지하고 미리 준비한 모킹 데이터를 제공하는 방식입니다. 이러한 방식은 fetch의 모든 기능을 그대로 사용하면서도 응답에 대해서만 모킹할 수 있으므로 fetch를 모킹하는 것이 훨씬 수월해집니다. MSW를 활용해 fetch 응답을 모킹한 테스트 코드를 다음과 같이 작성해 봤습니다.import { fireEvent, render, screen } from '@t..

1. 웹개발/1_1_7 Jest 2024. 5. 6. 18:24

[Next.js] <a /> 태그와 <Link />의 차이

Next.js는 서버 사이드 렌더링을 수행하지만 동시에 싱글 페이지 애플리케이션과 같이 클라이언트 라우팅 또한 수행합니다. 이러한 방식의 라우팅이 다소 생소하게 느껴질 수 있으며, Next.js를 처음 접했을 때 가장 혼란을 느끼는 부분입니다. 서버 사이드 렌더링과 클라이언트 라우팅이 혼재돼 있는 것이 복잡하게 느껴질 수도 있습니다. 아래 코드를 살펴보겠습니다. import type { NextPage } from 'next'; import Link from 'next/link'; const Home: NextPage = () => { return ( A 태그로 이동 {/* 차이를 극적으로 보여주기 위해 리소스 미리 가져오는 prefetch off */} next/link로 이동 ) } export de..

1. 웹개발/1_1_6 Next JS 2024. 5. 4. 11:13

[React] forwardRef와 useImperativeHandle 훅이란?

useImperativeHandle은 실제 개발 과정에서는 자주 볼 수 없는 훅으로 널리 사용되지는 않습니다. 그럼에도 useImperativeHandle은 일부 사용 사례에서 유용하게 활용될 수 있습니다. useImperativeHandle을 이해하기 위해서는 먼저 React.forwardRef에 대해 알아야 합니다. forwardRef란? ref는 useRef에서 반환한 객체로, 리액트 컴포넌트의 props인 ref에 넣어 HTMLElement에 접근하는 용도로 흔히 사용됩니다. key와 마찬가지로 ref도 리액트에서 컴포넌트의 props로 사용할 수 있는 예약어로서 별도로 선언돼 있지 않아도 사용할 수 있습니다. 만약 이러한 ref를 상위 컴포넌트에서 하위 컴포넌트로 전달하고 싶다면 어떻게 해야 할..

1. 웹개발/1_1_5 React JS 2024. 5. 1. 13:52

[React] 커스텀훅 vs 고차 컴포넌트

일반적인 자바스크립트에서 재사용 로직을 작성하는 방식 외에도 리액트에서는 재사용할 수 있는 로직을 관리할 수 있는 두 가지 방법이 있습니다. 바로 커스텀훅(custom hook)과 고차 컴포넌트(higher order component)입니다. 커스텀 훅과 고차 컴포넌트가 무엇이며 어떻게, 언제 쓰이는지 알아보도록 하겠습니다. 커스텀 훅(custom hook)서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용되는 것입니다. 고차 컴포넌트의 경우 리액트가 아닌 곳에서도 사용이 가능하지만, 커스텀 훅은 오로지 리액트에서만 사용할 수 있는 방식입니다. 이러한 커스텀 훅의 규칙 중 하나는 이름이 반드시 use로 시작하는 함수를 만들어야 합니다. 만약 규칙을 따르지 않는다면 다음과 같이 에러..

1. 웹개발/1_1_5 React JS 2024. 4. 27. 11:30

[React] useLayoutEffet와 useEffect

공식문서에 따르면 useLayoutEffect를 다음과 같이 정의하고 있습니다.'이 함수의 시그니처는 useEffect와 동일하나, 모든 DOM의 변경 후에 동기적으로 발생한다.' 먼저 '함수의 시그니처가 useEffect와 동일'하다는 것은 두 훅의 형태나 사용 예제가 동일하다는 것을 의미합니다.export default function App() { const [count, setCount] = useState(0); useEffect(() => { console.log('useEffect', count); }, [count]); useLayoutEffect(() => { console.log('useLayoutEffect', count); }, [count]); function..

1. 웹개발/1_1_5 React JS 2024. 4. 20. 10:21