앞서 작성한 두 개의 글을 보면 대강 눈치챌 수 있겠지만, 나는 현재 '원티드 프리온보딩 챌린지'에 참여하고 있다. 강의 시작 전에 부여받은 사전과제는 세 개였으며, 지금 쓰는 글은 그 중 마지막이 될 것이다. 제출 기한은 지났지만, 안하는 것보다는 낫겠지..
저번 글에서 그런 문장을 적은 적이 있다: "경험도 지식도 부족하니 몸이 고생을 하게 된다." 어.. 너무 슬프지만 지금은 부정할 여지가 없는 것으로 보인다. 진짜 고생중이다. (...) 당장 이 과제를 봤을 때 떠오른 생각은 '어디서 부터 봐야 하냐' 였으니 말이다.
아쉬운 사람이 우물을 판다고 의심가는 스크립트는 하나씩 다 읽어보다가 검색까지 해가며 무엇을 봐야할 지 결국 찾았는데 하필 그 때가 1회차 강의 시작일이었던 점이 참.
그러니까.. 이게 뭐지?
next.js 프로젝트에서 npm run start를 쳤을 때 동작하는 스크립트 - next.js Github
'package/next/src/cli/' 순으로 경로를 따라올라가면 next-start.ts를 찾을 수 있다. 얘를 찾아야 한다는 걸 이해하게 된 경위는:
생성한 프로젝트의 package.json에서 단서를 얻으면서다. 간단하게 적자면, node.js로 꾸려놓은 패키지는 미리 만든 스크립트를 명령어에 등록해서 동작시킬 수 있다. 이미 익숙할 'npm run (여기에 등록한 스크립트명을 넣으세요)' 가 그 명령어이다.
작성자 본인이 이 챌린지 시작 전까지 next.js와 일면식이 없어서 당황스러운 순간이 한두번은 아니었지만, 적어도 저 부분을 보고 "next.js 모듈 어딘가에 스크립트가 포장되어있겠다"는 건 눈치챌 수 있었고, 'node-modules/next/dist/cli/' 에 내가 찾던 next-start.ts가 있음을 알게되었다.
내가 만든 프로젝트엔 배포된(distributed) next.js가 들어와 있으니, 과제에 명시된 대로, Github에서 찾는다면 이름이 다를 수 있을 것이고, Github엔 'package'로 되어있었다.
추가로, 폴더 이름의 'cli'는 명령 줄 인터페이스(Command Line Interface, CLI)를 의미한다.
이거 말이다.
.. 파일트리 자체가 '명령 줄 인터페이스(cli)에서 실행시킬 next.js(next) 스크립트의 소스(src)를 담아놓은(package)' 를 말하고 있었구나. 하지만 아무래도 상관없다. 너무 늦게 알아서 제출 기한을 진작 넘겼다. (...)
안에는 무엇이 들어있나
상기했던 링크를 열어보면, 스크립트는 총 95줄로 구성되어있음을 알 수 있다.
11번째 줄까지 (~11)
11번째 줄까진 외부 스크립트를 가져오고 있다. 서버 구동 및 설정, 포트 확보, 에러 탐지, 프로젝트 경로 확보, CLI 명령어 등에 필요한 스크립트를 가져오는 것 같다. 저것들까진 열지 않겠다. 과제는 지금 보고 있는 스크립트(next-start.ts)를 간단히 살펴보는 것이고, 무엇보다 저걸 열면 내 머리도 같이 열릴 것 같다. (...)
13번째 줄부터 34번째 줄까지 (13~34)
13번째 줄부터 34번째 줄까지는 변수를 선언하고 있다. 친절하게 주석으로 'Type(타입)' 과 'Aliases(별칭)'를 적어두었는데, 명령어를 입력할 때 추가로 입력할 수 있는 옵션들의 타입과 그 옵션들을 대체할 수 있는 줄임말임을 알 수 있다: '도움말을 볼 것인지', '포트 번호는 몇 번인지' 등.
아래 26번째 줄부터 33번째 줄은 입력한 옵션이 올바른 형식이 아니면 에러를 내고 프린트하게 만드는 내용이다.
35번째 줄부터 54번째 줄까지 (35~54)
35번째 줄부터 54번째 줄까지는 명령어에 '--help'(또는 '-h') 옵션을 추가했을 때의 실행할 스크립트를 입력해두었다. if문 마지막에 위치한 'process.exit(0)'를 통해 스크립트 프로세스를 빠져나와서, 실제로 서버가 열리지 않게 함을 알 수 있다. 도움말을 보려고 입력했더니 서버까지 같이 열리는 건 안되니까.
혹시나 싶어서 실제로 입력했을 때의 화면을 아래에 붙인다:
56번째 줄부터 58번째 줄까지 (56~58)
56번째 줄부터 58번째 줄까진 확보한 프로젝트 경로와 포트 번호, 호스트이름을 담아둘 변수를 선언했다. dir과 port에 쓰이고 있는 함수는 상기했던(~11) 외부 스크립트에 담겨있을 것이다. 확인은 안하겠다. 반박하면 당신의 말이 맞다.
60번째 줄부터 75번째 줄까지 (60~75)
60번째 줄부터 75번째 줄까지는 '서버 타임아웃 유예시간(keepAliveTimeout, (13~34)를 확인해보면 옵션으로 있다)' 의 유효성을 검사하고 있다. 옵션 입력으로 받아온 값이 정의되어있지 않거나, 숫자가 아니거나, 무한하거나, 음수라면 그냥 0이나 양의 실수가 아니면 안 받겠단 소리다 '유효하지 않은 값, 음수가 아닌 숫자를 예상했으나 "~" 를 받았습니다.' 라고 문구를 출력한다.
73번째 줄부터 75번째 줄까지는 유효성 검사가 끝난 값을 올림(ceil)하고 있다. 다시 말해, 소숫점을 털어낸다.
막간 회화상식(?) : 버림(floor), 반올림(round), 올림(ceil).
혹시나 싶어서 실제로 유효하지 않은 값을 입력했을 때의 출력화면을 아래에 붙인다:
77번째 줄부터 95번째 줄까지 (77~95, 와 끝이다)
77번째 줄부터는 앞에서(~11) 불러온 외부 스크립트의 함수를 실행하고 있다. 대략 서버 설정을 불러온 뒤, 서버를 시작하고 모두 성공적으로 마무리 되면 최종적으로 nextStart를 내보낸다.
간단한 확인이 끝났고.. 뭔가 뭔가다
작성자는 전공자가 아니며, 이전에 겪어본 자바스크립트 프레임워크는 Vue.js였다. Next.js는 커녕 React도 익숙치가 않아서 대단히 심상찮은 기분이 들고 있다. 분명 처음 글을 쓸 땐 내게 도움이 되길 바라며 하나하나 공부해나가자는 마인드였는데 언제부턴가 공부는 고사하고 죽지 않을 정도로 근신하자는 마인드가 되어간다. 안진마가 아니라 안죽마
.. 모르겄다 일단 해보자. 주변에서 듣자하니 새 기술 스택을 쌓는 것도 예상하고 공부하는 거 보다 팀에서 요청들어와서 프로젝트 2주전부터 깃허브 밤샘하는걸로 쌓는다던데. 근데 작성자는 '예상치 못한 일' 이라는 걸 굉장히 싫어하는데
반박할 시 당신의 말이 맞습니다, 네.
웃음을 유발하고자 하는 이야기가 아니라, 교정이 필요하거나 틀린 부분을 배우고 수정할 수 있도록 여러분들의 발언을 부탁드리는 것입니다. 혼자서 공부할 때의 가장 큰 문제는 '한 번 모르는 건 (거의) 영원히 모른다.' 는 것입니다. 당장 거울이 없으면 자기 얼굴도 볼 수 없고, 거울 두 개가 없으면 자기 이면인 등을 볼 수도 없는 것이 인간(을 포함한 동물)입니다.
제 벨로그를 찾아와 읽어주시는 여러분의 의견에 미리 감사드립니다.
