본문 바로가기
Dev/javascript

이선생님과 함께 출발한 자바스크립트 대장정 / 유튜브 serverless 강의와 오답노트

by 혜옹쓰 2021. 10. 13.

 

나는 원래 파이썬을 주언어로 사용하던 사람이었는데, 어쩌다보니 업무에서 사용할 일이 생겨 자바 스크립트를 배우게 되었다.

새로운 언어를 배우는게 꽤 오랜만이라, 설레는 마음을 가지고 개인 과외선생님(?)과 시작하게되었는데...

 

문제가,..조금 생겼다.

파이썬이 전부였던 나에게(R은 요즘 잘 쓰지 않으니까!) 자바스크립트는 너무너무 달랐기 때문이다..

변수 설정하는것부터, 기본적으로 print를 찍어보는 방법까지 하나부터 열까지 모두 달라서 정말이지 당황스러웠다...

 

아무튼..그 힘들었던 기간을 기록함과 동시에 나같은 누군가에게 도움이 될 수 있지 않을까 하고 블로그를 시작해본다!


기본적인 자바스크립트에 대한 공부는 이것저것 무료 강의와 이선생님(..)덕분에 적당히 이해했기 때문에, 업무중에 사용해야하는 AWS serverless 에 대해 유튜브 강의를 보며 공부해보기로 했다.

https://www.notion.so/AWS-serverless-9dfe0be516cc4cbc84bf0794faba7082#267651068859425c958e47bedb6b615d

( 이 강의를 참고했고, 영어강의이긴 했지만 코드 따라적다보면 그리 어렵진 않았다! )

 

열심히 일시정지도 해가며 똑같이 따라했는데, 이상하게 잘 실행되지 않았고...

CloudWatch 에 뜨는 에러도 영상과 다른 무언가여서 더 답답했다 ;(

 

그래서 최대한 내가 이해한대로 코드를 수정해가며 디버깅!

 

일단 영상에서는 src나 route 등 폴더를 만들고 그 안에 js파일을 만드는 식으로 코드를 짰는데, exports.module 이나 require가 여러번 등장하니 너무 복잡하고 정신없어서..! 그리 좋지않은 방법이라고 이선생님께서 말하셨지만 일단은 index.js 파일에 최대한 코드를 정리해서 실행하는 방법으로 디버깅 해보았다.

( 폴더와 파일 만들어서 코드 짧게 정리하는 방법은 더 공부해볼게요... )

 

  • 영상 그대로 따라한 부분

일단 실습을 위한 폴더를 만들고, 터미널을 열어 npm init 으로 프로젝트를 똑같이 시작했다! 나는 node 를 이미 설치했기때문에 바로 npm을 사용할 수 있지만, node가 설치되어있지 않다면 미리 설치하시길!( 참고로 난 homebrew를 통해 설치해따. )

자동으로 폴더가 생성되고, package.json 등 javascript를 작성하는데 부가적인 파일이 생성된다. 

그리고 우리는 serverless를 통해 API를 구축할 예정이기 때문에, serverless 도 설치해준다! npm i serverless --save 로 설치하고, package.json 파일에 작성되도록 save 도 적어준당. serverless 라는 명령어로 시작해주면, 새 프로젝트를 생성하고 AWS 와 연결하는 과정을 거쳐야하는데, 이 과정 전에 AWS 계정을 미리 생성해두는 것을 추천한다! IAM 이라는 방식으로 로그인 해야하는데, AWS 계정에 로그인해서 key를 생성하는 방식이라 계정에 로그인이 되어있어야 한당...내가 이 부분에서 조금 애를 먹었기 때문에 추가로 설명!

AWS 에 로그인 한 후( 루트 사용자로 로그인하면 된다! ) 상단 검색창에서 IAM을 검색하면 쉽게 찾을 수 있당

IAM 에 들어가면 이런 창이 뜨는데, 난 이미 생성해놓은 사용자가 있어서 뜨지만 첫 사용자라면 아무것도 안뜨는게 정상! 우측 사용자 추가라는 파란 버튼을 클릭해주면 된다! 그 이후는 순서대로 착착~

엑세스키 클릭!
기존 정책에서 첫번째 선택!
쭉 쭉 넘어가고~

이렇게 넘기다보면 key 를 확인할 수 있는 창이 나오는데, 좌측 상단을 보면 .csv 파일 다운이 있다. 왜냐? 지금 이 창은 넘어가면 다신 확인할 수 없기 때문이지! 그러니 파일을 다운받거나 다른 곳에 적어놓는 등 대비가 필요하다!! ( 난 말했음!! )

이렇게 serverless 를 시작할 때 IAM 계정까지 연결해주면 이제 작업을 시작할 수 있으니 에디터에서 열어준다! 참고로 난 VS Code를 사용하고 있기 때문에 앞으로 VS Code 를 이용한 작업을 많이 확인할 수 있을 예정!

 

영상에서는 예시로 sls deploy 를 통해 AWS lambda 에 업로드? 하는 과정을 보여주는데, 매번 deploy 를 통해 코드를 확인할 수 없으니, 난 추가적인 모듈인 serverless offline 을 설치해서 오프라인으로도 서버를 열어 확인할 수 있도록 해줄 것이당. npm i serverless-offline --save 으로 설치! 사용하려면 sls offline 을 콘솔에 찍어주면 된당.

 

다시 에디터로 돌아와서, 앞서 자동으로 생성된 파일 중 먼저 수정할 파일은 serverless.yml 파일이다! 자동으로 적혀있는 코드가 있는데, 여러 에러를 거치며( ... ) 수정한 코드들을 소개해본당!

  • serverless.yml
provider:
  name: aws
  runtime: nodejs14.x // node 버전 맞추기
  lambdaHashingVersion: 20201221
  stage: dev
  region: ~AWS 지역 코드~
  
 functions:
  app-api:
    handler: index.handler // 파일 이름과 핸들러 이름 일치
    timeout: 30 // timeout 에러 방지
    events:
      # - httpApi: '*'
      - http:
          path: '{proxy+}'
          method: any

plugins:
  - serverless-offline // 서버리스 오프라인 사용을 위해 플러그인 추가

영상을 보면 알겠지만, 영상과는 조금 다르게 수정했다..! events를 굳이 두가지로 작성할 필요가 없을 것 같아서 하나는 삭제했고, handler도 index라는 파일에 다 작성했기 때문에 index.handler로 작성했다!

 

  • index.js
const express = require('express');
const bodyparser = require('body-parser');
const awsServerleddExpress = require('aws-serverless-express');

const app = express();

const routes = express.Router();

routes.get('/',(req, res) => {
  console.log("test")
  res.status(200).json({});
});

// routes.post()

module.exports = {
  routes,
};

const userRoutes = routes

app.use(bodyparser.json());
// app.use('/user', userRoutes);
app.use('/user', (req,res) => {
  res.send('user')
  res.status(200).json({});
})

// module.exports = app;

// 핸들러
const server = awsServerleddExpress.createServer(app);

module.exports.handler = (event, context) => {
  return awsServerleddExpress.proxy(server, event, context)
}

이 파일도 영상과는 조금 다른데..^^ 영상에서는 routes, handler 등 파일을 구분해서 작성했는데, 난 뭐가 문제인지 자꾸 에러가 생겨서 아예 하나의 파일에서 코드를 작성했다. 별로 좋은 방법은 아니지만 일단은 잘 작동해서 다행이다...!

/dev 페이지에서는 콘솔에 test가 뜨고 200을 보내고, /dev/user 로 들어오면 서버에 user를 띄우고 200을 보내는 아주 간단한 코드이지만 서버를 열기 위해 얼마나 노력했는지,,^^ 눈물젖은 코드를 보신 적 있으신가요..?


아직 모듈을 세세하게 잘 알거나, 자바스크립트 문법에 익숙한 것은 아니지만 하나하나 해결하며 성장하고 있다 :)

앞으로도 여기 잘 적어가며 나의 성장기를 함께 해야겠다! 그럼 오늘은 안녕 'ㅅ' (출근해야돼...)

 

'Dev > javascript' 카테고리의 다른 글

노드 교과서 강의 정리.zip  (0) 2021.11.14