cannot import name '_imaging' from 'PIL'

구글에 검색해보니 pillow 패키지의 compiled binaries 파일을 lambda가 처리하지 못해서 생기는 에러라고 합니다

복잡한 해결법을 찾았는데 그보다 더 쉽게 해결할 수 있어서 정리한다. 복잡쓰한 해결법 보러가기!

👍 해결

Don't reinvent the wheel. (바퀴를 재발명하지 마라)

다른 사람이 만든 pillow 패키지가 포함된 layer를 추가 해주기만 하면 된다!!

ARN layer

https://api.klayers.cloud/api/v2/p3.9/layers/latest/ap-northeast-2/html 에서 자기가 추가하고 싶은 패키지의 arn을 알아낸다. (p3.9를 바꾸면 다른 버전의 파이썬도 확인할 수 있다.)

지금은 pillow 패키지가 필요하니 arn:aws:lambda:ap-northeast-2:770693421928:layer:Klayers-p39-pillow:1 을 복사한다.

lambda 함수로 가서 맨 아래 Layers에 Add a layer를 누른다!

Specify an ARN을 누르고 아까 복사했던 arn을 붙여넣는다.

Add를 누른다. 끝 -

참고자료

lambda에 custom layer 적용하기 ARN of Python Packages as Lambda Layers

개요

lambda 자체에 sql을 다루는 패키지들은 설치 되어있을 줄 알았지만 다음과 같은 에러를 마주했다.

패키지를 설치하고 싶은 경우 lambda layer을 이용하면 해결할 수 있다.

lambda layer

AWS docs에 lambda layer에 대한 설명을 보면,

Lambda layer은 Lambda 함수와 함께 사용할 수 있는 라이브러리 및 기타 종속성을 패키징하는 편리한 방법을 제공합니다. 계층을 사용하면 업로드된 배포 아카이브의 크기가 줄어들고 코드를 더 빠르게 배포할 수 있습니다.

layer로 간단히 보면 2가지 기능을 할 수 있는데, 첫번째는 pip로 설치해야하는 라이브러리를 lambda 함수에 추가하는 것과 두번째는 여러 lambda 함수에서 공통으로 사용하는 함수를 패키징하는 기능이다.

layer를 적용하면 lambda 코드를 더 작게 만들 수 있고, 배포 시간이 단축된다.

docker를 이용해 zip 파일 만들기

AWS Lambda는 Amazon Linux에서 실행된다. 따라서 다른 OS에서 zip 파일을 만들면 패키지가 적용되지 않을 수 있다.

ubuntu 실행

docker를 설치하고 cmd에 다음 명령어를 입력해 ubuntu 컨테이너를 실행한다.

docker run -it ubuntu:20.04

cli로 진입하고 다음 명령어를 입력해 ubuntu 패키지를 업데이트한다.

apt update

python 설치 전 설치

파이썬 설치전, 파이썬 설치를 위한 설치를 한다

apt install software-properties-common -y
add-apt-repository ppa:deadsnakes/ppa

패키지 파일을 zip으로 압축하기 위한 zip 설치

apt install zip -y

python 3.9 설치

lambda 런타임에 맞는 파이썬 버전을 설치해야한다! pip도 같이 설치해준다.

apt install python3.9 -y
apt install python3-pip -y

패키지 설치할 디렉토리 만들기

아래 명령어를 입력하고 layer 디렉토리가 만들어졌는지 확인해보자

mkdir -p layer/python/lib/python3.9/site-packages

pymysql 패키지 설치

아래 명령어를 입력해서 pymysql를 설치한다. 저 부분만 바꾸면 다른 패키지를 설치할 수 있다!

python3.9 -m pip install pymysql -t layer/python/lib/python3.9/site-packages/

zip파일로 만들기

layer 디렉토리로 이동한 후,

cd layer

zip파일로 만들어 준다. 꼭 layer 디렉토리 안이여야 함!!

zip -r mypackage.zip *

layer에 적용

위의 순서대로 명령어를 따라치다보면 mypackage.zip 파일이 만들어졌을것이다. 그 파일을 이제 lambda에 적용해보자!

host로 zip파일 가져오기

ctrl+D를 눌러 ubuntu에서 빠져나오고 docker ps로 container id를 알아낸다.

docker ps -a

위에서 알아낸 container id를 아래 13a9부분에 대입한다! (비밀인데 대충 container id 앞 4~5자리만 입력해도 됨..!)

docker cp 13a9:/layer/mypackage.zip .

새 layer 만들기

계층 - 계층 생성을 누른다

업로드를 눌러 아까 복사한 mypackage.zip을 업로드하고 생성을 눌러준다.

lambda에 layer 추가하기!

아까 에러가 났었던 lambda 함수로 들어가서 코드 맨 아래에 Add a layer 버튼을 누른다

사용자 지정 계층을 선택하고 위에서 생성한 계층과 버전을 선택한뒤 추가를 누르면 끝!!! (버전은 처음이면 1이 뜨고, 수정사항이 있을 때마다 1씩 올라간다.)

참고자료

AWS Lambda docs docker로 layer .zip파일 만드는 과정 ubuntu에 python3.9 설치하기 layer 생성하기 cryptograph 문제 해결

Kakao 로그인

🥺 오해했던 점 🥺

1. token의 사용법

Kakao에서 refresh token이랑 access token을 둘 다 주니까, client가 우리 서버의 api를 호출하려면 계속 카카오에 인가를 받아야 된다고 생각했다.

그게 아니라, kakao에서 로그인 한 것을 기반으로 우리 서버의 JWT을 생성해서 client로 전달해야하고, kakao token은 kakao 서버에서 사용자 정보를 받는 용도로 사용한다.

2. 모바일과 REST API로 로그인 방법 차이

REST API의 방식은 우리 서버가 client와 kakao 인증서버 사이에서 redirect 해주고, 받은 token으로 유저 정보를 가져오는 방식이다. (우리 서버가 자체적으로 유저 정보 가져오고 바로 DB에 저장)

그와 다르게 모바일에서는 앱 내에서 kakao 인증서버에 인가를 받고 유저 정보를 가져와서 우리 서버에 정보를 보내는 방식이다. (모바일에서 자체적으로 유저 정보까지 다 가져오고 우리 서버로 보내기)

이 오해를 풀고난 뒤 docs의 그림을 보니까 왜 사용자 클라이언트와 서비스 서버 동시에 물려있는게 있는지 이해됐다.

모바일에서는 2개 물려있는 항목들은 사용자 클라이언트에서 진행되고, REST API 방식에서는 서비스 서버에서 진행된다.

시퀀스 다이어그램

카카오 SDK에서 제공하는 loginWithKakaoTalk함수를 호출한다.

함수를 호출하면 SDK가 카카오톡을 실행하고, 앱 이용 동의를 받는 화면이 띄워진다.

동의를 하면 kakao 인증 서버에서 토큰이 넘어오고, 이 토큰은 TokenManager를 통해 내부적으로 관리된다.

로그인 한 후, kakao 인증 서버에 사용자 정보를 요청해서 받은 정보(user id, 이름 등)를 우리 서버로 보내 신규가입자면 회원가입처리, 아니면 JWT토큰을 발급한다.

Google 로그인

기본적인건 Kakao와 다를바 없다. 하지만 로그인이 완료한 뒤, 유저 정보를 서버로 보내는 부분이 약간 다르다.

백엔드 서버와 통신하는 앱 또는 사이트에서 Google 로그인을 사용하는 경우 서버에서 현재 로그인한 사용자를 식별해야 할 수 있습니다. 안전하게 하려면 사용자가 성공적으로 로그인한 후 HTTPS를 사용하여 사용자의 ID 토큰을 서버로 보냅니다. 그런 다음 서버에서 ID 토큰의 무결성을 확인하고 토큰에 포함된 사용자 정보를 사용하여 세션을 설정하거나 새 계정을 만듭니다.

공식 문서에 의하면 모바일 앱에서 바로 user ID를 보내는 방법은 보안에 취약할수도 있기에, token을 보내고 백엔드에서 검증하는 절차가 필요하다고 언급되어있다.

시퀀스 다이어그램

사용자가 구글 계정으로 인증을 하고 인증 서버에서 토큰을 주는 것까지는 동일하다.

유저의 정보를 누가 요청하는지가 다른데, 카카오는 클라이언트에서 직접 요청하고, 구글에서는 서버가 요청한다.

유저의 정보를 인증 서버로 부터 받아와서, user ID 값을 DB에서 찾아보고 있다면 로그인이 없다면 회원가입이 진행된다.

모두 완료된 후, 서버는 JWT를 발행해 client로 보낸다.

참고자료

refresh token 만료 기간 kakao developers SMS 인증 로직 google developers

개요

django의 channels로 백엔드를 구성하고 redis를 메세지 브로커로 이용하여 개발용 목업서버를 구성하기로 생각했다.

각자의 개발환경에서 간단히 서버를 실행할 수 있어야 해서 docker를 이용하기로 했다.

백엔드 구성

django channels의 docs에 제공되어 있는 채팅 튜토리얼을 따라 진행했다. -> 채팅 서버 튜토리얼 바로가기

완성된 코드는 깃허브에 올려놓았다. -> 채팅 서버 코드 깃허브 주소

이 글의 목적이 ❌django 코드를 리뷰하는 것❌이 아니기 때문에 링크로 대체한다!

Dockerfile 생성

Django 프로젝트의 상위 디렉토리에 Dockerfile을 생성한다.

현재의 디렉토리 구조이다.

django-chat-mock/
    Dockerfile
    djangoProject/
        manage.py
        ...

Dockerfile을 다음과 같이 작성한다.

FROM python:3.8.9
RUN pip3 install django channels channels_redis
WORKDIR /usr/src/app
COPY . .
WORKDIR ./djangoProject
CMD ["python3", "manage.py", "runserver", "0.0.0.0:8000"]
EXPOSE 8000

문법

FROM

사용할 이미지를 입력한다. 우린 python 3.8.9 버전을 이용한다.

RUN

이미지가 올라가고 실행할 명령어를 입력한다. pip로 django, channels, channels_redis를 install 해준다.

WORKDIR

작업을 진행할 디렉토리를 지정한다. 없으면 만들어 줌!

COPY

빌드를 진행하기전, 호스트의 디렉토리를 복사한다. "COPY . ."을 통해 작성해놓은 django 프로젝트를 복사한다.

CMD

컨테이너를 시작할 때 실행할 명령어를 입력한다. "python3 manage.py runserver 0.0.0.0.8000" 명령어로 django 서버를 실행한다.

EXPOSE

외부에 노출할 포트를 지정한다. 8000번 포트를 노출시킬 것이다.

Dockerfile 빌드, 배포

먼저 다음의 명령어를 입력하여 dockerfile을 빌드한다.

docker build --tag (docker hub 아이디)/(이미지 이름):(버전)

예시)
docker build --tag eunjong147/backend-chat-mock:1.0.0

docker login 로 도커 허브에 로그인해 준 다음,

아래의 명령어를 입력하여 image를 업로드한다.

docker push (docker hub 아이디)/(이미지 이름):(버전)

예시)
docker push eunjong147/backend-chat-mock:1.0.0

docker-compose

redis와 백엔드 서버, 2개의 이미지를 사용해야하기 때문에 docker-compose를 이용한다.

docker-compose.yml 파일을 생성하고 다음과 같이 yml파일을 작성한다.

version: '3'
services:
    backend:
        image: eunjong147/backend-chat-mock:1.0.0
        ports:
            - "8000:8000"
        depends_on:
            - redis
    redis:
        image: redis:5
        ports:
            - "6379:6379"

문법

version

도커 컴포즈 파일의 버전을 명시해준다.

services

컨테이너를 실행하기 위한 단위이다. backend 부분과 redis 부분으로 나뉜다.

image

사용할 이미지를 명시해준다. backend service에서는 위에서 배포한 backend-chat-mock 이미지를 사용하고, redis service에서는 redis 5버전을 사용한다.

ports

포트포워딩을 지정한다. <호스트의 포트>:<컨테이너의 포트>로 바인딩한다.

depends_on

실행순서를 보장한다. backend service에서 redis service에 depends_on을 지정하면, redis 컨테이너가 먼저 실행된다.

완료!

docker-compose up -d 명령어를 통해 백그라운드로 실행하고, docker-compose down 명령어를 통해 docker 컨테이너를 일시중지한다.

이제 docker-compose.yml 파일만 공유해주면 도커가 설치된 아무나 같은 환경에서 chat server를 실행할 수 있다.

참고자료

docker docs 도커 파일 배포

6개월 간 진행하는 소프트웨어 마에스트로 과정에 합격하여 이 과정동안 진행할 아이템을 기획했다.

소프트웨어 마에스트로란 최우수 SW 인재를 발굴하여, 체계적이고 파격적인 지원을 통해 SW 산업 발전에 기여하기 위해 기획된 정부 지원 사업.

처음 합격하고 나도 이제 개발의 신이 되겠구나 했지만 이 정부 사업은 개발자를 기르기보단 창업자를 기르는 게 목적인 것 같다.

사업성을 고려하며 프로젝트 주제를 정한적이 단 한번도 없기 때문에 아이템 선정에만 약 1개월이 소모되었으며, 이 시간이 소중한 경험이라 생각하여 회고 형식으로 SWM 과정을 기록할 예정이다.

3명에서 팀으로 진행되기 때문에 혼자 방구석에서 코딩할 때보다 더 많은 시행착오를 겪었다.

아이템 선정하기

위에 언급했듯, 사업성을 고려하며 프로젝트 주제를 정한적이 단 한번도 없거니와 사업이 먼지도 잘 모르고 난 사업할 돈이 없다. (사업 대박나서 떼부자되고 싶긴 함.)

따라서 아이템을 선정하는 과정에서 여러 실패를 경험했다.

아래는 아이템을 선정했던 과정들이다.

1. 하고 싶은 아이디어 무작정 뱉고 고르기

나와 다른 팀원 중 한 분이 "생활 속 필요한 소프트웨어 기록해놓기"라는 비슷한 습관을 가지고 있었다.

그럼 걍 그 중에 재밌어 보이는 거 고르자~!

라는 잘못된 생각으로 소중한 시간 2주를 날렸다.

이때 선정한 아이템은 비디자이너가 쉽게 옷을 디자인할 수 있도록 AI를 이용해 돕고, 그 옷을 팔 수 있는 플랫폼이였다. 옷을 디자인해 파는 사람은 쉽고 빠르게 디자인해 수수료를 벌어가서 좋고, 옷을 사는 사람은 다양한 개성있는 옷을 살 수 있겠다고 생각했다.

아래는 우리의 팀이 적극적임을 어필하기 위해 만들었던 프로토타입의 랜딩페이지이다.

선정한 이유는

1. 옷에 관심있는 팀원이 2명이나 되었고,
2. 옷 공장들 알아보고 하는 과정이 재밌어 보였고,
3. 매력적이라고 생각했었다.

멘토링을 여럿 받아보고 얻은 피드백들은 다음과 같다.

1. 이 아이템은 잘쳐줘야 "있으면 좋다" 수준
2. 개성있는 옷인데 프린팅 반팔? 논리가 부족 + pain point 부족
3. 마플이라는 유사 서비스 있는데 이 서비스만의 아이덴티티 부족

팩폭에 뚜두려 맞고 정신을 못차린채 아이디어를 피봇했다.

2. 고객의 pain point 중심으로 아이디어 내기

2주 정도 지난 시점에 알게 된 것은 고객, 고객의 pain point, 시장의 크기가 가장 중요하다는 것이다.

예비과정에서 들었던 디자인씽킹 프로그램을 토대로 고객을 선정하고, 고객의 pain point가 얼마나 되는지 생각해보고, 어떻게 해결해 줄 수 있을지 생각해보았다.

고객들을 생각해보고 고객들의 고통의 빈도와 정도에 따라 좌표에 배치해보았다.

5~6시간을 소모하며 열띤 아이디어 발산을 했고 그 과정에서 굉장히 지쳐서 (그 당시엔 몰랐음), 잘못된 아이디어를 골랐다.

거닐어 다니는 것을 좋아하는 고객들을 위해 위치 기반으로 지도에 안개가 걷히는 걷기 보조 앱을 만들자!!

이 날의 고된 토론에 지쳤었고, 아이디어를 선정하는 것 자체에 대해 지쳐있었다. 그래서 처음 나온 게임성 프로그램에 다들 열광했다. (이때부터 "회의는 최대 2시간까지만 연속으로 진행하고, 쉬는 시간을 가져야 한다." 라는 그라운드 룰을 도입했다.)

다음날 정신을 차리고 다시 피봇했다.

3. 갑자기 떠올리기 (?)

절망에 빠져있는채로 맥도날드에서 에그 불고기 버거를 먹으며 햄버거 사진을 가족 단톡방에 보냈다.

그때 문득 든 생각!

내가 보낸 이 사진은 어디로 가는거지?? 우리 가족 사진들은 다 어디있지??

그래서 가족의 추억을 기록하기 위한 어플을 만들기로 했다.

생각해본 이 아이템의 장점은 내가 곧 고객이며, 우리의 대부분은 가족이 있다. (가족 한명만 원해도 다운로드 수가 약 4배이다..)

하지만 아직 아이디어를 검증 해봐야하고, 구체화 해야하고, 기획서를 작성해야하며, 기획 발표 ppt를 만들어야된다는 사실에 눈가에 눈물이 흘렀다.

멘토링 정리

시장의 크기가 매우 중요함. 좋지 않은 제품이라도 시장이 크면 성공할 확률이 높다. ex) 빗썸 시장의 크기가 크면 많은 아이디어들이 있지만, 기피하지마!

많은 사람의 심각한 문제를 해결해 줄 제품이 최고지만 찾기 힘드니 많은 사람의 가벼운 문제 or 적은 사람들의 심각한 문제를 해결할 제품을 찾아야 함.

경쟁 제품에 비해 10배 좋게 만들어야함.

김영한님의 스프링 강의를 보며 자주 쓰시는 단축키들을 정리해본다.

단축키

• static import ⌥ + ↵

• return 값 자동 ⌥ + ⌘ + V

• 테스트 코드 생성 ⌘ + ⇧ + T

• 해당 객체가 선언된 파일로 이동 ⌘ + B

• 이전에 실행했던 파일 재실행 ^ + R

• 생성자, 게터와 세터 자동 생성 ⌘ + N

• 한 단어 선택 ⌥ + ↑

커밋 메세지 작성, 네이밍시 헷갈리는 영어단어를 정리해보았다.

반대말 단어

show의 반대말로 invisible을 쓰면 안된다. show의 반대말은 hide이다.

show - hide visible - invisible under - over or under - and over import - export

비슷한 단어

중단의 의미

• stop - 잠시 중단, 언제든 재시작 가능
• end - 완전히 중단, 재시작 가능성 전혀 없음
• finish - 재시작 고려할 필요도 없음
• pause - 일시 중단, 금방이라도 다시 재개
• suspend - 다음 단계의 시작 중단
• hold - 어떤한 의도로 중단중

// 사용자 등록 잠시 중단
// 다시 재개시 restartUserRegister 사용
stopUserRegister();

// 사용자 등록 중단
// 새롭게 시작하려면 beginUserRegister 사용
endUserRegister();

// 완전히 중단, 다시 재개시 에러
finishUserRegister();

get류

• get - 일반적으로 가져올 대
• return - 안 씀
• retrieve - 검색해서 가져올 때
• fetch - 현재 포인터의 다음 주소의 값을 가져올 때

set류

• set - 일반적인 값 변경, 값 설정시
• init - 초기화 설정
• register - 정해진 틀에 값 넣기
• create - 틀이 없을 때 틀 만들기

change류

• change - 내용 단순 변경
• modify - 잘못된 것 바로잡기
• revise - 기존에 없던 것이 덧붙여져 달라졌을 때

parameter류

Parameters are initialized to the values of the arguments supplied.

• parameter - 함수에 정의한 변수
• argument - 함수 호출 시 전달되는 값

• attribute - html 태그 안 속성
• property - html DOM에서 부르는 태그 안 속성

정확한 단어를 쓰는 것도 중요하지만 일관성, 개연성이 훨씬 중요하다.

출처

개발자의 글쓰기 (김철수 지음)

https://developer.mozilla.org/en-US/docs/Glossary/Parameter

단순 비밀번호 변경 시 바로 4번부터 진행하면 된다.

1. mysql 종료

mysql.server stop

2. 안전모드로 mysql 실행

/usr/local/opt/mysql/bin/mysqld_safe --skip-grant-tables &

3. 비밀번호 초기화

새 터미널을 열어준 뒤 다음 명령어를 입력한다.

# 터미널
mysql -u root

# mysql 콘솔
use mysql;
UPDATE User SET authentication_string=null WHERE User='root';
exit;

4. 새 비밀번호 입력

2번의 터미널은 종료하고 다음 명령어를 입력한다.

# 단순 비밀번호 변경 시에는 뒤에 p옵션을 붙인다!
mysql -u root

# mysql 콘솔
ALTER User 'root'@'localhost' IDENTIFIED WITH caching_sha2_password BY '새 비밀번호';
flush privileges;

암호화된 비밀번호가 db에 저장되어야 정상적으로 동작한다.

대략적으로 python 관련 라이브러리들을 설치하고, github에서 리포지토리를 클론하고, 서버를 열어서 접속하는 과정을 거친다.

EC2 인스턴스에 접속하기

ssh -i {내 프라이빗 키}.pem ubuntu@{EC2 인스턴스 퍼블릭 IPv4 DNS주소}

UNPROTECTED PRIVATE KEY FILE! 에러시 이전 글 참고

git, python 설치 확인

git --version

python3 --version

pip, django 설치

제발 개발자면 리눅스에서 뭐 설치하기전에 sudo apt update 칩시다!!

sudo apt install python3-pip -y

sudo apt install python3-django -y

y 옵션은 설치시 나타나는 모든 물음에 동의한다는 뜻입니다.

clone repository

ssh key 생성, 등록

cd ~/.ssh/
ssh-keygen -t rsa -b 4096 -C 'github e-mail 주소'

ssh-agent 설정

eval $(ssh-agent -s)

ssh-agent가 개인키의 비밀번호를 암호화 해 기억해두어 사용자가 처음 한 번만 입력하면 까먹어도 되게 함!

개인 key 파일 등록

ssh-add ~/.ssh/{key이름}

확장자 빼고 key 이름만 적으면 댐

github에 key 등록

cat ~/.ssh/{key이름}.pub

위의 명령어를 실행한 결과를 전체 복사해서 아래의 경로에 붙여넣기 하면 됨

** 깃허브 -> Settings -> SSH and GPG keys -> New SSH key **

git clone

클론할 리포지토리에서 SSH탭에서 주소 확인 and Clone

git clone {SSH 주소}

django 세팅

가상환경 설정

# python 가상환경 설치
sudo apt install python3.8-venv

# 가상환경 생성
python3 -m venv venv

# 가상환경 활성화
source ./venv/bin/activate

requirements 설치

pip install -r requirements.txt

django 서버 실행

python manage.py runserver 0:8000

vue github

Vue CLI is a full system for rapid Vue.js development

It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations. At the same time, it still offers the flexibility to tweak the config of each tool without the need for ejecting.

vue 프로젝트의 개발환경 설정시 개발자의 고민을 덜게 해주는 고마운 친구

Vue.js 개발환경 설정

1. Vue CLI 설치

# npm 설치
npm install -g @vue/cli

# yarn 설치
yarn global add @vue/cli

2. Vue 프로젝트 생성

vue create (프로젝트 이름)

위의 명령어 입력시 아래의 화면이 뜬다.

1. Vue2 버전의 기본 세팅
2. Vue3 버전의 기본 세팅
3. 사용자 입맛대로
   세 개중 하나를 선택할 수 있다.

3. Options 선택

기본 babel과 eslint를 사용하는 선택지인 1번 2번이 빠르긴하지만, 3번 선택지가 더욱 구체적인 개발환경 설정이 가능하다.

key arrow와 space로 선택하고 enter키를 눌러 다음으로 넘어간다.

*Choose Vue version * Vue 버전 선택 옵션 ( 2 or 3 )

*Babel * Vue 코드를 javascript로 바꿔주는 컴파일러

TypeScript 확장된 javascript, 정적 타입 언어 사용

PWA Support 모바일 웹사이트에서 네이티브 앱과 같은 동작을 가능하게 하는 기술

Router SPA인 Vue는 Router를 설치해야지 주소의 이동이 가능하다

Vuex vue용 상태관리 라이브러리

CSS Pre-processors 확장된 css (scss)

Linter / Formatter 코딩 컨벤션을 엄격하게 지키게 해주는 도구

Unit Testing 간단한 unit testing을 도와준다

E2E Testing 종단간 testing을 도와준다

4. 개발환경 세팅 완료!!

take a while 후 환경 세팅이 끝난다 😎

5. vue 실행

cd my-project

명령어로 디렉토리 이동 후

npm run serve

명령어로 서버 실행해보면 끝!

출처

vue cli guide