프론트엔드 데브코스 5기 TIL 43 - 노션클론(Vue), netlify cd, serverless functions

김영현·2023년 11월 28일

국비지원교육 코딩부트캠프 프로그래머스 데브코스 프론트엔드 데브코스

TIL

목록 보기

51/129

노션클론 Vue With 강사님.

저번에 바닐라JS로 진행했던 노션클론 과제를 강사님이 뷰로 진행하신다.
따라 쳐봤자 의미가 없어보인다.
천천히 보면서 내가 만든 것과 어떠한 차이가 있는지 알아보자!

처음에 CSS단위로 나눈다

컴포넌트 단위로 나누실줄 알았는데, 일단 그리는 것이 먼저니까 레이아웃 단위로 나눈다.
이렇게 하면 확실히 시작할때 고민이 줄어들 것 같다.

CSS 클래스 작명

컴포넌트들은 각 스코프를 가지기때문에 겹치는 네이밍이 가능하다. ex) nav > header , main > header...
이렇게 자식 선택자를 활용할수 있어서 변수명이 겹쳐도 된다. 고민할 일이 줄어든다.

미리 색상 뽑아놓기

색상을 미리 뽑아놓고 변수화 시켜둔다. 색상을 일일히 대조할 시간이 줄어든다

생성/삭제 후 그대로 GET API호출

다루는 데이터량이 적으니 문서 생성/삭제 후 GET API를 호출한다(캐싱없이). 이 부분은 동일하다 ㅎㅎ

좌측 네비게이션바 리사이징

직접 구현하는게 아닌 interact.js라는 라이브러리를 이용하여 구현하셨다!
이런것도있구나...😪그래도 나는 아직 아마추어니까 한 번쯤 직접 해보는게 맞다!

팁들

번들도중 로더 적용시 데이터 넘겨주기

웹팩 옵션중 additionalData로 번들링될때 지정한 값을 넣어줄수있음.

//webpack.config.js
use:[
  "...",
  {
  	loader:''sass-loader,
    options:{
  	additionalData:'@import "파일경로"'
 	 }
  }
    ]

이렇게하면 scss파일에 import문이 적용되어 컴포넌트 스타일태그 내부마다 import하지 않아도 된다.
다만 맨 위에 코드가 삽입됨. 순서가 문제될수있어서 문제가 된 코드도 전역으로 넣어주면 된다 ㅎㅎ

fonts.google

무료저작권 폰트와 아이콘을 얻을 수 있는 공식 구글 사이트다 ㅎㅎ
프로젝트나 과제때 아주 유용하게 사용할것 같음!

Netlify CD, serverless Functions

Netlify로 배포하신다고 한다. 이 배포방식도 역시 버튼 몇번 뚝딱 누르면 완료된다.
이때 민감한 정보들 ex) API 키 같은걸 숨기는 방법을 배워보자.
이때 서버의 지식이 좀 필요하다. 그런부분을 최소화시켜주는 것이 서버리스 함수다.
서버를 직접 구축하지않고 함수단위로 쪼개서 우리가 원하는 부분만 사용할 수 있음!

일단 netlify-cli를 설치 후준다.

//netlify.toml파일에 설정
[build]
command = "npm run build"
functions = "functions" //서버리스 함수 폴더 이름
publish = "dist" //배포파일 경로
[dev]
framework = "#custom"
command = "npm run dev"
targetPort = 1234 //npm run dev로 열었을때 포트
port = 5000 // 실제 접근 포트
publish = "dist" //배포파일 경로
autoLaunch = false

//package.json
"dev": "...',
"dev:netlify" : "netlify dev",

위처럼 설정이 끝났다면 서버리스 함수를 작성한다.

// functions/leon.js
exports.handler = async function()
{
 return {a:1,b:1,c:1}
}

요래 작성하고 npm run dev:netlify로 netlify를 로컬로 실행!
이렇게 하고 주소에 address.com/.netlify/functions/leon 입력하면...입력해놓은 데이터가 마치 API처럼 반환된다.

우리의 목적은 api키를 서버리스함수로 넘겨버리는 것

const axios = require('axios');
export.handler = async function (event){
	//...api요청(fetch는 사용할수없어서 axios를 사용한다)
  	return {
    	statusCode: 200,
      	body: 리턴할 내용
    }
}

이렇게 서버리스함수를 작성해준뒤

//로직중 api요청이 필요한 곳
fetch('./netlify/functions/getDoc', {
	method: 'POST',
  	body:...
}).then((res) => res.json())

요래요래 서버리스함수를 호출 하여 응답만 받아 사용하면 된다.
즉, 요청이 1번 들어가던게 서버리스로 넘겨서 총 2번 요청한다고 볼수있음.
달에 12만건 정도 무료라는데, 코딩 잘못해서 요청무한반복해버리면 클나겠다

환경변수

서버리스로 요청할때 환경변수까지 사용하여 2중보안을 만들어준다!
.env파일에 따옴표와 변수선언 없이 만들어준다

API_END_POINT=주소

이런식!
그리고 서버리스함수내부에서

require('dotenv').config(); //환경변수 파일 읽어서 process.env에 넣어준다
const {API_END_POINT} = process.env; //이렇게 가져와서 사용하면끝!

간단한걸? 하지만 프론트에서만 할수있는 보안이 없다니 서럽다.

제외하는 파일들!

dist : 빌드된파일은 올릴 필요가없다
node_modules : 얘도너무많고 다운하면되서 필요없음
.env : 환경변수!
.vscode: vscode 설정값! 공유하는 팀도있음ㅎㅎ

나머지는 VSCODE가 아닌 환경 파일들이라 생략!

참고! 환경변수

배포하는 사이트마다 다르긴 하지만 환경변수 설정하는 메뉴가 있음!
키 = 값 설정을 잘 해주어야한다!

느낀점

프레임워크를 사용해서 빠른것도 있겠지만, 확실히 강사님께선 엄청 빨리 만드신다!
전체적인 레이아웃 구조를 생각하며 만드신게 인상깊었다. 다만 짧은 강의시간을 맞추시다보니 재사용 가능한 컴포넌트라던가 믹스인을 활용하는 내용이 없어서 조금아쉬웠다. 강사님의 실력이 아쉽단 소리가 아님!! 디게 잘하심!😃
또한 서버리스 함수는 막연히 듣기만 했었는데, 이번기회에 확실히 알게되어 좋았다.