Hyeonii.log

React 시작하기 - 01. webpack 설정

Wed, 15 Feb 2023 13:57:35 GMT

💁🏻 들어가기에 앞서 본 글은 DeKu님의 블로그 글을 따라해보며 정리한 내용입니다. DeKu님이 집필하신 '스무디 한 잔 마시며 끝내는 리액트 + TDD' 책 많이 사랑해주세요. 블로그 보고 많은 도움을 받고 있습니다. 감사합니다 😍

스무디 한 잔 마시며 끝내는 리액트 + TDD- 당장 사러가기

그리고 활기를 불어넣기 위한 귀여운 짤 모두 화이팅 !

참고 블로그

React 프로젝트 webpack 설정: DeKu님의 블로그
- babel과 webpack에 대한 설명: Yoon.log님의 벨로그

공식 사이트

npm: Docs - npm init
- babel: Docs
- webpack: Docs

React 프로젝트에 webpack 설정하기

1. npm 프로젝트 생성

프로젝트 폴더에 package.json 파일을 생성합니다.

npm이란? 
----
Node Package Manager의 약자로
node.js 프로젝트를 진행하면서 설치되는 모듈들을 관리하는 패키지 매니저입니다.

설치한 모듈은 node_modules 라는 폴더에 저장되며, 패키지 버전과 빌드 관련 내용은 package.json이라는 파일에서 관리합니다.

npm 세팅을 직접 설정하고싶다 : npm init
기본 설정으로 생성하고싶다: npm init -y

명령어 입력 후 파일 목록을 보면 package.json 파일을 생성되어 있습니다. 앞으로 패키지를 설치하면 package.json에 패키지 이름과 버전이 기입됩니다.

2. 리액트를 사용하는데 필수적인 라이브러리 설치

react 와 react-dom을 설치해줍니다.

npm install --save react react-dom

여기서 --save flag는 모듈을 package.json의 dependency 항목에 추가한다는 의미입니다.

node_modules 파일을 삭제하고 npm install or yarn install로 다시 모듈을 설치 하는 경우, package.json의 dependency 항목에 포함되지 않은 모듈들은 설치되지 않습니다.

하지만 npm 5.0.0부터는 기본적으로 설치된 모든 패키지를 종속 항목으로 저장하기 때문에 더 이상 --save 옵션을 사용할 필요가 없다고 합니다.

3. webpack과 babel 설치

npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react rimraf

webpack : 여러개의 파일을 하나로 합쳐주는 번들러입니다. css loader 기능, jsx 변환 기능도 포함합니다.
babel : 유행어나 사투리를 표준어로 변환해주는 변환기라고 생각하시면 됩니다. 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환(컴파일)시키는 역할을 한다. babel은 최신 js 코드나 실험적인 js 코드를 표준 js 코드로 변환해줍니다.

4. package.json의 script 설정

...
"scripts": {
    "start": "webpack-dev-server --mode development",
    "prebuild": "rimraf dist",
    "build": "webpack --progress --mode production"
},
...

모드 (--mode) : webpack을 실행시킬때는 항상 build mode를 설정해주어야 합니다.
prebuild: 항상 빌드 전에 실행됩니다. rimref라는 모듈로 build를 실행하기 전 기존 build때 생성되었던 파일을 제거 해줍니다.
프로그래스 (--progress): 빌드 진행 과정을 모니터링하게 해주는 flag입니다.

5. webpack 설정 (빌드 관련 설정)

webpack.config.js파일을 생성한 후 아래와 같이 작성해줍니다.

// webpack.config.js

// 절대 경로를 참조하기 위한 코드입니다.
const path = require('path');

// webpack에서 htmml을 다루기 위한 플러그인입니다.
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {
  entry: {
    // 최종적으로 하나로 합쳐질(번들링) 파일 경로입니다. (최상위 컴포넌트의 경로를 적어주면 됩니다.)
    'js/app': ['./src/App.jsx'],  
  },
  output: {
    // 생성된 번들(bundle) 파일이 저장되는 위치입니다.
    path: path.resolve(__dirname, 'dist/'),
    // 다른 파일에서 생성된 번들을 참조할 때 '/'를 기준으로 참조합니다.
    publicPath: '/', 
  },
  module: {
    rules: [
      {
        // 리액트 파일인 jsx와 js를 babel을 이용하여 빌드합니다.
        test: /\.(js|jsx)$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      // template: 기본 생성된 HTML 대신 사용자 본인의 템플릿 파일을 전달합니다.
      template: './src/index.html',  
      filename: 'index.html',
    }),
  ],
};

wabpack 설정에서 주목할 포인트는 아래와 같습니다.

번들링할 파일의 경로와 이름정의
번들링할 파일 종류 정의
번들링할 파일의 HTML 템플릿 적용

6. babel 설정 (컴파일 관련 설정)

.babelrc파일을 생성한 후 아래와 같이 작성해줍니다.

// .babelrc

{
    "presets": [
      [
          "@babel/preset-env",
          // 컴파일 브라우저를 설정합니다.
          // 브라우저의 상위 버전 두개(예: IE 11, 10)와 한국(KR)에서 5% 이상의 점유율을 가지고 있는 브라우저에 대응하여 컴파일합니다.
          { "targets": { "browsers": ["last 2 versions", ">= 5% in KR"] } } 
      ],
      "@babel/react"  // 리액트도 컴파일 할 수 있도록 한다.
    ]
}

babel 설정에서의 포인트는 아래와 같습니다.

컴파일 타겟 브라우저의 버전을 설정합니다.
리액트를 컴파일 하기 위해서 하단에 "@babel/react"라는 코드를 추가해줍니다.

7. src/index.html 파일 생성

HTML을 생성하고 body 부분에 React코드가 들어갈 "app"이라는 id를 가진 div 태그를 추가해줍니다.



  
    
    Hello World

8. src/App.jsx 파일 생성

React 코드를 작성하고 index.html의 'app'이라는 id를 가진 div에 리액트 코드를 삽입해줍니다.

//  src/App.js

...
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return Hello World!;
};

// index.html의 'app'이라는 id를 가진 div에 리액트 코드를 삽입해준다
ReactDOM.render(, document.getElementById('app'));

9. 프로젝트 시작/빌드

시작: npm start
빌드: npm run build

npm start 명령어 실행 후 http://localhost:8080에 들어가면 화면을 확인 할 수 있습니다.

+) git commit을 위한 작업

.gitignore 파일을 생성한 후 commit하지 않을 파일과 디렉토리를 적어줍니다.

//.gitignore

node_modules

package-lock.json

마지막으로 README.md 파일 생성하여 프로젝트에 대한 설명을 markdown 언어로 적어주시면 완성입니다 :)

// README.md

## React Setting Test
---

리액트 세팅을 테스트하고 
마음에 드는 세팅을 저장해두는 레포지토리입니다. 

@2023.02.15

노개북챌린지 Day5 - 실용주의 프로그래머 3장. 기본적인 도구

Wed, 23 Mar 2022 15:29:47 GMT

📅 2022.03.23 📖 범위: 3장. 기본적인 도구

기억하고 싶은 내용

도구는 재능을 증폭한다

디버깅은 여러 근거들을 수집하여 문제의 지점을 좁혀나가는 과정이다.

오늘의 내용 요약

일반 텍스트의 힘

일반 텍스트란? 사람이 직접 읽고 이해할 수 있는 형태의 인쇄 가능한 텍스트다.
일반 텍스트가 압축된 이진 포멧을 사용하는 것 보다 더 공간을 많이 차지하고 비싼 계산을 한다. 그럼에도 일반 텍스트의 사용을 권장하는 이유는?

호환성이 좋다. 세월이 흘러 구식 언어가 되어도 다른 이들이 코드를 알아보기 쉽다. 그러므로 여러 이질적인 환경을 하나로 이어주는 표준이 된다.

조개놀이

셸의 파워는 강력하다. 제공되는 명령어를 조합하면 원하는 작업을 한 줄로 구현 가능하다.
GUI는 가독성은 좋지만 자유도가 떨어진다. WYSIWYG(What you see id what you get.)

파워에디팅

하나의 에디터를 잘 사용하라
하나의 키라도 줄여보려고 노력해라
에디터가 사용하는 언어를 배워보라, 에디터에서 사용 가능한 커스텀 매크로를 만들 수 있다.

소스 코드 관리

SCCS (source code control system) 장점 및 기능
- 소스코드 관리 시스템은 선택이 아닌 필수이다.
- 코드의 변화 과정을 분석할 수 있다.
- 작업물을 이전 상태로 되돌릴 수 있다.
- 릴리스를 구분 가능하게 만들 수 있다.

디버깅

버그를 회피하거나 두려워하지 말자, 버그를 두려워하면 자기 자신을 속이게 된다.
정확한 버그 보고는 중요하다.
버그를 고치는 최선의 첫 단계는 버그 재현하는 것이다.
- 버그를 재현할 때는 여러 단계를 거쳐야 하는 것 보다 단일 명령으로 바로 재현 할 수 있도록 단순화 하여 떼어놓는 것 이 도움이 된다.
데이터를 시각화하라 (DDD 디버거 참고)
오염된 변수 - 주변에서 오염 근원지를 파악하라
고무오리 - 사람을 세워두고 설명하라, 말로 설명 하다보면 생각이 정리된다.
트레이싱 구문 - 화면 혹은 파일에 출력하는 작은 진단용 구문. 규칙적이고 일관적인 형식으로 작성하는 것이 중요하다.

텍스트 처리

텍스트 처리 언어를 하나 익혀라.
텍스트 처리 언어는 코드 생성기를 간단하게 작성할 수 있게 해준다.

코드 생성기 (내 손목은 소중하니까...)

수동적 코드 생성기 결과를 내기 위해 한 번만 실행. 코드 생성기는 결과물과 독립적 타이핑을 줄여준다. 주로 몇개의 입력에서 주어진 출력을 생성한다. ex. 새 소스파일 생성, 일회용 변환 수행
능동적 코드 생성기 DRY 원칙을 따르고 싶다면 필수 요소! 생성이 필요할 때마다 작동. 일회용이어서 언제든지 코드 생성기가 다시 만들어 낼 수 있다. ex.언어 형태 변환, 다회용
필요에 따라서 코드생성기가 꼭 100% 정확할 필요는 없다. 완벽한 코드를 만드는 데에 드는 시간과 수동 작업의 양을 고려하여 선택한다.

떠오르는 생각

만물의 영장인 인간 답게 도구를 사용해야겠다.
쉘을 연마해서 피아노 연주하듯 사용해보자. 현재 사용하는 z쉘의 명령어를 하루에 한 가지씩 알아가봐야겠다.
만약에 자동완성 기능이 없었더라면? 무슨 맛으로 코딩을 했을까? 에디터에 익스텐션이 없었더라면? git lens가 없었으면 난 내가 낳은 자식도 못 알아봤을 것이다. eslint, prettier, 구문 강조 기능이 없었더라면 내 시력은 진작 포기했다.

궁금하거나 더 알고싶은 내용

막판의 텍스트 처리, 코드 생성기에 대한 내용은 느낌은 알겠지만 어떤 식으로 적용해야 좋을지 뚜렷하게 떠오르지 않아서 차분하게 다시 읽어봐야 겠다.

용어

개발 관련 부분으로 들어가니 모르는 용어나 개념의 양이 크게 늘어났다. 모르는 용어들은 여기에 적어두고, 설명이 없는 용어들은 앞으로도 지속적으로 추가할 것이다.

IDE - 통합 개발 환경(Integrated Development Environment, IDE)으로 아래의 요소를 사용하기 쉽게 결합한 소프트웨어이다.
- 소스 코드 편집기
- 로컬 빌드 자동화
- 디버거

YAML - YAML은 XML, C, 파이썬, 펄, RFC2822에서 정의된 e-mail 양식에서 개념을 얻어 만들어진 '사람이 쉽게 읽을 수 있는' 데이터 직렬화 양식이다.
json처럼 key-value의 값으로 되어있고 리스트를 -로 표시하는 등 보기에도 간결하고 깔끔한 형태이다.

인프런-김태민님의 답변 참고

유닉스 철학
오늘 알게된 셸 명령어
- diff - 두 개의 파일 간 차이에 대한 정보를 출력하는 파일 비교 유틸리티
- sum - 더하기

셸의 종류
- z셸(zsh): 내가 터미널에서 가끔 업데이트 해주는 친구가 바로 너였구나
- c셸:
- 배시bash셸:
- 콘Korn셸:
RCS, CVS, ..
DDD 디버거

오늘 읽은 다른사람의 TIL

wowyowowyo님의 TIL

책을 그대로 요약하기 보다 이해하기 쉬운 말로 변환하여 적어주셔서 도움이 되었습니다!

노개북챌린지 Day2 - 실용주의 프로그래머 1.실용주의 철학

Sat, 19 Mar 2022 10:00:59 GMT

📅 2022.03.19 📖 범위: 서문 ~ 1장. 실용주의 철학

기억하고 싶은 내용

자신의 일에 대해 생각하면서 일해라 (21.p)

오늘의 내용 요약

변명보다는 대안을 제시할 줄 아는 책임감 있는 사람이 되어라. (그리고 제발 거슬리는 코드는 초기에 잡아주라..)
무조건적인 수용보다 객관적인 시선으로 노려보는 시간을 갖자.
소통 꿀팁:
- 대화의 목적을 뚜렷하게
- 타인의 니즈를 파악하라
- 적절한 때를 골라라
- 멋있게 보이는 것 역시 중요하다
- 청중을 참여시켜라
- 늘 경청하고 타인의 요청에 응답하라
지식에 대해 투자하라. 배울수 있는 환경에 나를 노출시키자.

떠오르는 생각

의식의 흐름 주의..

"자신이 하는 일이 무엇인지 정확히 아는 것"

포브스가 선정한 "일잘알들의 필수 덕목", "뺏기고 싶지 않은 내 원픽 후임은 ~ 하다" 에 빠지지 않고 나올 것 같은 말이다.

당연한 말이지만 막상 해보면 어려운 일이다. 특히나 요즘같이 밀려드는 지식의 홍수 속에서 나는 자꾸 산만해진다. 시간이 지나면 생각도 직업도 저절로 자리를 잡을 줄 알았는데 시간은 그냥 가던 길을 갈 뿐... (말잇못) 이렇게 된 이상 메뉴얼을 적용하여 대로 차근차근 실천 해보기로 하자.

정리하는 습관을 들이기.
정답을 알지 못했더라도 숨기지 말고, 상황 보고는 정확하게.
내가 하고있는 일이 최선인지 의심해보자.
처음은 완벽보다 완성을 목표로 하자.
피드백을 받을 수 있도록 생각을 시각화 시키자.
하고싶은 것이 있다면, 주변을 그것들로 채워가자.

오늘 읽은 다른사람의 TIL

hyuuny님의 블로그

책 내용을 세세하게 잘 정리해두시고,책에서 배운 팁들을 어떤 방식으로 적용시킬지에 대한 생각도 적어주셔서 생각을 정리하는데 도움이 많이 되었습니다. 감사합니다 :)

노개북 챌린지 - 실용주의 프로그래머 Day - 1

Fri, 18 Mar 2022 15:31:42 GMT

책 구매 인증합니다. 생각보다 두껍네요? 가랑비에 옷 젖듯이 꾸준히 끝까지 읽어보겠습니다. 모두 화이팅!!