미아의 다시 보자 개발노트

[error.log] [Node & NPM] npm 업데이트! New major version of npm available!

Sun, 15 Oct 2023 20:19:00 +0000

에러가 났다.

오랜만에 프로젝트 새로 만들고 npm 패키징을 하려는데 간만에 npm 최신 버전으로 업데이트하라는 문구가 떴다.

New major version of npm available! 9.8.0 -> 10.2.0

최근까지 AWS EC2에서 이 문구를 볼 때면 그저 치라는 대로 npm i -g ~~ 이렇게 치거나 그게 안 되면 앞에 sudo를 붙여서 치면 다 해결됐는데, 이상하게 먹히지 않았다.

npm ERR! code EBADENGINE
npm ERR! engine Unsupported engine
npm ERR! engine Not compatible with your version of node/npm: npm@10.2.0
npm ERR! notsup Not compatible with your version of node/npm: npm@10.2.0
npm ERR! notsup Required: {"node":"^18.17.0 || >=20.5.0"}
npm ERR! notsup Actual:   {"npm":"9.8.0","node":"v18.16.0"}

해결법

처음엔 에러를 읽어볼 생각도 안 하고 그냥 sudo를 앞에 붙여서 비밀번호까지 입력했는데 똑같은 에러가 반복될 뿐이었다.
대체 왜?
그래서 찬찬히 다시 보니, node 버전이 18.17.0 이상은 되어야 했던 것이다…!

그래서 바로 nvm을 이용하여 노드를 lts 버전으로 바꾸고, 다시 실행했더니 문제없이 업데이트됐다…

npm install -g n //* nvm을 쉽게 활용하기 위해 n 설치
sudo n lts //* lts 버전의 node 설치

node -v //* node 버전 확인 >> 18.18.2
sudo npm install -g npm@10.2.0 //* npm 버전 업데이트

이때 주의해야 할 점은 node lts 버전을 깔거나 npm i -g 를 할 때는 sudo를 앞에 붙여야 정상동작을 한다는 것이다!

기타 - 한마디

그렇게 많이 코딩했으면서 이거 세팅 하나에 허우적거렸다는 사실이 조금 부끄럽지만 빠르게 해결하긴 했으니 재빨리 블로그에 적어본다.

[Diary] 사이드 프로젝트 시작! + 근황

Tue, 29 Aug 2023 23:00:00 +0000

요즘 근황

블로깅 좀 해야겠다고 생각한 지 3개월 다 되어 가는 요즘… 그때의 다짐과 달리 전 직장 퇴사를 준비하며 평소보다 더 바쁜 하루하루를 보냈던 것 같다…ㅠㅠ 직장 내의 단 한 사람 때문에 생기는 스트레스로 인한 몸상태 악화로 건강 관리는 덤… 전 직장 대표님이 그러셨었다… 단 한 사람이라도 나와 안 맞으면 그 직장은 지옥이 된다고… 그 말씀 완전 맞다…

아무튼! 1년의 경력을 딛고 전 직장을 정리했다. 이제 새로운 곳에 취업하기 위해 그동안 해본 적 없는 NestJS도 공부하고 있고, 개발 및 디자인 지인들과 사이드 프로젝트도 하고 있다. 전 직장을 정리하자마자 몸 상태는 급속도로 좋아지고, 정말 퇴사는 만병통치약이라는 생각을 다시금 하게 되었다.

그동안 새 직장에 들어가기 위한 이력서를 안 넣은 것도 아니다! 몇 번 넣었는데 70퍼센트 이상의 서류 합격률을 보고 초기 부트캠프 수료 시절 합격률을 생각하며 조금 안심을 하게 됐다. 2차 면접까지 간 회사도 있었지만 안타깝게도 떨어졌고, 그 이후 현재 쉬고 있는 중이다! 내일부터 다시 넣을 거지만 >_<!

사이드 프로젝트

보통 사이드 프로젝트는 회사 생활이 힘들어서 오히려 도피 형태로 하기도 한다더라. 하지만 나는 반대다. 회사 생활… 이 아니라 회사 업무 자체를 집까지 가져와서 해야 했기에 사이드 프로젝트를 시작할 엄두조차 못 냈다… 한두 번이야 빠지거나 못 따라갈 수도 있다지만, 정말 자주 빠질 것 같았기 떄문이다…;

그래서 이번에 전 직장 생활을 정리한 김에 시작하게 됐다! 너무너무 즐겁다. 이게 바로 회사 업무가 아닌, 내가 하고 싶은 개발…?! 기본 프레임워크를 익스프레스가 아닌 네스트 및 타입스크립트로 하려니 조금 어색하지만, 힘내서 해보고자 한다! 그리고 아직 공부가 덜 된 터라 계속 공부도 할 거다!

아자아자 파이팅!

[Diary] 책을 읽으며 리프레시! + 근황

Fri, 02 Jun 2023 14:00:00 +0000

요즘 근황

작년 5월 경, 첫 개발자로서 스타트업 IT 회사에 입사했었다.
그리고 입사한 지 1년 이상 지났다.
그동안 회사 자체 서비스도 없었고 나는 창립멤버로 들어간 것이나 다름없었기에 회사 코딩만 하느라 다른 블로그 활동을 제대로 하지도 못한 것 같다.
재직 중인 회사에 필요한 정보를 찾고, 회사 노트에 정리하고, 회사 코드에 입력하고, 문서화하고…
특히 론칭이 가까워질 때에는 주말도 없고 야근은 일상에 바쁜 하루하루를 보낸 것 같다.
그리고 이제는 숨통이 좀 트여서 이렇게 다시 블로그를 개장하게 됐다!!

책을 읽다

원래 나는 문학책을 잘 읽는 편이지만 이번에 간만에 기술서적을 샀다!
그건 바로 [Node.js 백엔드 개발자 되기] !

이건 실제로 샀다는 증거의 책장 스샷!

하여 앞으로 이 책을 읽은 것에 대한 후기나 정리 글을 가끔씩 쓰고자 한다.

나는 회사에서 javascript 기반의 Node.js + express만 사용해왔기에 요즘 인기 많은 typescript, Next.js를 거의 모르는데 이 책에서는 그들을 토대로 정리하였다고 한다ㅠㅠㅠㅠ
내가 시작을 잘못 끊었지… 회사에 들어가자마자 타입스크립트 기준으로 해본다고 할걸…(내가 첫 백엔드 입사자였기에 나를 기준으로 백엔드 시스템이 구축되었다…)
게다가 상부에서도 백엔드는 DB에서 타입을 따지니까 타입스크립트를 안 써도 된다고 하기에 바뀔 일도 없을 것 같다…
하루 한 페이지라도 좋으니 꼭 읽고 반드시 글을 쓰겠다!!

아자아자 파이팅!

[Artillery / Express] 499, 504 http, TimeOut(ETIMEDOUT) 에러가 나오는 이유

Mon, 06 Feb 2023 23:20:00 +0000

504 에러? ETIMEDOUT 에러?

부하테스트에 특화된 Artillery 이용해서 Node.js의 Express 서버의 부하테스트( or 로드테스트 / AB테스트)를 한다?
그런데 단순히 test 코드로 정해진 변수 값을 내보내는 REST API로 부하 테스트를 해본 건데 ETIMEDOUT이나 504 에러가 절반 가까이 차지한다?

그렇다면 다음을 확인해 보세요.
(실제로 직접 경험하고 해결한 경우만 나열했으므로 또다른 원인이 있을 수 있습니다.)

1. express-ipfilter를 사용하는가?

단순히 ‘사용한다’가 문제가 아니다. filter를 해야 하는 ip 요소가 많을수록 꽤 많은 처리 시간이 소요된다.
필터해야 하는 ip 수가 많을수록 504 에러가 난다는 것을 확인했다.
즉, 디도스 공격을 하는 IP를 수집하고 그걸 express-ipfilter에 매일 갱신하며 추가할 경우 n백 개가 되는 순간부터 1초당 1000개의 단순 value 내보내는 REST API마저 에러가 날 것이다.(원래 1초당 1500개도 문제없어야 한다.)
나는 이 ip 필터 항목을 줄인 것만으로도 504 에러를 없앨 수 있었다.

대부분의 디도스 공격이나 잘못된 요청들의 해외 IP들은 잘못된 경로(정의되지 않은 라우터)로 파고드니까 그 경로 자체로는 Express 서버에 접근할 수 없게 막아야 한다.(NginX나 AWS ELB의 rule 등)

2. Artillery의 TimeOut 세팅을 했는가?

Artillery에는 REST API에 한해서 timeout을 설정할 수 있다!
이 timeout을 따로 설정해 두지 않으면 서버가 느리게, 혹은 너무 많은 요청으로 인해 답이 밀려서 몇십 초 후에 response를 보낸다면 Artillery는 기다리지도 않고 그저 검사를 끝낸 뒤 ETIMEDOUT이라고 집계하거나, 혹은 서버로부터 499반응을 내보냈다는 로그를 확인할 수 있을 것이다.
부하테스트를 할 때는 넉넉하게 100초 이상은 두고 하길 바란다.

예시 코드(원문은 아래 참고 문서를 가볼 것)

config:
target: "http://my.app"
http:
  # Responses have to be sent within 10 seconds, or an `ETIMEDOUT` error gets raised.
  timeout: 10

기타 - 한마디

제발! 꼭! 공식 문서를 간단하게라도 훑어서 다루는 법을 잘 익힌 뒤에 써먹도록 하자.

참고 문서

Artillery timeout 세팅

[AWS] Ubuntu ec2 재부팅 시 NginX 자동실행 설정하기(+그냥 끄고 켜기도 포함)

Sat, 04 Feb 2023 23:00:00 +0000

EC2를 재부팅 하면 NginX가 자동실행된다!

AWS의 EC2(Ubuntu)에 NginX 한번 설치하면 EC2를 중지하고 새로 시작하면(설치 시부터, 혹은 재부팅, 재시동 등) NginX가 자동으로 실행되어 오히려 다른 서버로 80포트(NginX는 기본적으로 80포트 사용)를 실행하지 못할 때가 있다.
그때 이걸 끄고 키는 법을 다루겠다.

개발 환경

AWS EC2
Ubuntu 22.04
NginX 1.18.0 (Ubuntu)

정리

NginX 상태 확인

systemctl status nginx.service

# in Ubuntu EC2

systemctl status nginx.service

# 결과
nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
~~(기타)

/lib/systemd/system/nginx.service; enabled) 이 부분이 enaled이기 때문에 자동실행되는 것이다!

enabled : 자동실행 On
disabled : 자동실행 Off

NginX 자동실행 설정

On : sudo systemctl enable nginx.service
Off : sudo systemctl disable nginx.service

# 자동실행 On
sudo systemctl enable nginx.service

# 결과
Synchronizing state of nginx.service with SysV service script with /lib/systemd/systemd-sysv-install.
Executing: /lib/systemd/systemd-sysv-install enable nginx
Created symlink /etc/systemd/system/multi-user.target.wants/nginx.service → /lib/systemd/system/nginx.service.


# 자동실행 Off
sudo systemctl disable nginx.service

#결과
Synchronizing state of nginx.service with SysV service script with /lib/systemd/systemd-sysv-install.
Executing: /lib/systemd/systemd-sysv-install disable nginx
Removed /etc/systemd/system/multi-user.target.wants/nginx.service.

기타 - 그냥 NginX 끄기, 켜기

Off : sudo service nginx stop
On : sudo service nginx start

기타 - 한마디

NginX를 설치하는 순간부터 Express 서버를 80포트로 돌리려다 실패한 적도 있다 보니 이런 것도 잘 아는 게 중요하다 생각된다.
사실 처음부터 뭔지는 알고, 혹은 다룰 줄 알고 설치했어야 했는데 항상 개념 부족을 느낀다…ㅠㅠ

참고 문서

블로그 링크

[Mac, MacOS] 사용자 계정 이름 주의

Fri, 03 Feb 2023 22:00:00 +0000

간단한 정리

처음 맥북이나 맥을 시작하고 계정을 만들 때..
반드시 계정명, 계정 이름 시작을 특수기호로 하지 말자.
내가 -로 시작하는 계정 만들었다가 터미널도 안 켜지고 홈 디렉토리도 이상하고 mysql도 안 되고 난리 났었다.
꼭… 계정명은 평범하게 영어숫자로만 짓자…

[AWS] ELB rule 주의사항 (NginX가 그리워질 때)

Mon, 30 Jan 2023 22:40:00 +0000

간단한 정리

요즘 Node.JS Express 서버를 돌리는 EC2의 보안을 위해 이것저것 공부 중이다.
예전엔 NginX를 EC2 내부에 설치해서 경로 리버스 프록시를 하면서 도메인으로 들어온 것만 통과되게끔 했었다.
이러면 좋은 점은 public IP 및 이상한 경로로 EC2에 디도스공격을 하는 걸 NginX가 한번 걸러줘서 실 서버가 돌아가는 Express에 넘겨지지 않는다는 것이다.
그러나 코어 1개 + 램 1기가짜리 프리티어 EC2에는 NginX를 입히면 한 번에 최대 1024개의 파일+데이터 처리만 가능하다는 한계를 알아버렸다.

그래서 이젠 NginX를 빼고 AWS의 ELB(Elastic Load Balancing)에서 전달 rule을 수정해 경로를 지정했다.

아! 이젠 NginX 대신 ELB로 경로 필터를 했으니 괜찮겠지?!

큰 오산이었다.
EC2의 Public IP로 직접 접근하면 ELB에서 경로 필터를 해둬도 그대로 Express 서버까지 들어왔다.

다른 곳에서 EC2의 Public IP를 제거하는 글을 다뤘길래 따라해서 실제로 없애보기도 했으나, 그러면 도메인으로만 서버 접근이 가능한 건 맞지만 나조차 콘솔이든 ssh로든 접근을 못해서 코드 수정이 불가했다…ㅠㅠ;;

Public IP를 제거하면서 코드를 접근할 수 있는 방법이나, Public IP는 유지하되 도메인을 통한 접근 외에 차단하는 걸 찾아봐야 할 듯하다.
NginX가 이렇게 좋다는 걸 다시금 느낀다…

[React] Vite으로 React 시작하기(단순 명령어 정리)

Wed, 25 Jan 2023 22:30:00 +0000

Vite이 뭐길래

프론트엔드에서 웹사이트 배포를 하기 위해 꼭 하는 과정이 무엇인지 아는가?
바로 build다.
React로 프로젝트를 배포하기 위해 npm run build를 한 번쯤은 했을 것이다.
이 명령어로 빌드 폴더를 생성할 때 시간이 좀 걸리는데, 이때 걸리는 시간으로 맥북의 성능을 비교하기도 한다.(그 외에 다른 걸로도 비교하곤 한다.)
빌드로 맥북 성능 비교하는 영상 링크

이 build를 조금이라도 빠르게 하는 방법 중 하나가 바로 Vite를 쓰는 것이다.
실제 Vite 공식 사이트의 소개를 보면 아래와 같은 얘기를 한다.
즉 build에 최적화된 도구라고 할 수 있다.

build 말고도 다른 기능들도 많으니 따로 공식 문서에 들어가 참고하자.

Vite(프랑스어로 “빠르다(Quick)”를 의미하며, 발음은 “veet”와 비슷한 /vit/ 입니다.)은 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다.

개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공합니다. 가령, Hot Module Replacement (HMR)과 같은 것들 말이죠.

번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다. - Vite -

간단한 Vite 프로젝트 생성

정말 단순히 터미널 명령어만 나열하겠다.
react말고도 vue 등도 있으니 위에 링크로 남겨둔 공식 사이트를 확인하길 바란다.

yarn

# Mac - m1 Pro
# Mac에 yarn이 안 깔려있을 경우
npm install -g yarn

# vite project 시작(JavaScript)
yarn create vite [프로젝트명] --template react

# vite project 시작(TypeScript)
yarn create vite [프로젝트명] --template react-ts

npm

# Mac - m1 Pro
# npm 6.x(JavaScript)
npm create vite@latest [프로젝트명] --template react

# npm 7+, '--'를 반드시 붙일 것(JavaScript)
npm create vite@latest [프로젝트명] -- --template react

# TypeScript는 react-ts로 설정

백엔드 개발자로서 Vite으로 프론트 프로젝트를 만든 이유

원래 나는 Node.js Express 개발자로서 Vite에 크게 관심이 없었다.
그런데 socket 부하 테스트를 하려는데 매우 많은 동시 연결 수가 필요했고, 그걸 Vite으로 만든 임시 프로젝트가 해결해줬다.
Vite으로 웹 프로젝트를 만들어서 소켓 연결 세팅을 해두고 npm run dev로 웹사이트를 실행, 그리고 창을 킨 채 해당 프로젝트 터미널에서 Cmd(⌘) + S를 꾹 누르면 해당 컴퓨터의 한계만큼 동시 연결을 진행해준다.

처음 Vite으로 프로젝트 시작할 때의 터미널

프로젝트 창에 들어간 후 터미널에 Cmd(⌘) + S를 한 번 눌렀을 때

Cmd(⌘) + S를 꾹 오래 눌렀을 때

기타 - 한마디

Vite으로 서버 쪽도 여러모로 테스트 쪽으로 이득을 본 것 같아서 좋다. 역시 한쪽만 파기보다는 같이 일하게 되는 연관 파트의 지식도 계속 공부해야겠다.

참고 문서

Vite

[Node.js] module이 아닌 전역 변수로 활용하는 법 = global variable

Tue, 24 Jan 2023 21:36:00 +0000

여기서도 저기서도 쓰이는 변수? 전역 변수를 활용하자

Node.js에서 여러 데이터를 다루다 보면 특정 변수를 다른 곳에서도 사용하고 싶을 때가 있을 것이다.
처음엔 module.exports로 이곳저곳으로 함수 등을 빼서 사용했겠지만, 너무 잦은 사용임과 동시에 단순 변수일 경우 이 기능조차 애매모호하다.
그럴 때 사용할 수 있는 방법이 Node.js에서 활용되는 global variable, 즉 글로벌 변수(=전역 변수)다.

전역 변수는 어떤 변수 영역 내에서도 접근할 수 있는 변수를 의미하는 전산학 용어이다. -위키백과-

사용법

// index.js
let a = 1
global.a = a
global.b = a

// app.js
// a, b 선언 없음
console.log(a) // 1
console.log(b) // 1
a = 2 // 새로운 할당도 됨. 다른 곳에서 a를 불러오면 2로 불러와짐.

주의사항

이 global 선언은 자주 쓰면 안 된다. 마구 남발하며 사용했다간 어떤 변수를 이용했는지 헷갈릴 수 있어서 var 선언과 비슷한 문제가 발생될 가능성이 있다.
사용한다 해도 한 곳에서 선언 및 초기화를 정리해 두는 것이 좋고, 까먹고 또 중복사용될 만한 변수로 선언해서는 안 된다.
예시로 나는 global 선언을 하는 변수명 앞부분에 반드시 global을 붙이곤 했다.

globalA
globalTime
globalUserName

기타 - 한마디

이 방법 말고도 node-cache 라이브러리 같은 것을 이용해도 괜찮지만, 소수의 변수를 설정한다는 전제하에선 이런 방법도 꽤 유용하다.

참고 문서

전역변수 위키백과

[Node.js & Sequelize] mysql 쿼리문 로그 없애기

Sun, 22 Jan 2023 14:09:00 +0000

mysql 쿼리문이 로그로 떠요

Node.js에서 mysql(넓게는 RDBMS)을 다루는 OMR로 Sequelize를 많이 사용할 것이다.
처음 세팅하다 보면 config 파일에서 무언가를 적지 않았기에, 혹은 디폴트값 그대로 적었기에 뜨게 되는 로그가 있다.
아래의 이미지들은 최근 개인 서버에 mysql을 sequelize로 세팅하고 실행한 뒤의 서버 로그이다.

이 외에도 수많은 시퀄라이즈 함수가 실행될 때 mysql 쿼리문 로그가 서버에 같이 뜬다.
쿼리문이 뜨는 건 실제 mysql 혹은 sequelize.query 쪽에서 참고할 때 좋지만, 로그 정리 폼이 정해져 있다면 이 쿼리문이 포맷을 해칠 수 있다.

[DB연결 확인 로그]

[siri DB에서 user 모델 세팅 로그]

숨기는 법

처음에 이 상황에 대해 소개할 때 하나 언급한 것이 있다.

처음 세팅하다 보면 config 파일에서 무언가를 적지 않았기에, 혹은 디폴트값 그대로 적었기에 뜨게 되는 로그가 있다.

sequelize에서 config.json(혹은 js) 파일을 세팅할 때 아래와 같은 옵션을 설정할 수 있다.

'logging': false
이 옵션을 추가하면 로그가 안 뜨고 원래 설정한 로그만 서버에 뜨게 된다.

기타 - 한마디

한창 개발 쪽으로 아무것도 모를 때 이 로그가 계속 뜨는 게 신경 쓰였는데, 생각보다 단순한 작업으로 바로 없앨 수 있어서 잘 찾아보면 다 방법이 있구나, 했던 기억이 있다.

[Node.js & Express] Error : [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

Fri, 13 Jan 2023 20:19:00 +0000

에러가 났다.

Node.js를 쓴다? 거기에 Express로 서버를 다룬다?
그러면 가끔 접할 수 있는 에러가 있다.

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

이게 무슨 에러인가, 대체 뭐가 문제인가, 클라이언트와 헤더는 서버와 무슨 상관인가 등…
여러 가지 고민을 해보지만 막상 저 문장만 보고는 뭐가 문제인지 명확히 인지할 수 없었다.

그런데 전체 에러 문구를 보다 보면 코드의 어디가 문제인지 알려주긴 해서 그 부분을 보면 아! 하게 된다.

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at new NodeError (node:internal/errors:372:5)
    at ServerResponse.setHeader (node:_http_outgoing:576:11)
    at ServerResponse.header (/root/project/node_modules/express/lib/response.js:794:10)
    at ServerResponse.json (/root/project/node_modules/express/lib/response.js:275:10)
    at menu (/root/project/index.js:number1:number2) // << 여기!!
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  code: 'ERR_HTTP_HEADERS_SENT'
}

‘여기!!’라고 한 부분의 실제 코드는 아래와 비슷한 구조다.

const api = (req, res) => {
  if(req == '조건') res.status(200).json({ message: '조건' })

  return res.status(200).json({ message: '리턴' }) // << 에러가 난 부분
}

해결법

아주 단순한 에러였다.
response(res)를 두 번 써서 일어나버린 에러!
위 코드에서 처음 if문을 썼을 때 return으로 함수를 나가지 않아서 그 아래의 return문에 들어서게 된 것이다.
이미 api를 호출한 클라이언트에게 { message: '조건' }를 res로 줬는데 왜 또 주냐는 것.

그래서 아래처럼 return을 추가하면 에러가 헤결된다.

const api = (req, res) => {
  if(req == '조건') return res.status(200).json({ message: '조건' })

  return res.status(200).json({ message: '리턴' })
}

기타 - 한마디

return을 단순히 값을 내보내기 위한 거라고 생각하지 말고, 그 루프에서 벗어난다는 것을 인지하고 잘 사용하도록 하자.

[JavaScript] Object Optional chaining(?.) 객체 물음표 문법을 활용해라

Wed, 11 Jan 2023 23:50:00 +0000

Object의 Key나 Value 불러오다가 에러나면…

JavaScript를 다루다 보면 Object(객체) 관련한 처리에서 에러를 자주 겪게 된다.
나만 해도 JavaScript 자체를 3년 이상 쓰면서 객체 관련해서 이 오류를 제일 많이 겪었던 것 같다.

Uncaught TypeError: Cannot read properties of undefined

바로 타입에러…!

당연히 올바른 객체가 나올 줄 알고 함수를 다 짜놨더니 잘못돼서 에러가 나는 것이다…
예시로는 아래 같은 상황들이다.

const func = () => {
  const obj = {}
  console.log(obj.user) // A

  return obj.user.name //B
}

func()
// A: console >> 'undefined'
// B: Error

물음표를 적극 활용하자!

MDN 글을 우선 봐도 된다.

물음표? 라고 하니 뭔가 싶겠지만, 정확한 네이밍은 Optional chaining이라고 한다.
특정 키, 값을 객체로부터 가져오기 위해 마침표(.)를 쓸 것이다.
그 앞에 물음표(?)를 붙이면, 실제로 불러올 수 없는 상황이더라도 식 자체는 돌아가게 해준다.
아무것도 없는 곳에서 물건을 찾는다고 하면 에러를 내뱉던 걸 ‘없어요’라고 알려주는 친절한 거라고 생각하면 편하다.

다만 존재하지 않는 곳에 찍은 거라면 리턴값은 undefined가 나올 것을 염두에 두어야 한다.
또한 뭐가 잘못된지도 모르고 넘어가게 되는 경우도 있으므로 무분별한 사용도 자제해야 한다.

그래도 다루게 될 객체가 너무나도 유연하다면, 혹은 테스트로 다루는 거라면 이 문법을 적극 활용하자.

const func = () => {
  const obj = {}
  console.log(obj.user) // A

  return obj.user?.name //B
}

func()
// A: console >> 'undefined'
// B: console >> 'undefined'

기타 - 한마디

이 문법을 쓰지 않더라도 충분히 에러처리를 할 수는 있지만, 코드를 한 줄이라도 줄이기 위해 쓰는 것 정도는 괜찮다고 본다.

참고 영상

코딩애플 유튜브 영상

[JavaScript] String.prototype.indexOf()에 대한 고찰

Tue, 10 Jan 2023 23:43:00 +0000

indexOf가 뭘까?

JavaScript에서 String(문자열) 타입을 다루다 보면 ‘자르기’를 위해 slice를 쓰게 되는 경우가 종종 있을 것이다.
그런데 slice는 어디서부터 어디까지 끊겠다는 절대적 위치로 끊는 거다 보니 여러 데이터를 반복적으로 처리할 땐 규칙이 있다는 전제하에 사용할 수 있다.
그렇다면 이런 경우엔 어떡해야 할까?

A와 B가 순서대로 포함된, 그러나 어느 위치에 들어갈지는 랜덤인 String 타입 데이터 100개를 처리해야 하는데 A 앞에서 한 번 끊고 B 뒤에서 한 번 끊어야 한다.

위 상황에서 입력 데이터는 대략 이런 느낌이라고 생각하면 된다.

123AcdB1g
1A23Bd
12345ABssss

이런 상황에서 A가 몇 번째 위치인지, B가 몇 번째 위치인지 모두 for문에 if문까지 쓰며 훑는 걸 생각할 수도 있지만, indexOf를 사용하는 방법도 있다.

MDN에서는 간단하게 이런 예시들이 있다.

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';

const searchTerm = 'dog';
const indexOfFirst = paragraph.indexOf(searchTerm);

console.log(`The index of the first "${searchTerm}" from the beginning is ${indexOfFirst}`);
// expected output: "The index of the first "dog" from the beginning is 40"

console.log(`The index of the 2nd "${searchTerm}" is ${paragraph.indexOf(searchTerm, (indexOfFirst + 1))}`);
// expected output: "The index of the 2nd "dog" is 52"

한마디로 하자면 indexOf는 특정 문자열의 위치를 알려주는 아주 유용한 메소드다.
단, 찾으려는 동일한 문자열이 두 곳 이상에 있다고 해도 첫 번째로 발견된 위치만 알려준다.
그래서 특정 번째의 위치를 알고 싶다면 두 번째 인자를 이용하면 된다.
자세한 내용은 아래의 구문을 보자.

구문

str.indexOf(searchValue[, fromIndex])

매개변수

searchValue
찾고자 하는 값을 넣는다. 문자열에서 찾는 것이므로 마찬가지로 String 형태여야 한다.

fromIndex (Optional)
어디서부터 찾을지 정한다.
이는 Number형태이면서 0 혹은 자연수여야 의미가 있으며, 음수나 유리, 혹은 다른 타입의 값이 들어가도 특별히 오류가 나지는 않는다.
의미 없는 값 ex) -1, 'string', 0.5 …

반환 값

fronIndex(default = 0)부터 처음으로 발견한 위치 인덱스(=숫자)를 리턴한다.
없으면 -1을 리턴한다.

추가 예제(MDN)

'Blue Whale'.indexOf('Blue');     // returns  0
'Blue Whale'.indexOf('Blute');    // returns -1
'Blue Whale'.indexOf('Whale', 0); // returns  5
'Blue Whale'.indexOf('Whale', 5); // returns  5
'Blue Whale'.indexOf('Whale', 7); // returns -1
'Blue Whale'.indexOf('');         // returns  0
'Blue Whale'.indexOf('', 9);      // returns  9
'Blue Whale'.indexOf('', 10);     // returns 10
'Blue Whale'.indexOf('', 11);     // returns 10

참고 사항

대소문자를 구별한다.
- 'Blue Whale'.indexOf('blue'); // returns -1

if? test

만약 빈 문자열('')을 사용하면 어떻게 될까?
- ''.indexOf()에서 문제없이 작동하며 빈 문자열을 찾는다 했을 때 0을 리턴한다.
- 'string'.indexOf('')에서도 문제없이 작동하며 0을 리턴한다.
만약 undefined로 사용하면 어떻게 될까?
- undefined.indexOf()는 당연히 타입 에러가 뜬다.
- 'string'.indexOf(undefined)는 작동하며 -1을 리턴한다.

기타 - 한마디

개발자로 취업하고 스트링 데이터를 가공할 일이 생겼는데 이 메소드를 제대로 다룬 건 그때가 처음이었다.
그래서 블로깅할 메모 목록에 이것이 있었고, 그래서 이 글을 쓰게 됐다. :D

[VSCode] javascript 자동정렬 command(⌘) + K + F 명령어 안 먹힐 때 - Mac 기준

Sun, 08 Jan 2023 18:01:00 +0000

이 글을 쓰게 된 이유

개인 맥북을 포맷한 뒤 다시 시작하는데 자동정렬이 안 돼서 5분 정도 애를 먹었다.
VSCode에서 익스텐션으로 Prettier나 Beautify를 안 쓰고 나처럼 command(⌘) + K + F로 특정 부분만 코드정렬을 하는 사람을 위한 글이므로 참고 바란다.

VSCode에서 Extensions 안 쓰고 자동정렬 하는 방법

VSCode로 javascript를 다루는 사람이라면 알아둬야 할 단축키 중 하나!

command(⌘) + K + F

내가 드래그앤드롭 같은 블록을 지정한 부분에 한해서 저 단축키를 쓰면 내 세팅에 맞춰 자동정렬이 된다.

예시

VSCode 기본 세팅 공백 4칸

VSCode 공백 2칸으로 바꿨을 때
신경 쓰이는 세로줄..

command(⌘) + A(전부 선택) 이후 command(⌘) + K + F(자동정렬)
편안..

자동정렬 단축키가 안 먹혀요

The key combination (⌘K, ⌘F) is not a command.

오늘 내가 겪은 일이다.
결론부터 말하면 setting.json을 확인해봐야 하며, 부가적으로는 javascript 언어 파일 기준이라는 것을 염두에 두자.

해결 방법

command(⌘) + Shift(⇧) + P를 입력한다.
setting.json을 검색 후 Open User Settings를 선택한다.
"javascript.format.enable"가 false로 되어 있다면 true로 바꾼다.

command(⌘) + Shift(⇧) + P

"javascript.format.enable" 확인

"javascript.format.enable": true로 변경

[Diary] C기업 코딩테스트 후기

Thu, 21 Apr 2022 22:06:00 +0000

두 번째 온라인 코딩테스트!

구직활동을 시작한 지 3개월째…
슬슬 서류 합격 소식이 마구 들려오고 있다!
그래서 그런지 1주일에 4일, 1일 1면접이 된 상황이 와 버려서… 일정 짜는 데에 정신이 없다 ㅠㅠ

그리고 직접 만나서 코딩테스트 하는 경우도 있지만 온라인 코딩테스트도 하게 되어서 오늘은 그 얘기를 하고자 한다.

코테와 면접은 별개?

취업을 하고자 한다? 그러면 가고자 하는 기업에 서류를 넣는다! 이건 당연히 먼저 해야 할 일이다.
그러면 합격한 뒤에는 무슨 일이 벌어질까?

코테를 먼저 본 뒤에 그 합/불합에 따라 면접 기회를 갖게 되는 곳이 있고,
코테를 보되 그 결과 상관없이 면접에서 코테 때의 얘기를 하기도 하고,
코테를 먼저 안 보고 면접에서 코테를 보는 경우도 있는 듯하다.

나는 지난 2월에 온라인 코테를 본 이후 온라인으로 코딩테스트를 볼 일은 없었는데 이번에 하게 됐다.
또다른 TMI로는 이 C기업의 코테를 보기 위해 하루이틀 쉬고 오늘 각 잡고 보려고 메일함을 갔더니…
새로운 곳(R기업)에서 또 온라인 코테 링크를 보내와서 헉 했다는 얘기…

해커랭크?

이번에 코딩테스트를 보는 회사에서는 수많은 언어들을 선택할 수 있는 문제 5가지를 풀게 했는데, 사이트는 HackerRank에서 진행되었다.
문제부터 설정까지 모조리 영어로만 되어 있어서 얼떨떨했었다. 거기에 문제 자체는 긁지 못하도록 복사행위나 오른쪽 버튼도 금지!
다행인지 모르겠지만 코드창에서는 복붙이 가능했다. 코드 작성하는 사람의 편의성을 위한 것 같다.
(이렇게 쓰고 보니 각 범위에서 행동 제한을 걸어두는 구현도 해보고 싶다.)

결론 후기

5문제를 240분 안에 풀어야 했는데, 첫 번째 문제는 푸는 거 자체는 쉬웠지만 시간복잡도 문제로 몇몇 문제가 덜 풀려서 고생을 좀 했었다.
두 번째 문제는 부끄럽게도 문제 자체를 제대로 이해하지 못해 다 풀지 못했다 ㅠㅠ
세 번째, 네 번째 문제는 비슷한 문제를 코드스테이츠에서 풀어봐서 참고하며 풀 수 있었고,
마지막 문제가 제일 난관이었다.
graph tree 관련한 문제였는데 코드스테이츠 Toy를 전부 무난하게 푼 사람들이나 풀 수 있을 정도의 난이도 같았다;;;
마지막까지 최선을 다 했지만 결국 수도코드 조금만 적고 끝나버렸다 ㅠㅠ

비록 좋은 결과를 내진 못할 거 같지만, 그만큼 다른 중견 이상의 기업들도 이 정도는 당연히 볼 거 같다는 생각도 들었었다.
한 후기에서는 이 기업이 토스보다 어려운 난이도라더니, 그렇게 쓴 이유를 알 것 같달까…
이왕 이렇게 어렵게 접한 거, 다음엔 더 공부를 해서 능숙하게 해 보여야겠다!

[Database] RDBMS와 NoSQL의 차이

Wed, 20 Apr 2022 16:14:00 +0000

이 글을 쓰게 된 이유

나는 그동안 NoSQL을 단순히 개념 배우며 살짝 테스트 형식으로 써보기만 했지 실전으로 써본 적은 없다.
다만 RDBMS는 확실하게, 당연하게 사용할 수밖에 없었는데도 불구하고…
최근 면접에서 이 둘의 차이점이나 특징을 얘기 못하고 끝난 적 있었다…ㅠㅠ;
그래서! 이왕 얘기 나온 김에 정리하면서 제대로 파악하고자 한다!

RDBMS?

우선 둘의 차이점을 알기 전에 각각의 특징과 개념은 알아야 하지 않을까?
RDBMS는 DBMS에서 Relational의 약자 R이 붙은 단어이다.

DBMS는?

그렇다면 DBMS는 뭘까?
사실 데이터베이스의 정의부터 파악해야겠지만, 우리는 이 글에서 RDBMS와 NoSQL의 차이점을 알고 싶은 것이니,
기본 개념은 알고 있다는 전제하에 간단히만 다뤄보자.
DBMS는 DataBase Management System의 약자로, 데이터베이스 관리 시스템이다.
다수의 사용자들이 데이터베이스 내의 데이터를 접근할 수 있도록 해주는 소프트웨어 도구의 집합인데, 유형과 종류가 매우 많다.

유형으로는 RDBMS, NoSQL DBMS, IMDBMS, CDBMS가 있고,
종류로는 대표적으로 Oracle, MySQL, MSSQL, MariaDB 등이 있다.

그래서 RDBMS란?

<데이터베이스 스키마 그림>

앞서 말했든 R은 Relational의 약자로, RDBMS는 관계형 데이터 베이스 시스템이라고 할 수 있다.
관계형 데이터 모델을 기초로 두고 모든 데이터를 2차원 테이블 형태로 표현하는 데이터베이스를 RDB라고 하며, 그를 다루는 시스템인 것이다.
RDBMS에서의 저장 방식은 SQL에 의해 저장되고 있으며 정해진 스키마에 따라 데이터를 저장하게 된다.

<프로젝트 때 사용했던 스키마>

위 그림과 같이 여러 테이블이 외래키(foreign key)를 이용하여 연결되어 있는 상황을 참고하면 된다.
user 테이블의 id는 고유키이지만 post 테이블의 userId, comment 테이블의 userId가 외래키로 연결되어 있다.

이렇게 테이블간의 관계에서 외래키를 이용한 테이블 사이 Join이 가능하다는 게 RDBMS의 가장 큰 특징이다.

NoSQL?

RDBMS의 한계

RDBMS는 데이터 관리에 가장 널리 사용되는 접근 방식이다. 하지만 이 관계형 모델에는 특정 사용 사례에서 문제가 될 수 있는 몇 가지 제한 사항이 존재한다.
이는 아래에 정리할 ‘RDBMS 단점’과 같다.

모든 데이터가 2차원 테이블끼리 연결되어 있다 보니 시스템이 커질 경우 JOIN문이 많은 복잡한 쿼리문을 사용해야 할 수 있다.
성능향상을 위해서는 수직적 확장(Scale up)만 지원.
- 비용이 기하급수적으로 늘 수 있다.
스키마로 인해 데이터가 유연하지 않다. 스키마를 변경할 시 그 과정이 번거롭다.

여기서 말하는 ‘수직적 확장’이란 다음을 참고하면 된다.

수평적 확장(Scale out) : 수평적 확장(Horizontal Scalability)은 더 많은 서버를 추가해서 데이터베이스를 전체적으로 분산시키는 것을 의미한다.
- ex) 하나의 처리 능력을 가진 서버에 동일한 서버 6대를 더 추가하여, 총 7의 처리 능력을 만드는 것.
수직적 확장(Scale up) : 수직적 확장(Vertical Scalability)는 CPU나 RAM 같은 부품이나 하드웨어를 추가해주거나 교체를 해 전체적인 성능을 향상시키는 것을 의미한다. 그래서 소프트웨어의 설계나 구조에 변화를 주거나 시간을 따로 쏟을 필요가 없다. 단순하게 데이터베이스 서버의 성능을 향상시킨다.

RDBMS의 또 다른 제한 사항은 관계형 모델이 구조화된 데이터 또는 사전 정의된 데이터 타입과 일치하거나, 최소한 미리 결정된 방식으로 구성되어야 데이터를 쉽게 정렬하고 검색할 수 있도록 설계되었다는 것이다. 하지만 이메일 메시지, 사진, 비디오 등과 같은 비정형 데이터가 보편화되었다는 사실이 이러한 제한이 더욱 크게 부각시켰다.
그래서 개발자들은 기존의 관계형 데이터 모델의 대안을 찾기 시작하였으며 이로 인해 NoSQL 데이터베이스의 인기가 높아졌다.

그래서 NoSQL이란?

딱 보면 ‘SQL이 아니다’ 같은 의미로 보이는데, 위키백과에서 참고된 이 글에 의하면 ‘non-relational’, 혹은 ‘non SQL’이라고 한다. 다만 NoSQL을 다룬 다른 글들을 참고하면 ‘Not Only SQL‘의 약자로 인식되기도 하는 듯하다.
NoSQL 데이터베이스는 전통적인 관계형 데이터베이스(RDBMS)보다 덜 제한적인 일관성 모델을 이용하는 데이터의 저장 및 검색을 위한 매커니즘을 제공한다.

즉 테이블 간의 관계를 정의하지 않는다.
앞서 언급한 이메일 메시지, 사진, 비디오 같은 비정형 데이터 및 빅데이터 등장으로 인해 데이터가 기하급수적으로 증가함에 따라 데이터베이스 성능 향상을 위해 등장했다.
RDBMS는 수평적 확장이 힘들기에 이러한 데이터베이스 형식이 생긴 것이다.
성능의 확장만 생각하고 보면 데이터 일관성 대신 성능 향상의 가성비를 따졌다고 볼 수 있겠다.

NoSQL에도 여러 종류가 있는데, 그중 대표적인 네 가지는 다음과 같다.

Key-Value Database
- Redis, Riak, Amazon Dynamo DB
Document Database
- MongoDB, CouthDB
Wide Column Database
- HBase, Hypertable
Graph Database
- Neo4J

RDBMS / NoSQL 장단점

장점

RDBMS

정해진 스키마에 따라 데이터를 저장하기에 명확한 데이터 구조를 보장
- 구조의 완전성 보장
관계를 설정하기에 데이터를 중복없이 하나만 저장

NoSQL

스키마가 없기에 유연
언제든지 데이터를 조정하고 필드를 추가할 수 있음
수직 및 수평 확장 모두 가능하기에 데이터 분산 및 모든 읽기/쓰기 요청을 원활히 처리 가능

단점

RDBMS

테이블간의 스키마 관계에 의해 시스템이 커질 경우 JOIN문이 많은 복잡한 쿼리문을 사용해야 할 수 있음
성능향상을 위한 수직적 확장만 지원하며 비용이 크게 들음
스키마로 인해 데이터가 유연하지 않음
- 스키마를 변경할 시 그 과정이 번거로움

NoSQL

데이터 중복이 발생할 수 있음
- 중복된 데이터가 변경될 경우 모든 컬렉션에서 수정 수행 필요
스키마가 없기에 명확한 구조를 보장하지 않으며 데이터 구조를 결정하기 어려움
- 구조 결정을 미루게 됨

RDBMS / NoSQL 선택

그렇다면 어떤 프로젝트에서 어떤 데이터베이스 시스템을 사용해야 좋을까?
위에 정리된 장단점들을 고려하여 선택하면 되지만, 좀 더 풀어서 정리하겠다.

RDBMS는 명확한 스키마가 중요할 경우, 보이는 스키마가 필요할 경우 유용하다. 또한 데이터 변경이 수시로 일어날 것 같다면 RDBMS를 사용하는 게 좋다.

NoSQL은 정확한 데이터 구조를 가늠하기 힘들면서 데이터 구조가 변경 및 확장이 될 가능성이 있을 경우 유용하다. 그러나 앞서 말했듯 데이터 변경이 일어날 경우 Update가 힘들기 때문에 이런 상황이 별로 일어나지 않을 때 사용하기 좋다.
또한 성능 향상을 하기 좋기에 막대한 데이터를 다뤄야 하는 작업에도 적합하다.

[Linux] pipe (`|`)란? + redirection(`>`)과의 차이

Tue, 19 Apr 2022 21:36:00 +0000

pipe(`|`) - 파이프?

보통 리눅스라고 하면 ‘터미널’(혹은 iTerm2)을 켜서 쉘을 사용하는 걸 떠올리곤 한다.
가장 많이 쓰는 명령어로는 ls, cd, cat, nano 등이 있는데, 이러한 명령어들을 더욱 강력하게 활용하기 위한 기능 중 하나가 파이프(|)이다.

사용법과 예시를 들기 전에 한 가지 상황을 비유해보겠다.
한 액체가 흐를 수 있는 관이 있다고 가정하자. 이 관 안에선 터미널에 명령어를 입력하여 실행하고 결과가 나오는 하나의 과정이 이루어진다. 마치 액체를 입구에 주입하고 관 내부에서 흘러 출구로 나오듯 말이다.

그런데 이곳에 파이프(|)라는 필터관이 추가된다고 하자.
필터관을 쓰면 새로운 명령어에 따른 입력/실행/결과의 과정이 처음 관에서의 결과에 추가로 덧씌워진다.
이렇게 되면 두 가지의 명령어를 동시에 만족하는 결과가 나온다고 생각하면 된다.

만약 처음 관에서 초콜릿을 내보내라는 명령어를 쓰고, 파이프관을 추가로 써서 동그라미 모양만 내보내라 했다면
동그라미 모양의 초콜릿만 나오게 되는 것이다.

첫 명령어 | 두 번째 명령어 | 세 번째 명령어

즉 첫 명령어 결과를 파이프를 통해 두 번째 명령어 단계로, 그 결과를 또 파이프를 통한 세 번째 명령어 단계로 이어가는 것이다.

사용 방법 및 예시

1
ls를 사용하게 되면 그 위치의 파일, 폴더 등이 특정 조건에 맞게 정렬되어 출력될 것이다. 그렇다면 sort는? 아마 그냥 sort만 쓰면 아무 일도 벌어지지 않을 것이다.
다만 파이프로를 이용해 ls | sort -r을 하게 되면 그냥 ls를 썼을 때와 달리 역순으로 정렬되어 출력될 것이다.

# ls
a.txt
b.txt
c.txt

# ls | sort -r
c.txt
b.txt
a.txt

2
more 명령어는 sort처럼 그냥 쓸 수 없고 파일명과 함께 쓰며 화면 단위로 끊어 출력해 주는 명령어이다.
이를 ls와 함께 쓰면 어떻게 될까?
한 폴더에서 ls 명령어를 썼더니 30여 개의 목록이 떠서 스크롤을 해야 했던 상황이 있다고 하면,
more명령어로 인해 보이는 터미널 화면 내부까지만 출력되고 그 다음엔 엔터를 연달아 치며 그다음 목록을 출력하게 된다.

// 8줄만 보이는 터미널 창 크기라고 가정.

# ls
1
2
3
4
5
6
... // 생략 + 아래로 스크롤
30

# ls | more
1
2
3
4
5
6
: // 여기서 enter를 누르면 그다음 목록이 이어짐

redirection(`>`)과의 차이점

재지향이라고도 불리는 redirection(>)은 한 명령어로 인해 출력되는 데이터를 다른 장치로 보내는 역할을 한다.
파이프와 가장 큰 차이점은
파이프의 경우 첫 명령어의 output(stdout)을 다음 명령어(프로그램)의 input(stdin)으로 쓴다면,
재지향의 경우 첫 명령어의 output을 다음에 오는 파일에 저장하거나 다른 스트림으로 넘긴다는 것이다.

파이프 : 프로그램(명령어) | 프로그램(명령어)
재지향 : 프로그램(명령어) > 파일

다른 스트림으로 넘기는 상황은 다음과 같다.
만약 test0.txt 파일이 존재하지 않는데 그것을 test1.txt 이름으로 복사-저장한다고 해보자. 그러면 cat test0.txt > test1.txt의 명령어를 쓰게 되는데 cat: test0.txt: No such file or directory라는 오류와 눈이 마주치게 될 것이다. (단 test1.txt 파일 자체는 만들어진다.)
그럴 때 이렇게 하는 것이다.
cat test0.txt > test1.txt 2> error.log
2는 리눅스에서 표준에러이기에 2>를 사용함으로써 에러처리를 하겠다는 의미가 된다.
이렇게 되면 아까와 같이 빈 내용의 test1.txt 파일이 만들어짐과 동시에 error.log라는 파일이 만들어지며 cat: test0.txt: No such file or directory라는 내용이 담겨지게 된다.

[Diary] 두 번째 서류합격 > 1차(기술) 면접 후기

Sat, 16 Apr 2022 17:51:00 +0000

두 번째 서류 합격!

구직활동을 시작한 지 어언 3개월차…
그리고 입사 지원 수만 40여 곳…
그러다 최근, 한 곳에서 서류 합격 연락이 왔다!

프론트엔드, 백엔드, 서버 등 포지션을 나눠서 모집하는 곳과 달리 ‘풀스택 개발자’를 뽑는 곳이었다.
거의 이 기업에 지원하기 위해 풀스택 개발자로서의 이력서도 따로 만들었던 나로서는 꽤 뜻깊은 서류 합격 소식이었다.

이전 서류 합격 기업은 온라인 코딩테스트를 본 뒤 화상으로 직무 면접을 봤었는데,(해당 후기글)
이번 기업의 경우 바로 대면 면접 일정을 잡아야 했다.
코딩 인터뷰 + 기술 면접을 같이 보는 것이다.
1시간 정도 소요될 거라고 했는데, 최근에 본 내가 시간을 확인해 보니 40분 정도 걸렸다.

면접 보기까지의 과정

서류 합격에 대한 소식이 원티드 어플(+메일 알람), 해당 기업으로부터의 면접 안내 메일, 기업으로부터의 문자가 한꺼번에 왔다.
원티드에서는 합격했다고 축하하는 거였고, 메일은 면접에 대한 간단한 소개와 날짜와 시각을 정하라는 링크가 같이 있었다.
문자는 메일을 보냈으니 문제 있으면 얘기하라는 간단한 안내 내용이었다.

첫 합격 기업은 면접 시간대 리스트를 문자로 주고받았는데 이곳은 다른 사람이 선점해 버린 면접 시간, 아직 선점 가능한 시간 등을 다른 사이트에서 직접 고르는 거여서 신기했다.

변경해야 했던 면접 시간

처음엔 언제 면접을 볼까 고민하는데, 새로고침을 할수록 다른 합격자들이 먼저 하나하나 선점해가고 있었다.
그래서 으악 하며 급하게 골랐는데 알고 보니 다른 일정이 잡혀 있었다…;;
다시 선택을 할 수 없었던 시스템이었기에… 담당자에게 직접 연락하여 면접 시간을 바꿔야 했다…ㅠㅠ;;

면접 장소로 가다

면접 장소에 일찍 가서 위치를 파악해두고 다른 곳에서 시간을 채우고 있었는데 15분 전쯤 채용 안내 담당자분에게 연락이 왔었다.

ㅇㅇㅇ 로비(안내된 면접 장소)에 도착하면 연락해줘라, 직접 안내해드리겠다.

그래서 10분 전에 해당 장소로 가서 연락드렸더니, 얼마 안내 담당자분이 오셔서 면접보게 될 장소로 직접 안내해주셨다.
엘레베이터에서에서는 멀리서 왔는지, 1시간 이상 걸렸는지, 궁금한 복지 사항 있으면 자신에게 물어보면 다 알려준다든지, 등등의 간단한 얘기가 오갔다.

차나 커피 중 골라서 하나 주신다는데 긴장하면 마시는 것조차 제대로 못할 거 같아서 일부러 거절했다. 그래도 안내자 분은 차를 한 잔 주셨었다.
이후 CTO라고 소개해주시는 분이 오셔서 1:1 면접이 시작됐다.

어떤 질문을 했는가?

회사에 대한 인식

코딩 인터뷰와 기술 면접을 본다곤 했지만, 자기소개나 이 회사를 선택한 이유 등에 대해서는 꼭 질문이 오는 것 같다.
이번 면접에서도 첫 질문 리스트가 다음과 같았다.
다 한 번씩은 생각을 해본 적 있는 질문들이었기에 막힘없이 대답을 할 수 있었다.

어쩌다가 이 회사에 지원하게 되었는가
다른 회사 공고들도 많이 볼 텐데, 회사 선택 기준은 무엇인가
스타트업에 대해 어떻게 생각하는가

회사 직무에 대한 인식

다음으론 회사가 모집한 직무 자체에 대한 질문들이 이어졌다.

우리가 풀스택 개발자를 모집했는데 그에 대한 생각은 어떠했는가

이후에는 왜 풀스택 개발자를 모집했는지에 대한 답도 따로 해주셨었다.

코딩 인터뷰

코딩 테스트처럼 손코딩으로 코딩 인터뷰를 진행했다.
그 면접실에 화이트보드가 있었는데, 거기에 보드마카로 적어야 했다.
CTO님은 간단한 인풋, 아웃풋의 예시를 3개 주시더니 규칙을 찾아서 내가 함수로 만들면 됐었다.
언어는 편한 걸로 선택하면 됐다.

짧은 시간 고민하다가, 우선 어떻게 풀 것인지 설명드렸다.
이후 본격적으로 코드를 적기 시작했다.

다 쓴 뒤, 다시 설명드렸는데, 설명하다보니 문제가 된 지점이 있어서 그 부분은 즉석에서 수정하며 다시 설명드렸었다.

특별히 지적당한 지점은 없었다.
그런데 추가 입출력 예시를 들며 현재까지 내가 적은 코드로는 풀지 못하는 상황을 되물으셨었다.
다행히 내가 바로 풀 수 있는 예시였어서, 초반에 어떤 처리를 하겠다는 말을 드리자 해결됐다면서 바로 넘어가셨다.

이후 마지막으로 화이트보드를 사진찍으셨다.

진짜 기술 면접

드디어 기술 자체에 대한 질문이 시작되었다.

최근에 읽을 개발자 관련 책이 있는지
배포, 클라우드 경험이 있는지
테스트 코드 경험이 있는지
RDBMS, NOSQL 특성과 차이점 설명하기
리눅스의 파이프 설명하기

나는… 4번과 5번에 대답하지 못했다…ㅠㅠ 그래서 바로 블로깅을 하고자 한다…!
실제로 써보지 않았기에 대답을 못할 게 아니라, 공부해서라도 간단한 지식이라도 전달했어야 했는데 아무말도 못했다는 사실에 내 자신에게 실망스러웠다 ㅠㅠ

그 외 면접 etc.

면접관님이 내게 회사에 대한 배경을 설명해주시기도 하고, 내 의견을 은근히 궁금해하시는 듯한 이야기도 있었어서 대화처럼 이어가기도 했다.
마지막으론 추가 질문 없냐고 하셨는데 면접 결과 날짜, (양해 구한 뒤) 회사와 전혀 관계없는 얘기도 나눴었다.

최종 후기

이곳은 3번 정도 면접을 볼 거라는데 과연 붙어서 그 과정에 발을 딛게 될지 궁금하다.
어떤 결과가 나를 기다리든, 진심으로 좋은 경험을 한 것 같아서 기분 좋기도 했다.

[TIL] 개발자 면접 팁 정리 - 회사 선택 기준

Thu, 14 Apr 2022 22:20:00 +0000

회사 선택 기준

자소서에도 많이 쓰고, 면접에서도 많이 나오는 질문.
그것은 ‘회사 선택 기준이 무엇인가요?’이다.

모든 면접의 답은 30초~1분 내로 말하는 시간을 갖곤 한다.
특히 연습하는 구직자들이 많은데, 나는 코드스테이츠에서 페어와 모의면접을 해본 이후 딱히 누군가를 대상으로 한 적은 없다.
그래서 저 질문의 답을 그저

‘혁신과 발전을 비전으로 갖는 회사에서 제 능력을 발휘하며 더욱 레벨업하고 싶습니다.’

라는 간결한 문장만 머릿속에 되뇌었다.
이를 입으로 내뱉어보자.
어째서 그런 회사를 갖는지, 어째서 능력을 발휘하며 레벨업하고자 하는지, 그 레벨업은 무엇을 의미하는지 궁금할 것 같지 않나?
자신이 내뱉는 답에서 더 보충하고 설명할 수 있는 말을 추가하며 30초 정도의 문단을 만든다고 생각해 보자.

본인만의 기준을 어필하자!

우선 이 질문은 직업 가치관을 묻는 것이라고 할 수 있다.

본인이 이 회사를 선택했음에 심사숙고했음을 알려야 한다.
이 회사와 직무 자체를 고민하고 생각하여 본인만의 기준으로 선택했음을 말이다.

작성자가 처음 준비했던 문장에서 ‘발전과 혁신을 비전으로 갖는 회사’에 대해 보충해 보자.
왜 혁신과 발전을 비전으로 갖는 회사에 가고 싶을까?
혁신을 바라는 곳은 한마디로 도전을 하고, 여러 의견에 귀기울이며, 실패도 감내한다는 곳이 된다.
그리고 발전을 원하는 곳은 그 혁신 과정에서 멈추지 않고 더 좋은 서비스가 되도록 여러 노력을 기울인다는 뜻이 된다.
나는 그런 조직문화를 갖춘 회사에서 능력을 발휘하고 더욱 레벨업하고 싶다.

그렇다면 분명 꼬리질문이 올 것이다.

우리 회사가 그 기준에 부합하다고 생각하는 이유는?
다른 회사도 그 기준에 부합하지 않나요? 왜 우리 회사인가요?

첫 번째의 경우 실제로 해당 회사 소개와 비전, 뉴스(언론보도) 등을 통해 맞춰서 말할 수 있다.
회사를 칭찬할 만한 좋은 점도 미리 알아두면 좋다.

두 번째의 경우 내가 그 회사에게 특별히 끌렸던 핵심 키워드, 혹은 어디선가 접했던 경험 등을 토대로 말하면 좋다.
이 문제는 다르게도 바뀔 수 있다. ‘왜 이 직무인가요?’이다.
자신이 특정 포지션 직무로 지원한 것은 이 기업뿐만이 아니라 다른 기업/회사에서도 준하는 기준이 있을 것이다. 그를 토대로 해당 회사의 특징과 연관지어 얘기하면 좋을 것이다.

[Diary] 기술면접 준비하며 든 생각

Thu, 14 Apr 2022 17:00:00 +0000

두 번째 서류 통과!

구직활동을 시작하고 40여곳에 지원하며 두 번째 서류 통과 기업이 탄생했다!
첫 서류 통과했던 기업은 온라인 코테를 본 뒤 화상 면접으로 코테에 대한 얘기와 기술면접을 봤었는데,
이번 기업은 코테와 기술면접을 대면으로 진행한다…!

그래서 그런지… 매우 떨린다… 누가 보는 앞에서 푸는 것은 긴장될 수밖에 없으니까…

서류통과 소식을 전해들은 뒤 우연히 커리어 코치님과 연락이 닿아서 이 소식을 전해드렸더니, 코드스테이츠 클래스룸에서 봤던 10가지 정도의 기술면접 질문의 40배는 되는 긴 질문 항목 리스트를 전해주셨다…

어엇… 어어엇….
이번엔 풀스택으로 들어간 터라 프론트와 백 둘 다 대답이 가능해야 하는데 갑작스럽게 많아진 준비 항목들에 발에 불이 붙었다.

당장 해야 할 것 = 이력서 정독

나는 당장의 면접 질문을 보는 것도 중요하지만 내가 낸 이력서를 입으로 직접 읊어보는 시간을 갖기로 했다.
이전 기업에서 프로젝트 때 내가 한 일에 대해 내가 제대로 표현을 못해서 이력서를 내가 보는 일이 발생했었기에, 이번엔 그런 일이 없도록 하기 위해서다.
이후 이곳에서 들어올 질문들에 대해 기술면접 질문 리스트와 비교하며 몇 개 뽑아서 준비하고,
마지막으로 코테에 대비하는 것이다.

당장 내일이지만…! 할 수 있을 것이다.
자신감 없으면 사람도 없어보이니까 집중 뽝 해서 준비하고 다녀올 것이다!

기업에 대한 정보와 소식, 이력은 어제도 한번 뉴스 기사 등을 훑어봤기에, 내가 다룰지도 모르는 서비스 자체에 대한 정보만 좀 더 알아보면 될 듯하다.

[TypeScript] 타입스크립트가 뭘까?

Tue, 12 Apr 2022 15:16:00 +0000

타입스크립트?

타입스크립트(TS)란 프로그래밍 언어 중 하나로, 자바스크립트(JS)를 쓰는 사람들이라면 익숙하게 할 수 있는 언어일 것이다.
이유가 무엇인고 하니, 나도 파이널 프로젝트를 할 때 이게 뭘까 하다가 자바스크립트와 거의 유사한 구조지만 변수 타입을 지정한다는 것이 눈에 보이는 큰 차이점이었기 때문이다.
위키백과를 참고해도 ‘자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어’라는 소개로 시작된다.
마이크로소프트에서 개발, 유지하고 있으며 ‘엄격한 문법’을 지원한다는 말도 적혀 있다.

그냥 위키백과를 정독한다고 한다면 이 글을 쓰는 이유가 없으니, 간단하게 더 집고 가겠다.

자바스크립트와의 차이점

자바스크립트와 타입스크립트는 어떻게 다를까?
무수한 차이점이 있을지어도 딱 눈에 보이면서 실제 접하면 바로 알게 되는 큰 차이점들이 있을 것이다. 그걸 정리해 보겠다.

클라이언트 측 스크립팅? 객체지향?

자바스크립트는 클라이언트측 스크립팅 언어(CSR을 생각하면 된다)라면, 타입스크립트는 객체지향 컴파일 언어다.

자바스크립트 먼저 설명하자면,
CSR과 SSR을 설명했던 글에서도 잠깐 나왔지만 JS 자체는 CSR의 대표적인 언어로서, 서버와의 상호작용이 덜한 언어이다.

그런데 타입스크립트의 경우 class와 interface의 특징을 지원함으로써 완전한 객체지향 프로그래밍 환경을 제공한다.
객체지향이라고 하면 객체들의 모임을 생각하면 되는데, C++, Python, Java 등의 언어들이 이와 같다.

분명 자바스크립트와 유사한 구조라고 했음에도 굴러가는 방향은 다른 것이다.

정적 유형 검사

타입스크립트는 자바스크립트와 달리 정적 유형 검사를 제공한다.
쉽게 말하면 코드를 돌려보기도 전에 버그나 오류를 찾아준다고 생각하면 된다. 이는 코드 안전성이 높아지는 장점을 갖고 있다.
이건 실제로 코드 작성법과 그 상황을 보여 줘야 ‘아, 진짜 잡아주네?’ 할 것이다. 다음 글에 코드 차이점을 설명할 거라 그때 한꺼번에 정리하고 링크를 달아두도록 하겠다.

이외의 타입스크립트의 특징

‘타입’이라는 이름에 걸맞게 변수에 타입을 지정한다.
- 엄격한 타이핑의 코드 적용
자바스크립트와의 상호 변환이 간편하다.
자바스크립트의 상위 집합이다 보니 자바스크립트의 기능은 다 갖고 있다.
MS에서 만든 언어이기에 그와 관련된 프로그램이나 플러그인과 좋은 궁합을 갖고 있다. (ex. vscode)

[Diary] 개발자 팁 영상을 보고 나서... 1탄 이력서 편

Thu, 07 Apr 2022 14:45:00 +0000

eo의 개발자 특집편을 보다

코드스테이츠 개발자 커뮤니티 채널에 올라온 유튜브 영상 하나가 있었다.
eo채널의 베테랑 개발자들이 인정한 필살 이력서 大공개 | 개발자 특집 2편.
한창 매일매일 이력서를 조금씩 손보며 입사 지원을 넣는 내게는 반드시 봐야 할 영상이었다.

제목만 봐도 ‘이런 이력서라면 회사가 뽑을 것이다’라는 내용을 담을 것 같아서 재빨리 봤다.
영상에 나오는 인물들 중에 한 분은 내가 이력서를 쓸 때 참고했던 분이었다…!
실제 참고 이력서를 보면서 얘기를 나누는 거다 보니, 그냥 이력서만 볼 때와는 또다른 면을 참고할 수 있었다.

이력서에 제목을 넣다.

위 이미지는 유튜브 영상에 나온 원희 님의 이력서 일부이다.
원희님은 이와 같이 설명했다.
이력서를 쓸 때는 제목이 제일 자극적으로 쓸 수 있는 요소임과 동시에, 후킹하는 요소가 될 수 있다.
그런데 이름만 쓰는 이력서가 많다. ㅇㅇㅇ라는 이름만 보고 ‘오, 좋은데?’라는 반응은 하기 힘들 것이다.
그렇기 떄문에 ‘이 사람이 왜 날 알아봐야 하는지 한 줄로 탁 꽂아주는 것’이 후킹하는 면에서 좋다고 생각된다.

또한 채용 담당자 입장에서는 되게 많은 이력서를 검토하기 때문에 일단 눈에 들어오는 게 중요하다.

이력서 제목에 맞게 나의 성과를 쓰기

위의 내용에 이어서, 채용 담당자 입장으론 개발자도 결국 비즈니스 밸류를 창출하기 위한 사람이고, 개발이라는 기술을 이용하는 사람이라고 생각할 것이다.
그렇기에 ‘나는 이런 개발을 해서 좋아진 같다.’가 아니라, 내가 이런 일을 했더니 매출이 이만큼 상승했다, 같은 나의 성과를 객관적인 지표로 보는 사람이다, 라는 걸 어필하고 싶어서 제목을 ‘데이터로 일하는 개발자’라고 선정했다고 한다.

우아한 형제들 대표님 왈,,,

우아한 형제들 대표님의 글 중 ‘일 잘하는 법’에 다섯 번째 내용이 개발자가 개발만 잘하고, 디자이너가 디자인만 잘하면 회사는 망한다.이다.
그래서 원희 님의 이력서 제목인 ‘데이터를 중요하게 여기면서 일을 하는 개발자’와 ‘그렇지 않은 개발자’가 뭐가 어떻게 다른지 생각해 보자.

원희 님은 개발자들이 주로 하는 얘기가 ‘클린 코드를 짜야 해.’예쁘고 아름다운 코드를 짜야 해’라며 그거에 대해 공부를 많이 하는 경우가 있다.
그렇지만 이는 완전히 맞는 말은 아니다. ‘아름다운 코드가 전부가 아니다.’
좋은 코드가 우리 비즈니스 성장에 얼마나 기여했는가를 한 번이라도 고민을 더 해볼 수 있다는 있는 게 ‘데이터’라는 도구라고 생각을 해서,
데이터를 보는 개발자들은 내가 짜는 코드가 몇 줄이든 그 몇 줄의 코드가 어떤 비즈니스적인 가치를 갖고 있는지 숫자로 확인하는 사람이라 생각한다. 즉 이 점이 차이라고 생각한다, 라고 얘기했다.

이력서에 매력 담기

이력서에서 나를 어떻게 표현해야 할지 모르겠는 사람들이 많다.
구직자들의 고민 리스트.

나도 내 매력을 모르겠다.
나만의 강점이 뭐지?

원희 님의 조언은 다음과 같다.

방법 1. 주변 동려들에게 물어보기.

나랑 일할 때 어떤 게 내 인재로 느껴져?
같은, ‘나의 강점을 타인의 시선으로 뽑아내는 것’이 하나의 방법이다. 실제로 이로 인해 나도 모르는 내 강점을 알게 될 수도 있다.

만약 물어볼 주변 동료가 없다면?

방법 2. 나의 활동 리스트업 하기

그동안 내가 했던 활동들을 쫙 나열해 보는 것이다.
그러면 반복되는 키워드들이 있음을 발견할 수 있을 것이다.
그 반복되는 키워드를 활용하면 된다. 제목으로도 선정할 수 있다.

조은 님은 다음과 같은 방법을 얘기했다.

방법 3. 15분 일기 쓰기

15분 시간만 맞춰 두고 일기를 쓰는 것이다.
그러면 시간 제한 때문에 내가 쓰고 싶었던 내용만 쓰게 된다는 게 특징이다.
그 내용에서 ‘아 내가 이런 사람이기를 원하는구나’, 같은 순수한 욕심이 드러나게 된다.
그 키워드를 이력서에 풀어내는 것이다.

방법 4. 이력서 자주 업데이트 하기

사람의 기억력은 생각보다 짧다.
그렇기 때문에 매달 업데이트하는 게 좋고, 이전 이력서를 돌아보다 보면 ‘내가 이 시점에선 이걸 중요시여겼네?’ 같은 것들을 돌이켜볼 수 있는 시간을 가질 수 있다.

높은 합격률의 원희 님 이력서 포인트는?

원희 님의 이력서 초반엔 Introduce라는 소개파트가 있다.
이 파트에 대해 사람들 의견이 많은데(있는 게 좋다, 안 좋다 등), 원희 님은 자신의 이야기를 글로 풀어내는 것에 자신이 있었고, 강점이라고 생각해서 이 포인트를 넣었다고 한다.
(나도 ‘Introduce’를 넣어 채용 담당자 뇌리에 이야기를 담아내겠다는 의지로 두 문단만 간략하게 넣었다.)

‘내가 이런 거에 관심이 있어요’만 적기엔 신뢰도가 부족하니, ‘내가 이런 거에 관심이 있어서 이런 일들을 했다’라는 내용을 빠지지 않게끔 노력했다고 한다.
나의 실제 사례, 나의 노력 같은 걸 녹이면 좋다.

인프런의 CTO 이동욱 님은 원희 님의 이력서의 좋은 점 첫 번째는 구체적인 숫자로 표현한 것이라고 한다.
기업에 첫 번째 개발자로 들어가서 50억 투자를 유치하고 40명 규모의 팀으로 성장할 때까지 ~~… 이러한 문장이 좋다는 것이다.

두 번째 좋은 점은 성과를 이력서에 잘 녹여낸 것이다. 위의 문장 자체가 그러함을 잘 표현했다.

조은 님은 이러한 Introduce 소개 파트를 쓰면 좋은 점으로 채용 담당자가 어떤 면을 중점적으로 이 이력서를 봐야 하는지 알기 쉬워진다고 한다.

원희 님은 자신이 작은 스타트업 회사 출신이기에 채용 담당자가 이 회사를 모를 수 있겠다는 생각을 했기에, 숫자적으로 어떠한 성과를 냈는지 적으려고 노력했다고 한다.
또한 어떤 역할로 어떤 일을 했는지도 최대한 숫자나 의도를 쓰려고 했다고 한다.

내가 이 일을 한 이유는 이러한 목적이 있기 때문이다.
내가 이 일을 했기 때문에 이러한 개선이 있었다.

이러한 아웃풋(결과물), 아웃컴(성과)을 쓰려고 한 것이다.

이 얘기에 커리어 액셀러레이터 김나이 님도 ‘결과’, ‘성과’, ‘숫자’ 포인트가 너무 좋다고 집었다.
실제로 수많은 개발자 이력서를 볼 때 이 포인트들이 빠진 경우가 많다고 한다.
사실 그 자체보다 밸류(가치)가 더 중요함을 알아두면 좋다.

웹 이력서 비결

요즘 웹 이력서를 많이 쓰는 추세이다.

링크 달기

매력은 디테일에서 나온다고 생각하는 원희 님은, 웹 이력서의 경우 링크를 달 수 있다는 점이 그 디테일을 살릴 수 있어서 좋다고 생각한다고 한다.
또한 기록할 수 있는 링크는 최대한 링크를 달았다고 한다.

많은 링크? 무조건 좋은 건 아니다

동욱 님은 링크가 무조건 많다고 좋은 건 아니라고 한다.
링크는 적절한 곳에 들어가야 한다. 궁금한 포인트마다 들어가면 좋은 것이다.
이 활동이 뭐였을까? » 링크 들어가면 상세히 있음 / 이 활동은 뭐지? » 링크 들어가면 상세히 있음
이러한 이력서는 끝나지 않았으면 하는 드라마를 보는 느낌으로 보일 정도로 좋다고 한다.

사수 없는 주니어

여기부터는 이력서 자체의 내용보다는 면접에서 이뤄질 것 같은, 혹은 참고할 만한 개발자 얘기들이 담겨 있다.

원희 님은 사수가 없는 곳에 첫 개발자로 취직했었다.
사수가 없어서 힘들었을 것 같은데 어땠냐는 질문에, 원희님은 이렇게 대답했다.
독서모임 회사에 자신이 들어서니 문과생들 사이에 혼자 있는 개발자가 되었었다고 한다.
심지어 IT 쪽 경력이 있는 직원분도 없고, 그동안 외주 업체들의 짜집기식 프로그램들만 있었다고 한다. (=굉장히 열악한 환경)
주니어였던 원희 님은 매우 힘들었지만, 해결을 내부가 아닌 외부에서 하려고 했다.
뻔뻔함이 이때 많이 성장했다고 하는데, 대표님 친구 중 CTO가 있다면 그분을 소개해 달라 하고는 ‘ㅇㅇ님 제가 이런 문제가 있는 어떻게 해결하면 좋을까요?’ 같은 조언을 구하며 이곳저곳 다 찔러봤다고 한다.

이에 나이 님은 내부에 사수가 없다면 밖에서라도 만든 것 같다고 했다. 또한 이런 자세로 일해서 빠르게 성장하신 것 같다는 얘기도 했다.
한편으로 이러한 경력 때문인지 원희님은 리드만 다섯 번을 한 경험이 있는데, 일반적인 개발자보다는 제너럴한 관점을 가졌을 거 같다는 질문도 이었다.

그에 원희 님은 다른 개발자분들에 비해 좀 더 비즈니스적인 것 같다는 답을 했다.
이 회사에 내가 얼만큼 기여를 하고 있는가, 내가 했던 일들이 얼마나 비즈니스 임팩을 만들고 있는가를 제일 중요시여겼다고 한다.
원희 님이 초기 스타트업에 많이 있었던 이유는 초기 스타트업은 손만 대면 해결할 수 있는 문제들이 많고, 그 임팩트가 크기 때문이라고 한다.
눈에 밟히는 것들을 오지랖을 하나씩 부리다 보니까 자연스럽게 제네럴리스트가 됐다고 한다.

하지만 지금은 전문성에 대한 고민이 생겼는데, 조금 더 큰 규모의 스타트업에 일하기 시작하며 문제가 생겼다고 한다.
예전에는 5만 가지고 있어도 성과를 낼 수 있었는데, 더 큰 스타트업에서는 그게 더 이상 안 되는 시점이 왔다고 한다.
그래서 요즘은 발을 넓히는 것보단 한 가지에 뾰족하게 집중해서 전문성을 쌓으려는 노력을 한다고 한다.
회사 규모에 따라 필요한 역량이 다르다는 것을 알았기에, 그걸 제너럴리스트분들이 알았으면 좋겠다고 한다.

개발자 소통 문제

다양한 직무를 경험해 본 원희 님에게 나이 님이 질문하다.
비개발 직군과의 소통을 어떻게 생각하는가?

개발 직군이 아닌 분들은 어떤 게 개발로 해결되는지도 모르고, 개발 관련 문제를 어떻게 요청해야 하는지도 모르는 경우가 많다.
말을 해서 싸우면 해결하면 되지만, 개발을 몰라서 말조차 못하는 상황이 온다는 것이다.
그래서 원희 님은 비개발 직군의 입장에서 소통을 하려고 했었다고 한다.
다른 직무의 분들이 겪는 문제를 캐치해서 같이 얘기해 보는 것이다.

그래서 이 사이클을 한번 돌면 비개발 직무 부들도 개발 프로세스에 대해 어느 정도 이해를 하기 시작한다고 한다.

사실 난 이 부분을 듣고 어느 직무 파트에 있던 다 그래야 하지 않나, 라는 생각을 했다.
개발자든, 영업자든, 기획자든, 다른 파트의 입장에서도 생각할 줄 알아야 한다는 것이다.
원희 님 같은 분들이 각 파트마다 존재한다면, 정말 더할나위 없는 기업이 탄생할 것 같다.

자기만의 단어 사전을 없애라

동욱 님이 면접에서 자주 질문하는 것 중 하나는 개발적으로 어떤 사고가 났는데 이 사고를 눈앞의 면접관들이 개발을 모르는 사람들이라고 가정하고 설명해 봐라라고 한다.
동욱 님은 회사 개발자 직원들에게 자주 강조하는 것이 자기만의 단어 사전을 없애라라고 한다.
자기 머릿속에는 기술적인 용어들이 다 정리되어 있으니까 그 용어를 쉽게 쓰지만, 그 용어가 없다는 셈 치고 설명을 하는 게 습관이 되어 있어야 다른 직군이랑 빠르게 이야기를 하기 때문에 그렇다고 한다.

유독 개발 직군만!

조은 님은 개발 직군만 유달리 다른 직군과의 소통에 문제가 생기는 경우가 많은 것 같다고 한다.
왜 개발자만 문제가 생길까? 라는 고민을 하다가, 개발자는 근본적으로 다른 직군과 커뮤니케이션을 자주 안 했던 것이 원인인 것 같다고 한다. 즉, 기존에 커뮤니케이션을 안 했다는 것이다.
개발이라 하면 그들만의 세상이 있다는 오해가 있고, 심지어 개발자들 본인도 그렇게 생각하고, ‘말이 안 통하겠지?’라는 인식을 갖는다는 것이다.
기술의 이해도가 문제가 아니라, 서로의 오해로 인한 평행선을 그리고 있다는 문제인 것 같다고 한다.
이 평행선을 허물고 없애려는 노력이 필요하다는 게 조은 님 의견이었다.

나는 이 얘기를 들을 때 개발 직군이 아니었던 때를 생각하면 그렇다, 싶으면서도 이 또한 앞서 말했던 것처럼 어느 직군이든 다른 직군에 대해 그렇게 생각할 수도 있겠다고 생각했다.
물론 개발 직군의 경우 한글, 영어 등의 기본 문법이 아닌 컴퓨터 프로그램 언어를 사용하는 직군이어서 더 선이 그어질 수도 있겠다.
그러나 어느 직군이든 본인의 툴을 갖고 일을 하는 것은 매한가지이니, 소통 자체는 어느 직군이든 중요하다고 생각한다.
그런데 역시, 전문가분들 말씀처럼 개발 직군 자체가 그렇다, 한다면, 조은 님이 말씀하신 것처럼 근본적으로 평행선을 그으려 한 과거의 이력들이 문제가 아닐까 싶다.
나는 개발 비전공자로서 이 분야, 저 분야 여러 가지를 경험해 봤으니, 소통을 해 보려고 노력해야겠다는 생각이 이 영상을 보며 더욱 강하게 들었다.

[TIL] 개발자 면접 팁 정리 from 커리어코치님

Wed, 06 Apr 2022 20:55:00 +0000

지속되는 챌린지 미션!

코드스테이츠 주관 챌린지 3기 미션이 시작되고 꾸준히 매일매일 2개씩 기업에 지원을 넣는 요즘이다.
코드스테이츠의 파트너사 공고를 확인하는 더코드쉽도 잘 이용하고 있는데(챌린지 인증으론 못하고 있다… 넣는다고 바로 지원처리 되는 게 아니어서 ㅠㅠ),
요즘 커리어코치님이 이력서 피드백을 따로 안 주시고 팁 위주로 답을 주신다.
초반엔 피드백을 주셨는데, 아무래도 고칠 게 많아서 그랬던 거 같고, 이제 여러 번 깎고 깎다 보니 더 고칠 건 안 보이고 팁을 주시려는 듯했다 ^-^!
뿌듯!! 하긴 한데 이왕 팁을 받은 거 여기에도 정리하고자 한다.

면접 팁 from. 커리어코치님

개발자 면접시 가장 중요한 것 중 하나는, ‘정확한 이해도’!
여기서의 이해도는 어떤 이해도를 말하느냐,
예시로 들자면

프로젝트 리팩토링 경험이 있음 - 왜 리팩토링을 했는지에 대한 이유
어떤 문제가 발생했을 때 조치를 취한 경험이 있음 - 어떤 조치를 취했고, 왜 그런 방법으로 문제를 해결했는지
특정 단어에 대한 언급을 함 - 그 단어에 대한 이해도

이러한 부분들을 알아두고 숙지하며 면접 준비를 하는 것이다.
실제로 나도 최근에 봤던 단 하나의 면접에서 내 이력서에 적힌 기술 몇몇을 질문했었는데, 딱 하나를 답변하지 못했었다…ㅠㅠ
그래서 이 블로그에 공부 겸 적기도 했고!!
그러나, 이렇게 나중에서야 정리하기보단 진즉 정리하고 머릿속에 제대로 담아둔 채 사회에 뛰는 것이 중요하다는 듯하다.
이 모습은 면접에서 당연히 보이게 될 테고!

그러니, 위 부분들을 제대로 해결하며 면접 준비를 해야겠다.

[Diary] 코드스테이츠 챌린지 3기 시작 준비!

Sun, 03 Apr 2022 23:00:00 +0000

코드스테이츠 챌린지 3기

내일부터 2주 동안 매일 2개 기업에 이력서를 제출하고 인증하는 미션 게임이 시작된다!
코드스테이츠에서 주최하는 챌린지 모임으로, 나는 3기에 해당한다.

150만 원 상당의 KRT 리워드를 성공한 사람 수 n등분하는 모임이다.
그동안 50퍼센트도 안 되는 달성률을 보였대서, 10만 원이라도 얻고 취업도 하자는 의미를 담으며 참가했다!

이제 매우 바빠질 것이므로, 미리 놀러도 다녀오고, 같은 개발자 직군 친구를 만나서 합격 후기도 듣는 등 여러 외부 활동을 했다…ㅎㅎ… 2주 안에 서류 통과 하나라도 되기를 바라며…!
그리고 쉬는 동안 못했던 커밋도 다시 채우도록 하며!! 힘내야겠다 >.<

[TIL] AWS Builders Korea Program [기초 과정 - 실습] 강의 들었다!

Tue, 29 Mar 2022 23:30:00 +0000

AWS 강의를 듣다

오늘은 내가 예전에 신청해 뒀던 AWS 공식 강의를 들었다.
IAM, VPC, EC2, Load Balancer, AMI를 배운 뒤 추가 개인 실습으로 Amazon SNS, Amazon CloudWatch, Amazon EC2 Auto Scaling, 정적 웹 사이트 호스팅(Amazon S3)를 배우는 형식이었다.

강사 두 분이 약 2시간씩 시간을 나눠서 약 4시간 동안 이뤄지는 실습 강의였는데,
기초적인 AWS 구성 설명과 더불어 신규 콘솔창에 맞게 진행되어 예전 블로그나 정보글 등보다 따라하기 편리했었다.
또한 완전 새롭게 접하는 분들을 위한 맞춤 기초 강의이다 보니, 이미 몇 번 써본 나에겐 복습의 기회, 처음 접하는 분들에겐 하나하나 개념부터 알아가는 좋은 시간을 가졌다.

실습에서 배운 것 정리

AWS 계정 만들기
IAM 콘솔에 사용자를 추가하여 사용하기
네트워크 구성하기
- VPC 생성하기
- 추가 서브넷 생성하기
- 라우팅 테이블 편집하기
- 보안 그룹 생성하기
웹 서버 생성하기
- 웹 서버 인스턴스 생성하기(EC2)
- AMI 생성하기
- AMI 기반 인스턴스 생성하기
로드 밸런서 구성하기
모니터링(Amazon SNS, Amazon CloudWatch)
오토스케일링(Amazon EC2 Auto Scaling)
정적 웹 사이트 호스팅(Amazon S3)
기타 - 실습 자원 삭제(과금을 방지)

etc.

실습하면서 딱히 막히는 부분 없이 잘 해 나갔다.
아무래도 나는 실제로 코드스테이츠 파이널 프로젝트를 하며 https 배포까지 해봤다 보니, 대부분 해봤달까…
그래도 뭔지도 모르고 사용할 때보단 훨씬 좋은 경험이었고, 이김에 실습에서 해 봤던 것 그대로 블로깅도 해보고자 한다.

[JavaScript] 배열 - fibonacci

Sat, 26 Mar 2022 22:30:00 +0000

문제

수(num)를 입력받아 num번째까지 총 num + 1개의 피보나치 수열을 리턴해야 합니다.

0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1입니다. 그 다음 2번째 피보나치 수부터는 바로 직전의 두 피보나치 수의 합으로 정의합니다.
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, …

입력

인자 1 : num

number 타입의 num (num은 0 이상의 정수)

출력

배열을 리턴해야 합니다.

주의 사항

반복문(for)문을 사용해야 합니다.
피보나치 수열은 0번부터 시작합니다.

입출력 예시

let output = fibonacci(5);
console.log(output[5]); // --> 5

output = fibonacci(9);
console.log(output[9]); // --> 34

풀이

로직

이 문제는 주의사항에 적힌 대로 for문을 써야만 한다.
이전에 풀어봤던 fibonacci를 푸는 문제는 두 가지로, 하나는 재귀함수,
하나는 위의 재귀함수 형식을 좀 더 효율적으로 업그레이드한 풀이였다.

이 문제는 저 둘을 풀 수 있다면 너무나도 쉬운 문제 풀이가 될 것이다.
효율이나 재귀 등의 방법이 아닌, 있는 그대로 for문을 이용한 풀이가 될 것이기 때문이다.

그러므로 아무것도 모른다는 전제하에 정리를 다시 해 보겠다.
피보나치 수열은 문제에서 나타난 대로 앞선 두 숫자의 합을 그다음 수로 정하는 수열이다.
0번째와 1번째의 피보나치 수를 직접 0과 1이라고 알려줬으므로 이를 토대로 구하면 된다.

for문을 사용할 것이므로 어떻게 반복을 시킬지 고민해 보자. 또한 출력이 ‘배열’이어야 한다는 점에서도 힌트를 얻어 생각하자.
n번째 피보나치 수를 알기 위해서는 n-1, n-2의 수를 더한 값이어야 한다.
즉 정리하면 다음과 같다.

arr 변수를 선언하여 0번째와 1번째 값인 0과 1로 이루어진 배열을 할당한다. let arr = [0, 1];
입력변수 num이 0이거나 1일 때의 출력 배열을 정해둔다. (if문 사용)
입력 변수 num이 1보다 클 때부터는 1 이후의 값들을 알아야 num번째 값도 알 수 있기 때문에 for 문으로 arr 변수 안에 피보나치 수열을 하나씩 push한다.
arr를 return한다.

해답 코드

레퍼런스 코드

function fibonacci(num) {
  let fibNum = [];

  for (let i = 0; i <= num; i++) {
    if (i === 0) {
      fibNum.push(0);
    } else if (i === 1) {
      fibNum.push(1);
    } else {
      fibNum.push(fibNum[i - 2] + fibNum[i - 1]);
    }
  }

  return fibNum;
}

작성자.ver

if문 하나 덜 쓰기 위해 고안했다.
```js function fibonacci(num) { let arr = [0, 1]; if (num === 0){ return [0]; }else{ // 원래 if else문으로 1일 때도 구하면 좋지만, // 어차피 첫 번째와 두 번째 값이 같다(1임)는 것을 이용해서 다음과 같이 지정했다. // 수학적인 의미를 생각하면 아래와 같이 하면 안 된다. for (let i = 1; i < num; i++){ arr.push(arr[i-1]+arr[i]) } return arr; } }

```

[Diary] 헉 이력서 이제 피드백 없어 & 그래도 광탈

Fri, 25 Mar 2022 17:04:00 +0000

이력서 피드백 재도전

이제 피드백이 없다…!

가장 최근 이력서 피드백에 이어 그 전에 피드백 주신 커리어 코치님에게 이력서 상담을 다시 신청했었다.

요청 내용은 대략 ‘이전에 받은 피드백 적용 및 더코드쉽에서 지원하며 피드백 받았던 것을 토대로 수정한 걸 다시 피드백 요청드려요’였다.

이후 예정되었던 시간에 맞춰 상담을 했는데, 놀랍게도 이번엔 통화도 안 하고 아주 간단한 단락 순서 수정과 페이지 조절만 피드백을 주셨다!
이전엔 통화를 해야 할 정도로 여러 가지를 수정하고 얘기를 나눠야했었는데, 이번엔 그러지 않아도 될 정도로 피드백 거리가 없었다는 것이다…
앞으로도 다섯 번, 여섯 번은 수정을 거쳐야 할 줄 알았는데 아니었다ㅠㅠㅠㅠ
이제 떨어진다면 자소서 혹은 내 능력 자체의 부족이라고 여겨질 것 같다… 그만큼 커리어 코치님을 향한 신뢰 무한정!

요새 가장 슬픈 일

광탈 당하는 지원들…

1시간… 혹은 30분… 그 정도는 괜찮다.
뭐가? 채용 담당자가 내 제출 이력서를 확인한 후 서류 탈락 시키는 시간이다.

나는… 확인도 안 하고 나중에 확인해서 10초 만에 광탈당하는 것도 괜찮다… 애초에 채용 담당자 분들은 순식간에 1차 합격 지원자를 판별한다고 한다. 그리고 우리 아버지 회사의 신규 입사 지원서들도 어머니께서 메일로 확인할 때 순식간에 마우스 클릭 몇 번으로 분별하시는 것도 봐 와서, 어느 정도 이해한다.

다만 내 개인적인 심적으로…

(알림)
ㅇㅇ기업 - 제출한 이력서를 채용담당자가 확인했습니다. 조금만 기다려주세요.

10초 내외 이후
(알림)
ㅇㅇ기업 ㅇㅇ포지션에 안타깝게도 서류 통과되지 않았습니다.

이런 일이 벌어지는 건 많이… 슬프다.

이해와 마음이 와닿는 것은 다르기에…
아무리 내가 그 기업의 수준에 충족되지 않는 사람일지어도 순식간에 광탈당하는 걸 알림으로 겪으면 슬퍼지는 것이다.
그리고 그날은 우울해지고, 그게 오늘이다.

그래도, 어쩌겠어…! 그래도 나는 계속 지원하고, 계속 고치고, 계속 블로깅과 코딩테스트 준비를 할 건데!
나를 알아봐주는 좋은 기업을 만날 그날을 위해, 다시 나아가겠다.

지금 아이스크림 케이크 먹는데 너무 맛있다.
단 거 최고~

[JavaScript] Array.prototype.sort()에 대한 고찰

Thu, 24 Mar 2022 14:28:00 +0000

sort란 뭘까?

단순히 영어 단어 sort의 뜻을 찾아보면 ‘분류하다’, ‘구분하다’, ‘(문제 등을) 정리(해결)하다’를 볼 수 있을 것이다.
이 의미를 그대로 컴퓨터 프로그래밍에 접하면 어떤 기능을 가진 메소드일지 예상이 가능할 것이다.
JavaScript에서의 sort 메서드는 보통 Array.prototype.sort()로 통용되며 말 그대로 배열 전용 메서드로 쓰인다.
sort를 언제 어떻게 쓰냐에 대해서 아주 간단한 예시를 들면,
['a','b','c'] 순서여야 할 배열이 ['a','c','b']로 되어 있다면 ['a','c','b'].sort()를 썼을 때 ['a','b','c']로 된다는 것을 들 수 있다.
영어 단어 뜻 그대로 ‘분류, 정리하다’이다.

sort를 접한 과거

나는 이 sort 함수를 처음 접한 게 대략 2021년 8월 10일로, 고차함수를 처음 배웠을 때 지나가듯 접했었다.
당시 실제 코플릿을 풀 때 쓰인 건 filter, map, reduce여서, ‘그 외의 Array 내장 고차함수들은 TIL로 생각해 봐라’라는 말에 다음에 해 봐야지 하고 넘어가 버렸었다… ^^;
그래서! 막상 자주 쓰이는 함수이다 보니 이김에 제대로 고찰해 보기로 했다!

참고 문서 MDN

Array.prototype.sort()

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다.
특별하게 정렬 기준을 정하지 않았을 때, 반환되는 정렬은 stable(안정적인) sort가 아닐 수 있다.
기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다.
정렬 속도와 복잡도는 각 구현방식에 따라 다를 수 있습니다.

예시 - mdn.ver

예시 - 작성자.ver

See the Pen arr.sort(); by siri-syl (@siri-syl) on CodePen.

구문

arr.sort([compareFunction])

매개변수

compareFunction (Optional)
정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬된다.
옵셔널 변수인만큼 아까 위의 예시처럼 비워둬도 된다.

반환 값

정렬한 배열. 원 배열이 정렬되는 것에 유의.(중요) 복사본이 만들어지는 것이 아니다.
그래서 위 예시에서도 확인할 수 있듯이 그 원배열을 다시 불러들였는데도 정렬된 배열이 나옴을 볼 수 있다.
만약 원 배열을 건드리고 싶지 않다면 스프레드나 slice 등으로 복사하고 쓰는 게 좋다.(=깊은 복사!)

compareFunction

그렇다면 compareFunction은 어떻게 써야 할까? 바로 쓰기 전에 알아둬야 할 점이 있다.
보통 요소를 a, b로 나누고 시작하는데, a가 특정 요소, b가 a를 제외한 요소이다.
둘을 compareFunction에 맞춰 비교한 뒤 정렬하는 거라고 생각하면 된다.
예시를 바로 보여주겠다.

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

결론적으로 반환(return)값이 -(음수)일 경우 a가 앞,
반환값이 +(양수)일 경우 b가 앞,
반환값이 0일 경우 변화 없음.
으로 정렬된다고 생각하면 된다.

그래서 아래에 오름차순으로 정렬한다면 어떻게 될까에 대해 예시를 뒀다.

숫자 오름차순 정렬

See the Pen arr.sort오름차순 by siri-syl (@siri-syl) on CodePen.

위에 맞춰 만약 내림차순을 원한다면 compareFunction를 b - a로 하면 된다.

객체 요소 정렬

배열의 요소로 객체가 넣어지는 경우가 있음을 알 것이다.
이 객체들을 정렬할 수도 있다…!
바로 예시를 보자.

var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
];

// value 기준으로 정렬
items.sort(function (a, b) {
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  // a must be equal to b
  return 0;
});

// name 기준으로 정렬
items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // 이름이 같을 경우
  return 0;
});

map을 이용한 정렬

sort는 만능 정렬법이 아니다.
특히 나처럼 코드스테이츠 같은 테스트를 위한 코드문제를 자주 접하는 과정을 겪은 사람들은 sort를 썼다가 시간초과를 자주 겪을 것이다.
sort에도 수많은 방법이 있고, 알고리즘 문제로도 자주 나오는데 이건 추후 얘기하기로 하고…
당장 새로운 알고리즘을 공부하고 사용하기 힘들 경우엔 아래의 방법을 응용해보자.

아무튼 compareFunction은 배열 내의 요소마다 여러 번 호출될 수 있고, 그렇기 때문에 높은 오버헤드가 발생할 수도 있다.
compareFunction이 복잡해지고, 정렬할 요소가 많아질 경우 map을 사용한 정렬을 고려해 보는 것이 좋다.
이 방법은 임시 배열을 하나 만들어서 여기에 실제 정렬에 사용할 값만을 뽑아서 넣어서 이를 정렬하고, 그 결과를 이용해서 실제 정렬을 한다.

// 소트 할 배열
var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];

// 임시 배열은 위치 및 정렬 값이있는 객체를 보유
var mapped = list.map(function(el, i) {
  return { index: i, value: el.toLowerCase() };
})

// 축소 치를 포함한 매핑 된 배열의 소트
mapped.sort(function(a, b) {
  return +(a.value > b.value) || +(a.value === b.value) - 1;
});

// 결과 순서를 위한 컨테이너
var result = mapped.map(function(el){
  return list[el.index];
});

기타 - 한마디

다음엔 sort에 대한 여러 알고리즘 문제를 풀어봐야겠다 :D

[JavaScript] 프로그래머스 탐욕법(Greedy) - 체육복

Wed, 23 Mar 2022 20:43:00 +0000

문제 설명

점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다.

전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있는 학생의 최댓값을 return 하도록 solution 함수를 작성해주세요.

제한 사항

전체 학생의 수는 2명 이상 30명 이하입니다.
체육복을 도난당한 학생의 수는 1명 이상 n명 이하이고 중복되는 번호는 없습니다.
여벌의 체육복을 가져온 학생의 수는 1명 이상 n명 이하이고 중복되는 번호는 없습니다.
여벌 체육복이 있는 학생만 다른 학생에게 체육복을 빌려줄 수 있습니다.
여벌 체육복을 가져온 학생이 체육복을 도난당했을 수 있습니다. 이때 이 학생은 체육복을 하나만 도난당했다고 가정하며, 남은 체육복이 하나이기에 다른 학생에게는 체육복을 빌려줄 수 없습니다.

입출력 예

n	lost	reserve	return
5	[2,4]	[1,3,5]	5
5	[2,4]	[3]	4
3	[3]	[1]	2

입출력 예 설명

예제 #1
1번 학생이 2번 학생에게 체육복을 빌려주고, 3번 학생이나 5번 학생이 4번 학생에게 체육복을 빌려주면 학생 5명이 체육수업을 들을 수 있습니다.

예제 #2
3번 학생이 2번 학생이나 4번 학생에게 체육복을 빌려주면 학생 4명이 체육수업을 들을 수 있습니다.

풀이

로직

탐욕법 알고리즘에 대해서는 이전에도 푼 적이 몇 번 있다.
최소한의 동전 개수 구하기
짐 나르기

가장 적절한 방법을 찾아서 진행하는 탐욕법.
나는 이번 문제에서 lost와 reserve의 학생들 배열에 주목했다. 왜냐면 한 학생이 동시에 들어갈 수 있기 때문이다.
그래서 ‘여벌이 있는데 잃어버린 학생은 다른 학생에게 나눠줄 수 없다’는 것을 염두에 둔 채 풀어야 한다.
그렇기에 첫 번째로 해야 할 것은 ‘여벌이 없는데 도난당한 학생’과 ‘여벌이 있으면서 도난당하지 않은 학생’을 먼저 알아둔 채 시작하기로 했다.
이를 알기 위해 filter 고차함수를 쓰면 편하다.

다음으론 빌려받지 못해서 체육시간에 참여하지 못하는 학생을 구할 것이다.
이렇게 하면 전체 학생 수 n에다가 참여하지 못하는 학생을 빼서 return하면 된다.
이 방법은 어찌 보면 교집합, 차집합 같은 집합 개념에서 따왔다고 할 수 있다.

realLost와 realReserve를 filter를 이용하여 선언/할당한다.
빌려받지 못한 학생 배열 noBorrow를 filter를 이용하여 구한다.
전체 학생 수 n에서 noBorrow.length를 빼서 return한다.

해답 코드 - 첫 번째

function solution(n, lost, reserve) {
    
    // 도난당한 후 체육복이 0벌인 학생
    let realLost = rlost.filter(el => !rreserve.includes(el));
    
    // 도난 사건 이후에도 체육복 여벌이 있는 학생
    let realReserve = rreserve.filter(el => !rlost.includes(el));
    
    // 여벌을 빌려받지 못하여 체육 시간에 참가하지 못하는 학생 배열
    let noBorrow = realLost.filter((lost) => {
        // 여벌이 있는 학생이 옆 번호인지 절댓값으로 확인한다.
        let lend = realReserve.find(saver => Math.abs(saver-lost) === 1);
        
        // 여벌을 빌려받지 못했다면 lend 값이 undefined인 것을 이용하여
        // 빌려받지 못했다면 그대로 리턴한다.
        if(!lend) return lost;
        
        // 위의 if문을 스루했다면 빌려받은 것이므로
        // 해당 여벌옷 가졌던 학생을 realReserve에서 제외시킨다.
        realReserve = realReserve.filter(el => el !== lend);
    });
    
    return n - noBorrow.length;
}

이 코드를 제출하고 채점해 보면 테스트 18번이 실패로 뜬다…
그래서 왜 그런가 하고 다른 분들의 경우를 살펴 보니, lost와 reserve를 sort한 뒤에 돌려보면 된대서 혹시나? 하고 sort부터 진행해봤더니 정말 됐다…
테스트 케이스에서 lost와 reserve의 번호가 오름차순이 아니었나 보다.
어찌 보면 이것도 당연히 신경 써야 했는데, 내가 제대로 생각하지 못했다 ㅠㅠ

그래서! sort로 진행한 상황도 보여주겠다.

해답 코드 - 전체 케이스 통과.ver

function solution(n, lost, reserve) {
    // 우선 lost와 reserve를 sort하여 오름차순으로 재정렬한다.
    let rlost = lost.sort((a,b) => {
        return a - b;
    });
    let rreserve = reserve.sort((a,b) => {
        return a - b;
    });
    
    // 도난당한 후 체육복이 0벌인 학생
    let realLost = rlost.filter(el => !rreserve.includes(el));
    
    // 도난 사건 이후에도 체육복 여벌이 있는 학생
    let realReserve = rreserve.filter(el => !rlost.includes(el));
    
    // 여벌을 빌려받지 못하여 체육 시간에 참가하지 못하는 학생 배열
    let noBorrow = realLost.filter((lost) => {
        // 여벌이 있는 학생이 옆 번호인지 절댓값으로 확인한다.
        let lend = realReserve.find(saver => Math.abs(saver-lost) === 1);
        
        // 여벌을 빌려받지 못했다면 lend 값이 undefined인 것을 이용하여
        // 빌려받지 못했다면 그대로 리턴한다.
        if(!lend) return lost;
        
        // 위의 if문을 스루했다면 빌려받은 것이므로
        // 해당 여벌옷 가졌던 학생을 realReserve에서 제외시킨다.
        realReserve = realReserve.filter(el => el !== lend);
    });
    
    return n - noBorrow.length;
}

기타 - 한마디

프로그래머스 문제들은 처음 마련되었을 때 한 번 풀고 말 것이 아니라, 계속 생각하고 시간을 두고 또 풀어보고 해야 한다.
테스트 케이스가 계속 추가되고, 내가 예상치 못한 입력에 대해 처리하지 못하기도 하기 때문이다.
언젠가 한번 더 풀어봐야겠다.

[Diary] 이력서의 수정은 끝나지 않는다! 그리고 지원도 열심해 해보자!

Tue, 22 Mar 2022 19:38:00 +0000

새로운 이력서 피드백

코드스테이츠는 수많은 파트너사도 있기에 그쪽의 채용 공고도 알려준다.
그동안 파트너사의 채용공고는 특별히 관심을 가지지 않았는데, 최근에 관심을 갖고 지원을 넣게 되었다.

해당 파트너사가 코드스테이츠의 수료생을 특별히 보겠다는 점도 좋지만, 평소 자신에게 배정된 커리어 코치님이 아닌 또다른 이쪽 담당 커리어 코치님이 패드백을 해 주시며 지원을 진행해주신다는 점이 특별하다고 생각된다.
자신의 이력서는 타인 3명 이상에게 보여주며 피드백을 받으면 좋다고 한다.
근데 한 명의 전문 코리어 커치님뿐만이 아니라 다른 커리어 코치님의 피드백도 받을 수 있다?
이는 매우 좋은 경험이라고 생각했다.

어제 두 파트너사의 채용 공고에 지원했는데 한 곳에 대한 피드백이 오늘 바로 왔다.

역시 다른 피드백!

내가 이전에 받았던 피드백을 토대로 고친 것과 별개로 새로운 피드백들을 주신 것이다.

예시로 내가 1-2-3-4를 적었고, 이전에 2에 대한 피드백을 받아서 2를 고친 상태라면, 이번엔 1과 4에 대한 피드백을 받은 것이다.
개인적으로 같은 파트에서 수정한 것을 완전 다른 내용으로 수정하라 하면 어쩌지- 라는 걱정을 했는데 그럴 필요가 없었다.

문제는 이번 피드백 또한 삭제하라는 것이 절반이었다 ^-ㅠ…

삭제 삭제 삭제… 그리고 보완하거나 수정할 점은 잔뜩…!
그래도 나는 해야만 했다. 취업을 하기 위해…!!
이에 대한 건 내일 바로 dm드리며 새로운 피드백을 받기로 했다.
또한 이전의 코치님에게도 이 피드백으로 고친 이력서를 한번 더 피드백 받고자 준비 중이다.
아자아자 나에겐 전문 커리어 코치님이 두 분이나 봐주시고 있다!!!

새로운 모임 도전

나는 그동안 스터디 모임이나 개별 팀플 모임 등에 참여해본 적이 없다.
그러다 이번엔 참여를 해보기로 했다…! 확정은 아니지만, 우선 참사 신청은 했다는 뜻!

코드스테이츠 측에서 ‘챌린지 3기‘를 모집한다는 글을 보고 정한 것이다.

2주동안 매일 2개 기업에 이력서를 제출하고 인증하는 데일리 미션게임
이라는데, 이런 거라도 해야 100개 200개 지원도 보고 취업 확률도 올라가지 않을까 하는 생각이 들었다.

무사히 참여하게 된다면 정말정말 열심히…! 2주간 28개가 아니라 50개는 찍겠다는 목표를 갖고 임하겠다! 물론 오늘도 두 개 작성할 거다!!