본문 바로가기
webpack4. config(1) 1. configuration 설정을 위해 configuration file을 반드시 작성해야 하는 것은 아니다. 웹팩은 프로젝트의 진입점을 src/index.js로, 출력물의 경로를 dist/main.js로 가정한다.(디폴트) 프로젝트 기능을 확장시키고자 할 때, root 폴더 안에 webpack.config.js 파일을 생성하면 웹팩이 자동적으로 사용 웹팩은 plugins 기본값이 적용된 후 configuration 기본값을 적용함 2. 상황에 따라 다른 설정 파일을 사용할 경우, 2-1. package.json에 작성하는 방법 "scripts": { "build": "webpack --config prod.config.js" } 2-2. 커맨드 라인으로 작성하는 방법 $ npx webpack --c.. 2022. 4. 19.
npm 인스톨 커맨드 목차 npm install 커맨드 작성 예시 aliases scope 1. npm install 커맨드? 커맨드는 하나의 패키지 또는 연관된 패키지들을 설치한다. local node_modules 폴더에 dependencies를 설치한다. npm install은 package.josn 파일의 denpendencies에서 설치된 모든 모듈 목록들을 보여준다.(디폴트) 만약 패키지가 package-lock 또는 npm shrinkwrap 파일 또는 yarn lock file을 가질 경우 dependencies의 설치는 이 파일들에 의해 아래의 순서대로 이루어지게 된다. package-lock/npm-shrinkwrap.json/yarn.lock 파일이 있는 경우 dependencies의 설치가 따르는 순서 .. 2022. 4. 19.
webpack3. 수업 내용 [ 수정중 ] 목차 하드코딩 moment 라이브러리 사용 webpack 및 webpacli + moment 사용 미션: 1초마다 시간이 1초씩 증가하는 코드를 작성해보자. 방법1. 하드코딩 아래와 같이 Date() 메서드와 새로운 객체를 생성하는 new 키워드를 작성하면 된다. 방법2. moment 라이브러리 사용 위의 복잡해보이는 코드는 moment라는 라이브러리를 사용해서 간편하게 작성 가능하다 우선 라이브러리를 설치하는 커맨드를 입력해서 moment를 설치해보자 1. 모멘트 라이브러리 설치 $ npm install moment 2. 코드 작성 방법3. webpack + moment 라이브러리 사용 위의 코드를 webpack을 사용해서 한꺼번에 처리해보자 1. webpack과 webpack-cli 설치 $ npm .. 2022. 4. 19.
webpack2. 개념 목차 웹팩이란? 웹팩을 이해하기 위한 핵심 개념(entry / output / loaders / plugin / mode / browser compatibility ) 진입점(entry point) 출력(output) 로더(loaders) 플러그인(plugin) 모드(mode) 브라우저 호환성(browser compatibility) 환경(environment) 1. 웹팩이란? 웹팩은 모던 자바스크립트 어플리케이션을 위한 정적 모듈 번들러 웹팩이 어플리케이션을 다룰 때, 내부적으로 하나 또는 다수의 entry points로부터 dependency graph를 만든다. 프로젝트에 필요한 모든 모듈을, 컨텐츠를 제공할 정적 자산 인 번들로 결합 2. 웹팩을 이해하기 위한 핵심 개념 진입(Entry) 출력(O.. 2022. 4. 18.
webpack1. 모듈과 추상화 목차 모듈 추상화(abstraction) 개념 웹팩 모듈 웹팩에서 지원하는 모듈의 유형들 1. 모듈 1-1. 모듈방식 프로그래밍 모듈방식 프로그래밍에서 개발자들은 프로그램들을 모듈이라고 불리는 개별 기능상의 덩어리들로 쪼갠다. 각각의 모듈은 검증생성, 디버깅, 세부 사항 테스트하기 등 완전한 프로그램보다 더 작은 표면을 가진다. 잘 작성된 모듈은 완전한 추상화와 캡슐 경계를 제공하며, 각각의 모듈들은 전체 어플리케이션 내에서 논리적으로 일관적인 디자인과 명확한 목적을 가지게 된다. 1-2. 모듈의 특성 식별가능한 유일한 이름을 가짐 독립적으로 컴파일됨 독립적인 기능을 가져야 함 다른 프로그램 또는 다른 모듈에서 사용 가능 모듈 자체로서 재사용 가능 2. 추상화 (Abstraction) 2-1. 추상화 개.. 2022. 4. 18.
React6. state와 불변성 목차 state란? 클래스 컴포넌트에 로컬 state 추가하기 state 업데이트 하향식 데이터 흐름 불변성 개념 1. state? 모든 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수처럼 동작해야 한다는 규칙을 위반하지 않고도 사용자의 액션, 네트워크 응답 및 다른 요소에 대한 응답으로 시간에 따라 자신의 출력값을 변경 가능 2. 클래스 컴포넌트에 로컬 state 추가하기 render() 메서드 호출 class constructor()메서드 호출하여 state 초기화 후 props를 기본 constructor에 전달 class Clock extends React.Component{ constructor(props){ super(props); this.state = {date: new Date().. 2022. 4. 14.
React4-2. 컴포넌트(2) 목차 컴포넌트의 생명주기 도표 인스턴스 생성(Mounting) 시 호출되는 메서드들 업데이트(Update) 시 호출되는 메서드들 인스턴스 제거(Unmounting) 시 호출되는 메서드들 자주 사용되는 생명주기 메서드( render() / contructor() / componentDidMount() ) 생명주기에 따른 코드 실행예시 1. 컴포넌트 생명주기 모든 컴포넌트는 각 생명주기에 따른 다양한 메서드를 보유한다 이 메서드를 선언하여 특정 시점(컴포넌트가 마운트되거나 언마운트되는 시점)에 코드가 실행되도록 설정 가능하다 -컴포넌트의 생명주기 인스턴스 생성(Mounting) 업데이트(Update) 인스턴스 제거(Unmounting) 2. 생성(Mounting) 컴포넌트의 인스턴스가 생성되어 DOM에 삽입.. 2022. 4. 14.
React 4-1. 컴포넌트(1) 목차 컴포넌트란? 컴포넌트의 유형? class로 정의된 컴포넌트 함수로 정의된 컴포넌트 컴포넌트 렌더링 컴포넌트 합성 컴포넌트 추출 1. 컴포넌트란? UI를 독립적이고 재사용 가능한 여러 조각으로 나누는 것 컴포넌트는 엘리먼트를 함수나 클래스에 담는 행위 결과물을 JSX로 반환 개념적으로 JS 함수와 유사 props라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는 지를 기술하는 React 엘리먼트(리액트가 이해할 수 있는 객체)를 반환 2. 컴포넌트의 유형 class 함수 3. ES6 class로 정의된 컴포넌트 class로 정의된 컴포넌트는 보다 많은 기능을 제공함 React 컴포넌트 class 정의를 위해서는 React.Component를 상속받아야 함 React.Component의 하위 cl.. 2022. 4. 14.
React3. ReactDOM.render() 목차 React 엘리먼트? DOM에 엘리먼트 렌더링하기: ReactDOM.render() 메서드 DOM에 렌더링된 엘리먼트 업데이트하기 변경된 부분만 업데이트 - 특정 시점의 UI 변화에 대해 고민하는 접근법 1. React 엘리먼트 React 앱의 가장 작은 단위이며, 화면에 표시할 내용을 기술함 일반 객체 불변객체(엘리먼트 생성 이후 해당 엘리먼트의 자식이나 속성 변경 불가) 엘리먼트는 특정 시점의 UI를 보여줌 React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 함 2. DOM에 엘리멘트 렌더링하기 React 엘리먼트를 container DOM에 렌더링 현재 ReactComponent 루트(root) 인스턴스에 대한 컴포넌트에 대한 참조를 반환 즉, 생성한 React 엘리먼트를 루.. 2022. 4. 13.

티스토리툴바