로더 로더의 역할 웹팩은 모든 파일을 모듈로 바라본다. 자바스크립트로 만든 모듈 뿐만아니라 스타일시트, 이미지, 폰트 까지도 전부 모듈로 보기 때문에 import 구문을 사용하면 자바스크립트 코드 안으로 가져올수 있다. 이것이 가능한 이유는 웹팩의 로더 덕분이다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 d...

웹팩의 엔트리와 아웃풋 이전 포스팅에서 웹팩이 필요한 이유에 대해 알아보았다. 짧게 요약하면 모든 브라우저 환경에서 모듈 시스템을 적용하기 위해서이다. 출처: webpack.js.org 왼쪽 이미지처럼 웹팩은 js를 비롯한 여러 모듈들을 하나로 묶어주는 번들러 역할을 한다. 이전 예시에서 app.js는 math.js 파일을 import 키워드로 ...

몇 년 전부터 프론트엔드 개발자 채용 공고에 Node.js 기술이 우대 사항 항목으로로 추가 되었다. Node.js는 백엔드를 구현하는 기술이라고 생각했다면 이 채용 항목이 의문이었을지 모르겠다. 웹 어플리케이션 개발에 직접적으로 사용하는 것은 아니지만 개발 환경을 이해하고 구성하는데 Node.js를 모르면 언젠가는 한계에 부딪히게 될 것이다. 프론...

웹팩이 필요한 이유 웹팩이 필요한 이유, 즉 해당 기술이 해결하고자 하는 본질에 대해 알아보자. 배경 먼저 모듈에 대해 이야기 해보자. 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는데 수월할 것 같다. 아래 덧셈 함수를 보자. ...

패키지 설치 1) CDN을 이용한 방법 외부 패키지를 가져오는 가장 간단한 방법은 CDN(컨텐츠 전송 네트워크)으로 제공하는 라이브러리를 직접 가져오는 방식이다. 리액트의 주소를 html에서 로딩하면 된다. <script src="https://unpkg.com/react@16/umd/react.development.js"></sc...

Typescript를 적용한 React 프로젝트에서 useState 훅을 사용시 일반적으로 아래와 같이 제네릭을 사용하지 않아도 무방하다. import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); const onIncr...

리액트 타입스크립트 프로젝트에서 컴포넌트를 선언할때 React.FC 키워드를 선언할 수 도 있고 선언하지 않을 수도 있다. React.FC 를 사용했을 때의 장점 1) props 에 기본적으로 children 이 들어가있다. 2) 컴포넌트의 defaultProps, propTypes, contextTypes 를 설정 할 때 자동완성이 될 수 있다 ...

typescript 를 사용하면서 type aliases 와 interface의 차이점에 대한 궁금증이 생겼다. 둘 다 type 을 선언할 때 사용한다는 점만 알고 있었을 뿐 둘의 차이는 정확하게 무엇일까라는 의구심이 들었다. Type Aliases와 Interfaces의 차이 Type aliases(type)와 Interfaces(interfa...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 04. 리액트 컴포넌트 스타일링하기 정리 리액트 컴포넌트를 스타일링 할 때 사용 할 수 있는 도구는 다양하고, 그 중에서 정해진 답은 없다. 다양한 도구들을 조금씩 사용해보고, 취향에 맞는 도구를 위주로 사용하면 된다.

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 03. styled-components 이번에 배워볼 기술은 CSS in JS 라는 기술이다. 이 문구가 뜻하는 그대로, 이 기술은 JS 안에 CSS 를 작성하는 것을 의미하는데, 이번 튜토리얼에서 해당 기술을 사용하는 라이브러리인 styled-compo...