[인프런] 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌 / 미니프로젝트

 

기능 )

 

     1. "코드스쿼드 블로그" 버튼 클릭시 포스팅 목록 ajax로 가져온다

     2. 가져온 데이터 카드형식으로 뿌려준다. (제목 - 링크 추가)

     3. 찜하기 클릭하면 내 찜 목록에 제목만 리스팅한다.

     4. 찜하기 버튼 클릭시 취소로 토글된다 

---

webpack / webpack-cli 설치

 

   - 모듈 번들화 작업을 위해 webpack을 사용했다.

   - webpack.config.js 파일로 webpack 번들화 작업시 환경설정을 해준다.

       1) Node.js에서 path에 대한 경로 값을 가져와서 저장을 한다.

       2) 환경설정을 object 타입으로 exports 한다.

             - entry : budling할 파일의 정보(budling 시작시 기준 파일로, 해당 파일을 기준으로 DI를 확인하고 번들링한다.)

             - output : bundle후에 나올 파일의 정보 (path는 파일경로, filename은 bundling한 파일 명)

             - bundle과정은, entry로 설정한 기준 파일과 import 혹은 require로 연결한 하위 파일들의 관계를

               dependency graph로 만들어 이것을 기준으로 bundling을 진행한다. 

 

browser-sync / browser-sync-webpack-plugin 설치

 

   - html, js 파일 수정 후 새로고침하기 귀찮을것 같아서 바로 브라우저에서 반영이 되는 sync browser 모듈을 설치했다.

   - 일반적으로 react-create-app 등 과 같이 프로젝트 구조에 최상위 스크립트는 dist라는 디렉토리에 넣어서 사용된다기에

     기준 디렉토리를 dist로 설정했다.

      

@babel/core / @babel/cli / @babel/preset-env / babel-loader 설치

 

 

   - 설치하려는데 operation not permitted 에러가 계속 떠서 찾아봤더니 npm 권한문제였다.

      vscode에서 설정으로 가서 remote.WSL.fileWatcher.polling 옵션을 true로 체크 해주면 잘 설치된다.

   - @babel/core / @babel/cli 는 바벨을 이용하는데 기본 설치요소이고 @babel/preset-env 바벨의 환경설정 디펜던시 느낌이다.

   -  root경로에 '.babelrc' 파일을 생성 후,

             { "presets": ["@babel/preset-env"],

               "plugins": ["@babel/plugin-proposal-class-properties"]

             }

      바벨 preset 과 설치한 plugins을 기재해준다.

   - Babel의 역할 : js파일을 로드하여 ES6+ 코드를 ES5 코드로 트랜스파일링하는 작업 수행

 

   ** Webpack이 자바스크립트 파일을 번들링하기 전, Babel을 로드하여 ES6+ 코드를 ES5 코드로 트랜스파일링하는 작업을 실행하도록 설정하는 방법

      1) babel-loader 설치 ( npm install --save-dev babel-loader )

      2) package.json >> "scripts" 에서 명령어 설정 (webpack -w)

 

      3) webpack.config.js >> module 설정

                - test : .js 파일 (대상, 정규식으로 표현)

                - include : 어느 경로에 있는 파일을 적용할 것인가

                - exclude : 제외할 경로

                - use : 사용할 모듈 정보

---

후기

 

환경설정 끝내고 강의속에 있는 블로그 주소를 이용해서 목록을 가져오는 실습을 진행하는데

블로그 주소가 없다더라 아무리 무료강의라지만 업데이트도 안되어있고 이런 사소한 부분에서 굉장히 실망스러웠다.

ajax를 모듈을 이용하는게 아닌 XMLHttpRequest 객체를 이용해서 하는 내용이었는데,

XMLHttpRequest 객체는 같은 도메인?이어야 데이터를 가져올수 있다고 했다. 

원래는 개인 블로그 주소로 실습을 이어가려했지만 불가능하므로 여기서 중도하차해야 될 듯 싶다.

앞선 강의 중에서도 웹팩, 바벨 등 버전이 너무 많이 지나서 설치부터 다 헤쳐나갔기에 좀더 아쉬움이 남는다

 

 

 

 

출처 : https://poiemaweb.com/es6-babel-webpack-1

        https://helloinyong.tistory.com/84?category=832495 
        https://www.inflearn.com/course/es6-%EA%B0%95%EC%A2%8C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8/