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...
[React] memo 함수를 이용한 메모이제이션
React 렌더링 React의 컴포넌트는 state라고 불리는 상태값과 props라고 불리는 전달값이 있습니다. 상태값과 전달값은 컴포넌트의 렌더링와 아주 직접적인 관계가 있습니다. 상태가 변이함에 따라 컴포넌트가 보여지는 형태도 달라져야 하기 때문입니다. 그러기에 React의 컴포넌트는 state와 props의 변이를 계속 관찰하고 있고, 변이가 발...
ESlint와 Prettier 설치하기
ESLint ESLint는 코드를 보다 예쁘고 일관성있게 관리하기 위한 최소한의 제한사항입니다. VSCode 에디터를 사용하고 있다면 ‘저장 시 자동으로 포맷’ 기능을 활용하여 ESLint에 비준하지 않는 코드 스타일로 작성하더라도 저장만하면 자동으로 에디터가 포맷을 맞춰주는 편리한 기능을 사용할 수 있습니다. 설치 ESLint를 간편하게 세팅하기 위...