한달머니 8. PWA로 웹앱 만드는 법②(Feat. yarn)

 지난 시간에 웹 앱 매니페스트에 대해서 배웠다. 복습을 하면, '웹 앱 매니 페스트'는 JSON파일이다. 우리가 만드는 PWA에 대한 상세한 내용을 담고 있고, 설치시 브라우저에게 동작하는 법을 알려준다. 앱 로고를 업로드 해야 하고, 디스플레이는 'standalone'으로 필드값을 매긴다. 그리고 어플리케이션의 이름을 설정하고, 테마 색을 입력하고, 시작URL을 기입하면 된다. 이제 Yarn을 사용하여 새로운 디펜던시를 추가해보자.

Yarn이란 무엇인가?

 Yarn은 NPM 레지스트리와의 호환성을 유지하면서 NPM 클라이언트 또는 다른 패키지 매니저의 작업 흐름을 대체하는 새로운 패키지 매니저이다. 패키지 매니저는 특정 용도로 사용되는 일부 패키지를 설치할 목적으로 서버를 제공한다. yarn을 왜 사용하는가하면, yarn.lock 파일을 사용하여 다른 시스템에서 동일한 패키지/디펜던시가 설치되도록 하기 위해서다.

npm install -g yarn

 위의 커맨드를 입력하여 yarn을 설치하면 된다. 제대로 설치가 되었는지 확인하고 싶다면, "설치된 경로>yarn -v"를 입력하여 확인하자. yarn에 우리가 만드는 프로젝트에 대한 정보를 넣기 위해서는 다음과 같은 커맨드가 입력하자.

$ yarn init

여러 질문들이 나올 것이다. 질문에 답할 때마다 package.json 파일에 답한 결과가 저장된다. 먼저, 패키지 이름을 물을 것이다. 원하는 프로젝트 이름을 입력한다. 다른 필드의 경우, 비워두거나 특정 값을 선택적으로 입력할 수 있다.이 중에서 entry point를 지정하는 질문은 중요하기 때문에 건너뛰면 안된다. 프로젝트에서 진입점을 결정한다. 앞에서 생성한 index.js로 초기화한다. 이 단계를 마치면 프로젝트에 새 폴더와 파일이 많이 생성된 것을 확인할 수 있다.

 

***yarn init는 프로젝트 폴더 안에서 이루어져야함. index.js 파일이 진입점으로 하기 위해서***

serve 패키지 설치

 PWA를 라이브 서버로 실행해야하므로 애플리케이션을 테스트하기 위해서는 로컬호스트가 필요하다. 그래서 우리는 serve 패키지를 설치해야 한다. serve 패키지는 서버를 사용해 정적 사이트를 테스트할 때 좋다. 로컬호스트에서 serve 패키지가 실행되는 방법을 확인하고 이후 배포 과정에 추가할 수 있다. 프로젝트에 serve 패키지를 설치하기 위해 터미널에서 프로젝트로 폴더로 이동한 후 다음과 같이 입력한다.PWA를 라이브 서버로 실행해야하므로 애플리케이션을 테스트하기 위해서는 로컬호스트가 필요하다. 그래서 우리는 serve 패키지를 설치해야 한다.

serve 패키지는 서버를 사용해 정적 사이트를 테스트할 때 좋다. 로컬호스트에서 serve 패키지가 실행되는 방법을 확인하고 이후 배포 과정에 추가할 수 있다. 프로젝트에 serve 패키지를 설치하기 위해 터미널에서 프로젝트로 폴더로 이동한 후 다음과 같이 입력한다.

프로젝트 폴더 경로>yarn add serve

 이 커맨드는 프로젝트에 디펜던시를 추가하고 추가된 디펜던시는 package.json 파일에서 볼 수 있다. 로컬 서버에서 정적 페이지를 실행하기 위해서 디펜던시를 사용해 서버를 처음으로 실행한다. 터미널에 yarn serve 커맨드를 입력해서 서버를 실행한다.

프로젝트 폴더 경로>yarn serve

 서버가 실행되면 로컬호스트와 네트워크 주소에 대한 정보가 보여질 것이다. 이 중 하나에 접속하면 로컬 서버에서 실행중인 정적 웹 사이트를 볼 수 있다.

 

---

 yarn과 serve 패키지까지 설치하는 방법에 대해 자세히 살펴봤다. 내일은 마지막으로 서비스워커에 공부하고(양이 너무 많은...), 노션으로 클나무 프로젝트 타임라인을 정리하는 시간을 가져보려고 한다.