절대 경로 절대 경로에 대한 자세한 설명은 이 문서를 참고해주세요! 절대 경로 추가 import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; const path = require('path'); // https://vitejs.dev/config/ export defaul...
'구르미랑 반모' i18n(국제화) 적용기
i18n i18n은 Internatinalization의 약자입니다. ‘아이에이틴엔’ 혹은 ‘아이엷여덜엔’ 등으로 발음합니다. 국제화란, 인터넷 서비스 등이 특정 국가나 시장에 진출하기 위해여 대상 문화권 사람들이 어려움 없이 서비스를 이용할 수 있도록 하는 작업입니다. 디자인, 번역, 텍스트 진행방향 변경 등이 모두 국제화 과정에 포함 됩니...
[React] 절대 경로 import
import 지옥 import Component from '../../../../../../../components/BasicComponent'; // ... React로 프로젝트를 개발하다보면 위와 같은 import 지옥이 되는 경우가 잦습니다. 보통 실제 라우트 구조에 맞춰서 페이지 컴포넌트를 제작하기 때문에 depth가 깊은 페이지에서 roo...
[Vue] Teleport
개요 Vue3에서는 정말 많은게 새로 추가되고 삭제 되었습니다. Composition API, ref, reactive 등의 변경점이 있는데, 이들 중 제가 가장 관심이 있었던건 Teleport였습니다. Teleport란 React의 Portal과 같은 기능을 합니다. Teleport는 컴포넌트 내부의 특정 객체를 페이지 내 원하는 위치에 렌더링하는...
프론트엔드와 백엔드의 역할과 책임
들어가기에 앞서 이 글은 지극히 제 개인적인 의견과 경험에 의하여 작성되었습니다. 아래 사례에 등장하는 백엔드 개발자분들과 비슷하게 프론트에 대한 오해를 갖고 계신 분들의 오해를 해소하기 위해서 작성 된 글입니다. 사례 제가 같이 일했던 백엔드 개발자분과 있었던 케이스 몇 개를 말씀드리겠습니다. Case 1 메일 시스템은 본문에 1,000글자 이내로 ...
Javascript 애니메이션 라이브러리
개요 오늘날의 웹사이트에는 다양한 애니메이션 효과가 기본적으로 포함됩니다. CSS, Javascript를 통해서 DOM을 제어하기에 가능한 일입니다. 그런데 단순한 애니메이션 정도면 몰라도 복잡한 애니메이션이나 스크롤 애니메이션, 3D그래픽을 이용한 애니메이션 등은 직접 만들기에는 무리가 있습니다. 그런 복잡한 애니메이션을 쉽게 만들 수 있...
해피해킹 키 세팅
해피해킹 해피해킹 키보드는 사용자들 사이에서도 호불호가 정말 많이 갈리는 키보드 중 하나입니다. 고작 해봐야 키보드인데도 키세팅 하나 익히자고 몇 십년간 사용했던 일반적인 키보드의 배열을 정면으로 거슬러야 하기 떄문이죠. 그럼에도 불구하고 개발자 커뮤니티에서 꾸준히 회자되고 있다는 것은 익숙해지면 분명 쓸만한 키보드이기 때문일 것입니다. 그래서 평소...
ESLint - 'process' is not defined
이슈 if (process.env.NODE_ENV === 'production') // ... // 'process' is not defined process가 일반적인 변수처럼 취급되어 해당 페이지 내 코드에서 정의 되어 있지 않다고 에러를 표시합니다. 해결법 { "env": { "node": true, } } .eslintrc...