포트폴리오 제작기 1편

공부할 때 인강을 듣거나 주로 책을 보면서 토이 프로젝트를 했었다. 

결국 누군가의 코드를 쓰는 것이다 보니, 나만의 프로젝트를 오랜만에 다시 시작해볼까 한다. 

 

지금까지 포트폴리오를 2개 만들었는데, 첫 번째는 학원을 다니며 만든 퍼블리싱 포트폴리오고, 

두 번째는 자바스크립트 프레임워크 (Vue.js)를 이용하여 만든 프론트엔드 포트폴리오였다. 

 

퍼블리싱 포트폴리오는 다양한 애니메이션을 많이 추가하여 인터렉티브하게 제작했고, 

프론트엔드 포트폴리오는 정적이고, Vue에서 지원하는 기능들을 많이 사용하여 제작했다.

 

세 번째 포트폴리오는 Vue.js와 Express를 이용하고, 동적 효과등을 이용하여 포트폴리오 최종본을 

만들어볼까 한다. (지금까지 만든 포트폴리오는 사실 100% 만족하여 만들지 못 했기에...)

오늘은 Vue & Express Generator로 프로젝트를 생성하며 최종 포트폴리오 제작을 시작해보려 한다. 

 

우선 Vue create를 통해 Frontend 프로젝트를 생성하고,

express generator를 설치하여 Backend 프로젝트를 생성한다.

 

express --view=pug backend 

view=pug는 View Engine을 pug로 사용한다는 것이고 backend는 프로젝트 이름이 된다. 

 

생성이 되면 backend 프로젝트 내에서 npm i를 통해 패키지를 설치해주고, 

npm start를 통해 서버를 실행하고 localhost:3000이 잘 동작하는지 확인한다.

 

그 후 Frontend 프로젝트 내에 vue.config.js 를 생성한다. 

 

vue.config.js를 생성하는 이유는 프록시 설정을 하기 위함이다.

 

module.exports = {
  devServer: {
    proxy: {
      '/api': {
      // 프론트에서 /api로 요청하면 아래 주소로 요청한다. 해당 설정을 통해
	  // 프론트에서 http://localhost:3000/api 를 모두 붙이지 않아도 된다.
        target: 'http://localhost:3000/api',
        // cross origin 허용 
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  outputDir: 'backend/public'
}