빌드를 안 한 채로, 코드를 업로드 했다고 팀원에게 엄청 혼났다 ㅠ 빌드가 왜 중요할까? 피드백을 통해서 다시, 생각해보게 되는 순간이다. 감사감사 빌드는 소스 코드를 배포 가능한 형태로 변환하는 과정으로, 웹 애플리케이션의 개발과 배포에서 중요한 역할을 한다.빌드의 중요성은 아래와 같다. 1. 코드 최적화압축 및 난독화: 빌드 과정에서 코드가 압축되고 난독화된다. 이는 코드의 크기를 줄이고, 로딩 시간을 단축시키며, 클라이언트 측에서 코드 분석을 어렵게 만든다.트리 쉐이킹: 사용되지 않는 코드나 모듈을 제거하여 최종 번들 크기를 줄인다.2. 파일 번들링 및 모듈화모듈 결합: 여러 개의 JavaScript, CSS 파일을 하나의 파일로 결합하여 네트워크 요청 수를 줄이고 성능을 개선한다.코드 스플리팅: ..

컨테이너를 도입해야 한다 쿠버네티스로 전환해야한다. 컨테이너 = 서버서버는 프로그램 소프트웨어가 실행되는 하드웨어  모든 회사들은 it 서비스를 제공하기 위해서, 소프트웨어를 제공하고 있다. 이 소프트웨어는 개발자분들이 열심히 개발한 작어브이 결과물이다.  개발자는 자신의 PC에서 소스 코드를 개발할 때, 소스 코드를 임시 소프트웨어로 만들어서 자신의 PC에서 실행하고 테스트한다.   그러면 개발을 마치고 결과물로 만들어진 소프트웨어는 고객에게 서비스로 제공되기 위해서,개발자의 PC가 아니라 인터넷의 어딘가에서 실행되어야 한다.  이 소프트웨어가 바로 서버에서 실행된다. 서버는 회사 서버실에 있을 수도 있고, 클라우드 같은 온라인 서버를 사용할 수도 있다.  PC에서 개발한 소프트웨어는 보통 메모리가 2..

이제 PWA의 요건을 만족하는지 다시 테스트해보고, 테스트를 통과하였다면 직접 제작한 PWA를 설치하고 실행해보자.1. 테스트하기1.1 테스트 전 확인사항테스트하기 전 변경 사항들이 모두 반영되었는지 확인해야 한다. 만약 ngrok로 생성한 url을 사용하였다면 로컬 서버에서 자동으로 업데이트되기 때문에 바로 테스트가 가능함. 하지만 Github pages url을 사용하였다면 반드시 변경 사항을 repository에 업로드해 주어야 한다. github repository에 파일을 업로드할 때는 챕터 2.3에서 했던 것처럼 드래그 앤 드롭 방법을 사용할 수도 있지만, 일반적으로는 터미널에서 git 명령어를 사용하여 변경 사항을 업데이트1.2 PWA Builder 테스트PWA Builder 페이지로 돌아와..

1. 프로젝트 폴더로 가져오기패키지를 다운로드하면 your_pwa.zip 파일이 다운로드된 것을 확인할 수 있는데 그 파일의 압축을 풀어줍니다. 압축을 풀면 아래와 같이 아이콘 이미지 파일이 담겨있는 폴더와 manifest.json 등의 파일들을 확인할 수 있습니다. images 폴더와 manifest.json, pwabuilder-sw.js 파일을 프로젝트 폴더로 가져옵니다. 2. HTML에 manifest 추가하기2.1 manifest 파일 확인하기생성된 manifest.json 파일을 확인해 보니 name 이 null로 설정되어 있고, manifest options에서 작성했던 start_url 과 Orientation 이 없는 것을 확인할 수 있다. 가끔 누락되어서 생성되는 경우가 있어서 그러는 ..

Service Worker Options로 이동하면 오프라인 환경에 대한 설정을 할 수 있다. PWA Builder에서는 미리 만들어진 서비스 워커 패키지들을 제공함.  여기서는 PWA가 오프라인 환경에서 어떤 페이지를 보여줄지를 설정할 수 있는데 우리는 가장 위에 있는 **'Offline page'**를 사용. 오프라인 페이지는 웹 서버에서 offline.html 파일을 가져와서 네트워크 연결이 끊기거나 원활하지 않을 경우에 해당 파일을 제공함자.  Add to Base Package 버튼을 클릭하여 offline page의 기본 패키지를 추가하고, Done 버튼을 클릭한다.  이제 Generate 버튼을 클릭하면 우리가 앞서 설정한 Manifest와 Service Worker를 포함한 파일들을 자동으..

1. Manifest에 들어가야 할 내용PWA를 만들기 위해 필요한 Manifest(매니페스트)를 PWA Builder에서 만들어보자.💡 Manifest가 100점이 나오지 않으면 최종적으로 PWA를 퍼블리싱 할 수 없다. |특히 아이콘 이미지가 제대로 업로드 되었는지 확인한 후 진행해야함. 이때 매니페스트에는 어떤 내용이 들어가야 할까?다음은 web.dev에서 소개하는 매니페스트에 포함되어야 할 내용이다. 아래 내용을 확인하고 PWA Builder에서 Manifest Option을 작성해보자.short_name 또는 nameicons : 192px과 512px의 아이콘start_urldisplay : fullscreen, standalone, minial-ui 중 하나이어야 함.prefer_relat..

앞서 PWA를 만들기 위해서는 HTTPS 도메인이 요구된다. https가 연결된 도메인은 Github Pages를 사용해서 만들 수도 있고,  ngrok을 사용하여 만들 수도 있다.  1. Github PagesGithub(깃허브)는 분산 버전 관리 툴인 깃 저장소 호스팅을 지원하는 웹 서비스이다. Github Pages는 Github에서 제공하는 서비스로, 깃허브의 repository에서 HTML, CSS, Javascript를 가져와서 빌드 프로세스를 통해 파일을 선택적으로 실행하고, 웹 사이트를 게시하는 정적 사이트 호스팅 서비스. Github Pages를 이용하면 github.io 도메인 또는 사용자 커스텀 도메인에서 사이트를 무료로 호스팅을 할 수 있다. 1.1 Github 로그인 github ..

우리가 만든 웹이 PWA의 요건을 충족하는지 어떻게 확인할 수 있을까?첫 번째 방법은 Chrome DevTools에서 제공하는 Lighthouse를 사용하는 것이고, 다른 하나는 PWA Builder를 사용하는 방법이다.1. LighthouseLighthouse(라이트 하우스)는 웹 페이지의 품질을 개선하기 위한 자동 오픈 소스 도구로, 성능, 접근성, PWA, SEO 등에 대한 검사를 진행할 수 있다. 먼저, Lighthouse를 통해 웹 페이지 검사를 진행해보자.1.1 크롬을 통해 웹 페이지 실행하기1.2 개발자 도구 열기개발자 도구를 여는 단축키는 Mac에서는 Option + Command + i이고, Windows에서는 Ctrl + Shift + i이다. F12를 통해서도 개발자 도구를 열 수 있..

▶ TIL (Today I Learned) I wanted to publish my drawing website on the Google Store. And PWA (Progressive Web Apps) is one of the easiest ways to do it.  So I found lectures and articles about them. There were two Korean lectures that were made 2-3 years ago. Becuase the whole UX/UI of PWA builder was changed, those lectures were not good for me.  I found this on youtube, it was made around 1 yea..