jjo-niixx.log

React, TypeScript, Styled-Components (with CRA)

Tue, 26 Jan 2021 10:36:30 GMT

React, TypeScript, Redux Middleware, Styled-Components를 통해 개인 프로젝트를 만들어보려 한다. 이곳에 차근차근 정리해야지 ^_^

1. 라이브러리 설치

타입스크립트

타입스크립트로 새로운 create-react-app 프로젝트를 생성하고 싶다면

npx create-react-app <프로젝트> --template typescript

스타일 컴포넌트

npm install --save @types/styled-components

스타일 리셋

npm install --save styled-reset

리액트 라우터 돔

npm install --save @types/react-router-dom

리덕스

npm install --save @types/redux
npm install --save @types/react-redux

2. 불필요한 파일 삭제

public 내부: index.html의 주석, logo.png, manifest.json, robots.txt
src 내부: App.test.tsx, App.css, index.css, logo.svg, setupTests.ts

react-app-env.d.ts 역할

이 파일은 src 폴더 안에 존재하는데 CRA로 만들어진 프로젝트에 특정하는 타입스크립트 타입 유형을 알려준다. 여기에 있는 타입 유형은 bmp, gif, jpeg, jpg, png, webp, svg와 같은 파일의 임포트를 지원해준다.

import logo from './logo.svg';

결국 위와 같은 형태의 임포트를 지원하는 것.

에러를 피하기 위해서 지우지 않는 것을 추천한다.

reportWebVitals.ts 역할

CRA 프로젝트의 성능과 responsiveness를 측정하게끔 도와주는 역할을 한다. to be continue

HTTP

Tue, 26 Jan 2021 09:46:15 GMT

HTTP

HyperText Transfer Protocol
하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 protocol(통신 규약).
- 즉 웹상에서 네트워크로 서버끼리 통신을 할때 어떠한 형식으로 서로 통신을 하자고 규정해 놓은 “통신 형식” 혹은 “통신 구조” 라고 보면 된다.
- 프론트앤드 서버와 클라이언트간의 통신에 사용된다.
- 또한 백앤드와 프론트앤드 서버간에의 통신에도 사용된다.
HTTP는 TCP/IP 기반으로 되어있다.

HTTP 핵심 요소

HTTP 통신 방식

HTTP 기본적으로 요청/응답 (request/response) 구조로 되어있다.
- 클라이언트가 HTTP request를 서버에 보내면 서버는 HTTP response를 보내는 구조.
- 클라이언트와 서버의 모든 통신이 요청과 응답으로 이루어 진다.
- HTTP는 Stateless 이다.
Stateless 란 말그대로 state(상태)를 저장하지 않는 다는 뜻.
즉, 요청이 오면 그에 응답을 할뿐, 여러 요청/응답 끼리 연결되어 있지 않다는 뜻이다. 즉 각각의 요청/응답은 독립적인 요청/응답 이다.
예를 들어, 클라이언트가 요청을 보내고 응답을 받은후, 조금 있다 다시 요청을 보낼때, 전에 보낸 요청/응답에 대해 알지 못한다는 뜻이다.
그래서 만일 여러 요청과응답 의 진행과정이나 데이터가 필요할때는 쿠키나 세션 등등을 사용하게 된다.

HTTP Request 구조

HTTP request 메세지는 크게 3부분으로 구성된다:
- status line
- headers
- body

HTTP Response 구조

Response도 request와 마찬가지로 크게 3부분으로 구성되어 있다.
- status line
- Headers
- Body

Pattern Matching 알고리즘

Sun, 24 Jan 2021 07:48:59 GMT

문제

하나의 긴 문자열에 배열 안의 단어가 포함되어 있으면 true, 포함되어 있지 않으면 false를 반환하라. 이때 string match 메소드는 사용하지 않도록 한다.

checkString("abcdabce", ["abcd", "abce"]); // returns [true, true]
checkString("abcababcde", ["abc"]) // returns [true]
checkString("i am gonna be a frontend developer", ["i", "gonna", "backend"]); // returns [true, true, false]

나의 풀이

🙅🏻‍♀️ 나의 첫 번째 풀이

function checkString(largeStr, smallStr) {
  const length = largeStr.length;
  const arr = smallStr.map((str) => {
    for (let i = 0; i < length; i++) {
      if (largeStr[i] === str[0]) {
        for (let j = 0; j < str.length; j++) {
          if (largeStr[i + j] !== str[j]) return false;
        }
        return true;
      }
    }
  });
  return arr;
}

결론부터 말하자면 이 풀이는 틀렸다. 그리고 비효율적이다.

largeStr을 하나하나 탐색하며 smallStr의 요소의 0번째 인덱스와 일치하면 그 요소의 길이만큼 탐색을 시작해 단 하나라도 다르면 false를 반환하는 것이다. 여기서 문제는 largeStr에 반복되는 문자열이 있을 경우다. "abcdabce" 과 ["abcd", "abce"] 를 비교할 때 [true, false] 가 나온다. 그 이유는 smallStr의 요소의 0번째 인덱스가 largeStr의 일부와 일치하는 곳이 두 부분인데 지금의 로직대로라면 앞 부분과만 비교를 하기 때문이다.

그리고 비교를 할 때마다 largeStr의 처음부터 검색하고 인덱스를 1씩 옮기므로 비효율적이다. 만약에 smallStr의 요소와 largeStr이 일치하지 않더라도 끝까지 하나하나 탐색할 것이다.

🙆🏻‍♀️ 나의 두 번째 풀이

function checkString(largeStr, smallStr) {
  const length = largeStr.length;
  const arr = smallStr.map((str) => {
    let check = true;
    for (let i = 0; i < length; i++) {
      if (largeStr[i] === str[0]) {
        for (let j = 1; j < str.length; j++) {
          if (largeStr[i + j] !== str[j]) {
            check = false;
            break;
          }
          check = true;
        }
        if (check) return true;
      }
    }
    return check;
  });
  return arr;
}

break문, continue문

break문을 쓸 때: 가장 가까운 while, do-while, for, 또는 switch문을 종료하고 다음 명령어로 넘어갑니다.
continue를 사용하는 경우, 그것은 가장 안쪽의 while, do-while, for 문을 둘러싼 현재 반복을 종료하고, 다음 반복으로 루프의 실행을 계속합니다. break문과 달리, continue 문은 전체 루프의 실행을 종료하지 않습니다. while 루프에서 그것은 다시 조건으로 이동합니다. for 루프에서 그것은 증가 표현으로 이동합니다.

나의 첫 번째 풀이가 비효율적이라는 것은 알지만 최대한 풀이를 활용하고 싶어서 break 를 써보았다. 전처럼 검색하는 문자가 다를 때 바로 리턴하지 않고 check 변수에 false를 할당하며 두 번째 for 문을 빠져나간다. 그리고 리턴되지 않았으니 끝까지 탐색하게 만든다.

KMP 알고리즘

Fri, 22 Jan 2021 14:50:27 GMT

KMP Algorithm

미리 알아야할 개념

접두사(prefix)

AABAABAC의 접두사: A / AA / AAB / AABA / AABAA / AABAAB / AABAABA / AABAABAC

접미사(suffix)

AABAABAC의 접미사: C / AC / BAC / ABAC / AABAC / BAABAC / ABAABAC / AABAABAC

pi 배열

부분 문자열 중에서 접두사도 되고 접미사도 되는 문자열의 최대 길이

pi[0] = 0 → A의 접두사도 되고 접미사도 되는 문자열의 최대 길이

pi[1] = 1 → AA의 접두사도 되고 접미사도 되는 문자열의 최대 길이

pi[2] = 0 → AAB의 접두사도 되고 접미사도 되는 문자열의 최대 길이

pi[3] = 1 → AABA의 접두사도 되고 접미사도 되는 문자열의 최대 길이

pi[4] = 2 → AABAA의 접두사도 되고 접미사도 되는 문자열의 최대 길이

pi[5] = 3 → AABAAB의 접두사도 되고 접미사도 되는 문자열의 최대 길이

pi[6] = 4 → AABAABA의 접두사도 되고 접미사도 되는 문자열의 최대 길이

pi[7] = 0 → AABAABAC의 접두사도 되고 접미사도 되는 문자열의 최대 길이

KMP 알고리즘의 원리

KMP 알고리즘은 검색 과정에서 얻는 정보를 버리지 않고 활용해서 시간을 절약한다. 즉, 불일치가 일어났을 때 지금까지 일치한 글자의 수를 이용해 시도해야할 시작 위치를 빠르게 찾아낸다.

// 예를 들어 ABCAABAABACAABC(텍스트)에서 AABAABAC(패턴)가 어디에 있는지 찾는다고 가정해보자.

// 보통 하나하나 탐색한다고 하면 이런 식으로 풀이가 진행될 것이다.
A | B | C | A | A | B | A | A | B | A | C | A | A | B | C |
A | A | B | A | A | B | A | C

A | B | C | A | A | B | A | A | B | A | C | A | A | B | C |
    A | A | B | A | A | B | A | C

A | B | C | A | A | B | A | A | B | A | C | A | A | B | C |
        A | A | B | A | A | B | A | C

A | B | C | A | A | B | A | A | B | A | C | A | A | B | C |
            A | A | B | A | A | B | A | C

위와 같은 풀이에서 텍스트의 길이가 N, 패턴의 길이가 M이라고 했을 때 텍스트의 각 인덱스에 대해 패턴을 검색하므로 시간 복잡도는 O(NM)이 된다.

이 풀이에서는 검색을 할 때마다 틀린 부분에 집중하며 검색을 한다.

// KMP 알고리즘을 이용해서 풀면 아래와 같은 탐색을 하면 된다.
A | B | C | A | A | B | A | A | B | A | C | A | A | B | C |
A | A | B | A | A | B | A | C

A | B | C | A | A | B | A | A | B | A | C | A | A | B | C |
            A | A | B | A | A | B | A | C

KMP 알고리즘을 이용한다면 위와 같은 풀이로 될 것이고, 시간 복잡도는 O(N+M)이 된다.

이 풀이를 사용해서 얻은 장점은 명확하다. 원래 처럼 인덱스를 하나 하나 옮기며 비교한 것이 아니라 전에 했던 비교를 통해서 알게 된 부분을 활용하고 있다.

첫 번째 검색에서 알게된 사실은 패턴에서 pi[5] = 4라는 것과 텍스트와 패턴의 비교에서 연속하는 AABA가 매치되었다는 것이다. 텍스트와 패턴이 일치하기 위해서는 AABA 접두사부터 시작해야한다. 그리고 텍스트와 패턴이 일치하는 부분에서 AABA가 존재한다. 그러므로 다음 검색부터는 텍스트 기준 3번 째 인덱스부터 검색을 시작해도 좋다.

Even Binary Sorting

Sun, 17 Jan 2021 14:58:59 GMT

🙅🏻‍♀️ 나의 첫 번째 풀이

function evenBinary(n) {
  const splittedN = n.split(" ");
  const sortedEvenArr = splittedN.filter((num) => num[2] === `0`).sort();
  let evenArrIdx = 0;
  for (let i = 0; i < splittedN.length; i++) {
    if (splittedN[i][2] === `0`) {
      splittedN.splice(
        splittedN.indexOf(splittedN[i]),
        1,
        sortedEvenArr[evenArrIdx]
      );
      evenArrIdx++;
    }
  }
  return splittedN;
}

🙆🏻‍♀️ 나의 두 번째 풀이

function evenBinary(n) {
  const splittedN = n.split(" ");
  const sortedEvenArr = splittedN.filter((num) => num[2] === `0`).sort();
  let evenArrIdx = 0;
  for (let i = 0; i < splittedN.length; i++) {
    if (splittedN[i][2] === `0`) {
      splittedN.splice(i, 1, sortedEvenArr[evenArrIdx]);
      evenArrIdx++;
    }
  }
  return splittedN;
}

브라우저에 URL 입력 후 일어나는 일

Fri, 15 Jan 2021 04:33:08 GMT

이 포스팅을 참고하여 번역한 글입니다.

1. 브라우저의 주소창에 maps.google.com을 입력한다.

2. 브라우저는 maps.google.com에 상응하는 IP 주소를 찾기 위해서 DNS 기록 캐시를 확인한다.

DNS(Domain Name System)은 웹사이트의 이름(URL)과 그것이 연결된 IP 주소를 갖고 있는 데이터베이스이다. 모든 URL은 자신만의 IP 주소를 가지고 있다. 이때 IP 주소는 우리가 접속하려하는 웹사이트의 서버를 가지고 있는 컴퓨터에 있다.

DNS의 주목적은 인간 친화적인 저장소이다. 원하는 웹사이트에 IP 주소를 브라우저에 입력해서 접근할 수 있다. 하지만 많은 숫자의 조합으로 되어있는 IP 주소를 모두 기억할 수 있을까? 아닐 것이다. 그러므로 URL을 이용해 웹사이트의 이름을 기억하는 것이 더 쉽고, DNS가 URL을 올바른 IP와 이어주는 일을 담당하게 된다.

DNS 기록을 찾기 위해서 브라우저는 browser → OS → router → ISP순으로 확인한다. 흠.. 왜 이렇게 많은 단계에 캐시가 저장되어 있는 것일까? 프라이빗한 정보라면 불안할 수도 있지만, 캐시는 네트워크 트래픽을 통제하고 데이터 전송 시간을 높이는데 필수적으로 필요하기 때문이다.

3. 만약에 요청한 URL이 캐시에 없다면 ISP의 DNS 서버는 maps.google.com을 갖는 서버의 IP 주소를 찾기 위해 DNS query를 시작한다.

내 컴퓨터가 maps.google.com을 호스트하는 서버와 통신하기 위해서 IP 주소가 필요하다. DNS 쿼리의 목적은 올바른 IP 주소를 찾을 때까지 인터넷에 있는 많은 DNS 서버를 검색하는 것이다. 이런 식의 검색을 recursive search (반복되는 검색) 라고 한다. 이 검색은 한 DNS 서버에서 다른 DNS 서버로 옮겨가며 IP 주소를 찾을 때까지 혹은 못 찾겠다는 응답을 반환할 때까지 계속하게 된다.

이러한 상황에서 ISP의 DNS 서버를 DNS resursor라고 부른다. 이 서버는 인터넷에 있는 다른 DNS 서버에 물어봄으로써 도메인 이름에 대한 적절한 IP 주소를 찾아야 한다. 이때 다른 DNS 서버는 name server라고 부르는데 웹사이트의 도메인 이름의 구조를 기반으로해서 DNS 검색을 수행하기 때문이다.

위 그림은 도메인 구조에 대한 설명이다. 오늘날 우리가 접하는 URL은 대부분 third-level, second-level, top-level 도메인을 가지고 있고, 각 도메인은 DNS 검색 과정 동안 쿼리하는 자신만의 name serer를 가진다.

maps.google.com을 예로 들어보자. 첫 번째로 DNS recursor는 루트 네임 서버에 접촉한다. 루트 네임 서버는 .com 도메인 네임 서버로 다시 보낸다. .com 네임 서버는 google.com 네임 서버로 다시 보낸다. google.com 네임 서버는 자신의 DNS 기록에서 maps.google.com에 매칭하는 IP 주소를 찾을 것이고 DNS resursor에 반환하게 된다. 그리고 DNS recursor는 브라우저에 IP 주소를 보내게 된다.

4. 브라우저는 서버와 TCP 통신을 시작한다.

브라우저가 올바른 IP 주소를 받으면, IP 주소가 일치하는 서버와 정보 전달을 위한 연결을 시도한다. 브라우저는 그러한 연결을 위해 인터넷 프로토콜을 사용한다. 여기에 사용되는 인터넷 프로토콜 중에 TCP가 HTTP 요청을 위채 사용되는 가장 흔한 방법인다.

컴퓨터와 서버간의 데이터 패킷 전송을 위해 TCP 연결이 만들어지는 것이 가장 중요하다. 이 연결은 TCP/IP three-way handshake과정을 통해 만들어진다. 이것은 클라이언트와 서버가 연결 하기 위해서 SYN(synchronize), ACK(acknowledge) 메세지를 교환하는 과정을 의미한다.

클라이언트 기계는 서버가 새 연결을 위해 열려있는지 물어보며 서버에 SYN 패킷을 보낸다.
만약 서버가 새 연결을 시작할 수 있는 오픈 포트를 가진다면, SYN/ACK 패킷을 사용하여 SYN 패킷의 ACKnowledgement로 응답한다.
클라이언트가 서버로부터 SYN/ACK 패킷을 받을 것이고 서버에 ACK 패킷을 보냄으로써 받았음을 알려줄 것이다.

그러면 데이터 전송을 위한 TCP 통신이 이루어진다!!

5. 브라우저는 웹 서버에 HTTP 요청을 보낸다.

자 TCP 연결이 되면 데이터를 전송할 때다. 브라우저는 maps.google.com 페이지에 대해 묻는 GET 요청을 보낼 것이다. 만약에 증명 정보를 입력하거나 폼을 제출한다면 이 요청은 POST가 될 것이다. 이 요청은 브라우저 식별 정보(User-Agent header), 수락에 대한 요청(Accept header), TCP 연결을 유지하도록 요청하는 connection header 등에 대한 추가적인 정보를 가질 수 있다. 또한 브라우저가 도메인 저장소에 갖는 쿠키로부터 가져온 정보를 넘길 수도 있다.

아래 그림은 GET 요청에 대한 예시이다.

6. 서버는 요청을 처리하고 응답을 다시 보낸다.

7. 서버는 HTTP 응답을 내보낸다.

서버 응답은 요청한 페이지와 함께 status code, compression type(Content-Encoding), 페이지를 캐시하는 법(Cache-Control), 프라이빗 정보 등을 담고 있다.

아래 그림은 HTTP 서버 응답에 대한 예시이다.

8. 브라우저는 HTML 컨텐츠를 표시한다.

브라우저는 HTML 내용을 표시한다. 첫 번째로 HTML 뼈대만 렌더한다. 그리고 HTML 태그를 확인하고 이미지, CSS stylesheet, JavaScript 파일과 같은 추가적인 요소에 대한 GET 요청을 내보낸다. static file(js, css, image 등과 같이 개발자가 사전에 미리 서버에 저장 해둔 파일)은 브라우저에 의해 캐시되기 때문에 다음에 동일한 페이지를 방문했을 때 그것들을 다시 fetch할 필요가 없는 것이다.

Multiples of 3 or 5

Mon, 11 Jan 2021 14:59:32 GMT

문제

number가 인자로 주어질 때, number 미만의 수 중에서 3과 5의 배수의 합을 구하여라. 이때 각 배수는 딱 한 번씩만 세어진다. number가 음수라면 0을 반환한다.

solution (10) // returns 23

나의 풀이

🙆🏻‍♀️ 나의 첫 번째 풀이

function solution(number) {
  let sum = 0;
  if (number < 0) {
    return sum;
  } else {
    for (let i = 1; i < number; i++) {
      if (i % 3 === 0 || i % 5 == 0) {
        sum += i;
      }
    }
    return sum;
  }
}

✅ 첫 번째 풀이 리팩토링

사실 원래 풀이에서 number가 음수일 때를 조건으로 나누었는데 그럴 필요가 없었다. for문에서 i의 시작값을 1로 했고 number가 1보다 작다면 조건에 충족이 되지 않아 연산이 될 이유가 없기 때문이다.

for문에서 if문을 삼항연산자로 바꿀 수 있을 것 같아 바꿔보았다.

function solution(number) {
  let sum = 0;
  for (let i = 1; i < number; i++) {
    i % 3 === 0 || i % 5 == 0 ? (sum += i) : sum;
  }
  return sum;
}

Calculating with Functions

Tue, 05 Jan 2021 01:30:30 GMT

문제

함수 이름에 맞는 숫자 및 연산자가 리턴되게끔 만들어야 한다. 반드시 2개의 숫자, 연산자가 나온다.

seven(times(five())); // must return 35
four(plus(nine())); // must return 13
eight(minus(three())); // must return 5
six(dividedBy(two())); // must return 3
eight(dividedBy(three())); // must return 2

나의 풀이

🙆🏻‍♀️ 나의 첫 번째 풀이

우선 리팩토링이 필요할 것 같지만,, 첫 번째 풀이는 이러하다. 숫자 함수는 인자 유무에 따라 리턴 값이 달라진다. 똑같은 로직이지만 인자에 따라 다른 값을 원했기 때문에 operation 함수를 이용했고, 두 가지 경우의 수가 있기 때문에 두 개의 인자를 받게 했다.

결과적으로 "5*6"과 같은 스트링이 operation의 최종 리턴 값으로 나왔는데 eval()을 이용해서 문제를 해결했다.

💡 eval() 문자로 표현된 JavaScript 코드를 실행하는 함수.

아마 이 함수는 쓰지 말아야할 것 같다. 방금 찾아보니 이 함수를 쓰는 것은 엄청나게 위험하며 해커가 위험한 코드를 사용할 수 있어 절대 사용하지 말라고 MDN에서 일러준다....

function zero(left) {
  return operation(left, 0);
}
function one(left) {
  return operation(left, 1);
}
function two(left) {
  return operation(left, 2);
}
function three(left) {
  return operation(left, 3);
}
function four(left) {
  return operation(left, 4);
}
function five(left) {
  return operation(left, 5);
}
function six(left) {
  return operation(left, 6);
}
function seven(left) {
  return operation(left, 7);
}
function eight(left) {
  return operation(left, 8);
}
function nine(left) {
  return operation(left, 9);
}

function operation(left, num) {
  return left ? Math.floor(eval(num + left)) : num;
}

function plus(right) {
  return "+" + right;
}
function minus(right) {
  return "-" + right;
}
function times(right) {
  return "*" + right;
}
function dividedBy(right) {
  return "/" + right;
}

Roman Numerals Decoder

Sat, 02 Jan 2021 12:56:20 GMT

문제

로마 숫자를 정수로 변환 해야한다. 여기서 각 자리 문자의 변환값이 내림차순이라면 +, 오름차순이라면 -

Symbol    Value
 I          1
 V          5
 X          10
 L          50
 C          100
 D          500
 M          1,000

solution('XXI'); // should return 21
solution('IV'); // should return 4

나의 풀이

🙆🏻‍♀️ 첫 번째 풀이

각 자리의 문자를 숫자로 변환하는 것을 고민했는데 역시나 이럴 때는 객체만한 것이 없는 것 같다.

일단 split한 인자의 value를 구해서 더했는데, 이 문제의 핵심은 오름차순인 경우에는 어떻게 처리할 것인가다. 단순히 이전 인덱스의 값이 더 작다면 빼고, 아니면 더하는 로직을 구현했다.

여기서 사실 splitted는 필요 없다. string 또한 index를 가지기 때문에 for문으로 한 요소씩 loop할 수 있다. 항상 for문을 쓰면 split을 습관적으로 쓴다는 것이 문제.. 명심하자.

function solution(roman) {
   const value = { I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000 };
   const splitted = roman.split("");
  let result = 0;
  for (let i = 0; i < splitted.length; i++) {
    if (value[splitted[i]] < value[splitted[i + 1]]) {
      result -= value[splitted[i]];
    } else result += value[splitted[i]];
  }
  return result;
}

✅ 첫 번째 풀이 리팩토링

function solution(roman) {
  const value = { I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000 };
  let result = 0;
  for (let i = 0; i < roman.length; i++) {
    value[roman[i]] < value[roman[i + 1]]
      ? (result -= value[roman[i]])
      : (result += value[roman[i]]);
  }
  return result;
}

Where my anagrams at?

Sun, 20 Dec 2020 07:18:22 GMT

문제

💡 anagram이란 무엇일까? 두 개의 단어가 서로 똑같은 문자를 가지고 있을 때 서로의 anagram이라 일컫는다.

word의 문자와 똑같은 문자로 구성된 words의 요소를 찾아라. 이때 문자의 종류는 똑같아야 하지만 순서는 달라도 된다.

anagrams('abba', ['aabb', 'abcd', 'bbaa', 'dada']) => ['aabb', 'bbaa']

anagrams('racer', ['crazer', 'carer', 'racar', 'caers', 'racer']) => ['carer', 'racer']

anagrams('laser', ['lazing', 'lazy',  'lacer']) => []

나의 풀이

🙆🏻‍♀️ 첫 번째 풀이

맨 처음에 sortedWord와 sortedWords를 만들 때 join을 이용하지 않고 각각의 배열을 비교했다. 그랬더니 문자 구성이 같더라도 두 배열은 다르다는 결과값이 나왔다. 그 이유는 두 배열이 똑같이 생겼더라도 다른 주소를 참조했기 때문이다. 그래서 join을 사용하여 타입을 바꿔버렸더니 비교가 한층 수월했다.

다시 한 번 기억하자. 두 배열을 서로 비교할 때는 많은 고려사항이 따른다. 적극적으로 타입을 바꾸려는 노력을 하자.

function anagrams(word, words) {
  let result = [];
  const sortedWord = word.split("").sort().join("");
  for (let i = 0; i < words.length; i++) {
    let sortedWords = words[i].split("").sort().join("");
    if (sortedWord === sortedWords) {
      result.push(words[i]);
    }
  }
  return result;
}

클로저

Sat, 19 Dec 2020 14:24:24 GMT

클로저

어떤 함수 A에서 선언한 변수 b를 참조하는 내부함수 C를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 b가 사라지지 않는 현상 - 코어 자바스크립트 👍

클로저 정의 from 다양한 서적

✔️ 클로저는 함수와 그 함수가 선언될 당시의 lexical environment의 상호관계에 따른 현상 ✔️ 자신을 내포하는 함수의 컨텍스트에 접근할 수 있는 함수 ✔️ 함수가 특정 스코프에 접근할 수 있도록 의도적으로 그 스코프에서 정의하는 것 ✔️ 함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수 ✔️ 이미 생명 주기상 끝난 외부 함수의 변수를 참조하는 함수 ✔️ 자유변수가 있는 함수와 자유변수를 알 수 있는 환경의 결합

클로저 활용 사례

콜백 함수 내부에서 외부 데이터를 사용하고자 할 때
접근 권한 제어(정보 은닉)
부분 적용 함수
커링 함수

어떤 개발자가 되고 싶은가

Thu, 17 Dec 2020 05:03:13 GMT

최근 구직 활동에 박차를 가하고 있다. 위코드에서 공부하는 동안 놓친 개념도 많기 때문에 웹과 자바스크립트, 리액트 책을 구매해서 기본기를 다지는 중이다. 위코드 동기들과 함께 취업 준비를 하면서 정말 재밌고 지치지 않는 하루하루를 보내고 있다. 역시 함께 할 수 있ABILITY

지원을 하고, 코테를 치르고, 과제를 하고, 또 지원하는 하루하루의 연속이고, 최근에는 정말 감사하게도 여러 군데에서 연락을 주셔서 면접도 바쁘게 보러 다니고 있다. 어쩌면 내 인생에서 마주치기도 힘든, 각자의 위치에서 최고의 자리에 오른 분들과 서로의 가치관, 인생에 대해서 몇 시간씩 이야기를 나눌 기회가 정말 소중하고 감사하다.

어제 본 면접에서 기술이 아닌 나에 대한 질문이 대부분이었다. 사실 기술 면접인 줄 알고 개념 정독 및 알고리즘 문제를 준비했는데.. 예상을 빗나갔지만, 면접관분들이 편안한 분위기를 조성해주셔서 나도 지인들과 대화를 하듯이 면접을 진행했다. 개인적으로 나는 말주변이 없는 편이라서 기술 질문보다 나에 대한 질문을 더 어려워하는 것 같다. 아무래도 면접이라 긴장을 해서인지 평소에 생각하던 것도 갑자기 적절한 단어가 생각 안 나던지 더듬거리거나 투머치 토커가 되기도 한다. 그래서 어제 받은 질문 중 앞으로 개발자로 살아가면서 생각해볼 만한 것들에 대해서 차분히 생각해봐야겠다.

어떤 개발자가 되고 싶은가

혼자 걸어가면 빨리 가지만 함께 걸어가면 멀리간다.

함께 하는 개발자가 되고 싶다. 팀 미션이 성공적으로 이루어지려면 각자의 위치에서 본인의 몫을 훌륭히 수행해야 하지만 그 이전에 나와 함께 가는 사람들도 어려움 없이 따라오는지 계속해서 살펴보아야 한다. 나는 그 사람들에게 잘 걸을 수 있는 비법을 공유하고, 힘들 때 북돋아 주고, 함께 더 좋은 방법을 생각하는 개발자가 되고 싶다.

이런 개발자가 되기 위해서 갖춰야 하는 조건은 무엇일까? 누가 뭐래도 본인의 프로그래밍 실력이 일순위일 것 같다. 끊임없이 부딪히고 받아들이고 탐구하며 단단한 실력을 만들자. 내가 맡은 부분은 어떻게든 소화를 해내는 능력은 갖추어야 한다. 그래야만 나조차도 주변을 살필 여유가 생기고 사람들도 나를 신뢰할 수 있을 것이다.

나는 위코드 생활을 하면서 이런 개발자가 되어야겠다고 다짐을 했던 것 같다. 동기들과 협업을 진행하면서 프로젝트 결과물을 완성할 때마다 서로의 성장하는 속도에 놀라곤 했었다. 하루에 12시간 넘게 붙어서 공부하면서 선의의 경쟁을 하고, 함께 에러 상황을 고민해주고, 새로운 개념을 서로 가르쳐주고 적용을 하면서 시너지를 발휘했고, 항상 한계를 뛰어 넘었다.

몇 년 후의 나는 어떤 개발자가 되어 있을까. 내가 바라던 대로 함께 하는 개발자가 되어있을까. 아마도 그럴 것이다. 혹은 더욱더 대단한 개발자..!

Split Strings

Thu, 17 Dec 2020 03:37:45 GMT

문제

매개변수 str를 2문자씩 짝지어라. 이때 str가 홀수 길이라면 짝지을 때 2번째 문자는 빈칸이므로 _로 대체해라

For example:
  solution('abc') // should return ['ab', 'c_']
  solution('abcdef') // should return ['ab', 'cd', 'ef']

문제 풀이

🙆🏻‍♀️ 첫 번째 풀이

쉬운 편이었던 것 같은데 이 풀이가 나오기 전에 크리티컬한 실수를 했다.

for문에서 i를 2씩 증가시키고 싶어서 i+2를 한 것..! 이렇게 하면 i에 2를 더하기만 하지 할당은 하지 않아서 결과적으로 내가 원하는 숫자를 얻을 수 없고 i는 계속 0으로 나올 것이다.

for 문에서 관례처럼 사용하는 i=i+1 => i+=1 => i++ 이 과정을 통해 만들어지는 것을 명심하자 ^_^

function solution(str) {
  let result = [];
  for (let i = 0; i < str.length; i += 2) {
    if (i === str.length - 1) {
      result.push(str.slice(i) + "_");
    } else {
      result.push(str.slice(i, i + 2));
    }
  }
  return result;
}

모범 답안

👍 첫 번째 모범 답안

function solution(str){
  var i = 0;
  var result = new Array();
  if (str.length % 2 !== 0) {
    str = str + '_';
  }
  while (i < str.length) {
      result.push(str[i] + str[i+1]);
      i += 2;
    }
  return result;
}

✔️ new Array()를 써서 빈 배열을 만들어 result에 할당했다. ✔️ str가 홀수라면 str+"_"로 해버려서 그 후의 연산을 쉽게 했다. ✔️ 내가 했듯이 slice 메소드를 굳이 쓸 필요가 없다. 그저 현재 인덱스, 다음 인덱스의 요소를 푸쉬!

✌️ 두 번째 모범 답안

function solution(s){
   return (s+"_").match(/.{2}/g)||[]
}

var vs let, const

Wed, 16 Dec 2020 07:32:11 GMT

JavaScript 를 공부하고 있는데 var, let, const도 확실하게 구분 못하는 내 자신을 보면서 반성을 많이 하게 된다.. ^_^

이번에 확실하게 짚고 넘어가자!

var

var의 첫 번째 문제: 함수 스코프

함수 스코프를 지니기 때문에 for 문, while 문, switch 문, if 문 내부에서 정의된 변수가 반복문이 끝난 이후에도 계속 남는 문제가 있다.

var의 두 번째 문제: 호이스팅

변수를 정의하기 전에 사용해도 에러가 발생하지 않음 (undefined로 나옴)

호이스팅 '끌어올리다'라는 의미로, 변수 정보를 수집하는 과정을 쉬운 방법으로 대체한 가상의 개념

자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행한다. 그렇기 때문에 변수 수집 과정을 모두 마쳐도 실행컨텍스트가 관여할 코드들은 실행되지 전의 상태

console.log(myVar) // undefined
var myVar = 1;
위 코드를 호이스팅 후에는 아래와 같이 된다고 생각하자.

var myVar = undefined;
console.log(myVar); // undefined
myVar = 1;
var 변수는 호이스팅 결과로 가장 최상단에서 선언되고 undefined로 초기화된다. 그러므로 1로 할당 하기 전에 사용하면 undefined가 나온다는 사실!

var의 세 번째 문제: 재정의 가능

변수를 정의한다는 것은 이전에 없던 변수를 생성한다는 의미이다. 하지만 var는 이전에 있던 변수도 재정의 할 수 있음 → 직관적이지 않음, 버그로 이어질 확률

var의 네 번째 문제: 재할당 가능

상수처럼 쓸 값도 무조건 재할당 가능한 변수로 만들어짐 → 코드 복잡, 가독성 떨어짐

let & const 공통점

블록 스코프

재정의 불가능

호이스팅

변수가 정의된 시점보다 먼저 변수를 사용하면 에러가 발생함 (참조 에러)

let과 const도 호이스팅? 이 된다! 변수가 할당되는 과정은 3단계를 거친다. 선언, 초기화, 할당 var는 선언(호이스팅)과 동시에 초기화가 되는 반면, let과 const는 선언과 초기화가 분리된다. 그리고 var와는 다르게 임시적 사각지대가 존재하게 된다.

임시적 사각지대(Temporal Dead Zone)란? 임시적 사각지대는 변수 초기화 전에 사용하는 것을 막는다. EX) let, const, class

const foo = 1;
{
  console.log(foo); // 참조에러
  const foo = 2;
}

만약 두 번째 foo가 호이스팅되지 않았다면 참조 에러는 발생하지 않고 첫 번째 foo의 값을 출력될 것이다. 하지만 두 번째 foo의 호이스팅 때문에 출력된 값은 두 번째 foo를 참조하게 되어 참조에러가 발생하는 것이다.

let vs const 다른 점

let은 재할당 가능 but const는 재할당 불가능

재할당 불가능한 변수는 프로그램의 복잡도를 상당히 낮춰주기 때문에 되도록이면 const를 사용하는 것이 좋음

HTML Critical Rendering Path

Tue, 15 Dec 2020 05:27:51 GMT

Critical Rendering Path

브라우저가 서버에서 페이지에 대한 HTML 응답을 받으면 화면에 표시되기 전에 많은 단계를 거쳐야 한다. 브라우저가 페이지의 초기 출력을 위해 실행해야하는 이 순서를 Critical Renderting Path라고 한다.

CRP의 단계

DOM 트리 구축 (Constructing the DOM Tree)
CSSOM 트리 구축 (Constructing the CSSOM Tree)
JavaScript 실행 (Running JavaScript)
Render Tree 생성 (Creating the Render Tree)
레이아웃 생성 (Generating the Layout)
페인팅 (Painting)

DOM 트리 구축

DOM(Document Object Model) 트리는 완전히 구문 분석된 HTML 페이지의 Object 표현이다.

루트 요소 html로 시작하여 페이지의 각 element/text에 대한 노드가 만들어진다. 각 노드에는 해당 요소의 전체 특성이 포함된다.

CSSOM 트리 구축

CSSOM(CSS Object Model)은 DOM과 연관된 스타일의 Object 표현이다. 이것은 DOM과 비슷한 방식으로 표현되지만 명시적 또는 암시적 선언과 상속 여부에 관계없이 각 노드의 관련 스타일로 표시된다.

JavaScript 실행

JavaScript는 "파서 차단 리소스(parser blocking resource)"로 간주된다. 즉, HTML 문서 자체의 구문 분석은 JavaScript에 의해 차단된다.

파서가 내부 태그이든 외부 태그이든