2019 12 / PWA + Azure workshop

https://festa.io/events/786

Hands on! PWA + Azure workshop | Festa!

 

Hands on lab은 세 번째다. 그리고 이번에는 처음으로 잘 따라갔다..ㅠ_ㅠ 

사실 지금 굉장히 인기있는 기술인 React는 이름만 아는 상태였는데, 설치부터 하나하나 따라갈 수 있어서 핸즈온랩의 참맛을 느낄 수 있었던 것 같다.

 

세션은 두 개로 나눠지는데, (위 이벤트페이지에 잘 나와있음)

PWA(Progressive Web App)를 만들고 MS Azure로 자동 배포까지 진행하는 워크샵이었다. 운좋게 한국 마이크로소프트에 방문할 수 있었다 ㅋㅋㅋ

 

 

 

 

1. PWA Hands on

PWA라는 개념은 처음 접했는데, 사실 강연하시는 분의 글을 읽고 갔는데 현장에서도 이 내용을 바탕으로 설명해주셔서 좀 더 이해하기 쉬웠고 모르는 기술이 아니라 좋은, 신기한 기술이라는 생각이 들었음.

• PWA : 웹앱을 만드는 기술
• https://medium.com/@euncho/pwa%EB%A5%BC-%EA%B5%AC%EC%84%B1%ED%95%98%EB%8A%94-%EA%B8%B0%EC%88%A0%EB%93%A4-a5be57df5575

PWA를 구성하는 기술들

• hands on 참고 : https://github.com/techhtml/2019-12-21-pwa-workshop

techhtml/2019-12-21-pwa-workshop

개발자 행사이긴 하지만 반정도는 학생일 것 같았는데, FE/BE 호구조사(?)를 할 때 보니 대부분 현직자이신 것 같았다.
정말 개발자는 끊임없이 배우는구나 싶기도 하고, 이제 1년을 향해가고 있는 나는 뭘 얼마나 할줄 아는가 싶기도 하고..
현직자인 와중에 강의를 하시거나 행사를 준비하시거나 강의를 들으시거나 하시는 분들 다 대단한듯

 

그리고 들으면서 메모한 것들 중 다시 사용할 것 같은 부분 정리했다.

 

• VS Code terminal에 입력하는 설치 명령어
  • npm init
  • npm install --save react react-dom
  • npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
  • npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loade
  • npm install --save-dev webpack-pwa-manifest
  • npm install --save-dev workbox-webpack-plugin

• Front End 개발자라면 공부해볼만한 것들
  • React(는 완전 클라이언트 사이드라서.. 이거 뿐만 아니라)
  • View js (최근에 버그가 있긴 하지만)
  • Angular js

결과는 이렇다: 웹으로 보는 페이지를, 주소창의 +버튼을 통해 바탕화면에 앱처럼 설치할 수 있다! 

 

 

 

 

 

 

2. MS Azure, git action을 이용한 수동/자동 배포

• 참고 : https://github.com/devkimchi/pwa-workshop/tree/master/docs

devkimchi/pwa-workshop

이건.. 내가 설치를 잘못해서 버벅대며 따라가느라 중간에 수동배포 부분은 날렸다.. ㅎㅎ; 메모도 제대로 안함..

어째저째 자동배포까지 갔는데 이유는 모르겠지만 나와야 하는 화면과 내 컴퓨터 속의 화면이 달라서?? 제대로 한 것 같진 않다 

 

이건 좀 처음보는 도구들 이름이 나와있어서 찍었다. 그리고 CI/CD라는 개념이 아직은 낯설다.

이전 질문으로는 오늘 어떤 OS를 사용하냐, 가 있는데 60% 좀 넘게 맥이었고 리눅스가 3% 정도 있었다(와우). 나머지 윈도우.

여러 개발 행사에 참석하면 대충 눈으로 봐도 맥이 압도적으로 많다고 느낀다. 개발자 행사라는 점을 생각하면 개발하기 편하고 좋기 때문에 사용하는 것처럼 보이는데..?

 

이건 하면서 백엔드쪽에 가깝다고 느꼈는데(맞겠지?), 자동 배포하는 거나 Azure 클라우드 직접 경험해봐서 신기했다. 서버코드 몇줄 써봤다고 백엔드도 경험해봤다 하기가 애매했는데 단순히 경험하는 것 뿐만 아니라 어떤 프로덕트를 개발하고 배포하는 전체 프로세스를 짧은 시간 안에 이해할 수 있었던 것 같다.

 

 

 

후기

1. GDG 행사 처음 갔을때 깃헙에 PR하는 이벤트가 있었는데 깃헙은 한번도 제대로 사용해보지 않아서 허우적댄게 생각났다. 오늘은 콘솔창으로 깃헙에 푸시도 해보고 ㅋㅋㅋ 따라한 것 뿐이지만 내가 할 수 있다는게 재미있었다. 

2. 오늘 '독서왕 김지디지', 'Android extended' 등의 다른 행사도 있었다. 겹치지만 않았다면 다 참석했을거다.. ㅠㅠ

3. 아침에 본 어떤 글에서, 유독 개발자를 위한 행사가 많다고 한다. 다른 몇몇 직종과는 다르게 개발자들은 노하우나 정보가 자신만의 것이 아니라, 공유하기 때문이라고.. 오픈소스의 개념이 현실에 나타난 것 같다. 참 좋은데 나한테 필요하거나 내가 해야 할 것들을 찾아내는게 쉽지 않군..

4. 개발, 정보, 워크샵, 네트워킹 등의 행사도 좋지만 사실 개발자 커리어 관련 강연에 꼭 가고싶다 ㅋㅋㅋ!

5. 한국 마이크로소프트는 광화문 근처 11층인데 와 뷰가 정말 좋았다. 오늘 눈까지 와서!

도착하고 바로 찍은거 -> 쉬는시간에 나왔더니 눈이 쌓여서 -> 집가기전에 야경

 

마지막 사진은 MS 들어가면 바로 보이는~~

눈와서 밖이 뿌옇다