책보고 만들어 보는 TodoList 첫번째
1. 프로젝트 생성
제일 먼저 해볼 것은 프로젝트 생성일 것이다.
내가 생성하고자 하는 곳을 정해서 파일을 생성해준다.
그리고 그 폴더 안에 CRA를 통해서 프로젝트를 만들어 보자.
mkdir [file_name]
npx create-react-app [project_name]
2.prettier 설정
프리티어는 visual studio code extention으로 정해진 규칙에 따라 코드 스타일을 정리해주는 도구라고 한다. 코드를 저장 시 정해놓은 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일 할 수 있다고 하니 꼭 쓰길 바란다.
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80
}
3.todotemplate 파일 만들기
src 폴더 안에 todotemplate 폴더를 만들고 폴더명으로 css파일과 jsx 파일을 만들어준다.
그리고 만들어진 파일에 코드를 작성해보자.
todotemplate.jsx
import React from 'react';
import './todotemplate.scss';
const TodoTemplate = ({ children }) => {
return (
<div className="todotemplate">
<div className="app_title">일정관리</div>
<div className="content">{children}</div>
</div>
);
};
export default TodoTemplate;
todotemplate.scss
.todotemplate {
width: 512px;
margin-left: auto;
margin-right: auto;
margin-top: 6rem;
border-radius: 4px;
overflow: hidden;
}
.app_title {
background-color: #22b8cf;
color: white;
height: 4rem;
font-size: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
.content {
background-color: white;
}
위와 같이 코드 작성을 하면 화면의 모습이 보일 것이다.
일단 그러면 여기까지...
Author And Source
이 문제에 관하여(책보고 만들어 보는 TodoList 첫번째), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@byungju0624/책보고-만들어-보는-TodoList-첫번째저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)