본문 바로가기

분류 전체보기184

Electron + React 프로세스 간 IPC 통신과 preload 사용 방법 📒 Electron + React 프로세스 간 IPC 통신과 preload 사용 방법Electron 애플리케이션은 주로 메인 프로세스와 렌더러 프로세스로 구성됩니다.Main Process는 단 하나만 실행되며 앱의 본체이고, Renderer Process는 화면에 그려지는 n개의 웹뷰 프로세스입니다.이 두 프로세스 간에는 Electron IPC (Inter-Process Communication)를 사용하여 통신합니다.그럼 IPC를 사용하여 두 프로세스 간에 데이터를 전송하고 명령을 보내는 방법을 소개합니다.📌 IPC로 Main - Renderer 프로세스 간 데이터 주고받기실제로 두 프로세스 간 데이터를 주고받기 위해서는 정말 간단한 절차만 거치면 됩니다.특정 채널명을 정한 뒤 ipcMain or .. 2024. 5. 13.

[React] 세상 쉬운 리액트 모달 라이브러리 📒 너무나 쉬운 리액트 모달 라이브러리저에게 딱 맞는 스타일의 모달 컴포넌트, 재사용하려고 라이브러리로 만들었습니다.6개월 전 대충 만들다 말았던 코드 기반으로 구조 다시 짜느라 토할 뻔 했습니다.다른 종속성 없이 react context를 이용해 만들었습니다.모달 조작에 관련된 로직만 추상화하고, 스타일과 UI 렌더 관련 로직은 최대한 headless 하게 만들어 어느 프로젝트에서도 사용할 수 있도록 만들었습니다.다중 모달 기능은 UX적으로 그닥이라 추가하지 않았습니다.전체 적용 기본 스타일은 provider에게, 개별 적용할 스타일은 openModal() 함수에게.진짜 쉽고 간편하니까 한번만 써주세요📌 @lasbe/react-modal @lasbe/react-modal누구나 쉽게 사용할 수 있는 .. 2024. 5. 7.

개발자 성지, 성수동 튜링의 사과 방문 후기 📒 튜링의 사과 방문 후기내가 100% 통제할 수 있는 공간에서는 도무지 집중이 되지 않는 요즘입니다. 카페를 가기에는 허리 박살 날 것 같은 의자들, 쥐똥만 한 노트북 화면, 오래 앉아 있기엔 눈치 보이는 상황이 너무나 불편합니다. 원래 노트북 들고 카페가서 하염없이 시간 때우는 걸 좋아했지만,언덕 꼭대기에 있는 자취방으로 이사오고 난 후 언덕을 오르락내리락하는 것에 비해 메리트가 없다고 느껴 집에서만 공부했습니다. 그러다 어느 날 개발자들이 모이는 카페 혹은 작업공간이 있다길래 검색해보니 편안한 의자 + 모니터까지 이보다 더 좋을 수 없었습니다. 성수동, 멀긴 하지만 너무나 가고 싶은 마음에 노트북을 챙겨 그 주 주말에 방문해 봤습니다.2호선 뚝섬역 5번 출구에서 1분 정도의 거리에 존재하는 튜링의.. 2024. 4. 17.

지금 당장 pnpm으로 넘어가야 하는 이유 📒 지금 당장 pnpm으로 넘어가야 하는 이유 안전빵이란 이유로 계속해서 npm을 고집해 오다 최근에 pnpm으로 넘어갔습니다. 마이그레이션을 마친 지금 생각해보면 "왜 이제야 넘어갔을까"라고 생각이 됩니다. 아직 npm과 classic yarn을 사용하시는 분들께 npm의 단점부터 pnpm의 장점, 마이그레이션, 사용법까지 전부 소개합니다. 📌 pnpm이란? pnpm은 Performant Node Package Manager의 약자로, 기존 npm의 단점을 보완하기 위해 탄생한 패키지 매니저입니다. 사내에서 기존부터 npm을 사용했었는데, 시간이 지날수록 부각되는 단점들에 의해 패키지 매니저 변경을 결정했습니다. 현존하는 여러 패키지 매니저 중 고민 끝에 pnpm을 사용하기로 했는데요. pnpm을 선택.. 2024. 4. 10.

[Electron, React, TS] 데스크톱 앱 프로젝트 생성하기 📒 Electron + React 프로젝트 구축하기 (24-04-01 추가) electron-is-dev 모듈이 ESM 방식을 지원하기 시작해서 CJS, require에서 MJS, import 방식을 사용하도록 글 내용을 변경했습니다. 📌 Electron이란 Chromium과 Node.js를 하나의 런타임으로 통합하여 JS, HTML, CSS 같은 기본적인 웹 지식으로도 데스크톱 애플리케이션을 만들 수 있는 프레임워크 입니다. 이걸로 데스크톱 애플리케이션을 어떻게 만드냐 싶겠지만 이미 우리가 사용하고 있는 VSCode, Slack, Skype, Figma 등등등 이미 검증된 서비스들에서 사용하고 있습니다. 또한 빌드 라이브러리를 통해 하나의 자바스크립트 코드를 윈도우, 맥, 리눅스에서 흔히 보던 설치 프.. 2024. 4. 1.

[React] 리액트 스크롤 애니메이션 라이브러리 개발 📒 @lasbe/react-scroll-animation @lasbe/react-scroll-animation 리액트에서 손쉽게 사용하는 스크롤 애니메이션. Latest version: 2.0.2, last published: a month ago. Start using @lasbe/react-scroll-animation in your project by running `npm i @lasbe/react-scroll-animation`. There are no other projects in www.npmjs.com GitHub - LasBe-code/react-scroll-animation: 리액트로 손쉽게 스크롤 애니메이션을 구현할 수 있는 라이브 리액트로 손쉽게 스크롤 애니메이션을 구현할 수 있는.. 2024. 3. 13.

TanStack Query(react-query) v5 주요 변경점 알아보기 feat. Suspense, ErrorBoundary 📒 react-query v5 주요 변경점 알아보기 새로운 프로젝트에 생각없이 react-query를 설치하고 예전 방식 그대로 사용하려는데 여기저기 오류가 빵빵 터져나갔습니다. 왜이러지 싶어 package.json을 찾아보니 메이저 버전이 업데이트 되었고, 공식문서를 천천히 훑어보니 생각보다 사용 방식이 변경된 것이 많아 주요 변경점들을 짚고 넘어가겠습니다. 📌 hook 옵션 객체 형태로 변경 버전이 올라가며 훅에 옵션을 넣어주는 방식이 객체 형태로 바뀌어 더욱 직관적인 모습을 보입니다. 기존 사용 방식 const { data } = useQuery(['queryKey'], getData); const mutation = useMutation(setData); 변경 후 사용 방식 const { data.. 2024. 3. 13.

TanStack Query(react-query), useMutation의 mutationKey 역할은 도대체 뭘까? 📒 react-query v5, useMutation의 mutationKey 역할은 도대체 뭘까? react-query의 메이저 버전이 5로 올라가고 사용방법이 많이 바뀌어서 코드를 수정할 일이 있었습니다. 그저 당연스럽게 공식문서를 보고 바꾸던 중, useMutation을 수정할 때 mutationKey라는 속성이 보였습니다. 저 Key라는 말에 꽂혀 당연히 필수 요소라 생각한 나머지 하나하나 정성스럽게 mutationKey를 작성해 주었습니다. const mutation = useMutation({ mutationKey: ['mutationKey'], mutationFn: updateData }); 그러다 어느 정도 프로젝트 규모가 커질 무렵 어느 순간 문득 다음과 같은 생각이 머리를 스쳤습니다. ".. 2024. 3. 13.

Storybook + React, 장점부터 설치와 문서 작성법 가이드 📒 Storybook Storybook은 UI 컴포넌트를 개발, 테스트 및 문서화하기 위한 오픈 소스 도구입니다. 개발한 공통 컴포넌트 혹은 디자인 시스템을 테스트하고 시각적으로 확인할 수 있는 환경을 제공합니다. 이번에 전사 공통 컴포넌트를 설계하고 여러 문서화 툴을 고민하다 결국 스토리북을 선택하게 되었습니다. 단 한 번만 스토리 파일과 mdx 문서 예제를 작성해 놓고 배포 자동화까지 해놓으니 생각했던 것보다 큰 어려움은 없었고 만족도는 굉장히 높았습니다. 그럼 스토리북의 장점과 사용방법에 대해 소개합니다. 📌 Storybook 장점 🔎 시각적 테스트 백문이 불어일견. 각각의 스토리를 통해 컴포넌트들의 props를 직접 조작하며 시각적으로 확인할 수 있는 환경을 제공합니다. 다양한 상태에서 컴포넌트가.. 2024. 3. 12.

이전 1 2 3 4 ··· 21 다음

티스토리툴바