오늘 한 일

  • 오늘 하루는 스벨트와 함께 시작했고 스벨트와 함께 끝냈다.
  • 궁금한 게 있으면 자료를 타고 타고 들어가서 어딘가에서 헤매다가 다시 돌아오길 여러 번 반복했지만 그것도 나름 좋았다.

오늘 배운 것

  • 스벨트 튜토리얼(튜토리얼이 아니더라도 REPL 자체를 제공한다)은 요즘 다른 데서도 흔히 볼 수 있는 형태로 웹사이트에서 REPL(Read-Eval-Print Loop)로 제공하는데, 이런 CodePen 같은 거 이용하다가 .zip 파일로 받아서 압축 푸는 거 말고 로컬에서 그럴싸하게 돌려보고 싶어서 이것저것 찾아 보았다.
 

The easiest way to get started with Svelte

The easiest way to get started with Svelte This'll only take a minute. Rich Harris Aug 7 2017 Svelte is a new kind of framework. Rather than putting a tag on the page, or bringing it into your app with import or require, Svelte is a compiler that works beh

svelte.dev

  • 개인적으로 어떤 프레임워크든 CLI를 이용하는 걸 좋아하는데 스벨트는 svelte-cli가 deprecated 되어서 아쉬웠다. 사용 자체는 가능하지만 변화가 일어나면 바로 반영하지 못해서 프로덕션 환경에서는 비추한단다.
 

GitHub - sveltejs/svelte-cli: Command line interface for Svelte

Command line interface for Svelte. Contribute to sveltejs/svelte-cli development by creating an account on GitHub.

github.com

  • 첫 번째 링크에서 제안하는 REPL을 제외한 또 한 가지 방법은 degit을 이용하는 것이다. git repo의 가장 최근 버전만을 가져오는 것으로, 히스토리는 포함하지 않으므로 git clone보다 빠르고 가벼운 수단이라고 한다. npx degit user-name/repo-name으로 사용할 수 있다.
 

GitHub - Rich-Harris/degit: Straightforward project scaffolding

Straightforward project scaffolding. Contribute to Rich-Harris/degit development by creating an account on GitHub.

github.com

  • 그런데 이렇게 하면 말 그대로 템플릿으로서 가져오는 것이기 때문에 번들러는 이미 Rollup으로 지정되어 있다. 나는 이유는 모르겠고 그냥 왠지 sso의 Vue3에서 사용한 Vite를 적용하고 싶었다. 그러러면 npm init @vitejs/app으로 직접 프로젝트명을 지정하고 프레임워크를 선택하면 아래 링크와 같은 스캐폴딩이 적용된 프로젝트를 새로 생성할 수 있다. 물론 타입스크립트로도 가능하다.
 

Vitejs (forked) - StackBlitz

 

stackblitz.com

  • Rollup과 Vite를 비교하면 어떤지 자료를 찾아보고 싶었는데 마땅한 게 눈에 띄지 않았다. Vite가 빠르다는 얘기는 있지만 둘의 수치나 이런 걸 비교한 건 딱히. 나중에 시간 내서 Rollup 공식문서도 읽어보고 둘을 비교해 봐야겠다.
 

rollup.js

 

rollupjs.org

 

Why Vite | Vite

Why Vite The Problems Before ES modules were available in browsers, developers had no native mechanism for authoring JavaScript in a modularized fashion. This is why we are all familiar with the concept of "bundling": using tools that crawl, process and co

vitejs.dev

오늘 한 일

  • 지난밤, 그렇게 해결된 줄 알았던 문제는 Irfan님에게서 해당 기능이 qa 서버에서는 잘 확인되는데 dev 서버에서 확인이 되지 않는다는, 양쪽에서 배포된 기능이 서로 일치하지 않는다는 연락이 오면서 내 마음 속에서 다시 불거졌었다. 다행히 아침 스크럼 때 다른 분들께 여쭤본 결과 그건 강력 새로고침이나 캐시 비우기 정도로 해결될 듯했다. 일단 카드에 댓글을 다시 남겨 놨는데 그러고 보니 아직 답이 없으시다.
  • 어제 올린 pr 리뷰 받은 데 대한 마무리 작업을 마저 했다. 주로 리팩토링이었다. 근데 문제는, 자꾸 들여다 보니 눈에 띄는 게 많아져서 커밋이 잔뜩 늘어났다ㅋㅋ..pr에 커밋 범벅..
  • 새로운 카드로 작업을 시작하려다 그 카드에 걸린 연계된 작업이 여러 개가 될 수도 있겠다는 생각이 들었다. 그래서 처음으로 하위 작업에 대해 내가 직접 카드를 만들어 보았다. 그리고 이제 마음 편하게 해볼까 했는데 회원가입 페이지도 손을 좀 봐야 수월하게 시작할 수 있겠다는 사실을 깨달음. 음.. 그러면.. 어디부터 손을 대야 하지..
  • 공차 마시고 세일즈채널 데모 구경하면서 잠깐 쉬었다가 승진님이 몇 번 말씀하셨던 빌드 에러 나는 걸 다시 보기로 했다. 못 찾겠다고 외쳐대는 모듈 하나를 설치해주고 나니 더 이상 같은 에러는 뜨지 않았는데, 다른 이유로 또 빌드 에러가 났다. 이미지 빌드를 수행하는 Dockerfile에 빌드 명령어가 npm run build로 되어 있길래 vite build로 바꿔야 하나 했던 찰나 package.json에 해당 명령어가 vite build로 설정되어 있음을 확인했다. 그럼 뭐지? 에러 왜 나지?
  • 무례를 무릅쓰고 금요일인데...! 퇴근 10분 전인데...! 승진님 소환해서 여쭤본 결과 그냥 Dockerfile에 명시한, 컨테이너 안으로 복사할 파일 목록에 vite.config.ts까지 포함하니 더 이상 에러가 나지 않고 빌드가 잘 됐다. 그런데 그때 승진님이 발견하신 루트 디렉토리에 나와 있는 index.html...! 이게 뭘까, public 디렉토리 안에 있어야 할 것 같은데 왜 나와 있죠, 웅성웅성

오늘 배운 것

  • 응, 근데 거기 있는 게 맞아. 몰랐지만 찾아보니 vite를 프로젝트에 적용하면 기본적으로 index.html이 public이 아닌 루트 디렉토리에 생긴다고 한다. public에는 없어도 되고, 스캐폴딩에 애초에 public에는 index.html이 들어가지 않는다. 난생 처음 보는 index.html의 소재에 조금 당황했다. 😅
 

Getting Started | Vite

Getting Started Overview Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: Vite is opinionated and comes wi

vitejs.dev

오늘은

  • 나는 봄을 너무 타서 문제다. 컨디션 안 좋은 것만 생각하면 봄이 빨리 지나갔으면 좋겠지만 더운 건 더 싫어...ㅠㅠ
  • 승규님이 Vue 3+Vite+Piniar로 마이그레이션을 하셨다. 뭐 혹시 자잘한 오류나 이런 것들이 있으면 계속 잡아나가야 하겠지만 어쨌든 Vue 3의 세상이 오는구나...생긴 게 좀 리액트스럽다. 승규님이 pr 올려주실 때마다 어디가 달라졌는지 구경하기. approve도 처음 눌러보았다. approve 버튼이 따로 있을 줄 알았는데 리뷰 하겠다는 버튼을 먼저 눌러야 나오는 일종의 옵션으로 들어가 있었다. 생각보다 거창하지 않아서 왠지 실망
  • 근데 왠지는 모르겠지만 CSS가 좀 전체적으로 틀어진 느낌이었다. 내일 pr 하나가 마저 머지되고 나면 이것부터 손대야 할 것 같다.
  • 본의 아니게 오늘 또 뭔가 징징이와의 페어 프로그래밍 느낌이었다. 근데 나는 한 게 별로 없군.. 그리고 그 코드가 좋은 코드인지는 아직도 의심 중이다. pr에서 무슨 일이 나려나(두근)
  • 스몰톡 이벤트로 진행한 희순님 인터뷰 결과물을 오늘 드디어 제출했다. 원하던 영상이 아닌 서면 제출이었지만 그래도 너어무 뿌듯하고 후련하다. 줌 너어는 진짜아 나빴다아..

오늘까지 한 일

  • 어제 드디어 딱 이번 베타 테스트 때 내놓을 만큼의 디자인 변경안이 나왔다. 소연님이 스코프를 많이 잘라 주셔서 사실상 로그인 페이지 딱 하나뿐이라 손이 아주 많이 가지는 않을 것 같았다. 틀만 잡고 세부사항은 차차 적용할 생각으로 일단 로그인 페이지 UI 변경 작업을 했다.
  • 디자인이 복잡하지 않아서 컴포넌트를 어떻게 구성하면 되겠다, 하는 건 금방 보였는데 문제는, 새로 만드는 게 아니라 이미 있는 걸 바꾼다는 점 그 자체였다. 아무것도 없는 상태에서 아예 다시 만드는 거였다면 차라리 편했을 텐데 파일이 많지 않을지라도 기존에 뭐가 있는 상태에서 변경하거나 수정하는 건 다소 까다롭다. 아예 필요 없는 파일 하나 지웠다가 빌드가 안 되고 막... pr 올린 후 실제로 그랬음 주의
  • 어제 저녁 7시 퇴근할 때까지 본가에 있다가 거기서 저녁까지 먹고 집에 올라왔다. 출근 생활 중이었다면 편도 2시간 여 걸리는 거리를 평일에 오갈 생각을 못했을 것이다. 재택이 좋은 이유! 그러나 집에 와서 운동하고 뭐 좀 하다가 정신 차려 보니 이미 3시였다. TIL 생략하고 그냥 잠
  • 3시에 자기 전에 pr을 올렸었는데, 일단 리뷰어로 우리 팀 개발자 세 분을 다 넣었다. 팀 배정 후 첫 pr이었다. 차마 pr 날린 직후에 링크를 공유할 순 없어서 아침 스크럼 도중에 올렸다. 그리고 빌드 안되는 거 걸림
  • pr merge 이후에 승진님이 argo CD로 dev 환경에 배포하는 방법을 알려주셨다. argo CD는 보기도 좋고 쓰기도 좋고 아무튼 너무 좋아 보인다. 문어(?) 너무 귀엽고..
  • 세부사항이 조금씩 변경되더라도 어쨌든 UI 변경안이 나왔으므로 나에게도 첫 Jira 카드가 배정되었다. 나도 이제 브랜치명 카드 넘버로 딸 수 있다! 카드가 배정되니 뭔가 진짜 잘 해야 될 것 같고, 귀찮게 할 사람이 출근을 이틀이나 안 한 통에 잠깐 무료할 뻔도 했지만 카드도 어차피 아직 한 개밖에 없는 거 하루종일 이것만 잡고 있게 됐다...!?앗 깃훅 어떡해!?

오늘 배운 것

  • 지금 사용하고 있는 건 Vue 2인데, 이건 올해 2.7 버전 출시 후 18개월 간의 LTS를 유지하고, 그 기간이 끝난 후에는 핵심적인 보안 관련을 제외하고는 모든 패치를 중단한다고 한다. 그렇다면 Vue 3로 넘어가는 것은 지금 당장이 아니더라도 어차피 불가피한 일인 것 같은데, Vue 3와 함께 사용할 수 있는 Vite(엄청 빨라서 그 이름도 vite, 불어 주의)라는 번들러 이름을 오늘 처음 주워듣게 되어서 뭔지 좀 찾아봤다.
 

Vite부터 시작하는 Vue 3 생활

한국시각 기준 19일 Vue의 최신 버전인 Vue 3가 공개되었다. 저장소링크 Vue 3는 이번에 용량 개선과 성능 향상을 위해 처음부터 다시 설계한 구조와, 트리 쉐이킹(라이브러리의 필요한 부분만 가져

ake.kr

+ Recent posts