Skip to content
On this page

2021년 07월 06일

수정하기
문서 생성 2021-07-06 12:15:23 최근 수정 2021-07-06 19:49:08
On this page

Note

Front-end

  • 웹 서비스 개발 절차
    • 요구사항
    • 서비스 기획
    • UI, UX 상세 설계
    • GUI 디자인 (디자이너의 디자인 시안)
    • 퍼블리싱 (디자인을 코드로 옮김)
    • 백엔드 API 개발
    • 프론트엔드 개발
    • QA
  • 프론트엔드 개발자는 화면단 코드를 작성하고 기획, 디자인, 퍼블리싱, 백엔드 개발자와 소통을 해야 한다.

NVM (Node Version Manager)

  • node 버전 변경 프로그램
  • 호환성을 위해 node 버전을 변경해야할 때 이전 버전을 직접 설치해도 되지만 NVM을 사용해도 된다.
  • NVM 사용법
    • 설치 후 node -v 현재 node 버전 확인
    • nvm install 10.16.3 node 10.16.3 버전이 설치되고 해당 버전으로 변경
    • nvm use 버전명 node 버전 변경(해당 버전이 이미 설치된 경우)

Vue.js

배포하기

  • CLI로 생성한 프로젝트 배포하는 방법
    • npm run build 를 실행하면 결과물이 dist 디렉토리 내 정적인 파일로 생성된다. (호스팅할 수 있는 형태의 파일들이 생성되는 것)
    • 그 파일을 웹 서버에 올려주면 된다.
    • webpack이 내부적으로 실행되는 것이다.
  • Netlify 같은 호스팅 서비스를 이용해 배포할 수 있다.
  • SPA 호스팅시 서버에 추가해줘야 하는 설정
    • SPA는 특정 페이지의 정보를 서버에서 받아오는 것이 아닌 미리 갖고 있는 것을 필요시에 자바스크립트를 이용해 그 페이지로 전환하는 것
      • 서버에서 페이지의 정보를 알지 못하기 때문에 서버가 먼저 페이지를 찾을 수 없다고 응답할 수 있다. 서버에 따로 설정을 해줘야 한다.
      • 참고

env 환경 변수

  • 프로젝트 루트에서 .env 생성
    • 변수 = 값 형태로 작성
      • 다른 파일에서 사용하려면 process.env.변수명 으로 사용할 수 있다.
      • 원래는 webpack.config.js 에서 DefinePlugin을 사용해 정의해야 한다.
      • vue3 부터는 .env 에서 변수명 앞에 VUE_ 라는 prefix를 붙여주면 애플리케이션에서 접근할 수 있는 변수가 된다.

reference

log

  • Vue.js 완벽 가이드수강완료했다.
    • 프로젝트를 진행하며 이전 강의의 내용이 복습되는 것을 느낄 수 있었는데, 다음 강의 까지 듣고 다시한번 쭉 훑어봐야겠다. 다음 강의가 정말 기대된다!!
  • 🏋️ 홈트 2일차. 해낸 나에게 박수를 보낸다.