개발여행의 블로그

[leetcode]1561. Maximum Number of Coins You Can Get

개발 여행 — Mon, 11 Apr 2022 09:31:08 +0900

1561. Maximum Number of Coins You Can Get

https://leetcode.com/problems/maximum-number-of-coins-you-can-get/

Maximum Number of Coins You Can Get - LeetCode

Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.

leetcode.com

[ 문제 풀이 ]

이번에도 문제 파악하는데 시간이 많이 소요되었다. 여러 숫자가 섞인 3n개의 동전 더미에서 내가 선택할 수 있는 수 중 가장 최대 합을 구하는 문제이다. 문제의 조건은 다음과 같다.

- 각 단계에서 3개의 동전 더미 선택(연속적일 필요는 없음)

- 3개의 동전 더미에서 Alice는 가장 최대 수를 고를 것이다.

- 나는 그 다음 최대 수를 고를 것이다.

- Bob이 마지막 것을 고를 것이다.

처음엔 문제가 잘 이해되지 않아 sorting 한 후 중복되는 수는 다시 자리를 바꾸고, 3n개씩 잘라 그 중 가운데 수를 누적하는 방식으로 구성했다. 하지만 생각해보니, [9, 8, 7, 6, 5, 1, 2, 3, 4]일 때 정렬를 하면 [9, 8, 7, 6, 5, 4, 3, 2, 1]이 되고, 그 중 가운데 수만 모두 합하면 [8, 5, 2]의 합 15가 최댓값이 된다. [9, 8, 1], [7, 6, 2], [5, 4, 3]으로 나누면 [8, 6, 4] 즉 18이 최댓값이 된다.

따라서 아래 코드와 같이 정렬 후 [9, 8, 7, 6, 5, 4] (인덱스 5)까지만 반복되도록 범위를 설정하고 짝수 번호의 인덱스만 result에 누적하여 더해주었다.

[ 코드 ]

/**
 * @param {number[]} piles
 * @return {number}
 */
const maxCoins = function (piles) {
  const sorted = piles.slice().sort((a, b) => b - a);
  let result = 0;

  for (let i = 0; i < sorted.length - sorted.length / 3; i += 2) {
    result += sorted[i + 1];
  }

  return result;
};

// maxCoins([9, 8, 7, 6, 5, 1, 2, 3, 4]);
// output: 18

[leetcode]1557. Minimum Number of Vertices to Reach All Nodes

개발 여행 — Fri, 1 Apr 2022 08:57:58 +0900

1557. Minimum Number of Vertices to Reach All Nodes

Minimum Number of Vertices to Reach All Nodes - LeetCode

Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.

leetcode.com

[ 문제 풀이 ]

그래프의 모든 노드에 도달할 수 있는 가장 작은 vertices 집합을 찾는 문제였다. 문제를 한참동안 분석해보아도 파악이 되지 않아 고민하는데에서 시간이 많이 초과되었다. 노드의 개수(n)와 from에서 to 방향을 나타내는 배열 (edges)가 주어질 때, 모든 노드에 도달할 수 있는 가장 작은 정점의 집합을 리턴해야한다.

예제 1

input: n = 6, edges = [[0,1],[0,2],[2,5],[3,4],[4,2]]

output: [0, 3]

단일 정점에서 모든 노드에 도달하는 것은 불가능한 예시이다. 0에서 [0, 1, 2, 5]에 도달할 수 있고, 3에서 [3, 4, 2, 5]에 도달할 수 있다. 따라서 [0, 3]이 리턴되어야 한다. edges의 방향(from -> to)를 놓쳐서 고민하는 시간이 늘어났는데, 생각해보니 어떤 노드로부터 연결되어 있으면 도달할 수 있기 때문에 length 6의 배열을 하나 선언해두고, to에 해당하는 노드의 인덱스에 count를 계속 더해주었다.

edges에서 [0, 1] 즉, 1은 0에서부터 도달할 수 있기 때문에 [0, 1, 0, 0, 0, 0]으로 인덱스 1의 원소를 1로 변경, [0, 2] 또한 0에서부터 도달할 수 있기 때문에 [0, 1, 1, 0, 0, 0]으로 업데이트 한다. [2, 5]일 때 [0, 1, 1, 0, 0, 1], [3, 4]일 때 [0, 1, 1, 0, 1, 1] 마지막 [4, 2]일 때 [0, 1, 2, 0, 1, 1]이 되어서 도달할 수 없는(원소가 0인) 노드 인덱스 0과 3이 최소의 정점이 되는 것이다.

[ 코드 ]

/**
 * @param {number} n
 * @param {number[][]} edges
 * @return {number[]}
 */
const findSmallestSetOfVertices = function (n, edges) {
  const connections = Array(n).fill(0);
  const result = [];

  edges.forEach(([from, to]) => connections[to] += 1);
  connections.forEach((num, index) => num === 0 && result.push(index));

  return result;
};

[leetcode]1630. Arithmetic Subarrays

개발 여행 — Tue, 29 Mar 2022 10:00:21 +0900

leetcode 1630. Arithmetic Subarrays

Arithmetic Subarrays - LeetCode

Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.

leetcode.com

[ 문제 풀이 ]

매개변수 nums, l, r가 주어질 때, 각 원소의 차이가 모두 일정한지 boolean형의 element가 담긴 list를 리턴하는 문제이다.

nums는 숫자를 담고 있는 배열, l은 시작 인덱스를 담고 있는 배열, r은 끝 인덱스를 담고 있는 배열이다.

예를 들어 매개변수가 아래와 같을 때,

nums = [4,6,5,9,3,7], l = [0,0,2], r = [2,3,5]

nums 배열에서 0(l[0]) ~ 2(r[0])까지의 배열 [4, 6, 5]는 [6, 5, 4]로 재배열 할 수 있고, 각 원소는 1씩 차이나므로 true,

nums 배열에서 0(l[1]) ~ 3(r[1])까지의 배열 [4, 6, 5, 9]는 각 원소의 차이가 달라 재배치할 수 없으므로 false,

nums 배열에서 0(l[2]) ~ 3(r[5])까지의 배열 [5, 9, 3, 7]은 [3, 5, 7, 9]로 재배치 할 수 있고, 각 원소는 2씩 차이나므로 true,

따라서 [true, false, true]를 리턴하면 된다.

[ 코드 ]

/**
 * @param {number[]} nums
 * @param {number[]} l
 * @param {number[]} r
 * @return {boolean[]}
 */
const checkArithmeticSubarrays = function(nums, l, r) {
  const chechArithmetic = (arr) => {
    const diff = arr[1] - arr[0];

    for (let i = 2; i < arr.length; i++) {
      const currentDiff = arr[i] - arr[i - 1];

      if (currentDiff !== diff) {
        return false;
      }

      return true;
    }
  };

  return l.map((_, i) =>
    chechArithmetic(nums.slice(l[i], r[i] + 1).sort((a, b) => a - b))
  );
};

[leetcode]1252. Cells with Odd Values in a Matrix

개발 여행 — Mon, 28 Mar 2022 11:13:07 +0900

leetcode1252. Cells with Odd Values in a Matrix

Cells with Odd Values in a Matrix - LeetCode

Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.

leetcode.com

[ 문제 풀이 ]

m(row의 수), n(cell의 수)와 2D array(indices)가 주어질 때,

m * n 행렬에서 각 indices[i] = [ri, ci]가 행렬에서 일부 증가 연산을 수행하기 위한 인덱스 위치를 나타내는 배열을 활용하여 인덱스의 모든 위치에 증가 연산을 한 후 행렬에서 홀수 값의 cell 수를 반환해야 한다.

각각의 indices[i]는 아래를 모두 수행한다.

1. ri row의 모든 cell을 증가시킨다.

2. ci column의 모든 cell을 증가시킨다.

[ 코드 ]

/**
 * @param {number} m
 * @param {number} n
 * @param {number[][]} indices
 * @return {number}
 */
const oddCells = function (row, col, indices) {
  const matrix = Array.from(Array(row), () => Array(col).fill(0));

  for (let i = 0; i < indices.length; i++) {
    const [r, c] = indices[i];

    for (let j = 0; j < matrix[r].length; j++) {
      matrix[r][j] += 1;
    }

    for (let k = 0; k < matrix.length; k++) {
      matrix[k][c] += 1;
    }
  }

  const result = matrix.reduce(
    (result, current) =>
      result +
      current.reduce((sum, cell) => {
        return cell % 2 !== 0 ? sum + 1 : sum;
      }, 0),
    0
  );

  return result;
};

2차원 배열에서 홀수의 개수를 카운트 하기 위해 reduce 안에 reduce를 사용하였다.

[React] React Hooks의 장단점

개발 여행 — Mon, 27 Dec 2021 02:53:38 +0900

React Hooks는 ReactConf 2018에서 발표된 새로운 기능으로 16.8 버전부터 새로 추가되었다. Hooks를 이용하면 class 없이 state와 여러 React의 기능을 사용할 수 있다.

Hooks는 왜 필요한가?

Hooks의 등장 배경은 기존 Class Component를 사용할 떄의 불편함과 문제점을 해결하기 위해 개발되었다고 한다.

1. Reusing logic (컴포넌트 간 상태가 있는 logic의 재사용성이 떨어짐)

Class component 기반의 React 코드를 작성할 때 어플리케이션을 구성하는 여러 컴포넌트의 재사용성을 위해 Higher-Order Conmonents와 Render props와 같은 패턴을 통해 문제를 해결하였다고 한다. 두 가지 패턴은 특정 상황에 적절하게 사용될 수 있지만, 구조적 제약이 생길 수 있고, 로직의 재활용을 위해 엄청난 양의 Wrapper Component가 생겨서 Wrapper Hell을 초래한다.

Higher Order Component란?

간단하게 정리하면, 화면에 재사용 가능한 로직을 분리하여 컴포넌트로 만들고, 재사용 불가능한 부분은 (ex. UI) 파라미터로 받아서 처리하는 방법이다.

2. Giant component (복잡한 컴포넌트는 이해하기 어려움)

각각의 라이프 사이클 메서드에 관련 없는 로직이 혼합되어 있을 수 있다. componentDidMount 와 componentDidUpdate는 컴포넌트 안에서 데이터를 가져오는 작업을 수행할 때 사용되어야 하지만, componentDidMount에서 이벤트 리스너를 설정하는 것과 같은 관계없는 로직이 포함되기도 하며, componentWillUnmount에서 cleanup 로직을 수행하기도 할 것이다. 이것은 버그를 발생시키고 무결성을 해칠 수 있다. 또한 각 라이프사이클에서 수행할 로직이 많아지면 많아질수록 어떤 것을 cleanup 해줘야 하는지, 수정해야 하는지 찾기 어려울 것이다.

3. Confusing classes (클래스는 개발자와 컴퓨터 모두에게 혼란을 줄 수 있다.)

class를 사용하기 위해서는 this 키워드가 어떻게 작동하는지 정확히 알아야한다. this키워드는 함수 선언 시점에 결정되는 것이 아니라, 함수 실행 시점에 결정되는 값이므로 함수가 어떻게 실행되는지에 따라 값이 변경될 수 있다. 사이즈가 큰 프로젝트에서는 this를 예상하고 추적하는 것에 작은 실수가 발생할 수 있다. 또한, class 사용 시 컴파일 시점에서 모든 것이 정확히 일치하는 것이 어렵다. 메서드가 사용되지 않지만 해당 메서드는 익명의 메서드로 남아있을 수 있다. 컴파일 시점에서 정확히 판단할 수 없기 때문이다. class는 최적화하기 어려운 코드를 생성한다.

Hooks의 장점

1. 더 빠른 성능과 짧은 코드 양

리액트에서 작성한 코드를 실행할 때 바벨을 이용해서 코드를 컴파일한 후 실행시키는데, 클래스형 컴포넌트일 경우 코드의 양이 길어진다. (바벨을 사용하여 컴파일한 코드는 babal 홈페이지에서 실행해볼 수 있다.)

또한, 클래스형 컴포넌트에서는 라이프 사이클을 이용할 때 componentDidMount, componentDidUpdate, componentWillUnmount 모두 다르게 처리하지만, react hook을 사용하면 useEffect 안에서 모두 처리 가능하다.

예시 코드)

// class
componentDidMount() {
	this.updateList(this.props.id);
}

componentDidUpdate(prevProps) {
	if (prevProps.id !== this.props.id) {
    	this.updateList(this.props.id);
    }
}

updateList = () => {
	feachList(id).then((list) => this.setState({list}));
}

// hooks
useEffect(() => {
	feachList(id).then((res) => setRes(res));
}, [id]);

2. Weapper 컴포넌트양 감소

HOC 컴포넌트를 Custom React Hooks로 대체하면, Weapper 컴포넌트를 사용하지 않아도 간단하게 구현할 수 있다.

만약 공통적으로 적용애햐 하는 코드가 있다(언어, 테마, 인증 설정 등) 아래와 같이 감싸서 작성해야 한다. 이럴 경우 Wrapper 컴포넌트의 양이 엄청나게 증가한다면, 데이터 흐름을 파악하기 어렵다.

<LanguageHOC>
  <ThemeHOC>
    <AuthHOC>
      <MyPage />
    </AuthHOC>
  </ThemeHOC>
</LanguageHOC>

반면 hook을 사용하면 데이터를 내려줄 때 어떤 페이지이든 감싸지 않아도 된다.

function useAuth() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
  	fetchUsers().then(users => setUsers(users));
  }, []);

  return [users];
}

function MyPage() {
  const [users] = useAuth();

  return (
    <div>
      My Page
      {users.map(({ name, url }) => (
        <div key={name}>
          <h3>{name}, {url}</h3>
        </div>
      ))}
    </div>
  );
}

Hooks의 단점

1. 호출되는 순서에 의존

hooks는 반복문, 조건문, 중첩된 함수 내에서 호출할 수 없다.

만약 클릭하면 페이징되는 버튼을 구현하기 위해 useFetch를 사용하려고 한다면, react-async-hook 라이브러리를 사용하거나 custom hook을 만들어서 해결해야 한다. hooks의 규칙을 따르기 위해 많은 리소스가 필요하고, 코드가 많아지면 복잡성이 증가한다.

2. useEffect의 빈틈

useEffect는 두 번째 인수로 dependency list를 받고, 하나의 값이라도 변경됐을 때 useEffect 내부의 로직을 실행하여 라이프 사이클을 흉내 낸다. React에서 hooks' dependency array의 변경을 감지하기 위해 Object.is() 메서드를 사용하는데 대체로 원시 타입에 올바르게 작동한다고 한다. 참조형 데이터를 비교할 때는 렌더링 될 때마다 참조 메모리 주소가 다르기 때문에 매번 실행될 것이다. useMemo를 사용하여 동일한 객체가 전달될 수 있도록 처리할 수도 있지만, 개발자가 놓치고 넘어가기 쉬운 포인트인 것 같다.

3. hooks는 클로저에 의존적이다.

프로그램이 커지면 커질수록 hooks가 많아지는데, 클로저는 복잡성을 증가시킨다. 최신상태가 아닌 클로저는 해결하기 어렵다.

function WatchCount() {
  const [count, setCount] = useState(0);

  useEffect(function() {
    setInterval(function log() {
      console.log(`Count is: ${count}`);
    }, 2000);
  }, []);

  return (
    <div>
      {count}
      <button onClick={() => setCount(count + 1) }>
        Increase
      </button>
    </div>
  );
}

위 코드에서 출력된 count는 항상 0 이다. console.log()는 생성될 때의 count (0)을 캡처하여 기억하고 있으므로, 계속 count는 0일 것이다. 물론 해결하기 위해 아래와 같이 변경할 수 있다. 하지만 클로저 역시 예상하기 어렵다.

function WatchCount() {
  const [count, setCount] = useState(0);

  useEffect(
    function () {
      const id = setInterval(function log() {
        console.log(`Count is: ${count}`);
      }, 2000);
      return function () {
        clearInterval(id);
      };
    [count]
  );

  return (
    <div>
      {count}
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

참고

React Conf 2018

https://youtu.be/7umCiutiJ7M

천종희 기술 블로그

https://ui.toast.com/weekly-pick/ko_20200922

https://hewonjeong.github.io/deep-dive-how-do-react-hooks-really-work-ko/

[Redux] Redux 기본 개념 정리(action, reducer, store, dispatch...)

개발 여행 — Sun, 12 Dec 2021 23:16:22 +0900

이 글은 Redux 공식 문서를 참고해서 정리한 글입니다.

Actions

action은 type field를 가지고 있는 plain JavaScript object이다.

단순하게 action은 어플리케이션에서 무언가 일어나는 것을 설명한 이벤트라고 생각할 수 있다.

- type field

type field는 action을 묘사하는 이름(feature)을 가진 string이어야 한다.

예) "todos/todoAdded"

보통 타입은 "domain/eventName"과 같은 형식으로 사용한다.

첫 번째 부분은 action이 속한 카테고리의 특징을 나타내고, 두 번째 부분은 어떤 것이 발생했는지 구체적으로 나타낸 것이다.

- playload

action은 무엇이 일어났는지에 대한 추가적인 정보를 담고있는 또 다른 fields를 가질 수 있다.

convention에 따라 payload라는 이름으로 해당 정보를 작성한다.

예)

const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

Action creators

action creators는 action 객체를 생성하고 반환하는 함수이다.

보통 action creator를 사용하기 때문에 매번 action 객체를 작성하지 않아도 된다.

const addTodo = text => {
  return {
    type: 'todos/todoAdded',
    payload: text
  }
}

Reducers

리듀서는 변화를 일으키는 함수로, 현재 state와 action 객체를 받아 필요한 경우 상태를 업데이트하는 방법을 결정하고, 새로운 상태를 반환하는 함수이다. 리듀서는 받은 action(이벤트) 유형에 따라 이벤트를 처리하는 이벤트 리스너로 생각하면 쉽다.

(state, action) => newState.

리듀서 함수는 내부적으로 다음과 같이 작동한다.

1) 리듀서가 action의 type이 조건에 맞는지 체크

1-1) 맞다면, state의 복사본을 생성하고, 복사본을 새로운 값으로 업데이트 하고, 반환한다.

2) 그렇지 않다면 변경되지 않는 기존의 state를 반환한다.

const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
  // Check to see if the reducer cares about this action
  if (action.type === 'counter/increment') {
    // If so, make a copy of `state`
    return {
      ...state,
      // and update the copy with the new value
      value: state.value + 1
    }
  }
  // otherwise return the existing state unchanged
  return state
}

Store

현재 Redux 애플리케이션 상태는 store 라는 객체에 존재한다.

store는 리듀서를 전달하여 생성되고, 현재 state 값을 반환하는 getState라는 메서드가 있다. 그 외 몇 가지 중요한 내장 함수를 가지고 있다.

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({ reducer: counterReducer })

console.log(store.getState())
// {value: 0}

Dispatch

Redux store은 dispatch라는 메서드를 가지고 있다. 디스패치는 action을 발생시키는 것이라고 이해하면 된다.

상태를 업데이트하는 유일한 방법은 store.dispatch() 메서드를 부르고 action 객체를 넘겨주는 것이다.

store는 reducer function을 실행시키고 새로운 state를 내부에 저장할 것이다. 그리고 우리는 getstate() 메서드를 호출하여 업데이트된 값을 가질 수 있다.

dispatch 작업은 이벤트 트리거라고 생각할 수 있다.

무언가 발생했을 때, store는 어떤 일이 발생하는지 알고 싶어한다. reducer는 이벤트 리스너와 같은 역할을 하며 관련된 action을 받으면 response로 state를 업데이트한다.

store.dispatch({ type: 'counter/increment' })

console.log(store.getState())
// {value: 1}

일반적으로 올바른 action을 전달하기 위해 action creators를 호출한다.

const increment = () => {
  return {
    type: 'counter/increment'
  }
}

store.dispatch(increment())

console.log(store.getState())
// {value: 2}

Selectors

selectors는 store의 state 값에서 특정 정보를 추출하는 방법을 알고있는 함수이다. 애플리케이션이 커지면 앱의 다른 부분이 동일한 데이터를 읽는 상황이 많아지는데 반복되는 로직을 줄이는 데 도움이 된다.

const selectCounterValue = state => state.value

const currentValue = selectCounterValue(store.getState())
console.log(currentValue)
// 2

Redux의 data flow

app을 업데이트하는 일련의 단계의 단방향 data flow

요약 )

- state는 특정 시점의 app의 상태를 나타낸다.

- UI는 state를 기반으로 렌더링된다.

- 어떤 일이 발생하면 (버튼을 클릭하는 것과 같은) state는 무엇이 발생했는지를 기반으로 업데이트 된다.

- UI는 새로운 state에 의해 리렌더링 된다.

위의 단계를 조금 더 자세하게 나눠보자!

초기 setup )

- redux 저장소는 root reducer function을 사용하여 생성된다.

- store는 root reducer를 한 번 호출하고 반환된 초기 state 값을 저장한다.

- UI가 처음 렌더링되면 UI 컴포넌트는 Redux store의 현재 state에 액세스할 수 있고, 해당 데이터를 사용해서 렌더링할 항목을 결정한다.

- 향후 store의 업데이트(future store updates)를 subscribe하여 state가 변경되었는지 알 수 있다.

update )

- 사용자가 버튼을 클릭하는 것과 같이 앱에서 어떤 일이 발생한다.

- 앱의 코드는 action을 Redux store에 dispatch한다. (dispatch({type: 'counter/increment'}))

- store는 이전의 state와 현재 action으로 다시 reducer 함수를 실행시키고, 반환된 새로운 state를 저장한다.

- store는 subscribe된 UI의 모든 부분에 store가 업데이트되었음을 알린다.

- store의 데이터를 필요로하는 각 UI의 컴포넌트는 필요한 state가 변경되었는지 확인한다.

- 데이터가 변경된 각각의 컴포넌트는 화면에 새로운 내용을 업데이트 할 수 있도록 새로운 데이터와 함께 강제로 리렌더링된다.

이제 시각적으로 확인해보자!

참고 문서 - https://redux.js.org/tutorials/essentials/part-1-overview-concepts

[바닐라코딩 Bootcamp] week6 feedback

개발 여행 — Sun, 12 Dec 2021 17:50:53 +0900

styled-components에 대한 활용

react에만 집중해서 과제를 하다보니 styled-components는 단순히 컴포넌트의 스타일을 지정하는 정도로만 사용했다.

역시나 멘토님께서 해당 부분에 대해 코멘트를 남겨주셨다. 더 찾아보고 적용해보았어야 했는데라는 생각이 들었다.

글로벌 스타일 지정(createGlobalStyle), theme, styled-component의 확장 등등 활용법이 굉장히 많다는 것을 배웠다.

1) 전역 스타일 지정

구현된 코드에는 HTML 파일에 style sheet를 지정해서 전역 스타일을 지정해주었는데, styled component를 사용하면 아래와 같이 사용할 수 있다.

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

// later in your app

<React.Fragment>
  <GlobalStyle whiteColor />
  <Navigation /> {/* example of other top-level stuff */}
</React.Fragment>

GlobalStyle 컴포넌트 또한 ThemeProvider를 통해서 theming 전략을 사용할 수 있다.

import { createGlobalStyle, ThemeProvider } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
    font-family: ${props => props.theme.fontFamily};
  }
`

// later in your app

<ThemeProvider theme={{ fontFamily: 'Helvetica Neue' }}>
  <React.Fragment>
    <Navigation /> {/* example of other top-level stuff */}
    <GlobalStyle whiteColor />
  </React.Fragment>
</ThemeProvider>

코드 출처 - https://styled-components.com/docs/api#createglobalstyle

styled-components는 ThemeProvider를 통해서 강력한 theming 전략을 제공한다고 한다.

ThemeProvider는 context를 활용해서 모든 리액트 컴포넌트에 theme 속성을 전달할 수 있다고 한다.

특정 컴포넌트의 depth가 아무리 깊어도 root에 ThemeProvider이 있다면 모든 렌터 트리의 자식은 theme 속성을 갖게 된다.

2) 반복적으로 사용되는 스타일

일관적인 UI를 보여주기 위해 반복적으로 사용되는 Hex코드나 스타일들은 styled components에서 theme으로 지정해서 사용할 수 있다고 한다.

const Main = styled.div`
  color: ${(props) => props.theme.red};
`;

// import styled, { ThemeProvider } from 'styled-components'

const Box = styled.div`
  color: ${props => props.theme.color};
`

render(
  <ThemeProvider theme={{ color: 'mediumseagreen' }}>
    <Box>I'm mediumseagreen!</Box>
  </ThemeProvider>
)

theme을 사용하면 정해진 규칙 외의 스타일을 사용하게 되는 실수를 줄여주고 각 스타일에 네이밍을 해줄 수 있어서 컴포넌트 각 요소에 어떤 스타일이 사용되었는지 파악하기도 쉽다.

styled-component 사용 예시

https://react.vlpt.us/styling/03-styled-components.html

3. styled-components · GitBook

03. styled-components 이번에 배워볼 기술은 CSS in JS 라는 기술입니다. 이 문구가 뜻하는 그대로, 이 기술은 JS 안에 CSS 를 작성하는 것을 의미하는데요, 우리는 이번 튜토리얼에서 해당 기술을 사용하

react.vlpt.us

Infinite Scroll을 Intersection Observer API를 이용해서 구현해보기

Intersection Observer를 사용하면 무한 스크롤을 구현할 때 사용하는 debounce 나 throttle을 사용하지 않아도 된다는 장점이 있고 무엇보다 offset 값을 구하기 위해 매번 레이아웃을 새로 그리는 reflow를 하지 않는다는 장점이 있다고 한다.

reflow가 무엇인지, 왜 reflow를 하지 않는 것이 장점인지, reflow를 최소화하는 방법으로 어떤 것들이 있는지 알고 있는 것이 중요하다라고 조언을 해주셨다.

데이터를 받아올 때 에러가 발생하거나 데이터가 없을 시 대응하는 코드 필요

API를 호출해서 데이터를 받아올 때 에러가 발생하거나 비디오가 없을 때, 사용자가 어떤 상황인지 가늠할 수 없기 때문에 대응하는 코드가 필요할 것 같다.

컴포넌트의 재사용성

어제 테스트 코드를 작성하다가 구현해둔 컴포넌트들이 재사용성도 좋지 않고, 테스트 하기도 불편하다는 생각이 들어서 컴포넌트를 분리해서 새롭게 구성해보았다. 하지만 다시 작성해서 push를 한 시점보다 리뷰하는 시점이 빨랐는지 이전 코드에 대한 리뷰가 남겨져있었는데 컴포넌트의 재사용성에 대해 고민해보면 좋을 것 같다는 의견을 주셨다. 해당 부분은 이미 리팩토링을 진행한 부분이지만 컴포넌트의 재사용성은 항상 깊게 고민하고 생각하면서 작성해야하기 때문에 블로그에 꼭 남겨두어야겠다는 생각이 들었다.

객체의 초기값 설정

하위의 컴포넌트에서 비구조화 할당으로 값을 활용하기 위해 state의 초기값에 각 key를 설정해주고 null을 초기값으로 설정했었다.

  const [video, setVideo] = useState({
    id: null,
    snippet: {
      title: null,
      description: null,
      publishedAt: null
    },
  });

이 때 서버에서 기본값이 모두 null로 오지 않는다면 어떤 타입의 데이터가 올지 추측하기 쉽게 작성하는 방법도 있다고 알려주셨다.

  const [video, setVideo] = useState({
    id: '',
    snippet: {
      title: '',
      description: '',
      publishedAt: ''
    },
  });

하지만 보통 객체 형태의 데이터가 들어오고 특별한 이유가 있는게 아니라면 초기값을 null로 설정해줄수도 있다고 추가로 피드백을 주셨다.

const [video, setVideo] = useState(null);

그 외 코드 스타일, 네이밍에 대한 피드백

1) 인라인으로 작성한다면 중괄호를 생략할 수도 있다.

// before
<EntryWrapper onClick={() => { onClick(id) }}>

// after
<EntryWrapper onClick={() => onClick(id)}>

2) state 네이밍

처음 페이지가 로드 되었을 때만 웰컴 모달을 보여주기 위해 state를 사용하였는데, 변수명을 isInitLoad라고 설정했다.

isInitLoad보다는 모달이 열렸는지 열리지 않았는지 확실하게 나타낼 수 있는 구체적인 변수명이 더 좋을 것 같다고 말씀해주셨다.

예를 들면, isModalOpne, isModalShow 등

3) 함수 네이밍

스크롤 이벤트가 발생했을 때 다음 페이지의 비디오를 가져오는 기능을 하는 함수를 선언했는데 이 부분 역시 조금 더 자연스러운 네이밍을 고민하면 좋을 것 같다고 피드백을 주셨다.

getVideosOnScroll -> getNextPageVideos

4) props 네이밍

보통 prop명은 on을, 핸들러 함수는 handle이라는 단어를 접두사로 사용한다. (onClick(prop) handleClick(handler))

통상적으로 prop명을 짓는 규칙들이 있는데, 예를 들어 lower camel case를 사용하거나 이름을 50자 미만으로 지어 주는 방법 등이 있다. prop 네이밍을 잘 지으면 컴포넌트가 많아지거나 전달하는 prop이 많아질 때 혼란을 방지할 수 있으니 숙지해보는 것이 좋다라고 하셨다.

How to name props for React components

5) parameter destructuring

parameter destructuring을 사용하여 필요한 데이터만 가져오는 방법도 있다. 더 간결해 보인다는 장점이 있다.

// before
{videos.length > 0 && videos.map((video, index) => {

// after
{videos.length > 0 && videos.map(({ id, snippet }, index) => {

6) 단축 평가 논리 연산자 사용

논리 연산자를 사용하면 코드를 간결하게 나타낼 수 있을 것 같다.

// before
id: video.id.videoId ? video.id.videoId : video.id.playlistId,

// after
id: video.id.videoId || video.id.playlistId,

7) 시간과 관련된 값의 네이밍

시간과 관련된 값의 이름은 보통 ~~edAt으로 작성한다.

ex) publishedAt createdAt updatedAt

8) self-closing

children이 없다면 self-closing을 할 수 있다. 이 부분은 알고 있었는데도 children이 없는지 확인을 못 한 것 같다..

[React] React에서 .env 환경변수 사용하기

개발 여행 — Fri, 3 Dec 2021 17:38:00 +0900

React project 내에서 Github API를 사용하기 위해 개인 키를 넣어주여야 하는 상황이었다.

React 앱에 개인 API키를 저장하면 누구나 앱 파일을 볼 수 있기 때문에 위험하다.

환경 변수를 사용해서 키를 보안하는 방법에 대해 글을 남기고자 한다.

1) 먼저, 디렉토리의 root에 .env 파일을 생성한다.

(개발용 환경변수, 테스트용 환경변수 등등 다양하지만 이번에는 .env로 사용해보겠다.)

2) 파일을 생성했다면 먼저 .gitignore에 추가해주어야 원격저장소에 저장할 때 파일이 올라가지 않는다.

3) 이제 .env에 사용할 key를 저장해주어야 한다.

(주의할 점은 REACT_APP_ 을 꼭 붙여주어야 한다.)

위의 사진과 같이 key와 value를 설정해준다.

4) 실제 프로그램을 작성할 때 env 안에 있는 key를 사용해볼 것이다.

const GITHUB_CLIENT_ID = process.env.REACT_APP_GITHUB_CLIENT_ID;
const GITHUB_SECRET_ID = process.env.REACT_APP_GITHUB_SECRET_ID;
const GITHUB_TOKEN = process.env.REACT_APP_GITHUB_TOKEN;

env 안의 key를 가져오기 위해 process.env를 붙여주면 된다.

[Git Error] Git 중간 커밋 삭제 (git rebase --interactive 옵션)

개발 여행 — Tue, 30 Nov 2021 15:46:46 +0900

자리가 변경되고 나서 다른 계정의 commit이 나의 commit내역으로 올라가 파일의 내용이 모두 지워지는 상황이 발생했다!

git rebase -i <수정할 commit의 직전 commit>

commit 히스토리를 수정하기 위해 검색을 해보았는데, rebase를 활용하면 해당 commit을 지울 수 있다고 해서

질문을 남긴 후 바로 commit 삭제를 진행했다.

--interactive는 말 그대로 git rebase 명령어를 대화형으로 실행하는 것을 뜻한다고 하는데, 아직 와닿지가 않는다!

먼저 내가 수정하고 싶은 commit의 바로 이전 commit을 알아야 한다.

나는 gitlab에서 commit hash 값을 가지고 왔다. (수정할 commit의 hash가 아니라 바로 직전의 commit이어야 한다.)

git rebase -i <수정할 commit의 직전 commit>

위의 명령어를 실행하면 터미널 화면에 commit 리스트와 사용할 수 있는 명령어 그리고 설명이 나온다.

여러 가지 명령어가 있지만 다른 계정으로 commit 된 내용을 지우고 싶기 때문에 drop 명령어만 정리하고 넘어가려고 한다.

drop(d도 가능)은 history에서 명시적으로 commit을 삭제하는 명령어이다.

만약 리스트 중 두 번째 commit을 지우고 싶다면

1) i key를 누르고 insert 모드로 변경한다.

2) pick으로 되어있는 부분을 drop으로 변경한 후 :wq 로 저장하면 반영된다.

나머지 명령어들은 아래의 블로그를 참고해보길 바란다.

https://wormwlrm.github.io/2020/09/03/Git-rebase-with-interactive-option.html

[React] 리액트 hooks

개발 여행 — Mon, 29 Nov 2021 02:51:46 +0900

Hooks의 등장 배경

리액트 hook의 역사는 recompose 라이브러리에서 시작되었다.

recompose의 아이디어는 hook과 굉장히 흡사하다.

함수형 프로그래밍을 적용하여 개발되었으며, state를 주는 방식이다.

끝내 recompose 라이브러리는 리액트 팀에 의해 인수되었다. 2018년 10월 25일 recompose의 업데이트는 중단되었다.

Andrew Clark은 facebook 팀에 합류해서 hook을 릴리즈했다.

https://github.com/acdlite/recompose

GitHub - acdlite/recompose: A React utility belt for function components and higher-order components.

A React utility belt for function components and higher-order components. - GitHub - acdlite/recompose: A React utility belt for function components and higher-order components.

github.com

props

props (properties)는 컴포넌트 속성을 설정할 때 사용하는 요소이다.

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

state

state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 사용하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다는 것을 명심하자!

useEffect

렌더링 직후에, 컴포넌트가 뭘 해야 하는지 명시하는 부분으로 react 컴포넌트가 렌더링 될 때 마다 특정 작업을 수행하도록 설정할 수 있는 hook이다. 렌더링 후에 useEffect에 작성한 함수들이 실행이 된다. (클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 생각하면 쉽다.
주로 API를 사용해서 data를 받거나, event listener와 같은 작업을 수행한다.

useEffect 활용

1. 마운트될 때만 실행하고 싶을 때

useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 함수의 두 번째 인수로 빈 배열을 넣어주면 된다.

useEffect(() => {
	console.log('마운트 될 때만 실행');
}, []);

2. 특정 값이 업데이트될 때만 실행하고 싶을 때

특정 값이 변경될 때만 호출하고 싶은 경우에는 두 번째 인수로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 된다.

배열 안에는 useState로 관리하고 있는 상태를 넣어 주어도 되고, props로 전달받은 값을 넣어주어도 된다.

useEffect(() => {
	console.log(email);
}, [email]);

3. 뒷정리 함수

useEffect는 렌더링되고 난 직후마다 실행되고, 두 번째 인수 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라진다.

컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup) 함수를 반환해주어야 한다.

언마운트 될 때만 뒷정리 함수를 호출하고 싶다면 useEffect의 두 번째 인수에 비어있는 배열을 넣으면 된다.

useEffect(() => {
	console.log('useEffect');
	console.log(email);
    
    return () => {
    	console.log('cleanup');
        console.log(email);
    };
}, [email]);

useReducer

useState보다 더 다양한 컴포넌트 상황에 따라 상태를 다른 값으로 업데이트하고 싶을 때 사용하는 hook이다.

reducer는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 action값을 전달받아 새로운 상태를 반환하는 함수이다. reducer 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 한다.

function reducer(state, action) {
	return { ... };
}

// action 값 구성
{
	type: 'INCREMENT',
    // 또 다른 값...
}

useMemo

함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용한다.

useCallback

useMemo와 비슷한 함수로, 주로 렌더링 성능을 최적화해야 할 때 사용한다.

useCallback을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다.