프로젝트25 [재활용 프로젝트][리액트] 카카오 api 카테고리 마커 세부화 목차 저번 카테고리별 마커에 적절한 이미지를 넣고 더 컴포넌트를 세부화 시켜 작성해 보았다. 완성 모습 컴포넌트의 세분화아래 코드를 보면 크게 컴포넌트를 카테고리, 사이드바, 프로필, 메뉴 4개로 만들었다.import { ReactElement } from 'react';import styles from './KakaoHeader.module.scss';import SideBar from '../sidebar/SideBar';import HeaderCategory from './HeaderCategory';import HeaderProfileMenu from './HeaderProfileMenu';// 카테고리 헤더function KakaoHeader(): ReactElement { // console.. 2024. 5. 13. [재활용프로젝트][리액트] 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. 이전 1 2 3 4 5 6 7 다음 728x90
