코드 스플리팅이란?

코드 스플리팅이란? SPA(Single Page Application) 의 단점으로 최초 페이지 접속할 때 웹 애플리케이션의 데이터를 다 불러와야한다. 복잡한 기능을 가진 애플리케이션의 경우 뿐만 아니라 사용하지 않는 페이지까지 불러와서 굉장히 느린 로딩 속도를 가지게된다. 이러한 초기 로딩 속도를 해결하기 위해 나온 것이 코드 스플리팅 Code Splitting 이며, 라우터를 통해 페이지에 접근할 때만 필요한 모듈을 가져온다. 코드를 하나의 큰 번들에서 여러개의 작은 번들로 분할하고 요청에 따라서 로드하거나, 병렬로 로드하여 어플리케이션의 성능을 향상시킬 수 있다. third-party 라이브러리 들을 하나의 번들로 묶어서 캐싱된 코드를 사용하는 방식으로 앱이 수정되어도 유저가 스크립트를 다시 다운 ..

• format_list_bulleted 프론트엔드
• · 2023. 3. 13.
• textsms

npm - Peer Dependency 관련 공부

프론트팀 회의 중 peer dependency 라는 내용이 나왔다. 패키지 버전 종속성을 의미하는 dependency 내용은 알았으나, 처음 듣는 내용이여서 생소했다. 오늘은 peer dependency 가 뭔지 공부하고 해당 내용을 포스팅하고자 한다. dependency 일반적으로 개발자들이 알고 있는 dependency 이다. 프로젝트에 사용된 패키지들이 있는데 이를 종속성을 관리한다. 기본적으로 런타임, 빌드 할 때 이 패키지들이 사용된다. 프로젝트가 빌드될 때 패키지들 또한 함께 번들에 포함되어서 배포가 된다. peer dependency 패키지를 설치했을 때 다른 패키지의 종속성을 명시할 때 사용된다. 프로젝트에서 실제로 패키지를 직접 불러오지는 않지만 호환성이 필요한 경우에 명시한다. 예를 들..

• format_list_bulleted 프론트엔드
• · 2023. 3. 10.
• textsms

스케치 Sketch 아트보드를 제플린 Zeplin 으로 연동해서 내보내기

개요 디자이너와 협업을 위해서 스토리북 StoryBook 과 제플린 Zeplin 을 연동하였다. 제플린에서 제공하는 Example Workplace 에서는 정상적으로 동작하는 것을 확인하였는데, 해당 예제는 iOS UI 이기 때문에 웹 web 도 정상적으로 동작하는지 확인이 필요하였다. 제플린에서는 여러가지 프로그램을 지원하는데 테스트를 위해서 스케치 sketch 를 설치해서 테스트해보았다. 해당 내용으로 포스팅하고자 한다. 스케치 아트보드 작성 스케치는 바탕화면이 되는 아트보드 Art Board 가 필요하다. 아트보드가 없을 경우 내보내기 export 를 할 때 문제가 발생한다. 이 내용은 아래에서 마저 이야기하겠다. 아트보드 만들기 프로그램 상단에 + 모양의 아이콘이 존재한다. 해당 버튼을 클릭하면 ..

• format_list_bulleted 프론트엔드
• · 2023. 3. 9.
• textsms

Storybook - 스토리북 Storybook + 제플린 Zeplin 연동하기

개요 스토리북 Storybook 에서 제플린 Zeplin 을 연동해서 사용할 수 있다. 스토리북 버전에 따라서 설치방법이 다르며, 6 버전을 기준으로 포스팅을 하고자 한다. 애드온 패키지 설치하기 스토리북 애드온을 설치해서 연동해야 하기 때문에 먼저 애드온을 설치하자. npm install storybook-zeplin스토리 애드온 옵션 추가하기 설치된 애드온 모듈을 스토리북과 연동해야한다. 스토리북의 main.cjs 파일에서 애드온을 연동하자. 스토리북 > main.cjs 파일 경로 .storybook 디렉토리 > main.cjs 파일 위의 파일에서 addons 에 storybook-zeplin/register 을 추가하자. module.exports = { stories: ["../src/**/*.s..

• format_list_bulleted 프론트엔드
• · 2023. 3. 8.
• textsms

VS Code - 터미널에서 vs code 가 열리지 않는 경우 해결방법

개요 터미널에서 VSCODE 열기 (zsh: command not found: code) 위의 페이지를 통해서 터미널을 통해서 code 명령어를 입력하면 vscode 가 열리게 설정하였었다. code 명령어가 잘 동작하다가 갑자기 무슨 이유에서인지 동작하지 않았다. 해당 문제를 해결해보자. 문제 터미널을 통해 새로운 프로젝트를 생성 후 vscode 로 접근하려고 시도하였다. ➜ vite-lit-storybook code . zsh: command not found: codecode 명령어를 찾을 수 없다고 한다. VSCODE 를 켜서 Command Palette 에서 다시 연결을 하려고 하자 다음과 같은 에러 메시지가 떴다. EACCES: permission denied, unlink '/usr/..

• format_list_bulleted 개발 일반/IDE
• · 2023. 3. 2.
• textsms

Lit + Vite + StoryBook 개발환경 구성하기

패키지 세팅하기 디렉토리 생성 터미널을 이용해서 프로젝트의 디렉토리를 생성하자. mkdir vite-lit-storybook패키지 설치 Install Vite 로 패키지를 생성하면 프레임워크와 언어도 자동으로 설치할 수 있다. npm create vite@latest해당 명령어를 이용하면 vite 의 최신버전을 설치한다. 설치를 시작하면 사용할 Project name 과 사용할 FrameWork, JS 언어 기본값 을 설정할 수 있다. 설정할때는 방향키 와 Enter 를 눌러 설정한다. ✔ Project name: … vite-lit-storybook ✔ Select a framework: › Lit ✔ Select a variant: › TypeScriptScaffolding project in /Us..

• format_list_bulleted 프론트엔드/lit
• · 2023. 3. 2.
• textsms