[리액트 실습] 영화 앱 만들기 1 (tmdb api 발급)
1. 실습 영상 찰스님의 실습 영상을 보고 공부했다 !! 따라가기도 쉽고 설명도 잘해주셔서 도움이 많이 된 실습이었다 . 2. 완성된 페이지 상영중인 영화 + 제목 + 평점을 나타낸 리액트 웹 !! 사실
0lrlokr.tistory.com
API를 발급받았으니 이제 본격적인 개발(?)을 할 차례다 ~~!
간단한 리액트 실습이기에 과정은 어렵지 않았다.
이전 게시물에서 쓴 API 줄바꿈으로 컴포넌트가 잘 먹지 않았던 문제만 있었을 뿐 코드만 잘 따라 적으니 화면이 잘 떴다.
1. 터미널을 이용해 vscode띄우기
(리액트 개발환경 구축은 추후 포스팅을 작성해야겠습니다 ! )
(React)리액트 설치 및 실행법 상세하게(window & Mac)
리액트 설치 및 실행법 * 리액트 실행하는 방법이 변경되었습니다. * 현재 포스팅 보다는 업데이트 된 아래 포스팅 참고바랍니다. (링크 걸어놓았습니다 :)) 2022.05.05 - [웹/(React)리액트] - (React) 리
eunhee-programming.tistory.com
npx create-react-app (폴더명)
이제 다 된거나 다름 없습니다.
사실 반의 반도 안왔다
cd 명령어를 통해 파일을 열어주고
npm start 명령어로 잘 작동되는지 확인해본다
(다른 포트에서 3000번을 사용하고 있기에 3001번에 뜬다)
어쨋든 잘 작동함 ~~
react-movie-demo 파일 내에서
code .(띄어쓰기 주의 ! )
를 입력하면 바로 vscode로 연동된다 ~ ~ !!
2. VScode작업 시작
VScode를 실행시켜보면 우리가 쓰지 않는 많은 파일들까지 모두 포함하고 있다.
필요하지 않은 파일들을 지워주자 !!
public 폴더에서는 index.html 파일만,
src 폴더에서는 App.js, index.css, index.js 파일 외에 모두 지운다.
이 파일 내에서도 필요하지 않은 코드들을 모두 지운다.
3. 코드 확인
사실 아직 초보 단계인 나는 이 파일이 어디서 쓰이길래, 이 코드 한 줄이 어떻게 작동하는지에 대해 많이 무지한 상태여서 처음에 필요하지 않은 코드를 삭제하는 과정에서 매우 많은 시간을 썼다.
그래서 보시는 분이 계시다면 중간 점검 차 확인하시라고 적어보는 기본 베이스 코드 !
public
> index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Movie App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
src
>App.js
function App() {
return (
<div>
</div>
);
}
export default App;>index.css
.빈 코드 맞다 지금은 그냥 비우면 된다 !!
>index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
이제 이 4개의 파일을 뼈대로 리액트를 구성해보려고 한다 !
그 전에 컴포넌트와 프롭스에 대한 내용을 조금 알아야하는데 ..
이 부분에 대해서는 다음 포스팅에서 다루어보겠다.
'FE > React' 카테고리의 다른 글
| [리액트 실습] 마켓컬리 클론코딩 1. 헤더 만들기 (0) | 2023.02.03 |
|---|---|
| [리액트 실습] 간단 영화 앱 만들기 4 (1-3 코드) (0) | 2023.02.02 |
| [리액트 실습] 간단 영화 앱 만들기 3 (components와 props) (1) | 2023.01.24 |
| [리액트 실습] 영화 앱 만들기 1 (tmdb api 발급) (0) | 2023.01.20 |
| [백준/Python] 14681 사분면 고르기 (0) | 2022.09.05 |