C-log

지난 포스팅에서는 모듈이 모든 브라우저에서 적용되는 것이 아니라 했다. 그래서 이를 해결 하기 위해서 웹팩이 존재한다는 것에 대해서 다루어 보았다.Webpack웹팩은 모듈로 연결(의존)된 모든 파이들을 하나로 합쳐주는 역할을 한다. 그렇게 합쳐진 파일을 번들이라고 한다. 웹팩이 번들을 만드는 번들러 역할을 한다. 따라서 웹팩을 번들러라고도 한다. 따라서 웹팩을 설치하는 lic를 설치할 것이다.:: CMD::npmnpm install webpack webpack-cli --devnpm install -D webpack webpack-cli::yarnyarn add webpack webpack-cli --devyarn add -D webpack webpack-cli설치가 완료가 되면 package.json에..

이번 시간에는 webpack과 등장 배경에 관해서 이야기 해볼 것이다.Webpack의 등장먼저 모듈에 대해 이야기 해보자. 문법 수준에서 모듈을 지원하기 시작한 것은 ES6(ES2015)부터다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는데 수월할 것 같다. ('김정환 블로그' 중..)예전에는 html에 있는 script 태그를 사용해서 js파일들을 연결하고 html로 관리 했다. 예전에 사용했던 방식을 구현 해본 코드는 아래 더보기를 참고하라더보기math.jsfunction sum(a,b){ return a+b;}app.jsconsole.log(sum(1,2));index.html command::CMDstart index.html예전 방식을..

이번 수업 시간에서는 외부 패키지를 관리하는 방법에 관해서 배울 것이다. CDNCDN은 접적으로 라이브러릴 설치 및 다운로드하는 방법이 아니다. 필요한 라이브러리 패키지를 html에서 로딩해서 간단하게 가져오는 방법이다.  하지만 라이브러리는 지속적으로 관리되고 업데이트가 된다. 강의에서 보여주는 리액트 라이브러리의 버전은 16버전이다. 위의 CDN은 18버전이다. 변경된 버전이 있을 때 마다 수동적으로 CDN을 계속해서 변경해줘야 하는 번거로움이 있다. 이를 해결 하기 위해선 우린 NPM을 통해서 패키지를 관리한다.::CMDnpm install reactNPM을 통해서 설치가 완료된다면 아래와 같이 package.json파일안 devDependencies에 이러한 형식으로 저장이 될 것이다. "dev..

Nodejs는 개발 환경을 커스텀 할 수 있다. 개발 환경이 자동으로 설정되지 않는 경우에는 직접 커스텀을 해야하기 때문에 Nodejs를 알아야 한다. 따라서 커스텀을 하기 위해서는 Nodejs가 기본으로 설치 되어 있어야 한다. (본인은 Nodejs를 설치와 관리리를 NVM으로 관리하고 있다.) 참고로 개발 환경이 주목적이라면 최신 버전을 사용하고 그렇지 않고 서버를 위함이라면 Nodejs LTS버전을 사용하면 된다. 수업에서는 nodejs 13.7.0버전을 사용하고 있다. 하지만 우리는 최신 버전을 사용할 것이며 22.3.0버전을 사용할 것이다. 따라서 NVM으로 최신버전을 맞춰 놓자.NVM//CMD//실행 순서//NVM 설치 가능 버전 확인nvm list available//원하는 버전 설치nvm ..

REFERENCEhttps://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html#12-%EB%8B%A4%EC%96%91%ED%95%9C-%EB%AA%A8%EB%93%88-%EC%8A%A4%ED%8E%99

이번 포스팅에서는 router에서 url Paramerts를 전달하는 것에 관해서 포스팅 해볼 것이다. 우선 코드를 살펴보자. SubApp.js ... return ( ( //movie 컴포넌트를 사용 ))} ... Movie.js ... {title} ... movie/:id로 router를 설정하고 해당 id는 Movie.js에서 props로 id값을 받게 설정을 한다. 해당 id값을 받아오는 곳은 Home.js로 부터 받아온다. 이를 통해서 movie API로 연결된 해당 영화의 고유 id값을 Movie.js의 Link를 통해서 Detail 컴포넌트로 전달한다. 그렇게 전달받은 id값은 Detail 내부 컴포넌트에서 다시 fetch를 통해서 정보를 추출한다. Detail 내부 컴포넌트는 아래와 같다..

이번 포스팅에서는 react-router-dom을 사용해서 우리가 만들어 놓은 컴포넌트들을 페이지간 이동이 가능하게 만들 것이다. 우선 react-router-dom을 설치하면 된다. 코드는 아래와 같다. import { BrowserRouter, Routes, Route } from "react-router-dom" import Home from "./routes/Home"; import Detail from "./routes/Detail"; export default function SubApp() { return ( ) } 강의에서는 switch문을 사용할 것이다. switch문은 react ver5까지 지원을 해주고 이후 ver6부터는 Routes를 사용해야한다. Route에 컴포넌트를 열결하는 ..

이번 시간에는 영화 웹사이트를 만드는 연습을 해볼 것이다. 지금까지 배운 것들의 반복이기에 복습 연습을 한다고 생각하고 포스팅을 보면 좋을 것 같다. 먼저 API를 연결 해야한다. 해당 API는 yts라는 영화 정보 사이트에서 받아 올 수 있다. 아래 코드를 살펴보자. import { useEffect, useState } from "react"; export default function SubApp() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); useEffect(() => { fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating..