2021년 07월 06일

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

• https://inf.run/raw1
• https://inf.run/W3A2

log

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