본문 바로가기

Study/Web

(12)
3. 프론트엔드 개발환경의 이해: 바벨 5강 내용을 정리한다. https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174#sec1 프론트엔드 개발환경 이해 | T아카데미 온라인강의 1. NPM 프로젝트와 모듈 시스템을 이해하고, Webpack/Babel/Lint 등 개발 도구들의 역할에 대해 알아봅니다. 2. 각 개발도구들을 이용하여 React 개발환경을 .. tacademy.skplanet.com 바벨(Babel) 크로스브라우징 이슈를 해결하는 녀석. 익스플로러는 promise못쓴다거나 이런식으로 브라우저마자 인식할수 있는 버전이 다른다. 바벨은 이런 코드들을 모든 브라우저가 인식할수있도록 하위버전으로 바꾸어주는 역할을 한다. ES6코드를 ES5로 바꾼다거나.....
2. 프론트엔드 개발환경의 이해: 웹팩(기본II - 플러그인) 이곳의 3강 내용을 정리한다. https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174#sec1 프론트엔드 개발환경 이해 | T아카데미 온라인강의 1. NPM 프로젝트와 모듈 시스템을 이해하고, Webpack/Babel/Lint 등 개발 도구들의 역할에 대해 알아봅니다. 2. 각 개발도구들을 이용하여 React 개발환경을 .. tacademy.skplanet.com 플러그인 개념 엔트리를 모아서 아웃풋으로 만든다. 모을때 import해서 모듈로 처리한다. 누가? 로더가. 아웃풋으로 만들기 전에 후처리를 해준다. 빈칸을 줄인다거나, 자바스크립트를 난독화한다거나 어쩌구저쩌구. 이런 후처리는 플러그인이 수행한다. 로더는 파일단위 ..
1. 프론트엔드 개발환경의 이해: 웹팩(기본I - 엔트리/ 아웃풋/ 로더) 웹팩 실습 정리 https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174#sec1 프론트엔드 개발환경 이해 | T아카데미 온라인강의 1. NPM 프로젝트와 모듈 시스템을 이해하고, Webpack/Babel/Lint 등 개발 도구들의 역할에 대해 알아봅니다. 2. 각 개발도구들을 이용하여 React 개발환경을 .. tacademy.skplanet.com 터미널로 창 열기 mac은 open '파일' windows는 start '파일' (예: start ./index.html) 모듈 ES6에서 import/export module 이런식으로 쓰는것. C++에서 #include마냥. js에서 다른 js파일을 가져와서 사용한다. 기존..
0. 프론트엔드 개발환경의 이해 실습 우아한 2차 테스트 샘플을 봤는데 nodejs가 있었다. 으악악악... 급한대로 이틀만에 벼락쳐보자! https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174#sec1 프론트엔드 개발환경 이해 | T아카데미 온라인강의 1. NPM 프로젝트와 모듈 시스템을 이해하고, Webpack/Babel/Lint 등 개발 도구들의 역할에 대해 알아봅니다. 2. 각 개발도구들을 이용하여 React 개발환경을 .. tacademy.skplanet.com 실습해보자. 개요 프론트엔드인데 왜 Node.js를 쓰냐? 요즘에는 바로 브라우저에 코드 올리지 않음 코드 → 빌드함 → 올림. 빌드과정에 Node.js가 필요한것 cmd에 'node'를 치면..