Study/Frontend
-
Electron 배포 및 자동 업데이트 (feat. AWS S3 & electron-updater)Study/Frontend 2023. 9. 4. 16:10
Electron Build Lifecycle 데스크탑 애플리케이션을 빌드하고 배포하는 과정에서 주목해야 할 부분은 배포 가능한 파일을 생성하는 단계이다. 웹과 달리 패키징 단계에서 생성된 번들을 가지고 OS별 설치 프로그램을 생성해야 한다. 이 단계에서 대응하고자 하는 OS별, 플랫폼별로 모두 빌드해줘야 한다. electron-builder를 선택한 이유 electron 앱을 패키징하고 배포하기 위해 사용하는 대표적인 도구는 Electron Forge로 문서에서 소개되어 있다. Electron Forge의 가장 큰 장점은 분산되어 있는 배포 작업용 패키지들을 통합해서 빌드 파이프라인을 최소한의 구성으로 생성할 수 있다는 것이다. electron-builder 역시 분산되어 있는 패키지들을 어느 정도 통합..
-
Electron Code Signing (코드 서명)Study/Frontend 2023. 8. 25. 16:10
내 맥북에서는 잘 되는데 다른 사람 맥북에서는 실행이 안되네? 윈도우에서 실행은 가능한데 SmartScreen filter에 걸리네? 데스크탑 앱을 처음 만들어 보는 사람이라면 위와 같은 상황을 모두 한 번 쯤은 겪어봤을 것이다. 나 역시 그랬다 🥲 이번에 Electron으로 데스크탑 앱을 만들어야했는데, 데스크탑 앱 개발에 대한 기본 지식이 부족한 상황이었다. electron-vite를 사용해서 개발 환경을 구축하는데는 무리가 없었지만, 역시나 예상대로 빌드와 배포를 하는데 엄청난 시간과 노력이 필요했다. 위 문제를 해결하는데도 며칠 동안 리서치하며 해결방안을 찾아냈다. 위 문제의 정답은 코드 서명에 있었다. 코드 서명이란? 코드 서명(Code Signing)은 실행 파일과 스크립트에 디지털 서명을 하..
-
Storybook과 Vitest에서 MSW 모킹 핸들러 재사용하기Study/Frontend 2023. 8. 18. 12:03
프론트엔드 개발자의 작업 능률은 Storybook과 MSW를 만나기 전과 후로 나뉜다고 할 수 있다. 프론트엔드 개발을 하면서 가장 불편한 점 중 하나가 백엔드 개발에 대한 의존성이 높다는 점이다. 백엔드 API가 완성되어야 데이터 처리를 진행할 수 있는데, 보통 UI 작업을 먼저 진행해도 백엔드 작업이 끝나기 전까지 대기하는 상황이 종종 있었다. 물론 Mocking 데이터를 직접 만들어서 UI가 제대로 렌더링 되는지 확인할 수는 있었지만 꽤나 번거로운 일이었다. 하지만 Storybook을 만나면서 백엔드 API 없이도 데이터에 대한 다양한 케이스를 만들어서 미리 정확한 UI를 만들어 보며 시각적 테스트를 진행할 수 있게 됐다. 그리고 MSW를 도입하면서 API가 완성되지 않아도 백엔드팀에서 Schema..
-
React 프로젝트 구조 설계를 넘어서 프론트엔드 아키텍처 설계에 대한 고찰Study/Frontend 2023. 5. 19. 17:52
React 폴더 구조를 어떻게 구성할까? 비즈니스 로직은 어떻게 분리할까? React와 같은 라이브러리로 신규 서비스를 개발하게 되면 프론트엔드 팀에서 가장 첫 번째로 고민해야 할 요소는 프로젝트의 폴더 구조라고 생각한다. Next.js와 같은 프레임워크로 개발을 하게 되면 폴더 구조가 어느 정도는 정해져있기 때문에 고민해야 할 부분이 비교적 적다. 하지만 React의 경우에는 정해진 폴더 구조는 없고 일반적인 접근 방식만을 제안하고 있다. 따라서 개발자에 따라서 프로젝트 설계 방법이 천차만별일 것이고 설계에 정답은 없다. 1년 차때는 프론트엔드 프로젝트 구조 설계에 대해 깊은 고민을 하지 않고 내가 자주 쓰고 익숙한 패턴을 그대로 가져다가 새로운 서비스에 적용하곤 했다. 하지만 10년 차 동료 개발자가..
-
애플처럼 화려한 Parallax Scroll 랜딩 페이지 개발해보기Study/Frontend 2023. 1. 13. 15:15
Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. 패럴랙스 스크롤링 기법을 간단히 말하면 스크롤에 따른 애니메이션 효과라고 할 수 있다. 패럴랙스 스크롤링 기법을 적용한 대표적인 웹사이트는 애플 제품 소개 페이지이다. 볼 때마다 감탄사가 나왔었는데, 회사에서 이와 같은 인터랙션 사이트를 구현할 기회가 생겼다! "나도 애플처럼 화려한 인터랙션을 넣을 거야😎"라고 속으로 호기롭게 외치며 스터디를 시작했다. 회사에서 인프런 바우처를 지원해 줬기 때문에 강의 1, 강의 2를 들으며..