react6 패키지 개발 시 CSS 번들링 적용 방법: vite와 exports field를 곁들인 들어가면서 React 기반 컴포넌트를 개발하고, Vite를 이용한 번들링하는 환경에서 별도의 패키지를 만들었다. 이 글에서는 TodoList 컴포넌트 패키지를 예시로 들어 설명한다. 하나의 패키지에서 개발된 컴포넌트처럼 해당 패키지가 다음과 같이 사용할 수 있도록 구성하는 것이 목표였다.import { Todolist } from "@test/todolist" 그러나 기대했던 바와 달리, 해당 컴포넌트를 import한 부분에서 CSS가 제대로 적용되지 않았다. dist 폴더를 확인해보았을 때, index.css가 정상적으로 빌드되어 있었고패키지를 별도로 실행했을 때, 네트워크 탭에서 index.css가 로드되고 제대로 CSS가 적용되는 것도 확인할 수 있었다. 이를 해결하기 위한 실험해 본 여러가지 .. 2025. 3. 11. [DX] ESLint, Prettier 무엇인지 알고 설정해보기 들어가면서ESLint와 Prettier는 React의 기능이 아니지만, React 프로젝트에서 자주 사용하는 도구이기 때문에 해당 카테고리에 기술한다. Prettier와 Lint를 사용하지 않으면 다음과 같은 문제가 발생할 수 있다. - 의도하지 않은 구현 실수 때문에 에러가 발생하는 경우(예를 들어, 일관되지 않게 function과 arrow function를 혼용하여 this 바인딩이 의도한대로 발생하지 않는 문제) - 협업하는 인원이 많아질수록 개개인별 코드짜는 스타일이 달라 가독성이 떨어지는 경우(예를 들어, 줄바꿈이 4줄코드와 2줄인 코드의 연속적인 충돌 혹은 사용하지 않는 인자들의 잔재) 이러한 문제들은 작지만 신경 쓰이는 부분들로, 개발 생산성을 저하시킬 수 있다. (사실 필자가 겪은 .. 2024. 6. 3. [tailwind CSS] backgroundImage 설정 방법 - (config/style/custom) tailwind CSS - backgroundImage 설정 방법 - (config/style/custom)tailwind css로 backgroundImage를 설정하는 방법은 기록하고자 한다. tailwind 왕왕초보의 무작정 적용기! 목차0. 이미지 파일 부터 넣기 - assets 폴더를 pulbic에 넣을 것인가? src에 넣을 것인가?1. backgroundImage를 tailwind.config.js 파일에서 설정해보기2. style 속성에 backgroundImage를 설정해보기3. 일회성 속성일 경우, 임의 값을 설정하여 backgroundImage를 설정해보기 0. 이미지 파일 부터 넣기 - assets 폴더를 pulbic에 넣을 것인가? src에 넣을 것인가?public 폴더public.. 2024. 6. 2. [React] useRef에 대한 이해와 특정 DOM 조작 (부제: useRef로 특정 DOM 선택) 목차 1. 브라우저에서 Javascript의 존재 이유는 DOM 조작이다. 2. Javascript로 특정 DOM을 선택하는 방법은? 3. React에서는 특정 DOM을 어떻게 조작하는가? 4. React의 가상 DOM과 상호 작용하며 실제 DOM 조작하기 4-1. useRef 예제: useRef와 useState 함께 활용 5. useState와 useRef의 실질적인 차이점은? useRef에 대한 이해와 특정 DOM 조작 (부제: useRef로 특정 DOM 선택하기) (* 이해의 흐름을 바탕으로 작성한 글이기에 지식을 뽑기보다 천천히 정독함을 권장해드립니다. ) 필자는 useRef가 useState와 useEffect처럼 한 번에 이해되지 않았다. 드디어 이해했기에 글을 작성해본다. TODO: "특정.. 2023. 7. 18. [React] React Fragment 사용이유 및 사용법 (Adjacent JSX elements must be wrapped in an enclosing tag 해결) 목차 1. React.Fragment, Fragment의 차이점은? 2. 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 감싸야하는가? 1. React.Fragment, Fragment의 차이점은? 와 는 동일한 기능을 수행하는 React의 기능이다. 는 JSX에서 단축 구문으로 사용되며, 는 완전한 형태의 React 요소이다. React에서는 컴포넌트에서 여러 요소를 반환하거나, 부모 요소로 감싸지 않고 여러 요소를 렌더링해야 할 때가 있다. 아래 두 예시는 동일한 결과를 생성한다. 와 는 컴포넌트가 렌더링될 때 실제 DOM에는 나타나지 않고, 여러 요소를 그룹화하는 역할을 수행한다. JSX에서 는 축약된 표현으로 사용되며, 는 명시적인 형태로 사용된다. 하지만 기능적으로는 완전히 동일하다. //.. 2023. 6. 5. [React] vite로 react 프로젝트 설치 vite로 react 프로젝트 설치(Upate 2024.10.27) [Vite] Vite는 어떤 역할을 하고 있는가[Vite] Vite는 어떤 역할을 하고 있는가Vite를 사용하면서 잘 알지 못하고 사용하는 것 같아 한 번 정리하고자 글을 작성한다.공식 홈페이지에 따르면 ‘Next Generation Frontend Tooling’ 이라고 소개한다.bo5mi.tistory.com 1. vite란?빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 만들어진 빌드 도구이다. https://vitejs-kr.github.io/(기본적으로 vite는 Node.js가 설치 되어 있어야 한다. 노드 설치: https://nodejs.org/ko/download/) ViteVite, 차세대 프런트엔드 개발.. 2023. 4. 5. 이전 1 다음
