1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)

SPA 라우팅을 직접 구현하면서 window.history.pushState()와 location.hash를 사용했으나, 코드가 점차 흩어지고 복잡해지면서 유지보수가 어려워졌다. main.js 내 이벤트 핸들러가 명확한 기준 없이 나열되어 가독성과 확장성에 어려움을 느꼈다. 과제 초반, 테스트 코드에 대한 이해 없이 기능 개발에만 집중하면서 테스트 실패를 뒤늦게 인지하였다.

2. 시도

라우팅 로직을 BaseRouter 클래스로 추상화하고, 이를 기반으로 BrowserRouter, HashRouter를 각각 구현하여 라우팅 구조를 명확하게 정리. guardRoute 개념을 통해 인증 여부에 따른 라우팅 처리를 공통화.

3. 해결

BaseRouter 클래스를 통해 라우팅의 관심사를 분리하고, 재사용 가능한 구조로 리팩토링하여 유지보수성과 확장성을 확보하였다.

4. 알게된 것

History API, hashchange, popstate 이벤트의 차이점과 클라이언트 라우팅의 내부 동작 원리를 실무적으로 체득했다. 정적 호스팅 환경에서의 SPA 라우팅 설정과 배포시 제약사항을 경험할 수 있는 기회가 되었다. 테스트 흐름 자체가 개발 가이드라인 역할을 할 수 있다는 점을 알게 되었다.

Keep : 현재 만족하고 계속 유지할 부분

라우터 추상화를 통해 라우팅 로직을 구조적으로 정리한 점은 매우 만족스러웠고, 이 경험은 앞으로의 프로젝트에서도 많은 도움이 될 것 같다.

과제를 끝까지 완주하며 기술적으로도, 심리적으로도 성장할 수 있었던 점이 좋았다.

Problem : 개선이 필요하다고 생각하는 문제점

이벤트 핸들러가 main.js에 흩어져 있어 구조적으로 비효율적이고 추후에 확장하기 어려울 것이라 생각한다.

과제 초반 테스트 코드를 충분히 분석하지 않아, 기능과 테스트가 분리되어 개발 효율이 떨어졌었던 것 같다.

Try : 문제점을 해결하기 위해 시도해야 할 것

이벤트 핸들러를 역할 단위로 분리하고, 이벤트 위임 및 모듈화를 적용해 코드 가독성과 유지보수성을 높일 예정이다.

다음 프로젝트부터는 개발 초기 단계에서 테스트 코드를 먼저 분석하고, 테스트 주도 개발(TDD)에 더 적극적으로 접근해 볼 계획이다.

지금까지의 회고

지금까진 회사에서의 내 몫만 잘하면 된다는 마음이 컸고, 개발자로서의 삶 보단 직장인으로서의 삶이었던 것 같습니다. 반성하고 성장하고자 항해플러스에 참여하게 되었습니다.

항해 플러스 참여 계기

개발자로서 더 성장하고자 용기를 내서 참여하게 되었습니다. 하드스킬 뿐만 아니라 소프트스킬도 더 발전시키고픈 마음이 커서 용기를 내어 참여하였습니다.

향후 5년 뒤 커리어 방향성

IT 창업을 해서 CTO로서 기술팀을 이끌고 싶습니다.

10주간의 목표

매주 과제를 성실하게 최선을 다해 임하겠습니다.

최종 목표 배지

색깔은 기억안나지만, 상위 30%가 목표입니다!

• 해시
• level 2

프로그래머스 레벨2 - <위장> 문제 보기

🔍 문제 설명

스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다.

예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다.

스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요.

제한 사항

• clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다.
• 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다.
• 같은 이름을 가진 의상은 존재하지 않습니다.
• clothes의 모든 원소는 문자열로 이루어져 있습니다.
• 모든 문자열의 길이는 1 이상 20 이하인 자연수이고 알파벳 소문자 또는 '_' 로만 이루어져 있습니다.
• 스파이는 하루에 최소 한 개의 의상은 입습니다.

입출력 예

입출력 예 설명

예제 #1

headgear에 해당하는 의상이 yellow_hat, green_turban이고 eyewear에 해당하는 의상이 blue_sunglasses이므로 아래와 같이 5개의 조합이 가능합니다.

1. yellow_hat
2. blue_sunglasses
3. green_turban
4. yellow_hat + blue_sunglasses
5. green_turban + blue_sunglasses

예제 #2

face에 해당하는 의상이 crow_mask, blue_sunglasses, smoky_makeup이므로 아래와 같이 3개의 조합이 가능합니다.

1. crow_mask
2. blue_sunglasses
3. smoky_makeup

💡 풀이

문제의 첫번째 예시를 통해 설명해 보겠습니다.

[["yellow_hat", "headgear"], ["blue_sunglasses", "eyewear"], ["green_turban", "headgear"]]

이 문제에서 주어진 headgear의 종류는 2개, eyewear의 종류는 1개 입니다. 이 자료로 Hash Table을 만들면 다음과 같습니다.

let hash = {
      'headgear': 2,
      'eyewear': 1
}

각 의상은 종류별로 1개를 입거나 안입을 수 있습니다.

headgear의 두 종류 중 1개를 선택할 가짓수는 2C1 = 2 입니다. 그리고 headgear를 아예 안 입는 가짓수는 2C0 = 1 입니다.

=> headgear 종류 중 1개를 입거나 아예 안입을 확률은 2C1 + 2C0 이 됩니다.

이어서 eyewear의 한 종류중 1개를 선택할 가짓수는 1C1 입니다. 그리고 eyewear를 아예 안입는 가짓수 역시 1C0 = 1 입니다. => eyewear 종류를 1개를 입거나 안입을 확률은 1C1 + 1C0 이 됩니다.

최종적으로 (2C1 + 2C0) x (1C1 + 1C0) 가 각 의상 종류 중 1개를 입거나 안입을 확률의 조합이 됩니다.

여기서 문제의 조건 중에 의상을 최소 1개는 입는다고 했습니다. 그러면 모든 의상 종류를 하나도 안입는 가짓수 1을 최종값에서 빼주면 됩니다.

정답은 (2C1 + 2C0) x (1C1 + 1C0) - 1

이것을 일반화 하면?

hash = {종류1: a, 종류2: b, 종류3: c, 종류4: d} 이렇게 주어졌다면 (aC1 + aC0) x (bC1 + bC0) x (cC1 + cC0) x (dC1 + dC0) - 1 이 됩니다.

💡 나의 소스코드

function solution(clothes) {
  let answer = 0;

  let obj = new Object();
  for (const cloth of clothes) {
    if (!obj.hasOwnProperty(cloth[1])) obj[cloth[1]] = 1;
    else obj[cloth[1]] = obj[cloth[1]] + 1;
  }

  console.log(obj); // { headgear: 2, eyewear: 1 }

  answer =
    Object.values(obj)
      .map((n) => comb(n, 0) + comb(n, 1))
      .reduce((a, c) => a * c) - 1; // -1을 해주는 이유는 적어도 1개의 의상은 입어야 하기 때문입니다.

  return answer;
}

function comb(n, r) {
  if (n === r || r === 0) return 1;
  else {
    return comb(n - 1, r) + comb(n - 1, r - 1);
  }
}

💡 더 좋은 소스 코드

좋아요를 가장 많이 받은 다른 풀이 방법입니다. 가장 깔끔한 듯 합니다.

function solution(clothes) {
  return (
    Object.values(
      clothes.reduce((obj, cloth) => {
        obj[cloth[1]] = obj[cloth[1]] ? obj[cloth[1]] + 1 : 1;
        return obj;
      }, {})
    ).reduce((a, c) => a * (c + 1), 1) - 1
  );
}

자바스크립트 "Event Loop"에 대해 정리하고자 합니다.

Javascript, What are you?

대답은? " a single-threaded non-blocking asynchronous concurrent language..."

저는 싱글 스레드 논-블록킹 비동기 동적 언어입니다...😅

" I have a call stack, an event loop, a callback queue, some other apis and stuff... "

저는 콜스택과 이벤트 루프, 콜백 큐 그리고 다른 API나 뭐 그런것들을 가지고 있어요...

(이런 단어들에 집착할 필욘 없을 것 같습니다)

이 글을 통해 자바스크립트에서 콜백이 왜 중요한지 이해하고, 런타임 환경에 대해 다시 한번 생각하는 기회가 되었으면 합니다.

자바스크립트 런타임 (ex. v8)

크롬의 v8 같은 실제 자바스크립트 런타임을 들여다 보겠습니다.

• 자바스크립트는 싱글 스레드 프로그래밍 언어입니다. (싱글 스레드 런타임을 가지고 있다는 말)
• 이것은 결국 한번에 하나의 싱글 call stack만을 가지고 있다는 말입니다.
• 싱글 스레드 = 하나의 프로그램은 동시에 하나의 코드만 실행할 수 있다는 것!

Call Stack 그림으로 이해하기

• 무엇인가를 리턴할 때마다 스택 맨 위에 있는 값을 꺼내게 됩니다. (stack.pop())

function foo() { return foo(); }

foo();

![maximum-call-stack](https://user-images.githubusercontent.com/63832678/188273050-7e989312-575b-475b-b971-2fe9ef6fddea.png)

- 이 에러는 개발을 하시다가 한번쯤은 만나 보셨을텐데요.
- 이제야 조금 명확한 이유를 알 것 같습니다.
- 계속되는 foo 함수의 호출로 call stack이 꽉 차버려서 크롬 v8 엔진은 "이 녀석들을 중지 시킬게요 버그를 고쳐주세요!" 라고 말하고 있습니다.

### blocking (What happens when things are slow?)

- 느린 동작이 스택에 남아있는 것을 보통 `블로킹`이라고 말하게 됩니다.
- 브라우저는 실제로 `ajax`요청을 동기적으로 실행시키지 않습니다.
- 브라우저에서 `ajax`요청을 동기적으로 강제시킨다면 브라우저는 모든 리퀘스트가 완료될 때까지 멈출겁니다. (It's stucked)
- 멈춰있는 동안 콜스택에 쌓여있던 코드들이 후에 실행되겠죠?
- 유려한 UI를 만드려고 한다면, 콜스택을 멈추게 해서는 안됩니다.


### 해결방법은? 비동기 콜백!
- 브라우저 혹은 노드에는 블로킹 함수가 거의 없습니다. 대부분 비동기로 만들어졌습니다.
- 어떤 코드를 실행하면 결국 콜백을 받고 이걸 나중에 실행한다는 말입니다.

```javascript

console.log('Hi');

setTimeout(function() {
      console.log('There');
}, 5000);

console.log('!!!');

Hi
!!!
There

• 이 순서로 출력합니다.
• 콜 스택에선 console.log('Hi'); 가 먼저 쌓이고 동기적으로 실행됩니다.
• 그다음엔 setTimeout인데 갑자기 어디론가 사라져 버리고 console.log('!!!'); 가 쌓이고 실행됩니다.
• 그리고 5초 뒤에 마법처럼 there 가 스택에 나타납니다.

여기에서 이벤트 루프와 동시성이 역할을 하게됩니다!!

동시성 & 이벤트루프 (Concurrency & Event Loop)

한번에 하나씩. 꼭 그렇지는 않다는 것만 빼면.

• 자바스크립트 런타임은 한번에 하나만 할 수 있습니다.
• 하지만 브라우저에서의 Web API는 자바스크립트에서 호출할 수 있는 스레드를 효과적으로 지원합니다. 여기에 동시성이 들어오는 것입니다.

아까 사라져버린 setTimeout 콜 스택 상황을 좀더 디깅해봅시다.

• setTimeout은 브라우저에서 제공하는 Web API입니다. v8 소스코드엔 존재하지 않죠.

• 브라우저가 타이머를 실행시키고 카운트 다운을 시작합니다. 이건 setTimeout 자체는 호출 완료되었고 스택에서 함수를 지울 수 있는 상황입니다.

• 콜 스택에서 setTimeout 호출문은 사라지고 5초가 흐릅니다.

• webAPI는 갑자기 콜스택에 끼여 들 순 없습니다. (이제 테스크큐 또는 콜백큐가 활약할 차례입니다.)

• 모든 web API는 작동이 완료되면 콜백(cb)을 테스크 큐에 밀어넣습니다.

• 그리고 드디어 이벤트루프가 할 일이 생겼습니다.

이벤트 루프의 역할은 콜 스택과 테스크 큐를 주시하는 것입니다.

• 스택이 비어있으면, 큐의 첫번째 콜백을 스택에 쌓아 효과적으로 실행할 수 있게 해줍니다.

여기까지만으로도 여러분들은 자바스크립트 비동기 함수가 어떻게 작동하는지 알게 되었습니다.

실제 브라우저 repaint 또는 렌더링 상황에서의 비동기 함수가 어떤 영향을 미치는지

• 브라우저는 여러분이 자바스크립트로 하는 무언가로 인해 제약을 받습니다.

• 브라우저는 기본적으로 화면을 매 16.6ms, 즉 1초에 60프레임을 repaint하는게 이상적입니다. 그게 제일 빠른거죠.

• 스택에 코드가 있으면, 렌더링을 못합니다. 렌더도 하나의 콜백처럼 행동하니깐요. (스택이 비어질 때까지 기다려야 하는겁니다.)

• 다른점이라면, 렌더는 여러분의 콜백에 비해 더 높은 우선순위를 갖습니다. 매 16.6ms마다 큐에 들어갑니다 (Render Queue)

• 렌더가 막히면, 화면의 버튼을 클릭해서 반응을 보는게 불가능합니다.

• 사람들이 event loop를 막지 말라고 할 때, 바로 이런 현상을 뜻하는 것입니다.

  • 스택에 필요없는 느린 코드를 쌓아서 브라우저가 할일을 못하게 만들지 마라. 유동적인 UI를 구현해라. (Ex. 스크롤 이벤트에서의 렌더링 최적화)

사용자들은 빠르고 즉각적인 사용자 경험을 원한다. 100ms 이하의 응답 지연은 사용자로 하여금 즉각적인 반응으로 느끼게 한다. 반면, 100ms~300ms의 응답 지연은 지연이 어느정도 느껴지기 마련이다.

사용자 경험의 향상을 위해 리액트는 고차 컴퍼넌트(Higher Order Component, HOC) React.memo()를 제공한다. 컴포넌트를 래핑(wrapping)함으로써 컴포넌트를 메모이징(Memoizing)하고 불필요한 리렌더링을 피할 수 있다.

이 글은 언제 React.memo()가 성능을 향상시키고, 언제 불필요한지 설명할 것이다.

1. React.memo()

DOM 업데이트를 결정할 때, 리액트는 먼저 컴포넌트를 렌더링한 뒤, 이전 렌더링 결과와 비교한다. 만약 렌더링 결과가 다르다면 그 때 DOM 업데이트를 한다.

이전 렌더링 결과와 현재의 렌더링 결과를 비교하는 것은 빠르다. 하지만 어떤 상황에선 이 속도를 더 높일 수 있다.

컴포넌트가 React.memo()로 래핑 되었을 때, 리액트는 컴포넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 다음 렌더링전에 props가 같다면, 리액트는 메모이징(Memoizing)된 내용을 재사용한다.

예시:

export function Movie({ title, releaseDate }) {
  return (
    <div>
      <div>Movie title: {title}</div>
      <div>Release date: {releaseDate}</div>
    </div>
  );
}
const MemoizedMovie = React.memo(Movie);
export { MemoizedMovie as Movie };

React.memo(Movie)는 메모이징(Memoizing)된 새로운 컴포넌트 MemoizedMovie를 리턴한다.

단 한가지의 차이점을 제외하고, 기존의 Movie 컴포넌트와 같은 렌더링 결과를 낸다.

MemoizedMovie의 렌더링 결과는 메모이징 되어있다. 만약 title이나 releaseDate 같은 props가 변경 되지 않는다면 다음 렌더링 때 메모이징 된 결과를 사용한다.

// First render - MemoizedMovie이 호출됨.
<MemoizedMovie 
  title="Heat" 
  releaseDate="December 15, 1995" 
/>
// Second render - MemoizedMovie 호출 x.
<MemoizedMovie
  title="Heat" 
  releaseDate="December 15, 1995" 
/>

메모이징 된 결과를 재사용함으로써 성능상의 이점을 얻을 수 있다.

• 리액트는 렌더링을 스킵하고, virtual DOM이 달라진 부분을 체크하지 않는다.

1.1 props 동등 비교 커스터마이징

기본적으로 React.memo()는 props 혹은 props 객체를 비교할 때 얕은(shallow) 비교를 한다.

props 비교를 직접 커스터마이징 하고 싶다면 두번째 인수로 비교 함수를 지정해주면 된다.

React.memo(Component, [areEqual(prevProps, nextProps)]);

areEqual(prevProps, nextProps) 함수는 prevProps와 nextProps가 같다면 true를 반환할 것이다.

function moviePropsAreEqual(prevMovie, nextMovie) {
  return prevMovie.title === nextMovie.title
    && prevMovie.releaseDate === nextMovie.releaseDate;
}
const MemoizedMovie = React.memo(Movie, moviePropsAreEqual);

2. 언제 React.memo()를 사용할까?

2.1 같은 props로 렌더링이 자주 일어나는 Component

React.memo()를 사용하기 가장 좋은 경우는 함수형 컴퍼넌트가 같은 props로 자주 렌더링 될거라 예상될 때이다.

흔한 경우가 부모 컴포넌트에 의해 자식 컴포넌트가 같은 props로 렌더링 될 때이다.

예시: MovieViewsRealtime 실시간으로 업데이트되는 조회수를 가진 컴포넌트

function MovieViewsRealtime({ title, releaseDate, views }) {
  return (
    <div>
      <Movie title={title} releaseDate={releaseDate} />
      Movie views: {views}
    </div>
  );
}

이 어플리케이션은 매초마다 서버에서 데이터를 폴링(polling)해서 MovieViewsRealtime 컴포넌트의 views prop을 업데이트한다.

// Initial render
<MovieViewsRealtime 
  views={0} 
  title="Forrest Gump" 
  releaseDate="June 23, 1994" 
/>
// After 1 second, views is 10
<MovieViewsRealtime 
  views={10} 
  title="Forrest Gump" 
  releaseDate="June 23, 1994" 
/>
// After 2 seconds, views is 25
<MovieViewsRealtime 
  views={25} 
  title="Forrest Gump" 
  releaseDate="June 23, 1994" 
/>
// etc

views prop이 업데이트 될 때 마다 MoviewViewsRealtime 컴포넌트가 리렌더링 된다. 이때 Movie 컴퍼넌트 또한 title이나 releaseData가 이전과 똑같아도 리렌더링 된다.

바로 이 상황에 React.memo()가 딱이다!

불필요한 리렌더링을 방지하기 위해 React.memo()로 메모이징을 해보자

function MovieViewsRealtime({ title, releaseDate, views }) {
  return (
    <div>
      <MemoizedMovie title={title} releaseDate={releaseDate} />
      Movie views: {views}
    </div>
  )
}

title 혹은 releaseDate props가 같다면, 리액트는 MemoizedMovie를 리렌더링 하지 않을 것이다. 이렇게 MovieViewsRealtime 컴포넌트의 성능을 향상시킬 수 있다.

컴포넌트가 같은 props로 자주 렌더링 되거나, 무겁고 비용이 큰 연산이 있는 컴포넌트의 경우, React.memo()로 래핑할 필요가 있다.

profiling을 통해 React.memo()를 적용했을 때의 이점을 측정하자.

3. 언제 React.memo()를 피해야할까?

만약 컴포넌트가 무겁지 않고 같은 props로 자주 렌더링 되지 않는다면 React.memo()는 필요치 않다. 성능적으로 이점이 없다면 사용하지 않도록 하자.

성능 관련 변화가 잘못 적용된다면, 오히려 성능 악화를 불러 일으킬 수 있다. React.memo() 현명하게 사용하자!

클래스 컴포넌트를 React.memo()로 래핑하는 것은 바람직하지 않다. 만약 필요하다면, PureComponent를 확장해서 사용하거나 shouldComponentUpdate()를 커스터마이징해서 구현하는 것이 옳다.

3.1 필요없는 props 비교

렌더링될 때 props가 다른 경우가 대부분인 컴포넌트를 생각해 볼 때, 메모이제이션(Memoization)의 이점은 없다.

설령 props가 계속 변하는 컴포넌트를 React.memo()로 래핑할지라도, 리액트는 다음의 2가지 작업을 수행한다.

1. 이전 props와 다음 props의 동등 비교를 위한 비교 함수를 호출한다.
2. props 비교는 거의 항상 false를 리턴할 것이기에, 리액트는 이전 렌더링 결과와 현재의 렌더링 결과의 비교를 수행할 것이다.

** 당신은 성능 이점도 얻지 못한 채, 비교함수만 실행하게 될 것이다!**

4. React.memo() 와 콜백함수

함수 객체는 오직 자신에게만 동일하다. (일반 객체와 같은 원칙을 따른다.)

다음 예를 보자.

function sumFactory() {
  return (a, b) => a + b;
}
const sum1 = sumFactory();
const sum2 = sumFactory();
console.log(sum1 === sum2); // => false
console.log(sum1 === sum1); // => true
console.log(sum2 === sum2); // => true

함수 sum1과 sum2 두 함수 모두 두 숫자를 더해주는 함수이다. 그러나 sum1과 sum2는 다른 함수 객체이다.

부모 컴퍼넌트가 자식 컴퍼넌트의 콜백 함수를 정의할 때, 새 함수 객체 인스턴스가 생성된다. 이것이 어떻게 메모이제이션을 막는지 보고, 고쳐보자.

Logout 컴포넌트는 콜백 prop인 onLogout을 갖는다.

function Logout({ username, onLogout }) {
  return (
    <div onClick={onLogout}>
      Logout {username}
    </div>
  );
}
const MemoizedLogout = React.memo(Logout);

콜백함수를 prop으로 받는 컴포넌트는 메모이제이션을 적용할 때 주의를 기울여야 한다. 부모 컴포넌트가 매 렌더링 때마다 다른 콜백 함수의 인스턴스를 넘겨줄 수 있기 때문이다.

function MyApp({ store, cookies }) {
  return (
    <div className="main">
      <header>
        <MemoizedLogout
          username={store.username}
          onLogout={() => cookies.clear('session')}
        />
      </header>
      {store.content}
    </div>
  );
}

동일한 username 이 전달 되더라도, MemoizedLogout은 새로운 onLogout 콜백 때문에 리렌더링을 하게 된다.

Memoization is broken!

이를 해결하기 위해서는, onLogout prop은 매번 같은 콜백 함수 인스턴스를 받아야 한다. useCallback()을 적용해서 콜백 인스턴스를 렌더링 사이에서 지켜보자.

const MemoizedLogout = React.memo(Logout);
function MyApp({ store, cookies }) {
  const onLogout = useCallback(
    () => cookies.clear('session'), 
    [cookies]
  );
  return (
    <div className="main">
      <header>
        <MemoizedLogout
          username={store.username}
          onLogout={onLogout}
        />
      </header>
      {store.content}
    </div>
  );
}

useCallback(() => { cookies.clear() }, []) 는 항상 같은 함수 인스턴스를 반환한다. (cookies 값이 바뀌지 않는다면) MemoizedLogout의 메모이제이션이 정상 작동 될 것이다!

5. React.memo()는 성능개선의 실마리

말그대로, 리액트는 성능개선의 도구로 메모이제이션을 사용한다. 대부분의 상황에서 리액트는 메모이제이션된 컴포넌트의 렌더링을 피하지만, 당신은 그것에 의존해선 안된다.

6. React.memo()와 hooks

hooks를 사용하는 컴포넌트는 메모이제이션을 달성하기 위해 자유롭게 React.memo()를 사용할 수 있다.

단, 리액트는 state 값이 바뀐다면 언제든 리렌더링 된다. 설령 컴포넌트가 React.memo()로 래핑되었다 할지라도...

7. 결론

React.memo()는 함수형 컴포넌트를 메모이제이션을 하게 해 주는 훌륭한 도구다. 올바르게 적용 된다면 변경되지 않은 동일한 prop에 대해 리렌더링을 하는 것을 막을 수 있다.

다만, 콜백 함수를 prop으로 사용하는 컴포넌트에서 메모이징을 할 때 주의하자. 그리고 확실히 하자. 렌더링 사이에서 이전과 동일한 콜백 함수 인스턴스를 넘기는지.

마지막으로, 메모이제이션의 이점을 확인하기 위해 profiling을 사용하는 것을 잊지 말자.

한줄 요약: React.memo() 컴포넌트의 props가 바뀌지 않았다면, 리렌더링 하지 않도록 설정하여 성능 최적화를 해주는 착한 녀석.

리액트 Hook 알아보자 (TS ver.) ✍

1. useState

기본 꼴

import React, { useState } from "react"

// array destructuring
const [user, setUser] = useState(null);

인자로 받은 값이 상태의 초기값입니다. user 라는 변수에 초기값 null을 저장하고 setUser 함수를 통해 user 변수에 담긴 상태값을 변경할 수 있습니다.

여기서 잠깐, 리액트의 특성을 알고 넘어갑시다.

리액트의 특징 중 하나, 상태값이 변경되면 Virtual DOM이 해당 상태값이 사용된 부분만 다시 렌더링합니다. 그러나 setUser 와 같은 상태값 변경 함수가 아닌 사용자가 임의로 상태값을 변경하면 리액트는 변경사항을 인식하지 못하고 리렌더링을 하지 않습니다. 따라서 상태값을 변경할 때 반드시 상태값 변경 함수(setUser)를 사용합시다.

예시 (TS ver.)

import { useState } from 'react';

type AuthUser = {
  name: string
  email: string
}

export const User = () => {

  const [user, setUser] = useState<AuthUser>({} as AuthUser); // 1️⃣

  return (
    <div>
      <div>User name is {user.name}</div>
      <div>User email is {user.email}</div>
    </div>
  )
}

1번 부분을 제외하면 JS 환경에서의 useState 쓰는 방법과 동일합니다. 1번 라인에서 <> 안에 AuthUser라는 Type을 특정해준 것이고 인자값은 초기 상태값인데 {} as AuthUser 에서 as AuthUser 는 Type Assertion 이라는 개념입니다. 즉, 초기값은 빈 객체이지만 이 빈 객체의 타입은 AuthUser 라는 것을 개발자가 지정해준 것입니다.

Type Assertion 은 개발자가 타입스크립트 컴파일러보다 이 상태(state)에 대해선 더 잘 알고 있다, 이 상태의 타입은 어떤 특정한 타입만 올 수 있다 같은 이런 상황에서만 사용하도록 합시다.

위 예시 코드의 상황은 user값이 항상 존재하는 상황(혹은 user값이 null이 될 수 없는 상황) 에서 가능한 코드입니다.

2. useEffect

• useEffect는 모든 사이드 이펙트를 담당합니다. 예를들면, 이벤트 리스너를 추가하거나, data fetch를 하거나...
• componentDidUpdate, componentDidMount, componentWillUnmount 컴포넌트가 처음 마운트 될 때 / 컴포넌트가 업데이트 될 때 / 컴포넌트가 언마운트 될 때 일어나는 동작을 담당합니다.

기본 꼴

const [name, setName] = useState('Paul');
useEffect(() => {
  document.title = `Hello ${name}'s world!`;
}, [name])

컴포넌트가 마운트 되었을 때 브라우저 title을 "Hello Paul's world!"로 바꿔줍니다. 그리고 name 상태값이 변경되어 컴포넌트가 업데이트 되었을 때도 호출됩니다.

clean up function도 알고 넘어갑시다.

import React, {useEffect} from 'react'

  useEffect(
    (effect function)
    return {
      (cleanup function)
    }
  }, [dependencies]);

이펙트 함수 호출 시점은 컴포넌트가 처음 마운트될 때, 의존값으로 주어진 값이 변경될 때라고 말씀드렸습니다.

그렇다면 클린업 함수는? 이펙트함수가 호출되기 전, 컴포넌트가 언마운트(unmount)될 때 호출됩니다. 이전 이펙트로 인한 결과를 정리해주는 역할입니다. 말그대로 cleanup!

그리고 의존값이 비어있다면 최초 마운트할 때만 이펙트함수를 호출합니다. 또 의존값이 아예 존재하지 않는다면 컴포넌트가 렌더링될 때마다 이펙트를 호출합니다. (조심해야겠죠?)

import { useState, useEffect } from "react";

const Test = () => {
  const [windowScrollY, setWindowScrollY] = useState<number>(window.scrollY);
  const handleScroll = () => {
    setWindowScrollY(window.scrollY);
  };
  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    console.log("effect");
    return () => {
      window.removeEventListener("resize", handleScroll);
      console.log("clean up");
    };
  }, [windowScrollY]);
  return <div style={{ height: '500vh' }}>{windowScrollY}</div>;
}

export default Test;

• 스크롤을 내릴때마다 cleanup함수가 먼저 호출되고 정리를 하고 나서 effect함수가 호출되는 것을 확인할 수 있습니다.

클로저

📚 클로저에 대해 알아봅시다.

은연중에 사용했을 클로저. 제대로 정리해봅시다.

자바스크립트에서는 내부함수와 외부함수가 존재합니다. 내부함수는 외부함수의 지역변수에 접근할 수 있습니다. 그리고 외부함수가 소멸한 후에도 외부함수의 지역변수에 접근 가능합니다. 이 특성을 이용한 것이 closure 입니다.

말로는 전부 이해하기 힘들죠? 😭

그럼 예시를 보겠습니다.

function outer(outerValue) {
  return function inner(innerValue) {
    console.log(`outer value : ${outerValue}`);
    console.log(`inner value : ${innerValue}`);
  }
}

const inner = outer("겉은 바삭");

inner("속은 촉촉");

// outer value : 겉은 바삭
// inner value : 속은 촉촉

결과는 ?

outer value : 겉은 바삭 inner value : 속은 촉촉

외부 함수에서 선언된 outerValue라는 지역변수를 inner 함수에서 기억하고 있습니다!

여기서 궁금한 점은, inner 함수는 outerValue 값인 "겉은 바삭" 이라는 값을 어떻게 기억하는 걸까요?

이에 대해선 렉시컬 스코프에 대해 이해하고 있어야 합니다.

렉시컬 스코프와 유효 범위

위의 상황에서 함수가 실행되면 자바스크립트는 외부 렉시컬 환경과 내부 렉시컬 환경이라는 고유한 유효 범위를 갖습니다. 그리고 이를 메모리에 저장합니다.

외부 렉시컬 환경은 말그대로 함수 바깥의 범위를 참조하고, 내부 렉시컬 환경은 함수 내부에서 사용된 인자나 지역변수를 참조합니다.

여기서 중요한점!

함수 내부에서 변수를 사용할 때는 일단 내부 렉시컬 환경을 탐색한 후, 찾는 변수가 없다면 외부 렉시컬 환경으로 이동해 변수를 찾습니다. 이것이 closure입니다. (앞서 얘기 했듯이)

그럼 어떻게 "겉은 바삭"이 출력되었는지 어느 정도 감이 오시나요?

그렇다면 클로저를 통해 얻을 수 있는 가장 큰 이점?

함수 종료 후에도 사라지지 않는 지역 변수를 만들 수 있습니다! 더 나아가서 객제 지향의 캡슐화의 기능을 클로저를 통해 구현할 수 있습니다.

• 위 사진은 react-hook-flow를 보여줍니다.

자세히는 모르겠지만 뭔가 useEffect보다 먼저 실행될 것 같은 느낌이 듭니다.

테스트 코드를 작성해보면서 useEffect 와 useLayoutEffect 가 어떻게 다른지 알아봅시다!

useEffect

많이 접하는 react hook의 useEffect 상황입니다.

이 때의 실행 순서는 이렇습니다.

1. <div>나는 입니다. 지금 이 먹고 싶습니다.</div> 를 페인트
2. effect 내부의 setName, setFood를 호출
3. re-render -> <div>나는 방루이입니다. 지금 초밥이 먹고 싶습니다.</div>

이렇게 간단한 DOM 구조라면 체감할 수 없겠지만, 조금만 화면이 복잡해지면 1번에서 3번의 과정에서 나는 입니다. 지금 이 먹고 싶습니다.. 라는 텍스트를 오랫동안 볼 수도 있습니다.

하지만 useLayoutEffect라면?

useLayoutEffect

거의 똑같은 구조지만 상황은 달라집니다. 실행순서는 이렇습니다.

1. effect 내부의 setName, setFood 호출.
2. <div>나는 방루이입니다. 지금 초밥이 먹고 싶습니다.</div> 를 페인트

아무리 DOM 구조가 복잡해져도 더 이상 잠깐의 깜빡임도 볼 수 없을 것입니다.

정리

• useEffect의 이펙트는 DOM이 화면에 그려진 후에 호출됩니다.
• useLayoutEffect의 이펙트는 DOM이 화면에 그려지기 전에 호출됩니다.
• 따라서 이펙트 내에서 초기화 되어야 하는 state는 사용자 경험을 위해 useLayoutEffect를 활용해 봅시다.

다크 모드는 어두운 배경에 밝은 텍스트를 표시하는 것을 말합니다. 스크린에서 방출되는 빛을 줄임으로써 컴퓨터나 테블릿, 모바일에서 화면을 조금 더 쉽게 볼 수 있도록 해줍니다.

💄 스타일 컴포넌트?

리액트와 가장 호흡이 찰떡이라 생각하는 CSS in JS 라이브러리 입니다. 모던한 프론트엔드 개발자에게 개발자 경험을 획기적으로 개선해줍니다.

그럼 다크 모드를 구현해 봅시다!

npm i styled-components

우선 스타일 컴포넌트를 설치해주고 그 다음 각 프로젝트의 root 디렉토리에 ThemeConfig.js(TS 환경이라면 확장자를 바꿔줍시다) 파일을 만들고 다음과 같이 설정합니다.

import { createGlobalStyle} from "styled-components"

export const lightTheme = {
  body: '#FFF',
  text: '#363537',
  toggleBorder: '#FFF',
  background: '#363537',
}

export const darkTheme = {
  body: '#363537',
  text: '#FAFAFA',
  toggleBorder: '#6B8096',
  background: '#999',
}

export const GlobalStyles = createGlobalStyle`
  body {
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text};
    font-family: Tahoma, Helvetica, Arial, Roboto, sans-serif;
    transition: all 0.50s linear;
  }
`

여기서, light 테마와 dark 테마, 그리고 GlobalStyles를 정의합니다. 나중에 앱전체를 Theming하기 위해서는 이것들이 필요합니다. createGlobalStyle는 전역 스타일을 앱전체(body)에 주기 위해 React Component를 생성해줍니다.

이렇게 다크모드를 구현하기 위한 테마를 설정했습니다. 그럼 다크모드로 전환하기 위한 토글 버튼을 만들어 봅시다. _app.js 파일에 테마 상태를 만들고 토글을 설정해 봅시다.

const [theme, setTheme] = useState("light") 

const toggleTheme = () => {
    theme == 'light' ? setTheme('dark') : setTheme('light')
}

가장 중요한 것을 까먹었네요. 바로 ThemeProvider로 _app.js의 렌더링 부분을 감싸주는 것입니다.

import { useState } from "react"
import { ThemeProvider } from "styled-components";

const [theme, setTheme] = useState("light") 

const toggleTheme = () => {
    theme == 'light' ? setTheme('dark') : setTheme('light')
}

return (
  <ThemeProvider>
    <button onClick={toggleTheme}>Switch Theme</button>
    <Component {...pageProps} />
  </ThemeProvider>
) 

이렇게 설정이 모두 끝났습니다. 마지막으로 _app.js의 전체 코드를 봅시다.

function App({ Component, pageProps }) {
  const [theme, setTheme] = useState("light") 

  const toggleTheme = () => {
    theme == 'light' ? setTheme('dark') : setTheme('light')
  }

  return (
    <ThemeProvider theme={theme == 'light' ? lightTheme : darkTheme}>
      <GlobalStyles />
      <button onClick={toggleTheme}>Switch Theme</button>
      <Component {...pageProps} />
    </ThemeProvider&gt;
  ) 
}
export default App

이렇게 성공적으로 Next.js에서의 다크모드를 구현했습니다. 🤩

TS환경에서의 _app.ts도 올려봅니다.

import Layout from '../components/Layout'
import { AppProps } from 'next/app'
import { ThemeProvider } from 'styled-components'
import { useState } from 'react'
import { darkTheme, GlobalStyles, lightTheme } from '../my-theme'

function MyApp({ Component, pageProps }: AppProps) {

  const [theme, setTheme] = useState<string>('light');
  const toggleTheme = () => {
    theme == 'light' ? setTheme('dark') : setTheme('light')
  }
  return (
    <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
      <GlobalStyles />
        <Layout>
          <Component {...pageProps} />
          <button onClick={toggleTheme}>Switch Theme</button>
        </Layout>
    </ThemeProvider>
    )
}

export default MyApp

이건 ThemeConfig.ts

import { createGlobalStyle, DefaultTheme } from 'styled-components';

export const lightTheme: DefaultTheme = {
  body: '#FFF',
  text: '#363537',
  toggleBorder: '#FFF',
  background: '#363537',
}

export const darkTheme: DefaultTheme = {
  body: '#363537',
  text: '#FAFAFA',
  toggleBorder: '#6B8096',
  background: '#999',
}

export const GlobalStyles = createGlobalStyle`
  body {
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text};
    font-family: Tahoma, Helvetica, Arial, Roboto, sans-serif;
    transition: all 0.50s linear;
  }
`

TS 환경에선 특별히 styled.d.ts 설정을 해줘야 합니다 (root 디렉토리에 만들어줍니다.)

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    body: string;
    text: string;
    toggleBorder?: string;
    background?: string;
  }
}

더 modern한 다크 모드 구현 방법은 없을까?

이 글을 작성하기 위해 조사를 하던 중 useDarkMode Hook이 존재한다는 것을 알게 되었습니다.

useDarkMode Hook를 사용하면 테마 상태를 설정하거나 토글을 만들 필요가 없습니다.

이런 핫한 기능은 다음에 따로 정리해볼게요!

💡 목표

• 자신없던 최소신장트리와 크루스칼 알고리즘, 프림 알고리즘을 정리하면서 공부하고자 합니다.

📌 최소 신장트리

✅ 그래프에서 최소 비용 문제

1. 모든 정점을 연결하는 간선들의 가중치의 합이 최소가 되는 트리
2. 두 정점 사이의 최소 비용의 경로 찾기

✅ 신장트리

- n개의 정점으로 이루어진 무향 그래프에서 n개의 정점과 n-1개의 간선으로 이루어진 트리

✅ 최소 신장 트리 (Minimum Spanning Tree)

- 무향 가중치 그래프(undirected weighted graph)에서 신장 트리를 구성하는 간선들의 가중치의 합이 최소인 신장 트리

KRUSKAL 알고리즘(간선 선택)

1. 모든 간선을 가중치에 따라 ((오름차순 정렬))
2. 가중치가 낮은 간선부터 선택하면서 트리를 증가시킴
   • 사이클이 존재한다면? 다음으로 가중치 낮은 간선 선택
3. n-1개의 간선이 선택될 때까지 2번을 반복

흐름을 봅시다 🎨

1. 오름차순으로 간선을 정렬합니다.

2. 비용이 제일 작은 3,5 간선 선택

3. 그다음 1,2 간선 선택

4. 계속 진행

5. 사이클이 존재한다면? 다음으로 넘어갑니다.

• 0, 1 이미 같은 집합이므로 union 불가

6. N-1개의 간선 선택 완료

Java로 구현

import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.InputStreamReader;
import java.util.Arrays;
import java.util.StringTokenizer;

public class MSTKruskalTest {

    // 간선 정보 저장하는 객체 -> 정렬되어야함
    static class Edge implements Comparable<Edge> {
        int start, end, weight;

        public Edge(int start, int end, int weight) {
            this.start = start;
            this.end = end;
            this.weight = weight;
        }

        @Override
        public int compareTo(Edge o) {
            return Integer.compare(weight, o.weight); // 오름차순
        }
    }

    static int[] parents; // 부모 원소를 관리 (트리처럼 사용) // 사이클이 발생하는지 여부 체크
    static int V, E; // Vertex, Edge // 정점, 간선
    static Edge[] edgeList; // 간선들 저장하는 배열 -> 정렬되어야함

    private static void make() {
        parents = new int[V];
        // 모든 원소를 자신을 대표자로 만듦
        for (int i = 0; i < V; i++) {
            parents[i] = i;
        }
    }

    // a가 속한 집합의 대표자 찾기
    private static int find(int a) {
        if (a == parents[a])
            return a; // 자신이 대표자
        return parents[a] = find(parents[a]); // 자신이 속한 집합의 대표자를 자신의 부모로 : path compression
    }

    // 두 원소를 하나의 집합으로 합치기(대표자를 이용해서 합침)
    private static boolean union(int a, int b) {
        int aRoot = find(a);
        int bRoot = find(b);
        if (aRoot == bRoot)
            return false; // 이미 같은 집합으로 합치지 않음

        parents[bRoot] = aRoot;
        return true;
    }

    public static void main(String[] args) throws Exception {
        System.setIn(new FileInputStream("res/kruskal_input.txt"));
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        StringTokenizer st = new StringTokenizer(br.readLine(), " ");

        V = Integer.parseInt(st.nextToken());
        E = Integer.parseInt(st.nextToken());

        // 간선 리스트 작성
        edgeList = new Edge[E];

        for (int i = 0; i < E; i++) {
            st = new StringTokenizer(br.readLine(), " ");
            int start = Integer.parseInt(st.nextToken());
            int end = Integer.parseInt(st.nextToken());
            int weight = Integer.parseInt(st.nextToken());
            edgeList[i] = new Edge(start, end, weight);
        }

        Arrays.sort(edgeList); // 오름차순 정렬

        make(); // 모든 정점을 각각의 집합으로 만들고 출발

        // 간선 하나씩 시도하며 트리 만들어 감.
        int cnt = 0, result = 0; // cnt: 연결 간선 수 result: 최소비용들의 합
        for (Edge e : edgeList) {
            if (union(e.start, e.end)) {  // 시작정점 - 끝정점을 연결 시도
                // 서로 다른 집합이었다가 합쳐지는 게 가능한 경우. start, end는 이제 같은 집합이 됨
                result += e.weight; // 비용누적
                if (++cnt == V - 1) // 연결 간선수가 정점수-1이면 다 연결한 것임
                    break; // 신장트리 완성
            }
        }

        System.out.println(result);
    }

}

PRIM 알고리즘(정점 선택)

1. 임의의 정점 하나 선택해서 시작
2. 선택한 정점과 인접하는 정점들 중의 최소 비용의 간선이 존재하는 정점을 선택
3. N개의 모든 정점이 선택될 때 까지 1번, 2번 과정을 반복

서로소인 2개의 집합 정보를 유지

1. 트리 정점들 - MST를 만들기 위해 선택된 정점들
2. 비트리 정점들 - 선택되지 않은 정점들

흐름을 봅시다 🎨

1. 임의의 정점 0을 선택, 0에서 제일 적은 비용인 2와 연결합니다.

2. 0, 2번 정점에서 최소비용 간선 선택합니다. (제일 작은 21 간선)

3. 계속 진행 (32 간선 선택 x)

4. N개의 정점이 다 선택되었으면 끝.

Java로 구현

import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.InputStreamReader;
import java.util.StringTokenizer;

// 임의의 정점 (시작점)을 시작으로 최소비용의 간선을 선택하고 -> 최소비용 정점이 결정 됨 -> mst에 포함
public class MSTPrimTest {

    public static void main(String[] args) throws Exception {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));

        int N = Integer.parseInt(br.readLine());
        int[][] adjMatrix = new int[N][N];
        boolean[] visited = new boolean[N]; // 해당 정점의 방문 여부체크. 해당 정점이 mst에 포함되었는지 여부 체크
        int[] minEdge = new int[N]; // 각 정점별 다른 정점과의 연결 간선 비용 중 최소값.
        // 한 정점과 연결된 다른 간선들의 비용 중 최소값

        StringTokenizer st = null;
        for (int i = 0; i < N; i++) {
            st = new StringTokenizer(br.readLine(), " ");
            for (int j = 0; j < N; j++) {
                // 정점 i -> j로 가는 간선이 존재하고 그 때 가중치가 adjMatrix[i][j]
                adjMatrix[i][j] = Integer.parseInt(st.nextToken());
            }
            minEdge[i] = Integer.MAX_VALUE;
        }

        int result = 0; // 최소신장트리 비용
        minEdge[0] = 0; // 임의의 시작점 0의 간선비용을 0으로 세팅

        for (int i = 0; i < N; i++) { // 모든 정점 수만큼 반복
            // 1. 신장트리에 포함되지 않은 정점 중 최소간선비용의 정점 찾기
            int minCost = Integer.MAX_VALUE;
            int minVertex = -1; // 최소간선비용의 정점번호

            // 1. 현재 모든 정점 중에서 가장 작은 간선 비용을 갖는 정점을 찾고 그 때의 비용은 얼마인지 찾음
            for (int j = 0; j < N; j++) {
                // !visited[j]: 정점 i가 mst에 포함이 안됐고
                if (!visited[j] && minCost > minEdge[j]) {
                    minCost = minEdge[j]; // 최소 간선 비용
                    minVertex = j; // 최소 간선 비용을 가지는 정점의 번호
                }
            }

            visited[minVertex] = true; // 신장트리에 포함시킴
            result += minCost; // 간선비용 누적

            // 2. 선택된 정점 기준으로 신장트리에 연결되지 않은 타 정점과의 간선 비용 최소로 업데이트
            // 새로 찾은 정점(minVertex)과 연결된 다른 정점들과의 최소 간선 비용을 업데이트
            for (int j = 0; j < N; j++) {

                // adjMatrix[minVertex][j] != 0 : 0이 아니라는 것은 인접해야 한다는 뜻
                if (!visited[j] && adjMatrix[minVertex][j] != 0 && minEdge[j] > adjMatrix[minVertex][j]) {
                    minEdge[j] = adjMatrix[minVertex][j];
                }

            }
        }

        System.out.println(result);
    }

}

💡 Learned

count: 조각난 개수 numOfBars: 레이저가 자르는 그 시점의 막대기의 개수

1. '(' 만나면 numOfBars++
2. ')' 만나면 막대기의 끝을 의미 => count++ and numOfBars--
3. '*' 레이저 만나면 막대기 수 만큼 count 증가 (예를들어 막대기가 3개면 count+=3)

• 레이저를 '*' 로 치환하는 작업이 핵심이 아닐까 싶습니다. '(' 와 ')'로 이루어졌기 때문에 레이저를 구분한 것이 문제를 분석하기 쉽게 만들어 줍니다.
• 위의 3가지 특이점을 발견하는 것이 쉬운 일은 아니지만 규칙성을 찾으려고 노력해야 합니다.

📑 Submitted

(JAVA)

import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.InputStreamReader;
// 쇠막대기 자르기
public class SWEA5432 {

    public static void main(String[] args) throws Exception {
        System.setIn(new FileInputStream("res/sample_input2.txt"));
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        StringBuilder sb;
        int T = Integer.parseInt(br.readLine());
        int numOfLines = 0;
        for (int test_case = 1; test_case <= T; test_case++) {
            sb = new StringBuilder();
            int cnt = 0; // 조각난 개수
            String str = br.readLine();
            // '()' 레이저를 '@'으로 치환
            str = str.replace("()", "@");
            char[] temp = str.toCharArray();

            for (char c : temp) {
                switch (c) {
                case '(':
                    numOfLines++;
                    break;
                case ')':
                    cnt += 1; // 라인 하나 끝나면 +1
                    numOfLines--;
                    break;
                case '@':
                    cnt += numOfLines; // 레이저 만나면 라인 수 만큼 증가
                    break;
                }
            }

            sb.append("#" + test_case);
            sb.append(" ");
            sb.append(cnt);
            System.out.println(sb.toString());
        }

    }

}

(JS)

    function solution(s) {
      let answer = 0; // 카운트
      let numOfBars = 0; // 막대기 수
      s = s.replaceAll('()', '*'); // 레이저 치환

      for (const x of s) {
        switch (x) {
          case '(':
            numOfBars++;
            break;
          case ')':
            answer += 1; // 막대기 하나 끝나면 +1
            numOfBars--;
            break;
          case '*':
            answer += numOfBars; // 레이저 만나면 막대기 수 만큼 증가
            break;
        }
      }
      console.log(answer);
    }
    let str = "(((()(()()))(())()))(()())";
    solution(str);

💡 목표

• 그동안 알고 있던 프론트엔드 지식을 총망라해서 정리하고자 합니다.
• 향후에 계속해서 업데이트하면서 좋은 정리글을 만들고자 합니다.

🤔 동기

SSAFY 프론트엔드 시험을 앞두고 정리하면서 공부를 하려고 합니다.

HTML

😊 일단 기본 틀을 봅시다

• meta 태그 검색 최적화에 매우 중요합니다
• 페이지마다 신경써서 작성해주면 좋습니다

📃 시맨틱 HTML

시맨틱 태그를 사용해야하는 이유 1. 검색을 최적화 하기 위해서 시맨틱한 태그를 사용합니다. 2. 웹 접근성 때문에 -> 스크린리더나 키보드만을 이용해 웹사이트를 이용하는 경우가 있기 때문입니다. 3. 개발자를 위해서 -> 유지보수성을 높일 수 있습니다.

<section></section>
<aside></aside>
<nav></nav>
<article></article>

• sectioning tag를 잘 사용하여 시맨틱한 HTML을 작성해 봅시다.
• sectioning tag 즉, 위 태그들을 사용할 때 반드시 그 안에 heading tag를 작성해야 합니다.

    <section>
              <h1>메뉴</h1>
              ...
    </section>

• html에서 단 한개의 main만 사용할 수 있습니다. (main은 sectioning tag가 아닙니다. 고로, 반드시 heading tag를 넣을 필욘 없습니다.)
• html에서 논리적인 완결성이 있는 것은 div 보단 section으로 묶습니다. 예를 들면 트위터의 tweet form
• 컨텐츠로서 완결성이 있는 경우 section 보다는 article 블로그나 뉴스 기사 처럼
• aside : section이랑 비슷합니다. 논리적인 완결이 되었지만, 본문이랑은 직접적인 관련성이 없는 경우, 위젯이라던가 배너광고라던가 이런 뉘앙스를 살릴 때 사용합니다.

각종 태그들 알아봅시다!

🤔 여기서 잠깐,

block과 inline 태그 구분하고 넘어갑시다

📌 자주쓰는 것들 위주로 정리했습니다.

block 태그 > div p form h1~h6, 리스트 태그들(dl ol ul dt dd li)

1. 기본값이 block인 태그들입니다.
2. width, height값을 통해 크기를 지정할 수 있습니다.
3. 별도의 값을 주지않을 경우 width는 한줄 전체를 사용합니다.

inline 태그 > img a span input button br

1. 기본값이 inline인 태그들입니다.
2. 별도의 width, height 값을 설정해도 무시합니다.
3. 태그 내부에 내용만큼, 즉 필요한 최소 길이만큼만 공간을 차지합니다.
4. inline 요소들은 생성시 줄바꿈없이 이전 요소 바로 뒤에서 가로로 배치됩니다.

기본적인 태그들

• em태그와 i태그는 화면상으로는 똑같지만 스크린리더로 읽는다면? i태그는 평범하게 읽히겠지만, em태그는 강조되서 읽힙니다.
• b와 strong 태그도 마찬가지! (b는 시각적으로만, strong은 정말 중요한 강조하는 내용이 있을 때 사용합니다.)

• img 태그에 alt값 쓸말 없어도 "" 빈 문자열로 처리해줍니다.

• dl의 자식요소는 오직 div, dt, dd만 가능합니다.
• dt와 dd는 반드시 dl의 자식요소로 존재해야 합니다.

💻 form 태그

<form action="API주소" method="GET | POST"></form>

• label의 for 속성과 input의 id 속성을 매칭 시켜줍니다.
• form의 메소드는 두가지 방식이 있습니다. GET : 눈에 보인다. URL 쿼리스트링에 포함되어 전송됨. 길이제한이 있다. POST : 눈에 보이지 않는다. 헤더에 포함되어 전송됨. 길이제한이 없다.

🔴 Radio & Checkbox & Select 🔴

📌 Radio

📌 Checkbox

📌 Select

audio & video & iframe 등 미디어 태그!

table 태그!

• 최신에는 직접 table 태그를 사용하기보다 flexbox나 grid같은 css 속성을 이용합니다.

• 파이프라인의 최대 개수를 구하려면 맨 윗 행부터 돌려야 최대값을 구할 수 있습니다.
• dfs

📑 Submitted

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.util.StringTokenizer;

public class Main {

    static int R, C;
    static char[][] map;
    static int[] dir = { -1, 0, 1 }; // 우상, 우, 우하 // y값은 기존값에 +1만 해주면 됨.
    static int answer; // 답. 완성된 파이프라인 수

    public static void main(String[] args) throws Exception {

        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        StringTokenizer st = new StringTokenizer(br.readLine());

        R = Integer.parseInt(st.nextToken()); // 행
        C = Integer.parseInt(st.nextToken()); // 열

        map = new char[R][C];
        for (int i = 0; i < R; i++) {
            map[i] = br.readLine().toCharArray();
        } // 입력

        // 맨윗줄 첫번째 열에서부터 검사(0,0 -> 1,0 -> 2,0)
        // 중요: 맨 윗 행부터 돌아야 최대값을 구할 수 있음
        for (int i = 0; i < R; i++) {
            connect(i, 0); // 행값, 열값
        }

        System.out.println(answer);
    }

    // (x,y) 위치에서부터 출발해서 3방향을 탐색후 끝열에 도착 가능한지 여부를 알려주는 메소드
    private static boolean connect(int x, int y) {

        // 1. 종료조건: 끝열에 도착한 경우. 파이프라인 한개 완성
        if (y == C - 1) {
            answer++;
            return true;
        }

        // 2. 반복조건: 끝에 아직 도달을 안해서 3방향을 체크 하면서 나가는 작업
        // 3방향 중에서 한방향이라도 성공을 하면 다른 방향은 시도하면 안됨
        for (int d = 0; d < 3; d++) { // 우상 --> 우 --> 우하
            int nx = x + dir[d];
            int ny = y + 1;

            if (nx >= 0 && ny >= 0 && nx < R && ny < C && map[nx][ny] != 'x') {
                map[nx][ny] = 'x'; // 여기 지나갔습니다. 마킹!
                boolean result = connect(nx, ny);
                if (result) {
                    return true;
                }
            }
        } // for문 끝
            // 3방향 모두 끝까지 도달못하면
        return false;

    }

}

💡 Learned

• 왼쪽 옆에 있는 탑이 현재 탑의 높이보다 작으면, 앞으로도 어떠한 신호도 수신할 수 없으므로 스택에서 pop 합니다.
• 현재 탑의 높이보다 크면 뒤에 오는 탑들의 신호도 수신 가능하므로 peek 합니다. (스택에 계속 남아있습니다.)

📑 Submitted

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.Stack;
import java.util.StringTokenizer;

public class Main {

    public static void main(String[] args) throws NumberFormatException, IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        int N = Integer.parseInt(br.readLine());

        Stack<int[]> top = new Stack<>();
        StringTokenizer st = new StringTokenizer(br.readLine());

        for (int i = 0; i < N; i++) {
            int height = Integer.parseInt(st.nextToken());

            while (!top.isEmpty()) {
                if (top.peek()[0] < height) // 왼쪽 옆에 있는 탑이 현재 탑의 높이보다 작으면, 어떠한 신호도 수신할 수 없으므로 pop!
                    top.pop();
                else { // 현재 탑의 높이보다 크다면, 해당 탑의 번호를 출력한다.
                    System.out.print(top.peek()[1] + " ");
                    break;
                }
            }

            if (top.empty()) // 탑이 비었다면 0을 출력한다.
                System.out.print("0 ");
            top.push(new int[] { height, i + 1 }); // 탑의 높이와 탑의 인덱스 순
        }

    }

}

평탄화 작업을 할 때 정렬을 먼저 하면 배열의 마지막 요소와 처음 요소를 이용해 쉽게 접근이 가능했습니다.

📑 Submitted

import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.util.Arrays;
import java.util.Scanner;

public class Solution {

    public static void main(String[] args) throws Exception {

        Scanner sc = new Scanner(System.in);

        for (int tc = 1; tc <= 10; tc++) {
            int cnt = sc.nextInt(); // 덤프횟수 1~1000

            int[] nums = new int[100]; // 가로 방향은 100
            for (int i = 0; i < nums.length; i++) {
                nums[i] = sc.nextInt();
            }

            // 평탄화 작업
            while (true) {
                Arrays.sort(nums); // 정렬하기

                int high = nums[99] - nums[0]; // 최고점과 최저점의 차이

                if (high <= 1 || cnt <= 0) { // 평탄화 완료 혹은 덤프횟수를 다 쓴 경우
                    System.out.println("#" + tc + " " + high);
                    break;
                }
                // 평탄화 완료가 아직이고 or 덤프횟수가 남은 경우
                cnt--;
                nums[99]--;
                nums[0]++;
            }
        }
        sc.close();
    }
}