본문 바로가기

전체 아티클136

Vite 환경에서 emotion의 pragma 반복을 줄여보기 목차 · 포스팅 동기 · vite.config.js 설정해주기 · tsconfig.json 설정해주기 · [부록] 타입스크립트를 사용하는데, DetailedHTMLProps 에러가 발생한다면? 포스팅 동기 최근 프로젝트에서는 tailwind를 접했지만, 다시 다양한 프로젝트를 접하면서 emotion을 사용할 일의 빈도가 많아졌다. 요즘에는 Vite 환경에 매료되어, 다양하게 배워보고자 Vite 환경과 pnpm을 접목한 프로젝트를 진행을 하였고, 프로젝트 안에서 각 컴포넌트마다 pragma를 기재해주는 것이 매번 불편한 상황 중 하나였다. /** @jsxImportSource @emotion/react */ import { css } from "@emotion/react"; 더보기 /** @jsxImpor.. 2024. 3. 2.
v-model의 특징 및 문제점, 그리고 활용 방식 목차 · v-model 속성 · v-model은 어떤 방식으로 동작할까? · 무조건 v-model을 사용해도 되는걸까? · v-model 문법을 사용하여 IME 입력을 처리하는 방법은? · [부록] Emit과 Listen · [부록] 컴포넌트에서 emit v-model 속성 공식 문서에 안내된 v-model 속성의 사용법은 다음과 같다. 이렇게 사용자의 입력을 받는 UI 요소들에 v-model 이라는 속성을 사용하면 입력 값이 자동으로 뷰 데이터 속성에 연결이 되어진다. v-model은 어떤 방식으로 동작할까? v-model 속성은 v-bind와 v-on의 기능 조합으로 동작한다. 매번 사용자가 일일히 v-bind와 v-on 속성을 지정해주지 않아도 좀 더 편하게 개발을 할 수 있게 고안된 문법이며, 앞.. 2024. 2. 29.
Vue3로 업데이트 되면서 어떤 부분이 변화했을까? 목차 · 성능 개선 · Composition API · Fragments · Global API · 라이프 사이클의 변화 · 익스플로러 미지원 성능 개선 Vue3는 V-DOM과 렌더링 성능을 개선하였으며 스캐폴딩을 통해 어플리케이션을 생성 시에 기본적으로 Vite를 사용하여 빠른 렌더링 속도를 제공한다. Composition API Vue2와 Vue3의 가장 큰 변경점이라고 한다면, 바로 Composition API가 도입된 것이다. 이로 인해 스크립트 영역의 소스 코드 영역이 크게 변하게 되었다. Composition API는 Vue2에서도 플러그인과 같은 확장 기능으로 도입하는 것이 가능하기는하지만, Vue2에서 기본적으로 Options API를 이용하는 경우가 많다. Options API에서는 Co.. 2024. 2. 29.
[rollup.js] rollup -c 실행 시, Cannot use import statement outside a module 목차 · rollup -c 실행 시, 오류가 발생하다. · 해결 방법 · 왜, 이 오류가 발생했을까? rollup -c 실행 시, 오류가 발생하다. rollup -c 실행 시에 Cannot use import statement outside a module 오류가 발생했다. 그 이유는 rollup.config.js에 import 방식을 사용하면서 발생을 했는데, package.json에 type을 module로 지정을 해주지 않으면 commonJS로 인식이 되어진다. 이때, rollup.config.js에서 ESM 방식의 import 방식을 사용해서 발생을 하고 있었다. 해결 방법으로는 간단하게 type을 module로 명시를 해줘 ESM 방식으로 호환이 되게 하는 것인데, 이렇게 해결을 하게 되면 라이.. 2023. 11. 30.
PWA랑 Git Action을 첨가한 멋쟁이사자처럼 피드 개발기 목차 · 홈페이지에 피드를 넣어보면 어떨까? · 그렇다면 주기적으로 데이터를 가져와야하는데, 어떻게 가져올 수 있을까? · 멋쟁이사자처럼 대학 공식 홈페이지가 되다 · 앞으로는 어떻게 할까? 홈페이지에 피드를 넣어보면 어떨까? 우리 학교의 멋쟁이사자처럼 대학 페이지를 만들고, 계속해서 신규기능과 리팩토링을 진행하고 있다. 점차 멋쟁이사자처럼 출신의 팀원들이 많아지면서, 개발자라면 한번씩 만들어본다는 기술 블로그를 모아보면 좋은 그림이 되지 않을까 싶었다. 그래서 기술 블로그를 원활하게 작성을 하는 친구들의 블로그 주소를 받아, RSS를 통해 블로그 포스팅 내용을 멋쟁이사자처럼 홈페이지에서 보여주고자 하였다. RSS란? RSS(Rich Site Summary)는 뉴스나 블로그 사이트에서 주로 사용하는 콘텐.. 2023. 11. 27.
CJS, AMD, UMD, ESM 목차 · 들어가며 · CJS란? · AMD란? · UMD란? · ESM란? 들어가며 처음 자바스크립트는 모듈을 가져오거나, 내보내는 방법이 없어 하나의 파일에 모든 기능들이 들어가야했다. CJS, AMD, UMD, ESM이 등장 후에는 모듈로 개발하고, 배포할 수 있게 되었으며 이번 포스트에서는 모듈화 개발을 할 수 있게 해준 CJS, AMD, UMD, ESM이 무엇인지에 대해 알아보려고 한다. 모듈(module)이란? 모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일로 다음과 같은 것들을 위해 사용한다. 유지보수성 : 기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있다. 네임스페이스화 : 자바스크립트에서 전역변수는 .. 2023. 11. 27.

티스토리툴바