오늘 한 일

  • 요 근래 나에게 할당되었던 지라 카드는, 나 혼자서만 처리할 수 있는 게 아닌 걸 제외하고는 오늘까지 어느 정도 쳐낼 수 있었다.
  • 그런데 기존 서비스에서는 회원가입할 때 비밀번호가 대소문자, 숫자, 특수문자 상관 없이 8자리 이상이면 무조건 통과되는데, sso에서는 영소문자와 숫자 8자리만 통과되게 해놓았다. 과거의 나 도대체 무슨 짓을... 이러닝 서비스 관련해서 API 문서 정리의 필요성이 대두되던 찰나 어차피 한 번은 손 봐야 하는 비밀번호 규칙을, 일단은 기존 서비스와 동일하게 맞춰 놓았다. 유효성 검사 파일을 따로 플러그인으로 빼놓는 작업을 할 때부터 비밀번호 규칙을 (딱히 존재하지 않더라도 상식적인 선에서 적당히) 염두에 두고 했을 텐데 이렇듯 엉망인 결과가 뒤늦게 나오기도 하는 거였다...어메이징 주니어 아무튼 아직은 selected for development 되지는 않은(하지만 나에게 배정된) 카드에 현황을 간단히 남겨 두었다.
  • 스스로도 당연히 그럴 리 없을 거라고 생각하지만, 혹시나 어디서 이 규칙과 관련한 걸 보고 내가 그렇게 작업을 했었던가, 싶어서 피그마부터 여기저기 뒤져보았는데 그러다 점점 달라지고 있는 디자인을 목격해 버리고 말았다. 아직 많은 부분이 바뀌지는 않았지만 역시 UI에서 벗어날 수 없는 운명인가 보다. 😂

오늘 배운 것

  • ㅋㅋ지금 보니 제목 너무 어그로인 것 같다. vue-i18n으로 번역을 하다 보면, 번역 대상인 텍스트 안에 태그나 컴포넌트를 통째로 넣어줘야 할 때가 있다. 예를 들면, 궁극적으로 번역하고 싶은 건 p 태그로 감싼 'Hi, my friend {name}'인데 이 name 부분에 단순 string이 아닌 b 태그를 넣고 싶다거나 하는 경우다.
<p>Hi, my friend {name}</p>
<b>{name}</b>
  • vue에서는 v-html directive를 사용해서 HTML 태그를 직접 불러오게 할 수도 있다. 하지만 아래 링크에도 나와 있듯이 XSS(Cross-site Scripting) 공격에 취약한 방법이다.
 

Template Syntax | Vue.js

 

vuejs.org

 

XSS - 나무위키

XSS는 데이터를 입력할 때와 출력할 때, 모두 필터링하고, 클라이언트에도 막을 수 있을만한 수단을 구성해놓는 것이 좋다. 보안은 한없이 덧대도 끝이 없고, 아래 서술한 방식으로 구성해도 기

namu.wiki

  • 이럴 땐 i18n-t 컴포넌트를 사용할 수 있다.
<i18n-t keypath="HI_NAME" tag="p">
	<b>{{ t("MY_FRIEND"), {name} }}</b>
</i18n-t>
en: {
	HI_NAME: 'Hi, {0}'
    	MY_FRIEND: 'my friend {name}'
},
ko: {
	HI_NAME: '안녕, {0}',
    	MY_FRIEND: '내 친구 {name}'
}
  • 그래서 만약 name이라는 변수에 'Jane'이라는 문자열이 할당되었다면 출력 결과는 다음과 같을 것이다.
<p>
Hi, my friend <b>Jane</b>
</p>

또는

<p>
안녕, 내 친구 <b>Jane</b>
</p>
  • 자세한 내용은 아래 링크 참고
 

Component Interpolation | Vue I18n

Component Interpolation Basic Usage Sometimes, we need to localize with a locale message that was included in a HTML tag or component. For example: I accept xxx Terms of Service Agreement In the above message, if you use $t, you will probably try to compos

vue-i18n.intlify.dev

 

지금까지 한 일(기억 나는 대로)

  • 구글 로그인은 API 변경 이후로, 가장 최신 버전을 적용하면 버튼에 커스텀 디자인을 입힐 수 없다. API 하나하나 분해(ㅋㅋㅋ)해서 입혀 보려고도 해봤으나 쉽지 않았다. 그래서 커스텀 디자인을 넣을 수 있다는 라이브러리를 찾아서 그 코드를 뜯어 보았지만 내가 라이브러리 없이 했을 때 맞닥뜨리는 문제를 똑같이 만나게 되어서 라이브러리도 별 수 없구나 하는 것을 배웠다. 물론 문제가 다른 데 있을 수도 있지만
  • 구글을 가지고 이렇게나 헤맨 것치고 페이스북 로그인은 붙이기 쉬웠다. 반나절 만에 기능을 작동시킬 수 있었고, 커스텀 디자인도 물론 페이스북의 디자인 가이드를 따르긴 해야겠지만 기술적으로는 어떤 디자인이든지(심지어는 디폴트 버튼 그 회색 그것마저도...) 적용할 수 있었다. 하지만 지난 4월쯤? 페이스북은 한 번 붙이려다가 실패를 맛본 경험이 있었는데, 그건 페이스북 API가 까다로워서라기보다는 페이스북 API는 구글과 달리 테스트조차도 무조건 https 환경에서만 가능한데, 그땐 로컬호스트를 https로 돌리는 방법을 제대로 실행하지 못했기 때문이었다. 저번에 영봉님을 통해 알게 된 caddy를 이용해서 의외로 손쉽게 이 부분을 해결하고 나니 나머지 문제는 일사천리로 해결되었다.
  • 요즘은 SSO 릴리즈 일정이 잡힌 후 개발 속도를 내고 있는 주간이어서 승진님이 만들어 두신 지라 카드 작업을 하고 있다. 그 와중에 구글 로그인과 관련해서 현지 팀과 계속해서 얘기를 할 일이 생겨서 이제까지 안 쓰던 영어를 어제부터 잔뜩 쓰려니 골이 아프다. 인도네시아어 번역이 누락된 부분이라든지, 구글 로그인 버튼 자체에 언어 설정을 적용하는 것이라든지, 어쨌든 브랜치를 하나 따서 관련된 작업을 하다가 연락이 뜸한 시점에는 또 다른 카드의 작업을 하는 식으로 진행하고 있었다.
  • 그 다른 카드의 작업이 마무리되어서 push를 하기 전에 git log를 한 번 확인해 봤는데, 브랜치를 새로 안 따고 구글 브랜치에 그대로 작업한 것을 깨달았다. 터미널에서 브랜치 이름 그렇게 봐 놓고도 몰랐다니 😞
  • 그래서 이번에 정확히 어떨 때 사용하라는 건지 와 닿지 않았던 git cherry-pick을 처음 써 보게 되었다.

오늘 배운 것

# branch A에서 branch B로 옮기고 싶다면

# branch A에서 옮기고 싶은 commit의 hash를 적어둔다
git log

# 그리고 branch B로 바꾼다
git checkout [branch B]

# commit이 하나인 경우
git cherry-pick [hash]
# commit이 복수인 경우
git cherry-pick [hash0] [hash1] [hash2]
# 어느 범위의 commit을 통째로 옮기고 싶은 경우
git cherry-pick [older hash]^..[newer hash]

git commit

오늘까지 한 일

  • 어제는 태초 퀘스트를 물어온 긱봇에게 '하려던 참인 일'을 3개나 적어서 냈다. 욕심...
  • 1. sso 스크럼이 다시 생겼는데 매주 화요일과 수요일에만 하기로 해서 마침 휴가였던 화요일은 못 들어가고 어제 처음으로 참여했다. 온보딩 팀과 비교하면 멤버의 구성은 비슷한데 이번엔 스크럼 보드 없이 구글 밋에서 진행했다. 보드가 없으니까 서로 얼굴을 더 쳐다보게 되는 것만 같은...ㅋㅋㅋ
  • 2. 두 번째로 적어낸 건 허스키였다.
  • 3. 그리고 세 번째는 스벨트. 하지만 2, 3번 중 그 무엇도 해내지 못했다.
  • 왜냐면 스크럼 직전에 QA 팀에서 몇 개의 카드를 어제 오전 중에 QA 서버에 배포해 줄 수 있냐고 연락이 왔기 때문이었다. 당연하게도 스크럼 때 그 얘기가 나왔다. 배포 자체는 언제든지 가능한 상황이었지만 연락을 받고 확인해 보니 당장 고쳐야 할 부분이 눈에 띄어서 수정 후에 배포를 하기로 했다. 그러다 승진님, 지완님과 허들로 이런저런 에러 관련 내용을 나누며 작업을 했다. 절반쯤 페어 프로그래밍 느낌. 근데 sso 프로세스 우리가 봐도 헷갈려ㅋㅋ.. "확실하진 않은데", "기억이 잘 안 나는데"는 거의 뭐 프리픽스였다.
  • 백과 프론트 양쪽을 다 작업하신 지완님이 pr을 올리시면서 프론트쪽 리뷰를 부탁하셨는데 비록 오타 찾아내기와 같은 작은 리뷰였지만 뿌듯했다. 그리고 그 덕에 로딩스피너와 스낵바를 구현하신 코드를 구경할 수 있었다.
  • 지완님과 승진님이 에러 해결 후 머지하신 코드를 받아서 내가 작업한 내용을 넣어서 pr을 올렸다.
  • 그리고 당연히 QA 팀에서 확인 후 코멘트를 달아주었고, 그 내용을 반영하는 작업을 오늘 했다.
  • 참 신기한 게, 똑같은 작업이라도 예전에 시도할 때는 어떻게 해결해야 할지 방법도 생각이 안 나고 결국엔 핵심이 아닌 주변부만 삽질하다 포기했는데, 시간이 조금 지나서 다시 시도하면 '도대체 내가 이걸 그때 왜 못했지?' 싶을 만큼 간단하게 한 번에 성공하는 때가 있다.
  • 이메일을 입력해서 제출하면 비밀번호 재설정 링크가 발송되는데, 그때부터 60초 타이머가 작동하고 그 60초가 지나야 링크를 재발송할 수 있는 버튼이 활성화 된다. 그런데 이 버튼은 외관상으로는 버튼이 아니다. 타이머가 돌아가고 있을 때에는 일반적인 텍스트일 뿐이지만 타이머가 만료되면 텍스트 색상이 바뀌고 클릭이 가능해지면서 버튼처럼 동작한다.
  • 이걸 처음에는 커스텀 컴포넌트로 만들어둔 버튼 컴포넌트를 사용해 보려고 했는데 정렬도 원하는 대로 되지 않고 크기나 간격도 조금씩 달라서 낑낑대다가 일단 보류했었다. 하지만 이번에는 QA에서 공식적으로 적발되어 버렸으므로 더 이상 물러날 곳이 없었다. 커스텀 컴포넌트를 만지다가 시간만 보냈던 기억이 고스란히 남아 있었기 때문에, 이번엔 커스텀 컴포넌트를 버리고 타이머가 0이 되었을 때 텍스트의 색상과 @click 함수를 바꿔주는 다소 단순한 방식으로 방향을 틀었더니 손쉽게 해결되었다. 웹 접근성과 관련해서 스크린 리더를 고려한다면 버튼으로서 동작하는 부분은 버튼 태그를 써야 하는 것 같지만...

오늘 배운 것

  • sso 프론트엔드, 백엔드, 클라이언트 서버를 터미널에 탭 3개 켜 놓고 돌리다 보니 클릭해서 옮겨다니기도 귀찮아져서 찾아본 단축키.
 

맥 터미널 탭이동하기

# Select Next Tab ⌘ + } # Select previous Tab ⌘ + { # Select tab by number ⌘ + number

seulcode.tistory.com

오늘 한 일

  • 오전에 있었던 케이님과의 허들에서 작업을 하다 보면 끝내지를 못해서 공부할 시간을 자꾸 확보하지 못하게 된다고 말씀 드렸다. 작업을 중간에 끝내는 것은 중요하고 필요하지만, 실제로는 시니어들도 그러기 어렵다고 하시면서, 그런 의미에서 뽀모도로 기법을 활용하는 것도 방법이라고 말씀해 주셨다. 25분의 작업이 끝나면 5분을 쉬어야 하므로 흐름이 끊길 수밖에 없는 것이었다. 뽀모도로에서는 항상 작업에 몰두할 25분만을 비중 있게 생각했던 나로서는 새로운 접근 방식이었다.
  • 오후부터는 sso 회원가입 페이지 작업을 할 때 창현님이 추천해주신 어플로 뽀모도로 타이머를 적용해 보았다. 25분이 생각보다 짧아서 나도 모르게 집중하게 되는 효과는 있었다. 그러나 기계적으로 타이머 실행 버튼을 눌러가며 무한정 작업에 몰두하게 되는 부작용을 경험했다ㅋㅋㅋㅋ
  • 코딩, 말 그대로 코드를 짜는 작업은 하면 할수록 그 속에 파묻힐 수밖에 없는 것 같다. 전체적으로 코드의 틀을 잡았다고 생각하면 세부적인 구멍이 눈에 띄고 그 구멍을 촘촘히 메우고 나면 다시 전체 그림이 뭔가 비효율적인 것 같고 아무튼 마음에 안 든다. 리팩토링과 수정 보완의 무한 굴레. 하루가 다 끝날 때쯤에도 여전히 내 투두 리스트에는 작업 말미에 찾아낸 빵꾸들이 손에 손을 잡고 나란히 줄지어 있다.
  • 그래서 결국 공부는 다시 퇴근 이후로 밀리고야 말았다. 스벨트의 탄생 배경, 특징, 컨셉 같은 것들을 훑어보았다. 영어라서 읽는 시간은 오래 걸렸지만 그래도 단 한 줄도 공부하지 못했던 어제보다는 훨씬 낫다고 셀프 칭찬

오늘 배운 것

  • 예전에 창현님과의 페어 프로그래밍에서 뽀모도로 타이머를 쓰셨던 게 생각이 나서 타이머 뭐 쓰시는지 여쭤보았다. Be Focused! 오늘 몇 시간 사용해 본 결과, UI도 기능도 깔끔하고 직관적이어서 만족스러웠다.
 

‎Be Focused - Pomodoro Timer

‎Staying on task seems is a real challenge for our screen-bound generation. The Be Focused lets you get things done by breaking up individual tasks among discrete intervals, separated by short breaks. It’s a surprisingly effective way to retain motivat

apps.apple.com

  • 리액트나 뷰에 비해 스벨트는 같은 코드여도 코드 자체가 짧다. 예를 들면 리액트의 <React.fragment> 또는 <>, 뷰의 <template> 같은 보일러플레이트가 필요 없어진다. 무조건 짧게 쓴다고 가독성의 향상을 보장하지는 않지만, 애초에 원래 짧게 써도 되는 언어가 있다면 그걸 선택하는 게 옳다는, 대충 그런 얘기. 리액트도, 뷰도 조금이나마 사용해 봤기 때문인지 스벨트의 장점이 더더욱 와 닿는다.
 

Write less code

Write less code The most important metric you're not paying attention to Rich Harris Apr 20 2019 All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be. Writing more code also takes more time,

svelte.dev

  • 스벨트는 프레임워크가 아닌 컴파일러이기 때문에, 필요하지 않은 코드들도 함께 안고 가야 하는 다른 프레임워크들과는 달리 필요한 만큼의 코드만 바닐라 자바스크립트로 컴파일한다. 따라서 상대적으로 용량은 작고 실행 속도는 빠르다.
 

Frameworks without the framework: why didn't we think of this sooner?

Frameworks without the framework: why didn't we think of this sooner? You can't write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you. Rich Harris Nov 26 2016 Wait, this new framework has a run

svelte.dev

  • 영어 문장이 조금 어렵게 느껴져서 내가 이해한 게 맞는지 잘 몰라 다른 블로그를 찾아 한 번 더 읽어보았다.
 

왜 Svelte(스벨트)를 좋아하나요?

스벨트가 왜 좋으신가요? 스벨트 영업 글도 기대해보겠습니다 ㅎㅎ 프레임워크들의 차이점이나 트렌드가 어떻게 변하고 있는지에 대해서 가져갈 수 있지 않을까..! 프롤로그 > 주의! 이 글은 정

velog.io

오늘 한 일

  • 지난주가 인도네시아 휴일이었기 때문에 vms UI에 대한 QA 피드백은 오늘 받을 수 있었다. 내가 고쳐야 하는 버그는 총 3가지였는데, 첫 번째부터 조금 난감했다.
  • 사용자가 비밀번호를 잊어서 리셋할 수 있는 링크를 휴대폰으로 받겠다고 하면, 그걸 왓츠앱이나 문자 중 선택해서 보내도록 하는 버튼이 있다. 기존 vms에는 이 버튼이 하나로 합쳐져 있는데, 아무래도 이번 작업은 UI 변경 작업이다 보니 기존에 붙어 있던 함수를 그대로 가져다 썼고 결국 같은 함수가 두 번 붙은 셈(...이건 전적으로 내 잘못)이었다.
  • 혹시나 프론트에서 특정 뭔가를 인수로 넘기면 왓츠앱과 문자를 분기할 수 있는 로직이 백엔드 쪽에 있나 봤는데 golang이라 살짝 난처했지만 없는 것 같았다. 그래도 혹시 모르니 창현님께 여쭤봤고, 백엔드 디버깅이 필요하다 하더라도 이건 할당된 UI 변경 카드로 해결할 문제가 아니라 별도의 카드로 해야 한다는 답변을 들을 수 있었다. 영어로 내가 앞뒤 정황을 다 설명할 자신이 없어서 소연님께 이러이러한 문제로 당장 로직 변경은 어려울 것 같다 말씀드리니 바로 이해하시고 버튼을 원래대로 합칠 수 있게 해 주셨다. 🥳
  • 나머지 버그도 삽질이 없잖아 있었으나 translation에 변수 넣기, 클립보드 복사 기능 넣기 등 첫 번째에 비하면 그래도 비교적 간단히 해결할 수 있는 것들이었다.
  • sso 관련해서는 승진님과 프론트 작업 현황을 공유하는 시간을 가졌다. 허들이 시작되자마자 깨달은 사실: pr 올려놓고 슬랙에 링크를 안 올렸다. 내 기억력 무슨 일이야? 비밀번호 리셋하는 페이지는 우연찮게도 내가 마음대로 만들었으나 결과적으로는 피그마와 디자인이 상당히 일치하므로 세부적인 부분만 간단히 확인하고 넘어갈 예정이었다. 비밀번호 변경 페이지는 아직 급하지 않으므로 뒤로 미루고, 베타 테스트 때 숨겨 놓았던 그렇기 때문에 손볼 데가 많을 회원가입 페이지부터 우선 작업하기로 했다.
  • 승인된 pr의 브랜치를 머지한 기념으로 손대지 않고 있었던 sso 카드를 정리했다. 승진님이 할당해 주신 카드를 내 멋대로 잘게 나눈 것들이 있는데, 제목만 봐서는 그게 그거 같아 보이는 함정이 있어서 이해를 돕기 위해 짧게나마 설명을 덧붙였다. 그러다 보니 뭔가 이상하다는 것을 깨달았다. 방금 이미 dev 브랜치에 머지까지 끝낸 pr 브랜치명을, 유사한 다른 카드 넘버로 잘못 딴 것이었다. 나중에 찾기 쉽도록 pr 제목과 내용만 바꿔주고 넘어갈 수 있었지만 잠깐 온몸에 소름이 돋았다. 그러게 누가 카드 그렇게 나누래

오늘 배운 것

  • 지난번에 상현님에게 테이블플러스 사용법을 배웠었다. 근데 그게 회사에 두고 온 맥북에 있다ㅠㅠ DB를 오늘도 봐야 했는데 테이블플러스를 잃은 나는 다시 선생님께 도움 요청해서 워크벤치를 깔았는데, 충격과 공포의 연속이었다. ? 얘 왜 이렇게 생겼어..가독성 무슨 일이야..주황색 코끼리 돌려줘..
 

MySQL :: Download MySQL Workbench

Select Operating System: Select Operating System… Microsoft Windows Ubuntu Linux Red Hat Enterprise Linux / Oracle Linux Fedora macOS Source Code Select OS Version: All Windows (x86, 64-bit) Recommended Download: Other Downloads: Windows (x86, 64-bit), M

dev.mysql.com

오늘 한 일

  • 최근까지 vms UI 작업을 하느라 뒷전으로 밀렸었던 sso UI 적용에 약간의 부채감을 안고 있었는데, 비록 그 과정에서 파생된 또 다른 부채들이 리스트로 남았지만 그래도 오늘은 조금 해소했다.
  • 회사에서 지급한 맥북을 지난주에 회사에 두고 퇴근했고 오늘은 집에서 개인 맥북으로 일을 했는데, 한 번도 golang으로 작성된 sso 서버를 안 돌려봤었는지 서버 구동하려니 에러가 터지기 시작했다. 이게 문제인가 저게 문제인가 이것저것 만져보다가 결국 go 설치부터 다시 시도. path 관련으로 고통 받았던 지난날의 기억이 갑자기 주마등처럼 스쳐 지나가면서 사실 좀 무서웠다. 나 오늘 왜 재택하기로 한 거지?
  • 하지만 반복된 에러가 면역력을 키워준 걸까. 구글링을 다시 한 건 똑같았지만 타고 들어갈 때마다 어쩐지 익숙한 링크들ㅋㅋ 이미 지난 삽질들을 통해 한 번씩은 봤던 내용들이어서 그랬나 보다. 몇 번 시도해 보니 생각보다 금방 해결되었다. 왠지 다음 번에는 더 잘 할 수 있을 거라는 자신감이 생겼다. 하지만 과연?
  • sso는 사실 어떤 걸 언제까지 해야 하는지는 확실하지 않지만 어쨌든 해야 하는데 안 되어 있는 건 맞고 지난주에 승진님과 확인했던 피그마의 디자인에 맞게 로그인 페이지를 고쳤다. 운명의 장난처럼 매우 공교롭게도 이번 작업 역시 주로 다이얼로그였다. 기본 포맷이 될 거라고 예상했던 디자인을 벗어난 다이얼로그는 css를 다시 손보고, 이메일을 보낸 후에 타이머를 작동시켜서 60초 카운트다운이 완료되면 재전송이 가능하도록 기능을 추가했다. vuetify 하나 빠졌다고 이렇게 수월할 수가...내가 잘 못 다루는 게 맞겠지만 없는 게 마음은 편-안
  • 오늘은 신나는 월요일이니 지완님과의 원온원이 있었다. 항상 이렇게 가볍고 시시콜콜한 얘기로 시작하는 게 좋다. 입도 트이는 기분, 이건 마치 준비운동. 컴퓨터 전공이 아닌 심지어 문과 출신 나로서는 하드웨어 쪽 지식이 전혀 없는 게 가끔 너무 장벽처럼 느껴져서 어떻게 공부를 하면 좋은지 여쭤봤더니 Rust, C, C++ 같은 low-level 언어를 공부하는 것을 추천해 주셨다. 하드웨어 자체에 대한 지식보다는 하드웨어와 소프트웨어가 어떻게 연결되는지, 소프트웨어가 하드웨어를 어떻게 이용하는지 그런 방식들을 이해하는 게 더 필요하고, low-level 언어를 공부하면 자연스럽게 그런 부분을 알 수 있을 거라고 하셨다. 공부할 거 원래 많았지만 더 늘었어!

오늘 배운 것

  • sso의 로그인 페이지 다이얼로그에 사용자가 이메일을 입력하고 제출했을 때 이메일 주소에 대한 유효성 검사를 하는데, 피그마에 따르면 검사 결과 에러 메시지를 띄운 후에는 전송 버튼을 비활성화 해야 한다. 이 전송 버튼은 사용자가 다시 이메일을 수정하면 활성화 되는데 이때 사용자의 입력 값을 watch로 보고자 했다. reactive object의 한 속성만 따로 watch에 넘길 수는 없고, getter function을 사용해야 한다.
 

Watchers | Vue.js

 

vuejs.org

  • 그런데 기존의 이메일과 새로운 이메일의 값을 비교해서 쓸 일이 전혀 없기 때문에 watchEffect를 써도 무방할 것 같은데 이건 내일 한 번 해봐야겠다.
 

[Vue.js] watch와 watchEffect의 차이

watch : 특정 데이터가 변경되었을 때 실행, 새로운 데이터와 이전의 데이터를 가져옴 (lazy)watchEffect : 의존성이 있는 데이터에 대해서 즉각적으로 실행 (immediately)특정 반응 속성을 보고 싶거나, old

velog.io

 

오늘 한 일

  • 어제는 집에서 아침 7시에 출발해서 병원에 갔다가 2시까지 사무실로 출근하고 저녁에 회식을 하고 돌아왔더니 오늘은 고민의 여지도 없이 재택을 할 수밖에 없었다.
  • UI 변경 작업이니만큼 처음에는 단순하게 기존 코드에서 UI만 바꿨었다. 하지만 창현님의 제안으로 시작해서 회의도 거치고 하면서 공통 컴포넌트를 만들고 사이드이펙트를 최소화하는 쪽으로 가다 보니 결국 다시 한 번 더 같은 내용의 작업을 진행하게 되었다. 몇 번 엎으면서 하다 보니 가끔씩 코드 속에서 허우적대는 것 같은 느낌을 받고 있다..ㅠㅠ그러다 보니 진척 속도도 느리고..
  • 범용적으로 쓸 수 있는 부분만 적용해 만든 공통 다이얼로그 컴포넌트를 사용하니 전체적으로 코드의 흐름이 보다 직관적으로 바뀌고 있는 것 같다. 코드의 양 자체가 이미 방대한 상태에서 시작한 작업이었기 때문에 결국에는 또 다시 비슷한 상황을 맞이할 수도 있겠지만 말이다. 그래도 최대한 그런 일을 피해 보고자(늦추고자?) 기획한 방향이니 가급적 용도에 맞게 잘 사용해야겠다.

오늘 배운 것

  • Vue에서는 nextTick이라는 함수를 제공하는데, 이 함수는 DOM이 업데이트 될 때까지 기다리기 때문에 업데이트 된 DOM을 인식하지 못하고 변경된 데이터를 즉각 반영하지 못할 때 사용할 수 있다.
 

Vue $nextTick 이란? | 사용법 및 간단 예제 (Understanding $nextTick in Vue.js)

Vue는 DOM 업데이트를 비동기(asynchronously)로 합니다. 데이터 변경이 발견 될 때마다 큐를 열고 같은 이벤트 루프(event loop)에서 발생하는 모든 데이터 변경을 버퍼에 담습니다. 같은 Watcher가 여러 번

webruden.tistory.com

 

API — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

 

Global API: General | Vue.js

 

vuejs.org

오늘 한 일

  • 아침에 또 공사 소음 때문에 일찍 깼다. 안 그래도 늦게 잤는데 기분도 나쁘고 아침부터 컨디션이 영 별로였다. 그래도 다행히 스크럼 때는 조용해져서 무사히 끝낼 수 있었다.
  • 오늘은 드디어! 페어 프로그래밍이라는 것에 참여해 보았다. 감사하게도 창현님이 먼저 제안해 주셔서 조금은 걱정스러운 마음을 안고 시작했다. 저번에 승규님이 페어를 말씀하셨을 때에는 상황도 상황이긴 했지만 (그때도 공사 소음 때문에...) 어쨌든 작업을 다른 사람과 같이 한다는 게 약간 어색하게 느껴진 것도 있었다. 상대방이 내가 코딩하는 것을 다 보고 있는데 내가 너무 버벅거리지나 않을까 솔직히 두려웠다.
  • 하지만 그건 기우였다. 물론 내가 실력이 부족한 건 맞으니 내가 드라이버였건, 내비게이터였건 효율이 아주 좋았다고 하기는 어렵겠지만 그래도 페어 작업하는 시간 자체가 즐거웠다. 창현님 덕분에 스토리북 사용법도 알게 되고, 처음 접해보는 개발 툴들도 구경하고, 작업하는 내내 서로 의견을 나누면서 진행하다 보니 오히려 집중도 잘 되는 것 같았다. 처음에는 일단 오전에만 2시간 하기로 했다가 오후에도 2시간을 했다.
  • 페어가 끝난 직후에는 서비스 전체를 통틀어 다이얼로그의 흐름을 어떻게 기획할 건가에 대해 프론트엔드 담당자들의 회의가 있었다. 나는 거의 듣기만 했지만. 애초에 답이 정해져 있는 문제가 아니라 더 나은 방향을 찾고자 하는 거였어서 다른 분들이 각자 자유롭게 의견을 피력하시는 걸 듣고만 있어도 흥미로웠다.
  • 그러고 나서는 멘토링이 있었다! 갓 입사해서 팀 스크럼 잠깐 참여했을 때 뵌 것과 어쩔살롱에서 말씀하시는 걸 본 것 외에는 정말로 처음 뵙는 지완님과 1시간 가량 이것저것 많은 얘기를 나눴다. 요즘 나의 태도(?방향?)와 관련하여 계속 고민하고 있었던 것도 말씀 드리니 해결책을 주셨고, 그 덕에 마음도 조금 편해졌다. 지완님 말씀처럼 '나만 힘든 게 아니라는 걸 알면 좀 나으니까'ㅋㅋ 일단 일주일에 한 번씩 뵙기로 했는데 다음 번 이 시간이 벌써부터 기다려진다 😊

오늘 배운 것

  • 말로만 듣던 스토리북, 한 번도 써본 적은 없었는데 오늘 창현님 작업하실 때 구경 잠깐 했다고 한 번 써보기까지 했다. 스토리북 대시보드 같은 게 어디 링크에 있나 했었는데 그게 아니라 npm run storybook 명령어로 로컬호스트에서 돌리는 거였다.
 

Vue 프로젝트에 Storybook 적용해보기

Vue 프로젝트에서 Storybook 간보기. Figma와 연동성 확인.

velog.io

 

Install Storybook

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular

storybook.js.org

  • 어느 분이 vscode 테마도 핑크핑크하게 바꾸고 싶어하셔서 한 번 해볼까 하다가 테마를 만들었다. 애초에 가이드 문서도 있고 생각보다는 많이 까다롭지 않았다. 중간중간 마이크로소프트에서 인증 토큰을 생성한다든가 하는 잡다한 일들이 조금 끼어서 헷갈리기도 했지만... 괜찮았다. 나쁘지 않은 경험이었다. 마켓에 검색해서 나왔을 때의 그 기분이란
 

Color Theme

A guide to creating Color Theme in Visual Studio Code

code.visualstudio.com

+ Recent posts