리액트15 [재활용프로젝트][리액트] main화면 구성하기 목차 초기 구상의 모습 참고https://kimjy97.github.io/Portfolio/ JongYeon's PORTFOLIO안녕하세요. 프론트엔드 개발자 김종연의 포트폴리오 사이트입니다. 찾아주셔서 감사합니다.kimjy97.github.io 대충 구성한 초안 모습 사용한 라이브러리(framer motion)https://www.framer.com/motion/ Documentation | Framer for DevelopersAn open source, production-ready motion library for React on the web.www.framer.com 애니메이션 느낌의 css로 만들 수 있는 쉽고 간편한 라이브러리이다. 구성 방향정말 간단하다 직관적으로 보이는 것들을 컴포넌트화.. 2024. 5. 8. [리액트][일렉트론] mocking한 데이터 가져와 쓰기 목차 recoil로 만든 중앙관리 stateimport { atom, selector } from "recoil";import { LocalStorageEffect } from "./LocalStorageEffect";interface User{ id: number; name: string; chat: string; }export const textState = atom({ key: "textState", // unique ID (with respect to other atoms/selectors) default: { id: 0, name: "default name", chat: "default chat", }, effects:[ //LocalStorageEffec.. 2024. 5. 6. [일렉트론][리액트] 캐릭터 만들어보기 목차 데스크톱에 캐릭터를 띄어보고자 해서 일렉트론으로 만들어 보았다. main.js// public/electron.js const { app, BrowserWindow} = await import("electron"); const path = await import("path"); const isDev = await import("electron-is-dev"); let mainWindow; function createWindow() { //const { width, height } = screen.getPrimaryDisplay().workAreaSize; mainWindow = new BrowserWindow({ width: 500, //크기 조정 height: 400, frame: false, /.. 2024. 5. 6. [일렉트론][리액트] 프로젝트 구축하기 목차 일렉트론의 정의일렉트론은 javascript만으로도 여러 플랫폼에서 동작할 수 있는 데스크톱 어플리케이션을 만들 수 있게 해 주는프레임워크이다. 핵심은 기존에 react로 개발하던 소스 코드를 그대로 사용해도, 일렉트론으로 빌드하여 데스크톱 앱으로 만들어낼 수 있다는 의미이다. 그대로 따라하면 오류가 안날 것이다..ㅠㅠㅠㅠㅠ CRA로 초기 프로젝트 세팅$ npx create-react-app electron-app --template typescript electron 설치yarn add electron-is-devyarn add electron electron-builder concurrently cross-env wait-on --dev Node.js 기반 메인 프로세스 파일(사실 main... 2024. 5. 2. 이전 1 2 3 4 다음 728x90
