데브코스 40일차 TIL : Vue [sass-loader, netlify-cli를 이용한 API 숨김, netlify-cli]

te-ing·2021년 10월 12일

프로그래머스-데브코스-1기

목록 보기

32/43

API를 숨기는 것이 당연하겠지만, 지금까지 두려움 반, 귀찮음 반으로 애써 무시하고 있었다. 결국 이번 기회에 가볍게 배울 수 있었지만, 역시 배우다보니 너무 어렵다. 과제를 하면서 fetch를 axios로 바꾸는 것에 상당히 애를 먹었었는데, 막상 해내고나니 별 것 아니여서 또 억울했다. 그나마 Nuxt JS의 SEO최적화 진입장벽이 생각보다 낮은 것을 위안삼는다..

sass-loader: additionalData

module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
								additionalData: `
	                @use "sass:color";
	                @use "sass:list";
	                @use "sass:map";
	                @use "sass:math";
	                @use "sass:meta";
	                @use "sass:selector";
	                @use "sass:string";
	                @import "~/scss/_variables";
		              `             
            }
          }

sass를 사용하는 파일에서 자동으로 use, import

API 숨김

npm i -D netlify-cli 서버없이 설정가능해주는 netlify의 기능

scripts에 "dev:netlify": "netlify dev" 추가

netlify.toml 구성옵션을 만드는 파일생성

//netlify.toml
[build]
	command = "npm run build"
	functions = "functions" // 폴더이름. 원하는 이름 사용가능
	publish = "dist"

[dev]
	framework = "#custom"
	command = "npm run dev:webpack"
	targetPort = 8079
	port = 8080
	publish = "dist"
	autoLaunch = false

//webpack.config.js
devServer: { port: 8079 } // 기본값은 8080
//package.json
scripts의 "dev" => "dev:webpack", "dev:netlify" => "dev" 로 변경

functions 폴더생성

폴더 내 TJ.js 파일 생성

workspace.js 생성

//TJ.js
exports.handler = async function() {
	return {
		statusCode: 200,
		body: JSON.stringify({
			name: 'TJ',
			age: 26,
			email: 'TJ@abc.com'
		})
	}
}
//workspace.js
const axios = require('axios')
exports.handler = async function (event) {
//	API 함수를 가져오는데, fetch를 사용할 수 없기 때문에 axios패키지를 통해 사용
// npm i axios, 이후 axios에 맞게 코드 수정
}