0. 시작
포트폴리오 제작을 위해 웹 페이지를 하나 만드려고 합니다!
react로 웹 페이지를 만드는 것은 처음이지만, react native로 프로젝트를 한 경험이 도움이 될 것입니다.
제작이 마무리되면 react native로 앱도 만들 예정입니다.
그리고 제 노트북엔 웹을 제작하기 위해 필요한 모든 준비가 되어있으니 준비 과정은 생략하겠습니다.
1. 프로젝트 생성
npx create-react-app mypage
터미널에 위 코드를 적어서 기본 프로젝트를 생성해줍니다.
카멜 표기법이 습관이 돼서 프로젝트 이름을 myPage라고 적으니 에러가 떴습니다.
내용을 읽어보니 프로젝트 이름에 대문자는 사용할 수가 없다네요..
프로젝트 생성 후엔 쓸모없는 파일들을 지워줍시다.
2. 컴포넌트
- 함수형 컴포넌트
function App() {
return(
<div>
Hi, there!
</div>
);
}
export default App;- 클래스형 컴포넌트
class App extends React.Component {
render() {
return(
<div>
Hi, there!
</div>
)
}
}클래스형 컴포넌트는 함수형 컴포넌트에서는 못 쓰는 state와 라이프 사이클 api를 제공한다고 합니다.
함수형 컴포넌트는 선언하기 편하고 클래스형 컴포넌트보다 메모리를 보다 적게 사용합니다. 게다가 hook을 이용해서 위의 단점을 보완할 수 있습니다.
3. 준비
header(navi), contents(main, about me, projects, info), footer
이렇게 네 가지 항목으로 구성 예정입니다.
github에 연결도 해줍니다.
git remote -v
git remote add origin [repository_address]
-push
git add .
git commit -m "commit"
git push origin main
준비는 끝났습니다.
다음부터는 React를 공부하면서 페이지를 만들어보도록 하겠습니다.
