Front-end
-
React에서 순환 참조 문제 해결하기Front-end/React.js 2024. 10. 23. 18:13
React 프로젝트를 진행하다 보면 종종 순환 참조(Circular Dependency) 문제에 직면할 때가 있습니다. 순환 참조는 두 개 이상의 모듈이 서로를 직접적으로 또는 간접적으로 참조하는 경우 발생합니다. 이 문제는 런타임 에러를 발생시키고 애플리케이션이 제대로 동작하지 않게 만듭니다.이 글에서는 React에서 React.lazy()와 import()를 사용하여 순환 참조 문제를 해결하는 방법에 대해 알아보겠습니다.문제 상황React와 Material-UI(MUI)를 사용하여 커스텀 텍스트 필드와 셀렉트 필드 컴포넌트를 개발하던 중 순환 참조(circular dependency) 문제에 직면했습니다. 구체적으로, StyledSelectField 컴포넌트가 CustomTextField를 참조하고,..
-
React 프로젝트에서 SVG 파일 최적화 및 컴포넌트화Front-end/React.js 2024. 10. 21. 10:00
React 프로젝트에서 SVG 파일을 효율적으로 사용하려면, SVGR을 이용해 SVG 파일을 React 컴포넌트로 변환하고, SVGO를 사용해 파일을 최적화할 수 있습니다. 이 글에서는 pnpm, Vite, React, TypeScript 환경에서 이를 구현하는 방법을 단계별로 설명합니다.1. 필수 패키지 설치하기먼저, 필요한 패키지를 설치합니다. pnpm을 사용하여 프로젝트의 개발 의존성으로 추가합니다.pnpm add -D @svgr/rollup @svgr/cli svgo@svgr/rollup: Vite에서 SVGR을 사용할 수 있게 해주는 플러그인입니다.@svgr/cli: SVGR의 CLI 도구로, SVG를 React 컴포넌트로 변환합니다.svgo: SVG 파일을 최적화하는 도구입니다.2. Vite ..
-
Babel과 Webpack을 이용한 ES6 환경 구축 | PoiemaWebFront-end/개발환경 2021. 3. 5. 15:22
Babel는 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)할 수 있다. Babel CLI 설치 # package.json 생성 $ npm init -y # babel-core, babel-cli, babel-preset 설치 $ npm install --save-dev @babel/core @babel/cli @babel/preset-env Babel을 사용하려면 Babel 프리셋을 설치해야 한다. @babel/preset-env은 함께 사용되어야 하는 Babel 플러그인을 모아 둔 것으로, Babel이 제공하는 공식 Babel 프리셋(Official Preset)은 아래와 같다. @babel/preset-env @babel/preset-fl..
-
[가이드] 조건부 렌더링 - 필수요소 | VueFront-end/Vue.js 2020. 8. 19. 17:39
v-if v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용됩니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. Vue is awesome! v-else와 함께 “else 블록”을 추가하는 것도 가능합니다. Vue is awesome! Oh no 😢 에 v-if을 갖는 조건부 그룹 만들기 v-if는 디렉티브기 때문에 하나의 엘리먼트에 추가해야합니다. 하지만 하나 이상의 엘리먼트를 트랜지션하려면 어떻게 해야할까요? 이 경우 우리는 보이지 않는 wrapper 역할을 하는 엘리먼트에 v-if를 사용할 수 있습니다. 최종 렌더링 결과에는 엘리먼트가 포함되지 않습니다. Title Paragraph 1 Paragraph 2 v-else v-else 디렉티브를 사용하여 v-if에 대한..
-
[가이드] 컴포넌트 기초(2) - 필수요소 | VueFront-end/Vue.js 2020. 8. 19. 16:27
슬롯을 사용한 콘텐츠 배포 컴포넌트를 사용할 때 다음과 같이 컴포넌트를 구성하는 것이 좋습니다. 주목해야 할 두 가지 사항이 있습니다. 컴포넌트는 어떤 콘텐츠를 받을지 모릅니다. 그것은 이 사용하는 컴포넌트에 의해 결정됩니다. 컴포넌트에는 자체 템플릿이 있을 가능성이 큽니다. 위 구성으로 작동하도록 하려면 부모 “content”와 컴포넌트의 자체 템플릿을 섞는 방법이 필요합니다. 이것은 콘텐츠 배포 프로세스입니다. Vue.js는 현재 웹 컴포넌트 사양 초안을 모델로 한 콘텐츠 배포 API를 구현하며 원본 콘텐츠의 배포판 역할을 하기 위해 특수한 엘리먼트를 사용합니다. 범위 컴파일 API를 파헤치기 전에 먼저 내용이 컴파일되는 범위를 명확히 해야 합니다. 다음과 같은 템플릿이 있다고 상상해보겠습니다. {{..
-
[가이드] 컴포넌트 기초(1) - 필수요소 | VueFront-end/Vue.js 2020. 8. 18. 16:48
컴포넌트가 무엇인가요? 컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타날 수도 있습니다. Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다. 컴포넌트 사용하기 전역 등록 전역 컴포넌트를 등록하려면, Vue.component(tagName, options)를 사용합니다. Vue.component('my-component', {..
-
[가이드] 폼 입력 바인딩 - 필수요소 | VueFront-end/Vue.js 2020. 8. 14. 15:12
기본 사용법 v-model 지시문을 사용하여 폼 요소(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩을 만들 수 있습니다. 입력 유형에 따라 요소를 업데이트하는 올바른 방법을 자동으로 선택합니다. v-model은 모든 폼 엘리먼트의 초기 value와 checked, selected 속성을 무시합니다. Vue 인스턴스의 데이터에 의해서만 동작합니다. data구성 요소 의 옵션 내에서 JavaScript 측의 초기 값을 선언해야 합니다. v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 내보냅니다. text 및 textarea 요소는 value 속성과 input 이벤트를 사용합니다 . 체크 박스와 라디오 버튼은 checked 속..
-
[가이드] 이벤트 핸들링 - 필수요소 | VueFront-end/Vue.js 2020. 8. 14. 13:18
이벤트 수신 v-on 지시어를 사용하여 DOM 이벤트를 수신하고 트리거될 때 일부 JavaScript를 실행할 수 있습니다. Add 1 The button above has been clicked {{ counter }} times. 메서드 이벤트 핸들러 하지만 많은 이벤트 핸들러의 로직은 더 복잡하므로 JavaScript를 v-on 속성 값으로 유지하는 것은 불가능합니다. 그렇기 때문에 v-on 호출하려는 메서드의 이름도 허용할 수 있습니다. GREAT 인라인 핸들러의 메서드 메서드 이름에 직접 바인딩하는 대신 인라인 JavaScript 문에서 메서드를 사용할 수도 있습니다. Say Hi Say What 때로는 인라인문 핸들러에서 원래 DOM 이벤트에 액세스해야 하는 경우도 있습니다. 특수 $event..