코드숨_코드리뷰 스터디 1주차 회고

date

May 6, 2023

slug

codesoom1

author

status

Public

배운 내용

1. 환경설정

웹팩의 핵심 역할과 등장한 배경에 대해서 이해하게 되었다. 보통은 cra나 vite같이 웹팩설정을 미리 해주는 빌드도구들을 사용하다보니, 웹팩 cli나 dev-server를 직접 설정한 것은 처음이였어서 새로웠다.

추후 웹성능 최적화할 때 웹팩을 더 정교하게 사용해서 최적화하는 경험도 필요하다고 생각했다. eslint 설정도 다음번에는 더 정교하게 해보고 싶다.

내용

what is webpack?

webpack은 번들러이다.

웹팩은 다음과 같이 3가지의 문제를 해결하기 위해 등장했다.

파일 단위의 자바스크립트 모듈 관리의 필요성

기존의 var로 대표되는 변수선언이 여러가지의 모듈을 번들링하는 과정에서 변수가 전역적으로 선언되는 문제를 해결하기 위해 등장했다.

웹 개발 작업 자동화 도구 (Web Task Manager)

웹 개발시에 변경된 부분을 저장하면 바로 웹에 반영을 시킬 수 있도록 하는 것이 필요했다.

웹 애플리케이션의 빠른 로딩 속도와 높은 성능

웹팩의 여러 설정들을 통해서 필요에 따른 모듈들을 lazy하게 가져올 수 있고, 이는 곧 로딩속도와 높은 성능을 만들어서 웹 사용성을 증가시킨다.

webpack devserver

npm i -D webpack webpack-cli webpack-dev-server

Node와 NPM

node.js는 자바스크립트 엔진이다.

npm init -y

npm init 하면 package.json을 통해 node 패키지를 설정할 수 있는 파일을 다운받는다.

이 때 귀찮으면 npm init -y 하면 그냥 모든 걸 yes해서 설치하겠다는 것.

npm과 npx의 차이

npm은 모듈을 로컬에 설치하는 것.

실행된 모듈을 로컬에서 실행시키기 위해서는 npm

로컬에서 패키지가 위치한 ./node_modules/.bin/my-package의 경로로 실행시켜야하거나

package.json의 script로 my-package의 경로를 정의해주어야한다.

그러나 npx를 사용하면

1) 패키지 실행

패키지의 최신버전 파일을 불러와 설치하여 실행시키고 실행된 이후에 해당 패키지를 제거하는 방식입니다.

(과정)

실행시킬 패키지가 로컬에 저장되어 있는지 먼저 확인한다.

존재한다면 실행시킨다.

존재하지 않는다면 npx가 가장 최신 버전으로 설치하고 실행시킨다.

main.js로 index.js 읽기

main.js 자바스크립트 소스를 읽는데 index.js를 읽어올 수 있음.

eslint 설정하기

2. 바벨로 JSX를 JS에서도 사용해보기 (Feat. 추상화)

기존 JSX를 사용하는 매커니즘을 JS에서 추상화하는 형태로 사용하다보니 확실히 react에서 JSX가 어떻게 동작하는지 이해하게 되었다.

JS에서 html 태그를 함수단위로 생성하는 과정에서 createElement()함수에 tag,props,children을 넘겨주면 해당 함수를 거쳐서 Html로 반환이 되고, 이를 바벨로더로 javascript에서 사용할 수 있게 변환해주면 충분히 자바스크립트만으로도 React처럼 JSX를 사용할 수 있다는 것을 알게 되었다.

내용

바벨로 JSX 만들기

바벨코어, 로더 설치하기

바벨 설정(프리셋)

바벨을 활용하면 html 코드를 createElement 함수의 인자로 받아서 자동으로 처리해줌

따라서 바벨이 html → 함수로 결과값을 반환해주면

우리는 그 함수가 어떤 동작을 할 것인지 정의해주면

JSX를 만들어서 사용할 수 있다.

바벨 적용법

//webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

//babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
    '@babel/preset-react',
  ],
};

CreateElement

const createElement = (tagName, props, ...children) => {
  console.log(props);

  const tag = document.createElement(tagName);

  Object.entries(props || {}).forEach(([key, value]) => {
    tag[key] = value;
    console.log(tag);
  });

  children.forEach((child) => {
    if (child instanceof Node) {
      tag.appendChild(child);
      return;
    }
    tag.appendChild(document.createTextNode(child));
  });
  return tag;
};

const element = (
  <div>
    <p className="hi" id="tag">
      Hi
    </p>
    <p>second hi</p>
  </div>
);
document.getElementById('app').appendChild(element);

class, className을 구분해서 사용하는 이유는?

class와 중복되기 때문에

3. let 사용안하기

왜 변수 재할당을 지양해야하는가에 대해서 자료를 조금 더 서치해봤다.

크게 두 가지 측면에서 let의 사용을 지양해야한다. 1) 인수와 파라미터 값이 달라지면 의도와 다른 동작 발생 가능 2) 변수의 수명을 짧게(변수 사용처 명확하게)해서 코드 가독성을 높인다.

따라서 이를 해결하기 위해서는 함수에서 파라미터로 값을 상수 형태로 전달하고, 또 이를 받아서 render할 때 값을 전달해주는 구조를 짜게 되면

위의 2가지 측면을 모두 활용한 구조를 갖게된다.

내용

인수와 파라미터 값이 달라지면 의도와 다른 동작 발생 가능

아래와 같이 중복된 인수와 파라미터로 인해 의도와 다른 동작을 하게 될 경우가 있다.

function sum(v1, v2) {
  v1 = 100;
  return v1 + v2;
}

sum(12, 13);  // 113

매개변수 재할당을 지양하자(no-param-reassign)

1. 매개변수(파라미터) 재할당을 지양해야 한다고? 우리는 함수에 인수를 전달하고, 전달한 매개변수값을 재할당할 수 있다. function test(value) { // value 매개변수 value = 13; // 매개변수 재할당 return value; } test(30); // 인수 전달 🤔 하지만, 매개변수 재할당은 eslint 규칙(no-param-reassign)으로 존재할만큼 지양해야하는 방법인데 왜 그런걸까? 그 이유를 알아보자! 2. 재할당의 위험성 (1) 인수와 파리미터가 달라 의도와 다른 동작이 발생한다. 파라미터는 인수를 참조하는 구조이다. 참조한다는 건, 파라미터가 인수의 주소를 가리킨다는 말인데 만약 파라미터의 값을 변경하면 어떻게 될까? 우리는 sum()에 12, 13을 인자로..

https://mong-blog.tistory.com/entry/매개변수-재할당을-지양하자no-param-reassign

변수의 수명을 짧게(변수 사용처 명확하게)해서 코드 가독성을 높인다.

프론트엔드 클린코드 - 변수 재할당 지양

변수를 재할당하는 것은 코드의 히스토리를 바꾸는 것과 같다.

https://www.zigae.com/avoid-reassigning/

코드리뷰

함수의 역할 명료하게 만들기

함수의 역할을 명료하게 만드는 것의 중요성을 알게 되었다. 제일 중요한 것은 함수의 Input, output을 명확하게 만드는 것!

특히 과제2인 계산기 만드는 과제에서 풀이과정을 해보면서 함수자체를 명확하게 만드는 것이 중요하구나를 많이 느끼고, 코드 구조를 아예 다 바꾸게 되었다.

뿐만아니라 함수내의 변수명을 넘기거나, 함수명을 어떻게 작성해야하는지 등에 대해서도 많이 고민하게 된 계기가 되었다.

느낀점

조금만 더 생각하면 더 나은 코드를 만들 수 있음에도 불구하고, 그냥 PR을 올리거나 끝내는 것이 습관이 되었다. 코드의 구조는 아니더라도, 표현, 변수명등은 조금만 생각하면 분명 더 좋게 쓸 수 있다. 윤석님께서 좋은 방향으로 피드백 해주셨으니 좀 더 고민해서 올리자

바벨로 JSX를 JS에서 사용해보는 것 부터 시작해서, 삼항연산자, 객체 비구조화할당 등 피드백을 통해 한 번 더 명확하게 이해하는 계기를 갖게 되었다.

확실히 누군가에게 보여주고 피드백을 받는 과정이 필요하다는 것을 깨달았고, 코드리뷰를 많이 받아야겠다는 생각을 했다. 그러기 위해서는 빠르게 해서 리뷰 올리고. 수정하는 과정을 거쳐야겠다. 너무 못했다고 걱정할 필요없다..!! 어제보다 오늘 조금이라도 더 성장했으면 됐다.