이번 포스팅에서는 함수 컴포넌트에 대한 개념에 대해 알아보고 이를 이용해 Counter 버튼을 만들어 보고자 한다. 우선 VSCode 터미널에서 npx create-react-app을 이용해 React app을 설치해주도록 하자. 그 후 npm run start를 이용해 React app을 실행시켜 제대로 설치가 되었는지 확인해보면 된다. npx create-react-app [디렉토리명] npm run start 함수 컴포넌트 props & children useState를 이용해 카운터 만들기 1. 함수 컴포넌트 함수 컴포넌트는 기존에 사용했던 클래스 컴포넌트와 다르게 함수를 이용해서 component를 생성한다. JavaScript에서 함수를 만들던 방식 그대로 함수를 만들어서 comp..

create-react-app 없이 React를 구동하기 위해 설치해줘야 할 라이브러리 및 webpack.config.js 파일 내용 정리 👉 react, react-dom, webpack, webpack-cli npm init -y npm install react react-dom npm install -D webpack webpack-cli 👉 babel 관련 라이브러리 npm install -D babel-loader @babel/preset-env @babel/preset-react 👉 webpack-dev-server npm install -D webpack-dev-server 👉 react-refresh ( 페이지 새로고침 없이 리랜더링 ) npm install -D react-refresh ..

React에서 css 적용하기 css 파일을 import 하기 module.css 파일 import 하기 styled-components 만들기 1. React에서 css 적용하기 webpack은 기본적으로 NodeJs 환경에서 실행된다. JavaScript 파일들을 묶어서 bundle 해주는 것이기 때문에 css 파일을 적용하는 것 역시 같은 맥락에서 바라보아야 한다. 만약 jsx 파일 안에서 css 파일을 import 해올 수 있다면 webpack에서 파일을 bundle할 때 css 파일 역시 bundle 해주게 될 것이다. 이러한 방식으로 css를 적용하기 위해서는 webpack.config.js 파일 안에서 css 처리와 관련된 추가적인 설정을 해주어야 한다. 우선 다음의 라이브러리를..

이번 포스팅에서는 webpack.config.js 파일을 이용해서 React에서 사용할 webpack 환경설정을 진행해보고자 한다. 기본적으로 webpack은 Nodejs 환경에서 돌아간다. 그렇기 때문에 npm을 이용해 패키지를 설치하고 사용하는 것이 가능하다. npm init -y npm install react react-dom npm install -D webpack webpack-cli 프로젝트 디렉토리 안에서 webpack.config.js 파일을 생성해주자. src 디렉토리와 dist 디렉토리 역시 생성해준다. src 디렉토리 안에는 webpack이 bundle 할 파일들이 들어가게 된고 dist 디렉토리 안에는 bundle 된 js 파일이 위치하게 된다. 그리고 src 디렉토리 안에는 in..

이번 포스팅에서는 Webpack에 대해 간략히 알아보고자 한다. Webpack에 대해 들어가기에 앞서 JavaScript의 역사에 대해 조금 짚고 넘어갈 필요가 있다. JavaScipt는 2015년 ES6 문법이 등장하기 이전과 이후로 나뉘어진다. 2015년 이전에는 module 개념이 존재하지 않았었고 ES6 문법이 등장하면서부터 module 개념이 도입되기 시작했다. 그 이전에는 JavaScript에 module 개념이 없었기 때문에 module 형식으로 코드를 작성하고 사용하기 위해 webpack이라는 개념이 등장하게 되었다. module이라는 것은 쉽게 말해 파일을 나눠서 작성하는 것이다. A 파일에서 작성한 내용을 B 파일에서 사용하고 싶을 때 A 파일의 내용을 가져와서 사용하는 것이 바로 mo..