Portfolio


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


npm i sass
npm i axios


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


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


export { axiosInstance } from './axiosInstance';


import axios from 'axios';

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

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


import axios from 'axios';

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

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


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="로그인" />`;
  }
}


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);