[React / Node.js] 영화사이트 클론코딩 - 에러 해결, React, ES6 문법 알아보기

 

 

기본적인 BoilerPlate는 강사님 github에서 다운로드 받아서 이용했다.

루트 디렉토리 안에 server, client로 폴더가 구분되어있고 server의 package.json은 루트 디렉토리,

client의 package.json은 client 폴더 하위에 만들어져 각각의 경로에서 npm install하여 모듈을 설치해준다.

 

server / config

 

개발환경 설정에 따라 운영환경인지, 개발환경인지를 선택하여 따로 DB가 관리된다.

process.env : node.js가 제공하는 환경설정 관련 property이다.

 

npm run dev

"scripts": {

    "start": "node server/index.js",

    "backend": "nodemon server/index.js",

    "frontend": "npm run start --prefix client",

    "dev": "concurrently \"     npm run backend        \" \"       npm run start --prefix client       \"  "

  }

 

package.json 에서 설정한 npm runtime 명령어인데, 

'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

라는 에러 발생으로 server 구동은 되나 client 구동이 되지 않아 해결한 케이스이다.

 

1. 명령어 앞뒤로 띄어쓰기를 하면 해결된다 (해결되지 않았음)

2. npm update 후 npm run dev (해결됨)

  (만약 해결되지 않을 경우, npm install -g react-scripts )

 

useState (함수형 컴포넌트에서 변수 관리)

 

    const [MainMovieImage, setMainMovieImage] = useState([])

 

변수 선언시 배열의 비구조화 할당(destructuring) 기법을 이용해 두 개의 변수를 선언한다.

첫 번째는 사용할 변수 이름이고, 두 번째는 변수 이름 앞에 set***을 붙여 setter 형태의 이름을 붙여준다.

useState(초기값) – 상태 변수의 초기값을 지정한다. 

 

영화사이트 클론에서 현재 useState로 선언한 변수 MainMovieImage는 api로 받아온 영화 데이터의 대표이미지(썸네일)을 담아주는 배열의 형태를 띈다. 그러나 초기화값으로 빈 배열을 지정하였을때 화면이 렌더링 되기 전후로 style값들이 미리 적용되어 우측 콘솔과 같은 에러가 발생한다

 

따라서, 빈 배열이 아닌 null로 초기화했더니 해당 에러는 발생하지 않았다.

     const [MainMovieImage, setMainMovieImage] = useState(null)

 

[ 에러내용 ]

index.js:1 Warning: Updating a style property during rerender (background) when a conflicting property is set (backgroundPosition) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.

 

useEffect 

 

         - 변수 또는 객체의 값의 변화를 인지하고 업데이트 해주는 함수

         - 실행되는 조건

              1) 페이지 처음 렌더링시 무조건 실행

              2) useEffect 안에 배열로 지정한 useState의 값이 변경되면 실행

          - 사용방법

              1) useEffect(() => {});

                  가장 기본적인 형태이나 dependency가 없어 작은 요소라도 변화하면 계속 실행되어,

                  불필요한 실행이 많아져 거의 사용하지 않는다.

              2) useEffect(() => {}, []);

                  렌더링 후 단 한번만 실행하고 싶을때 사용하는 방법

                  대괄호[] 안에 변수나 값을 지정하지 않고 비어있다면, 렌더링 후 단 한번만 실행된다.

              3) const [name, setName] = useState();

                  useEffect(() => {}, [name]);

                  렌더링 후 한번, 배열 안 변수의 값이 변할 때마다 실행된다.

 

 

ajax 통신과 비슷하지만 다른 fetch 와 axios

 

    - 브라우저에 내장된 window.fetch, 라이브러리로 제공되는 axios

    - 공통점

         1) 비동기 통신을 위해 XMLHttpRequest 객체를 만들어 이용한다.

         2) promise 형태를 띄고 있다.

   - 차이점

         1) axios는 HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경하지만

            fetch는 mixin 형태를 취하기 때문에 json으로 파싱해주어야한다.

   

    fetch : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch    

    axios : https://github.com/axios/axios

             https://xn--xy1bk56a.run/axios/guide/#axios%EB%9E%80

 

templeate literlar

   

     템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다.

     작은따옴표, 큰따옴표가 아닌 백틱( ` )으로 감싸준다.

     백틱 안에서 백틱을 사용할 경우는 기존과 마찬가지로 백틱 앞에 역슬래시를 사용한다.

    // 기존 코드
    console.log("string text line 1\n" + "string text line 2");

    // 템플릿리터럴 적용 코드
    console.log(`string text line 1
    string text line 2`);

 

    기존에 이렇게 작성했던 코드를 더 간편하게 사용할 수 있다.

    "" 와 ''를 혼용해서 사용할 때 맞지않게 사용한 경우가 더러 있었는데 템플릿리터럴을 알고 세상 기뻤다

 

   templeate literlar(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)

 

Spread 와 Rest 

 

  - spread operator는 기존의 변수를 펼쳐서 주는 쪽이고,

    rest parameter는 여러개의 인자를 받고 그것들을 합쳐서 새로운 배열/객체를 만든다.

 

** 출처 : https://soopdop.github.io/2020/12/02/rest-and-spread-in-javascript/

 

 

---

 

강의정보  👇👇👇 

플랫폼 : 인프런

강의 : 따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기 (2020.3 유튜브 업로드)

강사 : John Ahn

개발환경 : vscode, 서버 node.js, 클라이언트 react.js, 데이터베이스 mongoDB

boiler-plate git add : https://github.com/jaewonhimnae/boilerplate-mern-stack.git

url : https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%85%B8%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%98%81%ED%99%94%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0/dashboard