현명한 소의 기록장

입사 후 10.12까지 했던 일

• npm libs version upgrade
• Typescript install
• ESLint install & apply 
• README.md 생성

Project Version upgrade 하면서 배웠던 것 + 삽질

• Libs를 일괄 update하면 debugging하기 매우 어려울 수 있다
  • history lib은 react-router-dom과 version이 pair로 관리되어야 했음
    • 하지만 무조건 최신 버젼으로 올리다보니 bug가 발생했을 때 debugging이 매우 어려웠음

⇒ Lesson Learned

1. lib은 최상위 lib부터 순서대로 update 해가며 project에 version up에 따른 bug는 없는지 확인해가며 update하자

2. version 많이 뛴 libs들은 하나씩 update 해가자. 그리고 document 꼼꼼히 읽으면서 어떤 변화가 있는지 반드시 확인하기!

NPM 관련 명령어

npm outdated # 만료된 의존 라이브러리들 확인

npm install --force # 설치하려는 Lib과 의존관계에 있는 lib들을 함께 설치
npm install --legacy-peer-deps # 의존관계를 무시하고 우선 해당 Lib 설치

CRA에 ESLint & TS 적용

• CRA에서 ESLint 적용하니, lint 에러가 있으면 그냥 compile 자체를 막아버렸음
  • 해결 → https://velog.io/@warmwhiten/eslint%EA%B0%80-failed-to-compile%EC%9D%84-%EB%BF%9C%EB%8A%94%EB%8B%A4%EB%A9%B4

• TS config에 대한 이해 필요하다 느낌
• ESLint 설정에 대한 이해도 물론!

README.md 생성

• 현재 front team에 front를 전문적으로 하신 분이 없으셔서, eslint & ts를 처음 접하는 분딜이 계심
• 위에 대한 설명을 기록으로 남기고자 README.md를 생성함
• 개발자는 문서로 말한다

참고

https://velog.io/@yonyas/Fix-the-upstream-dependency-conflict-installing-NPM-packages-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%EA%B8%B0

새 회사에서 맡은 첫 일. 리팩토링!

⇒ application 유지 보수 및 개선에 용이하도록 기존 코드 리팩토링

현재 front app의 문제

• 코드 가독성이 떨어짐
  • view와 logic의 분리가 안되어 있음
  • 필요없는 코드도 많음
• 코드 일관성이 떨어짐
  • redux와 contextAPI가 함께 쓰임
  • 함수를 호출하는 방법도 일관적이지 않은 경우가 있음
• library의 version이 낮음
  • react는 16.13 버전 사용. 관련 다른 lib도 낮은 버전
  • redux도 classic한 방식(action type선언, action함수, reducer 별도 관리, reselect사용 x 등)으로 사용
• TS 적용 안되어 있음
  • 잦은 undefined error
  • 자동완성 기능 사용 X로인한 개발 비효율
• 코딩 컨벤션의 부재

리팩토링 방향

• view & logic의 분리. react component는 view에만 집중할 수 있도록!
• react & 관련 libs version upgrade
• redux로 전역상태관리 일원화
  • redux/toolkit 적용
• TS 적용
• Lint 적용

정보습득 순서

• 리팩토링 자체에 대한 정보 탐색(정의, 주의점 등)
• 린트 적용 → 참고한 링크
• 프로젝트에 TS 적용 → 참고 링크1 / 링크2
• contextAPI 탐색
• redux-toolkit 더 자세히 보기
• "변경에 유연한 컴포넌트" 글 읽기
• (후순위) css in js? css in js? 고민해보기

따라하고 있는 예제

https://velog.io/@suyeonme/React-Redux-toolkit%EC%97%90%EC%84%9C-%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

아래 부분에서 문제 발생

공식문서 보고 해결

https://redux-toolkit.js.org/usage/usage-with-typescript#type-safety-with-extrareducers

iterm2 꾸미기

https://ooeunz.tistory.com/21

git fork 쓰는 이유 & 기본 사용법

https://engineering-skcc.github.io/github%20pages/github-pages-fork-1/

불러오는 중입니다...

https://engineering-skcc.github.io/github%20pages/github-pages-fork-2/

불러오는 중입니다...

오늘의 개발자

학습방향

최신 기술보다 기본기가 훨씬 중요.

그렇다면 기본기는? 아래 정도는 반드시 필수!

• Core JavaScript
  • scope, closure, 실행 컨텍스트 등 기본
• DOM 제어
• 데이터 통신(CRUD)
• HTML, CSS. 무시하지 마라. 중요하다

알고리즘, 코딩테스트, CS 등

• 코테 난이도가 gray zone 정도인 문제를 푸는게 좋기는 함. 근데 1시간 이상 고민하지는 마라
  • Slow but Steady. 평소에 꾸준히 하는 것이 더 중요하다
  • CS도 마찬가지. 평소에 준비하라

구직 팁

핵심은 관심

• 이력서도 남들과 똑같이 말고, 나만의 방식으로 조금 더 신경써서 만들면 좋다
  • 면접관들은 이력서를 종이로 뽑아 본다
  • 첫 페이지가 제일 중요
• 남들과 다른 자신의 배경, 장점이 더욱 잘 드러나게 어필!(포트폴리오 등)
• 포트폴리오는 예쁘게 만드는 것은 그렇게 안중요
  • "고민의 흔적"이 더욱 중요하다
  • 고민이란, 위에서 언급한 프론트 개발자의 기초 학습방향!
• 블로그 정보 글은 꾸준함, 글의 양보다, 퀄리티 정말 좋은 한 편의 글이 더 좋다.
  • 틀린 정보가 있으면 신뢰도 떨어짐. Velog 등 컨텐츠 신뢰도 조심
  • 깃헙 잔디도 마찬가지. 좋은 코드가 더 중요함
• 코드에 대한 고민은 commit log, 주석, 블로그 등에 남길 수 있다
• FE 개발자는 특히 사회성, 협업능력이 중요하다. 어필 필요
• 나이. 안보는거 아니다. 안보는 회사도 있을 뿐.

1. Clean Code JS

- 너무너무너무 좋은 내용이다! 내가 항상 목말라하고 찾던 정보였다

- 하지만 전부 반영하긴 힘드니, 꼭 적용해볼 것 위주로 정리를 해보자

A. 변수에 대하여

상수 값은 이름 붙인 변수로 관리하기

iterate function의 인자로 자신만 알아볼 수 있는 작명 피하기

B. 함수에 대하여

함수 인자는 2개 이하가 이상적이다!

- 인자가 많을 수록 테스팅이 어렵기 때문!

- 만약 필요한 인자가 3개 이상이라면, 그 함수에 너무 많은 역할을 맡기려 하기 때문일 수 있음

- 단일 기능을 함에도 필요한 인자가 많다면, ES6의 비구조화(destructuring) 구문을 사용할 수 있고, 이때의 장점이 있음

  1. 타인이 그 함수의 signature(인자의 타입, return 값의 타입 등)을 볼 때 어떤 속성이 사용되는지 즉시 알 수 있음

  2. 비구조화는 함수에 전달된 인수 객체의 지정된 기본타입 값을 복제하여, 사이드 이펙트가 일어나는 것을 방지함

      단, 인수 객체로부터 비구조화된 객체와 배열은 복제되지 않아 사이드 이펙트에 유의해야 함

  3. Linter를 사용하면 사용하지 않는 인자에 대해 경고해주거나, 비구조화 없이 코드를 짤 수 없게할 수 있음

함수는 하나의 행동만 해야한다

- 소프트웨어 엔지니어링에서 가장 중요한 규칙

- 하나의 행동만 하도록 함수를 구현해야, 코드를 작성 / 테스트 / 이해하는 것도 쉬워짐

매개변수로 플래그를 사용하지 마세요

- 플래그를 사용하는 것 자체가 한가지 이상의 역할을 하고 있다는 것을 의미함

- boolean을 기반으로 실행되는 코드가 나뉜다면, 함수를 분리!

Side Effect를 피하세요(part 1)

Side Effect를 피하세요(part 2)

- JS에서 primitve type은 value를 전달하지만, object & array는 reference를 전달함

- 따라서, 인자로 object와 array를 받았다면, 인자로 받은 object & value가 직접 수정되는 일(side effect)이 없게 코드를 짜는 것이 필요함

- 큰 객체를 직접 복제하려면 ㅈㄴ 귀찮음... immutable.js 같은 lib를 사용해보자

명령형 프로그래밍보다, 함수형(선언적) 프로그래밍을 지향하세요

* 명령형 프로그래밍 vs 선언적 프로그래밍

조건문을 캡슐화 하세요

- 이유 → 선언적으로 프로그래밍을 하기 위해서인듯

부정조건문을 사용하지 마세요

C. 동시성(Concurrency)

Async/Await을 사용하자

- 이 때 try-catch 감싸주기 잊지말기!

D. Error Handling

단순히 에러를 확인만 하지 마세요

- 상용 서비스라면, 단순히 에러를 console에 찍고 끝내는게 아니라, 추가 행동이 필요하다

- 유저에게 에러를 알리고 / 에러를 logging하는 건 기본!

E. Formatting

왠만하면 함수 호출자를 함수피호출자 바로 위에 위치시키세요

- 코드를 읽는 것도 신문처럼 위에서 아래로 읽기 때문

기타

- Objects and Data Structure / Class에 대한 clean code 내용도 있지만, 지금 내 단계에서 당장 적용할 수 있는 건 없어보인다. 나중에 필요할 때 다시 들여다보자!

- 객체지향(OOP) 개발 5대 원리인 SOLID(github, solid 설명)에 대한 내용도 있으나, 이것도 나중에 필요하면 찾아보자! 하지만 이 내용 정도는 필수인듯!

1. 백준 14425 node.js

const input = require("fs").readFileSync("/dev/stdin").toString().split(/\s/);

const n = +input[0];
const arr1 = input.slice(2, n + 2);
const arr2 = input.slice(n + 2);

const set = new Set(arr1.map((v) => v));

let answer = 0;

arr2.forEach((value => {
  if (set.has(value)) ++answer
}))

/* 아래 처럼 해도 되긴 하는데, 그럼 시간초과 난다
	arr2.forEach((value => {
  		if (arr1.includes(value)) ++answer
	}))
*/

console.log(answer)

Lesson Learned

• Set / Map 등의 자료구조를 활용하면, array, object를 활용하는 것보다 더욱 빠르고 쉽게 값을 탐색할 수 있다
  • *** 근데 왜 Set / Map을 활용한 탐색 메서드가 더 빠른거지???? → 공부 필요!

1. Velog front 코드 훑어보기

• 환경변수로 dev / test / prod 구분하기
  • 아래와 같은 방식으로 하던데, declare namespace에 대한 이해가 필요해보인다

    declare namespace NodeJS {
      interface ProcessEnv {
        readonly NODE_ENV: 'development' | 'production' | 'test';
        readonly PUBLIC_URL: string;
      }
    }​

  • d.ts 파일 형식
    • 기존에 js로 쓰인 파일의 코드를 파일 단위로 ts typing하기 위해 사용함
      e.g., example.js를 타이핑 → example.d.ts
  • CRA에서 환경변수 사용하기 → 블로그 참고
    • CRA에서 환경변수 typing → react-app-env.d.ts
• SSR을 적용할 때, loadableReady와 hydrate를 적용해야 한다
• route 파일을 따로 만들지 말고, routing을 걍 app 파일에서 해줄 수 도 있음
• Client side Error logging Lib → Sentry JS
• redux 적용 패턴 확인하기 → 링크
• component props typing pattern 적용해보기

  

• skeleton component 만드는 법 참고해보기 → 링크
• branch → fix, feature 등으로 나눔

빠르게 성장하는 주니어의 특징

- 성장할 수 밖에 없는 환경을 만든다

경험치를 쌓는 구체적인 방법

- 연습은 양치질과 같다

- 양치질은 열심히 한다고 해도 내가 잘 하고 있는지 확인하기 어려움(피드백 어려움)

- 성장을 위해선, 좋은 피드백 시스템이 중요함!

어떤 피드백들이 있을까?

- 테스트 코드 → 프론트도 테스트 코드 작성 필요(가장 중요한 기능 중심 테스트)

- 코드리뷰 → 코드 짠 3주 뒤, Self Code Review!

- 짝 프로그래밍 → 강추하는 방법. 15~20분 timer를 두고, driver(코딩) <-> navigator(훈수) 역할을 나눔. 시간 뒤 역할 바꿈

- 커뮤니티 참여 → 알고리즘 내가 풀었어도, 다른 사람의 답안도 보기. 다른 방법으로 풀 수 있는 방법 고민

- 화면 녹화 등

그래서 오늘 바로 할 수 있는 것 → 회고. 회고가 없으면 에자일이 아니다

* 좋은 회고의 5가지 조건 → 5F

1. Fact

- 무슨 일이 있었는지, 뭘 했는지, 뭘 배웠는지

2. Feeling

- 무엇을 느꼈는지

3. Finding

- 어떤 인사이트가 있었는지

4. Future action

- 액션 플랜이 있는지

5. Feedback

- 진행한 액션 플랜에 본인의 피드백

Q & A

Q. 신입 등에 나이제한 있나요?

A. 이름 들어본 IT 서비스 회사에서는 신입, 중고신입 나이제한 없다. 당신의 빛나는 능력이면 충분

Q. 웹 개발할 때 알고리즘 잘 짜는 게 많이 중요한가요?

A. 주니어 때는 알고리즘 설계할 일 잘 없음. 물론 알고리즘도 중요하지만, 프로젝트 경험이 신입에게는 조금 더 중요할 수 있다

Q. 저는 많은 프로젝트를 진행하는 방식으로 공부했는데, 생각하시는 좋은 프로젝트 경험은 어떤 건지 궁금합니다!

A. 당신이 어필하고 싶은 당신만의 장점이 잘 드러나는 프로젝트 위주로 진행하는 것이 좋다

Q. vue, react, 둘 중에 무엇을 먼저 공부해야할까?

A. 둘 다 잘 못해도 된다. JS 자체를 잘아는게 더욱 중요하다

Q. 스터디나 프로젝트에서 최대한 많은것을 얻을 수 있는 방법이 뭘까요? 걸러야할 스터디, 프로젝트 유형도 있을까요?

A. 독불장군이 있는 스터디. 지시적이고, 고집 센 사람이 있는 곳은 비추.

Q. 효율적인 코드리뷰 방법은?

A. 가장 작은 단위의 기준을 잡아야 한다. e.g., 변수명에 대해 살펴보자

Q. 면접관 입장에서, 1년차 개발자라면 최소 이것만큼은 있어야한다는게 있다면?

A. 본인이 focusing한 문제해결 과정. 문제해결 능력이 좋은 사람은 습득능력이 좋음. 주니어 개발자에게는 엄청난 개발역량을 바라지 않음. 주니어개발자에게 바라는 것 → 성장 가능성 → 문제해결 과정에서의 인사이트가 중요

Q. 면접관 입장에서 가장 이상적인 신입의 프로젝트는?

A. 본인이 중요하다고 생각한 것을 해결한 프로젝트임. 신입 git repository 들어가서 프로젝트 보면, 무엇을 고민하는지 드러남.

Q. 풀스택을 지향하고 싶다. 하지만 옳바른 선택인지 모르겠다.

A. 본인이 한 선택이 최고의 선택이 되도록 만들어라. 프론트, 백 어차피 둘 다 볼 일이 생긴다. 경계를 굳이 나눌 필요는 없을 것 같다

Q.피드백을 받기 좋은 코드리뷰 질문 방식은?

A. 단순히 피드백 해달라 하지말고, 자신이 중요하게 생각한 것을 중점으로 봐달라와 같이 구체적인 기준을 남기면 좋다

Q. CS 공부해보고자 하는 비전공자임. 추천할만한 CS 공부 방법은? 가장 중요한 CS 지식 하나만 뽑자면?

A. 하버드 CS50. 네트워크가 제일 중요. 프론트엔드가 겪을만한 네트워크 지식을 구글링 해보라

Q. 일정에 쫓겨 개발을 하다보니, 코드의 깊이가 얕아 고민이다. 이런 상황에서 공부의 방향 추천 부탁드린다.

A. 더 중요한 코드에 모듈 하나, 함수 하나라도 클린 코드를 작성하도록 해봐라. 좋은 코드로 구현하기 위한 범위를 작게 쪼개서 개선해 보는 경험

Q. 산압아 webpack, babel 설정까지 할 수 있어야하나?

A. 요즘은 하는 사람이 많다

Q. 결국 풀스택으로 가야한다는데, 백엔드까지는 자신이 없다.

A. 프론트엔드로 잘 적응하는 성장 싸이클을 만들면, 다른 분야(변화)에도 쉽게 적응할 수 있을 것이다.

Q. 프론트엔드 개발자로 취업 준비 중인데 하루를 어떻게 사용하면 좋을지 고민이에요. 프로그래머스 코딩 테스트 연습 2문제씩 풀고 있고, 개발 관련 강의도 듣고 있는데 잘하고 있는지 확신이 안들어요..

A. 주변 피드백을 줄만한 사람을 찾아봐라. 안보인다면, 피드백을 주고받을 동료를 보내거나 나에게 DM을 보내라. 행동력 있게 피드백을 줄만한 사람을 찾아봐라

Q. 면접 마지막에 궁금한 점 없냐고 물어볼 때, 뭘 물어보는게 좋을까?

A. 면접 보는 회사를 평가한다 생각하고 물어보면 좋다. 회사에 관심을 가져달라

Q. 좋은 코드의 특징은?

A. 일관성이 제일 중요하다 생각한다. 네이밍(일관성, 규칙성, 가독성)도 중요하다. 일관성이 없으면 기존 코드 수정하는게 매우 어렵다

A. 클론코딩 내용 중 인사이트만. 클론코딩 repo만 제출하면 어떤걸 고민하고, 어떻게 문제해결하는지 알 수 없다

Q. vanilla js를 깊게 공부하기 위한 방법 추천

A. 언어는 도구. 도구는 문제해결을 위해 쓰는 것이 목표. 문제를 설정하고, js만으로 구현해봐라. 가장 인상깊었던 프로젝트 = markup generating editor.

Q. 코드 작성할 때 주석을 넣는 연습을 해야하나?

A. JSDoc 사용 방법 참고

Q. 프론트 현업에서는 어떤 디자인 패턴이 추천되는지 궁금하다

A. 선언형 프로그래밍에 관련된 패턴이 많으 쓰임

Q. 좋은 알고리즘 공부 방법은?

A. 한 문제를 풀 수 있는 다양한 방법에 대해 고민해봐라. 알고리즘 문제 선택할 때, 아얘 모르겠는 것은 우선 미뤄두고 긴가민가한 문제부터 먼저 꾸준히 풀어봐라

Q. 독불장군 스타일의 팀원 handle 방법은?

A. 그 사람과 당신의 감정 issue로 만들지 말고, 팀 차원의 issue로 만들어 토의해라

Q. 초보자들끼리 팀을 이뤄 코드리뷰를 하려하는데, 수준이 비슷해 도움이 될지 모르겠다

A. 각자 전문 분야를 나눠 리뷰를 하면 좋다.

Q. 팀원이 없어 나의 수준을 파악하기 어렵다

A. 다른 회사 면접보면 알 수 있다. 아님 다른 개발자와 토이프로젝트를 진행해봐라

Q. 업무 시간할당 어떻게 하심?

A. 우선 업무 리스트업. 그 중에서 업무 하이라이트(가장 어려운 문제)는 오전에 끝내는 것을 목표로 함. 업무 하이라이트를 해결하기 위한 전략을 세우고 해결함. 업무의 우선순위를 나누고, 짧은 시간 안에 해결하는 연습을 추천함. 가장 중요한 것을 가장 먼저하는 것은 맞는 것 같다

Q. 모든 컴포넌트에 다 테스트 코드를 작성하나?

A. 중요도, 변화가 많은 곳, 자동화할 수 있는 내용이 많은 컴포넌트 먼저 테스트 코드 작성하는 것이 좋음. 어떤 컴포넌트를 테스트 코드화할 것인지 기준을 세우는 것이 중요

Q. 면접관으로서, 토이프로젝트 평가 시 주요하게 보는 것은?

A. 프로젝트의 아이디어보다는, 어떻게, 어떤 과정을 거치면서 만들었는지가 중요. 돋식화를 하고 다이어그램을 많이 그릴 수록 좋다. 무엇을 만드냐보다, 어떻게 만드는가가 더 중요하다.

Q. JS 책 추천?

A. 자바스크립트를 말하다 / 모던 자바스크립트 / 코어 자바스크립트 / 유돈노JS 시리즈 추천. 다만 책은 index 용으로 참고 추천

Q. 가장 추천하는 취업 준비 방법?

A. 기업이 어떤 문제를 해결하고, 어떤 서비스를 하고 싶어하는지 파악하는 것이 중요. 링크드인 통해서 그 회사 다니는 분들께 직접 물어봐라. 예의바르게 콜드메일 보내봐라. 그리고 그것에 맞게 준비하고 어필하라

Q. 좋은 소스코드 뜯어보는게 좋다는데 프론트 쪽에서 추천하는 repo는?

A. Velog / redux thunk / lodash 추천!

Q. 프로그래밍 사고력 키우는 방법?

A. 알고리즘 / 자료구조 기반이 되어야 한다

참고 사이트

블랙커피 디스코드 → 온라인 스터디 모임! 가입 추천! https://discord.com/invite/GVHkrbKE

넥스트스텝 https://edu.nextstep.camp

메이커준 [ 유튜브 | 블로그 | 인스타그램 | 링크드인 | 페이스북 ] → 강의자님 소개 사이트. 블로그 글은 꼭 읽어보자  https://www.makerjun.com

1. Node.js로 입력받기

a. 보통 Node.js에서 입력은 readline 모듈을 사용해 console을 통해 받을 수 있다.

b. 하지만, txt file을 읽어서 입력을 처리할 수도 있음(fs module) 사용

구름에서는 a번 방식을 사용하고, 백준에서는 b번으로 입력하는 것이 공식적으로 권장된다.

백준에서 문제 풀 때, 사이트에서 바로 테스트를 할 수가 없어 불편하다.

그래서 로컬에서 백준 식 입력 방법으로 테스트하는 방법을 공유한다.

1. 예시 파일.txt 생성

2. 아래 방식으로 예시 파일 read

// BOJ에 제출할 때는 경로를 "/dev/stdin"으로 바꿔주기!
// readFileSync method 이후 부분은 필요에 맞게 편집
const input = require("fs").readFileSync("ex.txt").toString().trim().split(/\s/);

https://velog.io/@exploit017/%EB%B0%B1%EC%A4%80Node.js-Node.js-%EC%9E%85%EB%A0%A5-%EB%B0%9B%EA%B8%B0

https://grap3fruit.dev/blog/%EA%B5%AC%EB%A6%84(goorm),-%EB%B0%B1%EC%A4%80(BOJ)-%EC%BD%94%EB%94%A9-%ED%85%8C%EC%8A%A4%ED%8A%B8-JavaScript%EB%A1%9C-%EC%9E%85%EB%A0%A5%EB%B0%9B%EB%8A%94-%EB%B0%A9%EB%B2%95-%EC%A0%95%EB%A6%AC 

https://nyang-in.tistory.com/156

2. OBJ 1620 해결

문제 → https://www.acmicpc.net/problem/1620

Lesson Learned

• 자료형간의 관계를 생각하자
  • 배열 →  index & value
  • Map → key & value
• Map or Object의 key 값에 접근하는 것은 시간이 많이 들기에 최대한 다른 방법을 생각해보자
• 처음 짠 코드
  • Map → [key: number, value: string]의 형식으로 짬
    • 한계: 입력이 string일 경우, Map의 key인 index를 get 해야 하는데 index의 key 값을 받아오는 로직에 드는 시간이 길었음
• 모범답안
  • value: string는 array를 활용해 접근할 수 있으니까, 시간이 많이드는 index 값을 Map의 value로 사용하자
  • if typeof 값 === string → Map.get(값) → index 출력
  • if typeof 값 === number → array를 활용해 string 출력

답안👇🏻

const input = require("fs").readFileSync("/dev/stdin").toString().split(/\s/);

const n = +input[0];
const pokeArr = input.slice(2, n + 2);
const questions = input.slice(n + 2)

const pokemonMap = new Map(pokeArr.map((v, i) => [v, i + 1]))
const result = []

questions.forEach((v) => {
  if (Number.isNaN(+v)) result.push(pokemonMap.get(v))
  else result.push(pokeArr[+v - 1])
})

console.log(result.join("\n"))

시행착오👇🏻 (결과는 맞으나 "시간초과" 뜸)

const input = require("fs").readFileSync("/dev/stdin").toString().split(/\s/);

const n = +input[0];
const pokeArr = input.slice(2, n + 2);
const questions = input.slice(n + 2)

const pokemonMap = new Map(pokeArr.map((v, i) => [i + 1, v]))
const result = []

for (let i in questions) {
  // 영어인 경우 -> 숫자 출력
  if (Number.isNaN(+questions[i])) {
    pokemonMap.forEach(((value, key) => {
      if (value === questions[i]) result.push(key)
    }))
  }
  // 숫자인 경우 -> 영어 출력
  else {
    result.push(pokemonMap.get(+questions[i]))
  }
}

console.log(result.join("\n"))

1. getter & setter

getter

- get ~~ 되어 있는 것은 class의 private한 member 변수에 접근할 때 사용.

- 단순히 private member variable을 return 함

setter

- 처음 class를 instance화 하며 초기 값을 set할 때 사용됨

https://mygumi.tistory.com/161

1. Map

• object와 같이, key - value의 쌍으로 이루어진 자료구조의 한 형태. ES6의 스펙
• 순서가 있음
• 각 요소들을 반복적으로 접근할 수 있음(iterable)

let sayings = new Map();
sayings.set("dog", "woof");
sayings.set("cat", "meow");
sayings.set("elephant", "toot");
sayings.size; // 3
sayings.get("fox"); // undefined
sayings.has("bird"); // false
sayings.delete("dog");

for (let [key, value] of sayings) {
  console.log(key + " goes " + value);
}
// "cat goes meow"
// "elephant goes toot"

Map과 Object

+ Object는 Prototype을 가지기 때문에, 주의하지 않으면 key가 충돌 -> 무슨말이지?

언제 Map과 Object를 써야 할까?

Object를 쓰자

- 각각의 value가 서로 다른 type이 많거나, 다른 Logic이 적용되어야 할 때

- 구조가 비교적 간단할 때

- JSON을 활용해야 할 때

Map을 쓰자

- 자료의 변경이 자주 있을 때

- 자료의 순서가 중요할 때

- key의 값들을 runtime까지 모를 때

- data의 size가 클 때

- key & value의 type이 각각 같을 때

+++ 아래 내용보고 위 자료 수정하기

https://medium.com/@hongkevin/js-5-es6-map-set-2a9ebf40f96b

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Keyed_collections

https://kellis.tistory.com/129

https://medium.com/front-end-weekly/es6-map-vs-object-what-and-when-b80621932373

https://hackernoon.com/what-you-should-know-about-es6-maps-dc66af6b9a1e

https://velog.io/@namda-on/JavaScript-Map-%EA%B3%BC-Object-%EC%9D%98-%EC%B0%A8%EC%9D%B4