Portfolio

개발 환경 세팅

💡

개발 환경 세팅

기술 스택

언어 : TypeScript

스타일 : SCSS

통신 : Axios

번들러 : Vite

배포 : Netlify

코드 formatter : prettier, eslint

세팅 과정

1. vite를 통한 ts 프로젝트 세팅


npm create vite@latest carbook -- --vanilla-ts

scss, axios 설치


npm i sass
npm i axios

eslint/prettier 설정

https://seonghui.github.io/blog/2020/12/27/typescript-eslint-prettier/

Ts 파일을 import 하는 과정에서 경로를 잘못 입력하여 제대로 불러오지 못하는 문제가 있었지만, 경로를 제대로 입력하여 해결하였다.

절대 경로 설정

tsconfig.json


{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@": ["src"],
      "@/*":["src/*"]
    },
  },
  "include": ["src"],
}

vite.config.ts


import { defineConfig } from 'vite';
import * as path from 'path';
export default () =>
  defineConfig({
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
  });

절대경로가 잘 적용 됐는지 테스트를 해보려고 했는데 .ts 확장자를 인식 못하는 오류가 있었다.
스택오버플로우를 찾아보니 package.json에서 type=”module”을 지우라고 해서 지웠는데 이번엔 import, export를 못한다고 오류가 났다.
한참을 해매고 있었는데 은아님의 조언덕분에 해결했다.
node run dev(npm rum vite)명령어를 이용해서 테스트를 했어야했는데

ts-node 명령어를 이용해서 node 환경에서 테스트를 하려고 해서 오류가 났다…

여러개의 파일을를 하나의 index.ts로 export 하기

https://nyagm.tistory.com/157

axios 객체 만들기

모든 파일들에서 사용할 axios 객체를 만들었다

api/index.js


export { axiosInstance } from './axiosInstance';

api/axiosInstance.ts


import axios from 'axios';

// fake 서버에 테스트 하기 위한 임시 url
const BASEURL = 'https://reqres.in';

export const axiosInstance = axios.create({
  withCredentials: true,
  baseURL: BASEURL,
});

withCredentials 옵션:

cors를 해결하기 위해서 적용
클라이언트에서 api 통신을 요청할때 쿠키나 인증헤더등의 옵션을 포함해서 전송하려면 true로 설정해야한다. 링크

axiosInstance 테스트

reqres라는 fake server를 이용한 axios 테스트 예제가 있길래 axiosInstance를 이용해 따라해보았다

갑자기 cors 오류가 생겨서 생각보다 오래걸렸다

axios객체의 withCredentials을 true로 해놓은 것이 원인이었다.

api/axiosInstance.ts


import axios from 'axios';

const BASEURL = 'https://reqres.in';

export const axiosInstance = axios.create({
	// fake 서버에 요청하므로 인증정보 안보냄, 지금 true로하면 cors 에러 
  // withCredentials: true,
  baseURL: BASEURL,
});

App.ts


import { Component } from '@/core';

export default class App extends Component {
  template(): string {
    return `<div>
    <input type="email" placeholder="email을 입력해주세용" id="email" value="" />
 </div>
 <div>
    <input type="password" placeholder="비밀번호를 입력해주세용" id="pw" value="" />
 </div>
 <input type="button" class ='button' value="로그인" />`;
  }
}

main.ts


import App from '@/App';

import { axiosInstance } from '@/api';

const app = document.querySelector('#app') as HTMLElement;

new App(app);

const onLoggin = async () => {
  const email = document.getElementById('email') as HTMLInputElement;
  const password = document.getElementById('pw') as HTMLInputElement;

  try {
    // axios으로 로그인 요청 (post)
    let res = await axiosInstance.post('/api/login', {
      email: email.value,
      password: password.value,
    });
    console.log(res);
    document.write(JSON.stringify(res));
  } catch (err) {
    console.log(err);
    throw new Error((err = 'error'));
  }
};

const btn = document.querySelector('.button');
btn?.addEventListener('click', onLoggin);