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..

시연 영상 GitHub 주소 링크 GitHub - bitkunst/Nodejs_team_project2: with team BNW with team BNW. Contribute to bitkunst/Nodejs_team_project2 development by creating an account on GitHub. github.com 🎬 Project 소개 2022 Node.js 3 weeks project 영화, 애니메이션, 음악 등등을 리뷰하고 사용자들이 서로 소통하는 리뷰 커뮤니티 사이트 제작 🏁 Feature jwt 방식의 로컬 회원가입 및 로그인 passport를 활용한 카카오 로그인 / 구글 로그인 / 네이버 로그인 이미지, 해시태그 기능을 포함한 게시판 CRUD 및 댓글, 대댓글, 좋아요,..

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

이번 포스팅에서는 State 끌어올리기에 대해 알아보고자 한다. Component 구조로 이루어진 React에서는 종종 동일한 데이터에 대한 변경사항을 여러 component에 반영해야 할 필요가 있다. 이럴 때 사용하는 테크닉 중 하나가 가장 가까운 공통 조상으로 state를 끌어올리는 것이다. 전체적인 프로세스는 다음과 같다. 1. 가장 가까운 부모 component 안에서 state를 만들어준다. 2. 부모 component 안에서 state를 변경할 수 있는 함수를 만들어서 자식 component에게 전달한다. 3. 자식 component는 전달 받은 함수를 이용해서 부모 component의 state를 변경한다. 4. 상태가 변경되었기 때문에 자식 component 안의 render( ) 함수들..