React58 React 마지막 간단한 프로젝트 2일차- menu화면 완성본:https://github.com/qjawns0222/hompage.git 자 이제 시작입니다 두번째로 쉬운거입니다 반대로말하면 세번째로 어려운거죠 ..... 나 저번 강의처럼 Menu.module.css Menu.jsx Menucontainer.jsx 세개를 추가해주세요 Menu.module.css .menus { display: flex; justify-content: space-around; align-items: center; height: 40vh; margin: 1% 10%; } .menus > * { margin: 50% 10%; } .menus > * > .name { display: flex; width: 100%; justify-content: center; margin: 2% .. 2022. 3. 1. React 마지막 간단한 프로젝트 2일차- Home화면 완성본:https://github.com/qjawns0222/hompage.git 어제에 이어서 Home화면을 만들어보겠습니다. 4개의 페이지 중에 가장 간단 한 화면이 될것 입니다. 우선 어제 만든 Components 폴더에 Home.jsx 만들고(보여지는 부분) src내부에 container폴더 만들어주시고 그안에 Home.container.jsx 생성(전달해줄 데이터 관련) Components/css/Home.module.css 파일도 만들어주세요 (css설정) 그럼 우선 pagesdml Home.jsx 가서 return을 로 수정해주세요 import도 해주세요 import React from "react"; import Homecontainer from "../container/Homecontai.. 2022. 3. 1. React 마지막 간단한 프로젝트 1일차- Form을 만들어보자 완성본:https://github.com/qjawns0222/hompage.git Form 이제 뭔지 궁금하실것입니다. 이거는 기존에 일정한 틀을 만들어놓고 우리가 작성을하면 그틀은 유지대고 특정한 부분에 우리가 작성한 내용이 추가되는 것입니다. 그럼 우선 src내부에 Components폴더 만들고 그안에 Form.jsx와 css폴더 만들어주세요 css폴더 안에는 Form.module.css 를 만들어주세요 Form.module.css * { text-decoration: none; margin: 0; padding: 0; color: inherit; } .nav { display: flex; width: 100%; } .mainnav { display: flex; width: 100%; justify-.. 2022. 2. 28. React 마지막 간단한 프로젝트 1일차- 데이터 저장소 및 router 완성본:https://github.com/qjawns0222/hompage.git npx create-react-app으로 폴더 만들어주세요 그리고 src 내부에 context 폴더 만들어주세요 그리고 그안에 item.js store.js생성 store.js 만들어서 import { createContext } from "react"; const store = createContext(); export default store; 이렇게 만들어주세요 여기는 저장소 공간을 만들어주는 것이라고 생각해주세요 item.js const item = { data: [ { id: 0, gim: 2, odeng: 0, addition: "ㅇㅁㄴㅇㅇㄴㅇㅁㄴㅇㅁㄴㅇㄴㅁㅇ", summary: "ㅇㅁㄴㅇㅇㄴㅇㅁㄴㅇㅁ....",.. 2022. 2. 28. 이전 1 2 3 4 5 ··· 15 다음
