개발일기

일렉트론일렉트론 공식 홈페이지 설명작동 방식일렉트론에는 두가지 프로세스 존재: 메인(Main) 프로세스와 렌더러(Renderer) 프로세스.일렉트론 앱은 단 하나의 메인 프로세스를 가지며, Node.js 기반으로 동작하고 여러 렌더러 프로세스들을 관리한다.각각의 렌데러 프로세스는 서로 독립적으로 작동한다.메인 프로세스는 ipcMain 이라는 IPC 모듈을 통해, 렌더러 프로세스는 ipcRenderer 라는 IPC 모듈을 통해 메인 프로세스와 렌더러 프로세스가 통신이 이뤄지도록 한다.IPC(Inter-Process Communication)란 프로세스간(Main Renderer) 통신을 의미IPC는 on을 통해 메시지 또는 이벤트를 수신하고, send를 통해 메시지 또는 이벤트를 전달한다.ipcMain에..

커머스 필드에서 고객의 활동을 분석하는 것은 매출로 이어지기에 고객의 행동을 여러 각도에서 분석하는 것은 중요하다.야래의 내용은 네이버 스마트 스토어와 고도몰(NHN 쇼핑몰 제작 플랫폼)에서 트래킹하여 사용자들에게 제공하는 요소들이다.[네이버]고객 데이터: 스토어의 고객 현황 (주문 고객 통계, 성별/연령대/고객 등급간 구매 통계, 재구매 통계)마케팅 분석: 유입이 발생한 마케팅 채널 통계, 마케팅 채널 성과, 키워드별 유입 및 결제 성과쇼핑행동 분석: 페이지/상품별 고객의 주요 행동 데이터(유입 고객 수, 체류 시간, url / 상품 상세 조회 수, 상품 ID, 상품명, 결제 상품 수량)실시간 분석: 1시간 단위의 스토어 거래 정보를 실시간으로 제공판매 분석: 배송 통계, 판매 성과, 상품별 결제 데이..

클라우드 서비스의 중요성클라우드 서비스는 높은 가용성, 확장성, 그리고 비용 효율성을 제공하여 FE 배포의 핵심 요소 중 하나로서의 자리를 매김하였다.클라우드 서비스를 활용한 배포의 이점클라우드 서비스는 글로벌 인프라를 통해 어디서나 빠르게 애플리케이션에 접근할 수 있게 해준다.높은 가용성 보장여러 데이터 센터를 운영하여, 하나의 데이터 센터에 문제가 발생해도 서비스가 중단되지 않도록 한다.확장성사용자의 요구에(traffic의 증가 및 감소) 따라 자동으로 리소스를 확장 및 축소하여 서비스의 성능을 유지한다.비용 효율적사용한 만큼의 비용을 지불하여, 초기 투자 비용 없이 서비스를 시작할 수 있다.주요 클라우드 서비스 제공업체의 배포 서비스AWSS3와 CloudFront는 정적 웹 사이트 호스팅과 콘텐츠 ..

도커현대 웹 개발 환경에서 배포 과정을 효율적으로 만들어주는 핵심 도구 중 하나도커를 사용하면 애플리케이션을 컨테이너화하여, 어떤 환경에서도 동일하게 실행할 수 있게 해준다.도커는 애플리케이션과 의존성을 컨테이너 안에 패키징함으로써(= 컨테이너화 한다), '내 컴퓨터에서는 되는데?' 라는 문제를 해결하여, 개발자가 개발에만 집중할 수 있는 환경을 제공한다.도커를 사용하면 개발 환경과 운영 환경 사이의 차이를 최소화할 수 있으며, 배포 과정에서 발생할 수 있는 문제를 사전에 방지할 수 있다.도커를 이용한 FE 배포 방법도커 이미지 생성이 단계에서는 애플리케이션의 소스 코드와 필요한 모든 의존성을 포함한 이미지를 만든다.도커 이미지는 애플리케이션을 실행하는데 필요한 모든 것을 포함하고 있기에, 이 이미지만 ..

Github & BitBucketGithub기본적으로 공개 레포지토리를 위한 곳이지만, 레포지토리를 비공개로 전환 가능Github Projects라는 기능을 통해 칸반 보드 및 위키 작업을 진행할 수 있다.Github Projects의 자세한 사용법은 하단에 첨부한 아티클 참고모든 레포지토리에 대해 100GB의 제한이 있, 이 용량을 넘어가면 과금이 발생한다.참고로 깃허브에서는 레포지토리 용량이 1GB 미만인 것을 추천한다.Bitbucket깃허브와 깃계의 양대 산맥을 이루고 있다.깃허브가 공개 레포지토리를 지향한다면, 빗버킷은 비공개 레포지토리를 지향한다고 한다.그렇기에 오픈 소스 프로젝트 보다는 회사의 프로젝트를 주로 호스팅하는데 쓰인다.Atlassian이 개발한 서비스로, jira, trello 등과..

ESLint와 Prettierjavasscript나 typescript의 코드 품질을 높이고 일관된 형식을 유지하는데 자주 사용하는 도구ESLint를 통해 잠재적인 문제를 빠르게 확인할 수 있고, Prettier를 통해선 코드 서식에 신경쓰지 않고 코드 작성에만 집중 가능프로젝트를 생성할 때마다 ESLint/Prettier의 설정 작업을 해줘야한다.컨피그 파일을 만들고, 플러그인을 설치하고, 추천 규칙을 적용하는 작업이 반복되며, 다른 저장소의 설정을 그대로 가져와 복붙해 사용하기도 한다.ESLint에서 일관된 텍스트 작성을 도와주는 기능을 가지고 있다.그래서 prettier와 ESLint를 같이 사용하게 되면 두 설정이 모두 적용되어 충돌이 발생한다.이러한 문제를 해결하기 위해 ESLint 내부에서 P..

husky에 대해 조사하며 정리한 내용husky는 팀 내에서 정한 규칙을 자동으로 공유하고, 사용자에게 일련의 행동을 규제하여 human error를 줄이는데 도움이 되는 툴이라 요약 가능할 것 같다. 개발을 진행하다 보면 커밋 컨벤션 위배, master br에 직접 push, 코딩 스타일 위배 등 다양한 고해의 바다를 만나게 된다.이러한 상황에서 git을 사용하는 팀 내에서 정한 정책을 강제할 때 Git Hooks를 활용하여 쉽고 간단하게 정책을 강제할 수 있다.Git Hooks란?git과 관련된 어떠한 이벤트가 발생했을 때, 특정 스크립트를 실행할 수 있도록 하는 기능크게 클라이언트 훅, 서버 훅으로 나뉜다.클라이언트 훅은 커밋, merge가 발생하거나 push가 발생하기 전 클라이언트에서 실행하는 ..

webpack현재 30억 회 이상 다운로드되었을 만큼 강력한 위상을 갖고 있지만, 항상 2가지 한계가 뒤따른다.배포 환경에서 인내 가능한 선을 넘는 느린 속도 / 복잡하고 어려운 설정Rollup.js, ESM(esmodule) 지원 번들러의 등장 - 2015Rollup은 경량화와 번들 최적화를 중점에 둔 esm 모듈 번들러당시 webpack에는 없던 esm(esmodule)을 지원esm 방식의 모듈 import는 의존성 파악을 하는 것이 구조적으로 명확하게 알 수 있다.번들 사이즈 경량화와 최적화에 중점을 둔 번들러현재 각광받고 있는 프론트엔드 빌드 도구인 Vite 번들의 내장 번들러로서도 사용되고 있다.parcel, zero-configuration 번들러의 등장 - 2017'Parcel은 webpac..

프론트엔드를 배포할 수 있는 환경들은 여러 가지가 있습니다. 각 환경마다 특장점과 단점이 있으며, 사용자의 필요와 프로젝트의 요구 사항에 따라 적합한 선택이 달라질 수 있습니다. 주요 배포 환경과 그에 대한 설명을 아래에 정리했습니다:1. 정적 웹 호스팅 서비스 (Static Site Hosting)예시: GitHub Pages, Netlify, Vercel, Firebase Hosting특장점:쉬운 배포: 코드 푸시와 동시에 자동으로 배포되는 경우가 많음.빠른 로딩 속도: CDN을 통해 전 세계에 빠르게 콘텐츠 제공.무료 요금제: 기본적인 요금제가 무료로 제공되며, 소규모 프로젝트에 적합.단점:동적 기능 제한: 서버 측 로직이나 복잡한 데이터베이스와의 연동이 어렵거나 불가능함.제한된 서버 사이드 기능:..

* GNB, LNB란? - GNB, LNB, FNB 는 매장에서 고객들이 자주 찾는 물건을 눈에 잘 띄는 위치에 배치해 빠른 구매를 이끌어내듯이, 웹 사이트에서 고객이 찾는 카테고리를 빠르게, 어디서나 확인할 수 있도록 하는 구성을 뜻한다. - GNB(Global Navigation Bar) - 웹 사이트 전체에 동일하게 적용되는 네비게이션 바 - 보통 웹사이트 최상단에 위치하며 어떤 페이지를 클릭해도 동일하게 보여진다. - 웹사이트가 제공하는 모든 서비스를 표현하며, 직관적으로 구성하는 것이 좋다. - LNB(Local Navigation Bar) - GNB를 클릭하거나 호버 했을 때 나오는 하위 카테고리 리스트 - FNB(Foot Navigation Bar) - GNB와 동일하게 모든 웹페이지 가장 ..