템플릿 컴포넌트 src/components/ TodoTemplate.js 더보기 import React from 'react'; import './TodoTemplate.scss'; const TodoTemplate = ({ children }) => { return ( 일정 관리 {children} ); }; export default TodoTemplate; 앱 메인 src/ App.js 더보기 import React from 'react'; import TodoTemplate from './components/TodoTemplate'; const App = () => { return Todo App을 만들자! ; }; export default App; 추가 기능 구현 1. 새 항목 입력 및 추가 ..

총 4개의 컴포넌트 구성 (src/components) TodoTemplate 1. 화면을 가운데 정렬, 앱 타이틀(일정관리) 표시 src/componenets TodoTemplate.scss 더보기 .TodoTemplate { width: 512px; margin-left: auto; margin-right: auto; margin-top: 6rem; border-radius: 4px; overflow: hidden; .app-title { background: #22b8cf; color: white; height: 4rem; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; } .content { backgr..

프로젝트 생성 cd c:/dev/react yarn create react-app todo-app cd todo-app yarn add node-sass classnames react-icons (*) Sass 사용 : node-sass (*) 조건부 스타일링 : classnames (*) 예쁜 아이콘 사용 라이브러리: react-icons (*) 코드 스타일 정리 : Prettier (*) 자동완성 : jsconfig.json 파일 생성 VS CODE 실행 후 폴더를 열어서 생성된 프로젝트 폴더를 선택. src/ .prettierrc { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "..

프로젝트 명 일정 관리 웹 애플리케이션 (ToDoApp) 대상 웹 개발 초중급이상 일정관리 페이지 기능 할 일 입력 작성 및 추가 할 일 목록 조회 할 일 항목 삭제 프로젝트 구성 통합 개발 환경(IDE) : Visual Studio Code 프로젝트명 : 일정 관리 웹 애플리케이션 (ToDoApp) 프로그래밍 개발 언어 : React 자바스크립트 패키지 매니져 : Yarn 운영체제 (OS) : 윈도우 10 운영체제 구성 윈도우 개발환경 : Visual Studio Code

create-react-app 으로 프로젝트(hello-react) 디렉토리 생성하기 - 디렉토리 이동 : C:\dev\react\ - 설치 : yarn create react-app hello-react - 설치 확인 : cd hello-react - YARN 시작 : yarn start - 주소 : http://localhost:3000/ JSX 프로젝트 폴더 열기 : 위에서 만든 hello-react 폴더를 VSCode IDE로 연다. 1. 코드 스타일 정리 : 코드 가독성 향상 들여쓰기 src/.prettierrc 파일 생성 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2 } 2. 저장 시 코드 자동 코드 정리 File -..

Node.js 설치 https://nodejs.org/ko/download/ - LTS 버젼 설치 - 설치 후 확인 : node -v 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org yarn 설치 (패키지관리 툴) https://yarnpkg.com/en/docs/install#windows-stable - 설치 후 확인 : yarn --version (*) npm 설치해도 되지만, 여기선 더 빠른 yarn 설치 Yarn Fast, reliable, and secure dependency management. yarnpkg.com 에디터 설치 (리액트 앱 에디터 : VSCode..