[주말학습] Do it! 클론코딩 영화 평점 웹서비스

노마드 코더 니꼴라스와 만드는 진짜 리액트 앱

=======================================

[2024.03.30] - 270분 +_+

1. 1장 ~ 2장 : 12:00 ~ 13:00 (60분)

2. 3장 ~ 5장 중간 : 13:00 ~ 14:00 (60분)

3. 점심, 휴식

4. 5장 중간 ~ 5장 : 15:00 ~ 15:30 (30분)

5. 강제 가족 산책

6. 6장 : 17:00 ~ 17:45 (45분)

7. 7장 : 17:45 ~ 18:00 (15분) css는 github에서 가져와서 붙여넣기!

8. 저녁, 휴식

9. 8장 : 21:00 ~ 23:00 (120분) ReactRouter v6로 변경된 내용을 따라가느라...

=======================================

 

 

1. node 설치 (재설치)

기존 버전이 있었는데 지금 버전과 갭이 커서인지 설치 명령마다 에러가 발생함!!

아이참!! 뭘 하려고 하면 항상 이런 예상치 못한 에러가 발생하네요...

 

2. vscode 설치

vscode 설치, 요즘은 좋은 툴이 정말 많은 것 같아요. 정말 많아서 너무 힘들어요... ㅋㅋ

 

3. npm start 성공!! (45분 정도 지난 것 같아요. ㅋㅋ)

니꼴라스쌤 잘 됩니다. 믿고 있었지만, 더 믿고 이후 과정을 진행할 수 있겠어요!

 

4. 약간 소스코드가 다르긴 한데 느낌상 되는 것 같아요.

내가 작성한 ./src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

니꼴라스쌤의 ./src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

버전이 올라가면서 좀 바뀐 것 같지만 비슷해 보이고 신기하게 동작이 잘 됩니다. +_+

./src/App.js는 import가 없어도 동작을 합니다?!

function App() {
  return <div className="App" />;
}

export default App;

 

5. 3장 react에 대한 이해 (아! 정확히 이해했어.)

컴포넌트, JSX, props 넘어갑니다.

 

6. prop-types 에러

어머나!!

찾아보니 타이핑을 잘 못 해서 발생하는 오류입니다. +_+ 눈이 잘 못된 건지, 손꾸락이 잘 못된 건지. (설마 뇌가?!)

에러를 유발한 코드

Food.PropTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.string.isRequired,
};

수정한 코드

Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.string.isRequired,
};

틀린 그림 찾기 ㅋㅋ 그런데 정말 친절하게도 Line 56:6 이란 내용이 딱 어디가 틀렸는지 알려준 것입니다. ㄳㄳ

prop-types를 통해서 꼼꼼한 프로그래밍을 할 수 있다!

 

7. state

state는 동적 데이터를 다룰 때 사용해. 동적 데이터란 말 그대로 변경될 가능성이 있는 데이터를 말해.

props는 동적 데이터를 다루지 못해. 그래서 state를 배워야 하는 거야.

??

함수형 컴포넌트, 클래스형 컴포넌트

클래스형 컴포넌트를 사용하는 이유가 state를 사용하기 위해서..

state에 const나 let 키워드를 사용하지 않는 이유가 궁금한데!

클래스와 기본 문법 (javascript.info) <= 여기서 보면 된다고 했는데!

클래스와 기본 문법

state 관련 내용은 못 찾았습니다.. ChatGPT야 도와줘!

 

state를 사용하려면 반드시 클래스형 컴포넌트 안에서, 소문자를 이용하여 state라고 적으면 돼.

생명주기 +_+ App은 생명주기가 있습니다.

이론적인 부분을 최대한 걷어내고 설명해주는 책이고, 예제를 따라하면 동작이 되니깐 정말 흥미진진한데도 이해가 잘 안되니깐 집중력이 한 순간에 흐트러집니다. 세수 ㄱㄱ 였는데 가족 산책 ㄱㄱ

 

8. async와 await가 등장했다! 잘 몰라도 우선 사용하자.

그렇지만 쉽게 동작해주진 않는단다.

찾아보니 CORS 문제 같습니다. localhost:3000 으로 실행해서 그런 것 같습니다. 제 잘못입니다.

local IP:3000 으로 하니깐 잘 됩니다. 에잇!! 그랬는데 또 안됩니다. 뭐가 뭔지 모르겠어요?!

Edge는 오락가락하고 Chrome에서는 잘 되는 것 같고.. 아몰랑..

 

9. Route 도입 문제

function App() {
  return (
    <HashRouter>
      <Route path="/about" Component={About}/>
    </HashRouter>
  );
}

그대로 따라했더니 에러가 발생합니다. 에러는 나지만 친절해요. Routes로 감싸야 한데요. ReactRouter v6

App.js

import React from 'react';
import './App.css';
import { HashRouter, Routes, Route } from 'react-router-dom';
import About from './routes/About';

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/about" element={<About/>}/>
      </Routes>
    </HashRouter>
  );
}

export default App;

 

10. 오탈자

220페이지: 07-3에서 내비게이션 메뉴를 만들어 보자. => 08-3에서

236페이지: 07-5에서는 리다이렉트 => 08-5에서는

 

11. 위에서 ReactRoute v6 되면서 Link의 state 전달 방식도 변경이 있었습니다.

Movie.js에서 state 설정을 넘겨주는 소스 (Link 부분을 봐주세요.)

function Movie({ title, year, summary, poster, genres }) {
    return (
        <div className="movie">
            <Link to={`/movie-detail`} state={{ year, title, summary, poster, genres }}>
                <img src={poster} alt={title} title={title} />
                <div className="movie__data">
                    <h3 className="movie__title">{title}</h3>
                    <h5 className="movie__year">{year}</h5>
                    <ul className='movie__genres'>
                        {genres.map((genre, index) => {
                            return <li key={index} className='movie__genre'>{genre}</li>;
                        })}
                    </ul>
                    <p className="movie_summary">{summary.slice(0, 180)}...</p>
                </div>
            </Link>
        </div>
        
    );
}

 

ReactRoute v6를 사용하다보니 변경된 내용이 많습니다.

Detail.js

import React, { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

function Detail() {
    const location = useLocation();
    const navigate = useNavigate();

    console.log(location);
    useEffect(() => {
        if (location.state == null) {
            navigate('/');
        }
    }, [location, navigate]);

    return <span>hello</span>;
}

export default Detail;

 

12. github.io에 배포까지 똻!! (조금 기다렸더니 잘 나와요!!)

 

 

 

책의 내용을 다 해봤습니다. 마지막에 ReactRouter v6로 인해 헤메긴 했지만, 3년 넘게 시간이 지났는데도 잘 동작하는 책의 예제들 이었습니다. 앞에서는 니꼴라스쌤이었지만 오늘 하루를 함께하다보니 니꼬쌤이라고 불러봐도 되겠죠? 다음 스텝은 이와 유사한 나만의 서비스를 만들어서 배포해 보는 것으로 해봐야겠습니다. +_+

니꼬쌤 다시 한 번 감사드립니다. ❤️