몇 년 전부터 프론트엔드 개발자 채용 공고에 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...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 02. CSS Module 이번에는 CSS Module 이라는 기술에 대해서 알아보자. 리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 이라는 기술을 사용하면, CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있다. CRA 로 만든 프...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 01. Sass Sass (Syntactically Awesome Style Sheets: 문법적으로 짱 멋진 스타일시트) 는 CSS pre-processor 로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 코드의...