오늘 한 일

  • 월요일임에도 불구하고 일찍 일어나 보았다. 코어 타임, 음, 그거 효과는 좋은데 아침을 제외한 모든 시간에 너무 졸리다. 하루의 모든 체력과 집중력을 그 시간에 쏟아 붓게 되는 듯. 그래서 오히려 그땐 머리가 잘 도는 건가. 그렇지만 내일도 일찍 일어나고 싶다. 마음만은 얼리버드
  • 금요일에 이어 Vue 3 부족한 부분을 계속 채워 나가고 있다.
  • 그런데 PO님이 requirements를 제시하셨다!? 아마 본격적인 얘기는 내일 나오지 싶은데 이것도 이제 끝인가

오늘 배운 것

  • 완전히 새로 알게 된 건 아니었지만 어쩌다 읽게 된 링크... 뭘 찾다가 보게 된 거였는지조차 기억이 나지 않는군😞  기본적인 내용이기는 한데 되새김질 하는 느낌으로 가볍게 읽기 좋았다.
 

Vuejs의 컴포넌트 사용 시 알아두면 좋은 6가지

Vue.js의 컴포넌트를 사용할때 알아두면 유용한 6가지에 대해서 포스팅을 해보겠습니다. 이것을 알게계시면 소스코드도 많이 줄일 수 있고 보기에도 좋은 코딩을 할 수 있습니다. 케밥표현과 카

ux.stories.pe.kr

오늘 한 일

  • 평소보다 일찍 일어나서 어제 다 마치지 못한 패스워드 리셋 페이지를 Vuetify 없이(Vue 3이므로...) 모달로 띄우는 작업을 마저 했다. 이것이 코어 타임의 효과인가? 쏟은 시간은 한 시간 반뿐이었는데 효율이 엄청 좋았다. 물론 후속 작업이 없다는 것은 아니고..
  • 아무튼 뿌듯한 마음으로 들어간 아침 스크럼에서, PO님이 SSO의 작업 속도가 requirement 생성되는 속도보다 빠르다고 말씀하셔서 갑자기 작업 텐션이 좀 느슨해졌다...!? 이때를 노려서 Vue 3와 Pinia를 부숴버려야겠다! 라고 생각했지만 하루아침에 부숴버리기에는 하루가 너무 짧았다😞  못다 한 공부는 주말을 노린다!
  • 오랜만에 생존 확인 차 다녀가신 승진님과의 장장 1시간에 걸친, 1시간이 지나가는지도 미처 눈치채지 못했던 즐거운 허들 타임! 오늘도 포인트는 많았지만 그 중에 몇 가지만 꼽아 보자면, 1. 언제든지 스스럼 없이 버리거나 방향을 전환하기에 자유로운 흥미 위주의 개인 사이드 프로젝트 도전, 2. 야근을 하는 대신 낮 근무 시간을 효율적으로 쓰면 좋겠는데, 3. 그 방법으로는 뽀모도로 타이머...? 하지만 효과는 없을 수 있다, 정도..?ㅋㅋㅋ아무튼 진짜 재밌었다.
  • 아니 누구 피셜, 깃헙 프로필에 쓴 스킬 중에서 자바스크립트는 남훈님 정도는 되어야 쓰는 거라는 말에 후다닥 지웠더니... 리액트랑 뷰는 넣어 놓고 자바스크립트는 왜 뺐냐고 하면... 나 귀 얇은데...

오늘 배운 것

  • 승진님이 알려주신, 짤줍하기 좋은 사이트 링크(https://xkcd.com/)
  • Vue 3 컴포넌트에서 선언한 data 영역의 변수들을 css에서 가져다 쓸 때는 color: v-bind(variable-name) 하는 식으로 쓸 수 있다는 것을 아래 링크에서 봤다.
 

Vue3 (3.2.x) — Vue variables in CSS (style section)

Using Vue3 variables inside of the <style> section

medium.com

오늘 한 일

  • 저녁에 친구를 만나기로 했는데 친구가 퇴근할 때까지 기다려야 했기 때문에 처음으로 카페에서 일을 해봤다. 멋진 경험일 것 같았지만 의외로 카페의 음악과 사람들 대화 소리가 시끄러웠다. 이어폰 노이즈캔슬링 덕에 위기 모면.
  • 아침 스크럼 때 얘기했듯이 패스워드 리셋할 때 보여주는 페이지 작업을 진짜_최종_정말로_final.jpg 시작해야 했다. 이제 더 이상 미룰 수 없었다. 남은 것 중에서 그것보다 우선순위가 높은 작업은 딱히 없기 때문이었다.
  • 그런데 말입니다... 마치 이 때를 기다리기나 한 것처럼 QA 팀으로부터 피드백이 왔다. 1. 패스워드 입력란 안에 있는 눈 모양 버튼 위치를 바꿔야 했다. 아니 이거 분명 피그마에서 그 위치 아니었는데... 2. 유저가 입력한 이메일과 비밀번호가 없어도 일단 로그인 버튼은 누를 수 있게 해야 했다. 3. 에러 메시지는 유저 입력 시가 아닌, 로그인 버튼을 누른 후에만 띄워야 했다. 
  • 카드 만들어준다길래 기다렸다가 카드 넘버 받아서 처리했다. 2, 3번은 간단한 작업이었고, 시간은 1번이 훨씬 오래 걸렸다. 처음부터 버튼이 거기 있었더라면 css 작업도 간단했을 텐데, 어려운 방식으로 만들어 놨다가 다시 쉽게 바꾸려니 오히려 까다로웠다ㅠㅠ흑흑
  • 그리고 패스워드 리셋 페이지를 만들고 있다...

오늘 한 일

  • Vue 3로 마이그레이션 된 코드 중 css와 언어 설정 관련한 부분을 조금 손봤다. 분명 코드 생긴 모양은 좀 다를지언정 내용 자체는 크게 차이가 없는데 원하는 대로 동작하지 않는 게 참 이상했다. 아직도 왜 다르게 나오는지 모르겠는 것들이 좀 있어서 100% 돌려놓지는 못했지만 차근차근 작업해 나가고 있다. 한 번 잘라서 pr 날렸을 때의 왠지 모를 안도감이란
  • 누군가 무슨 일로 슬랙 토코톡 워크스페이스에서 나를 멘션 했나 했더니만, 로그인 폼에서 비밀번호까지 입력한 후 엔터 키를 누르면 로그인 버튼이 눌리게 해야 한다는 내용의 대화가 오가고 있었다. 앗 전혀 생각 못함!
  • 메인에서 브랜치를 따려니까 pr 날리려면 카드 넘버가 있어야 했던 것 같은데 그러고 보니 카드가 없다. 카드 만드는 건 어떻게 하는 거지...!? 모를 땐 헬프!
  • 도움을 받아 카드를 만들고 나서 생성된 카드 넘버로 브랜치를 따서 작업을 했다. 구글링 해보니 해결책이 생각보다 간단해서 추가한 코드는 사실상 두 줄뿐이었다.
  • 그리고 아직도 익숙하지 못한 Vue 3 코드를 잡고 낑낑대는 중.. 내가 원하는 그 모양새 왜 안 나오냐고 엉엉

오늘 배운 것

  • 아래 링크에는 @keyup을 사용했지만 나는 @keypress를 사용해봤다. 어떤 키 코드를 입력했는지 따로 확인하지 않아도 @keypress.enter면 해결된다니 이보다 간결할 수가 있을까.
 

Vue.js 엔터키 입력 처리

Vue.js 엔터키 입력 처리 keyup 이벤트를 사용한다. 1<input v-on:keyup.enter="submit"> 짧게 표현도 가능하다. 12<!-- also works for shorthand --><input @keyup.enter="submit"> 출처 https://vuejs.org/v2/guide/ev

jacegem.github.io

  • forEach는 언제 쓰나 했는데 map을 사용할 상황에서 return을 굳이 할 필요가 없을 때, 배열을 굳이 반환하지 않아도 될 때 쓰면 좋을 것 같다.
 

[Javascript] Array Method - for each 와 map함수의 차이

study 05.forEach(): Array 요소를 제공된 함수로 한 번 실행합니다.콜백 함수를 인자로 받아, 배열의 각 요소에 콜백함수를 실행한다. 아무 값도 반환하지 않는다.일반적인 forEach문은 다음과 같다.forEac

velog.io

 

오늘은

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

오늘은 개발일기라고 할 수 없음

  • 날씨가 정말 좋았다. 미세먼지도 없고, 해도 나고, 암튼 완-벽
  • 근데 마음이 뭐가 이렇게 복잡한지 싱숭생숭하고 내가 지금 뭘 하고 있는지도 잘 모르겠고
  • 산책을 하고 와도 뭐 그냥
  • 하루빨리 코로나가 지나가서 예전처럼 출근하면 좋겠다
  • 지금보다 몸을 움직이면 아무래도 활기가 생기지 않으려나
  • 그래서 운동을 열심히 했다

특이사항

  • 창현님이 창현님한테는 pr 리뷰 달라고 재촉해도 된다고 하셨다!! 이건 적어놔야 될 것 같아서ㅋㅋㅋ 내 마음 속에 박제
  • 수백만 명 중 한 명에게는 오늘도 감사 새삼

오늘 한 일

  • 어제 올린 pr은 approved 되긴 했는데 추가 작업이 필요한 상황이었다. 아침 스크럼 때 상황을 말씀 드리고 중간에 한 번 끊어서 머지를 해야 하는지 아니면 계속 작업을 하고 나서 완결(이라는 게 애초에 가능한지는...) 후에 한번에 머지를 해야 하는지를 여쭤보았다. 아직 배포 중인 서비스는 아니므로 한 번 끊고 가는 걸로 결론. 
  • 늦어도 내일까지는 끝내야 월요일부터 QA 팀에서 테스트할 수 있는데, 간단한 작업만 남아서 다행이라고 말씀하신 소연님께 나는 그저 웃어드렸다...😅  그...래야 할 텐데 말이죠
  • pr은 여느 때와 같이 머지했는데, 머지한 SSO 브랜치를 다시 pr을 날려서 메인에 머지해야 했다. 이론적으로는 알겠는데 메인 브랜치라고 하니까 알던 대로 하면 왠지 큰일날 것만 같고 내가 알던 그 pr 화면이 그 화면이 아닌 것 같고 막...
  • 그리고 메인 브랜치에는 git squash를 해야 했다. 메인에 머지할 땐 혼자 작업했으면 squash, 여럿이면 merge. 찾아보니 squash란 커밋 여러 개를 하나로 묶는 작업인데, 그런 명령어가 있는 건 아니었고 일종의 옵션이다. cli로 할 필요는 없었고 깃헙 pr 화면에 버튼이 있었다. 평소엔 고민 없이 그냥 누르던 Merge pull request 버튼의 옵션 중에 Squash and Merge를 선택하면 된다. 그러면 description을 새로 입력하는 창이 나오는데 디폴트 값으로 그동안 했던 커밋 메시지들이 전부 나온다. 지울 건 지우고 남길 건 남겨서 정리하고 진행하면 된다. 
  • 스몰톡 인터뷰...를 오늘 진행했는데 우리 조가 선정한 인터뷰 대상자는 TVA팀의 희순님이었다. 인터뷰 마감 날짜가 다가와서 하루 이틀 사이 일정을 잡고 질문 리스트 작성해서 희순님께 미리 전달하고 인터뷰를 했다.
  • 줌에서 녹화 테스트를 한 번 해보고 나서 시작했는데, 예상했던 것보다 인터뷰 시간이 길어지면서 무료 회의 시간인 40분이 되어버려서 방이 터져버렸다. 문제는, 그 전에 인터뷰 및 녹화는 무사히 마쳤지만 줌 시스템상 녹화를 하면 후처리 과정이 있어야 하는데 이건 회의실이 정상적으로 종료됐을 때나 그렇단다. 회의를 사람이 직접 종료하고 나야 컨버팅이 시작되고, 그 후 영상 파일로 남는 데까지도 시간이 조금 걸린다는 것 같았다. 여기저기 찾아보니 30분 정도 녹화하면 컨버팅 시간만 약 10분 정도..? 어디를 찾아봐도 파일이나 녹화 기록이 제대로 남은 곳이 없었다. 심지어 이런 식으로 날린 녹화 파일은 다시 찾을 수가 없단다ㅠㅠ 인터뷰 유쾌하고 재밌어서 영구보존감이었는데... 오늘 너무 슬펐다

오늘 배운 것

  • squash는 브랜치 머지할 때 pr에서도 진행할 수 있지만, 애초에 푸시하기 전에 squash 한 상태로 깔끔하게 만들어서 올릴 수도 있다.
 

Git squash로 여러 커밋을 하나로 만들기

Git squash를 사용하여 여러 커밋을 하나의 커밋으로 만드는 방법에 대해서 알아봅니다.

dev-yakuza.posstree.com

 

오늘 한 일

  • 장장 3시간 여에 걸친 누군가의 라이브 코딩 쇼 구경... 근데 나는 뷰린이인 주제에 훈수를 두었다?!
  • 그리고 자꾸만 늘어가는, 어제 날린 나의 pr에 대한 리뷰들을 실시간으로 확인했다. 근데 첫 번째 리뷰부터 잘 안 풀려..!?
  • 어제는 잠을 푹 잤는데도 머리가 안 도는지 자꾸만 같은 코드를 지웠다 썼다 하면서 바보 같은 짓을 계속했다. 그리고 이건 누군가가 라이브로 보았지
  • 그러다 너무 효율 안 나서 잠깐 파업하고 저녁 먹은 후 운동하고 다시 코딩을 시작했더니 너무 잘 되는데!? 운동이라 쓰고 마법이라 읽는다
  • 당장 달아주신 리뷰들은 어찌저찌 해결한 것 같은데 작업하다 다른 문제들을 발견했다. 음... 이건 내일 스크럼 때 자수하고 나서 생각해 봐야겠다

오늘 배운 것

  • 창현님이 리뷰에 참고하라고 달아주신 링크. vuex 공부할 때 분명 봤었는데 막상 내가 코드 짤 땐 생각도 안 나죠ㅠㅠ
 

Getters | Vuex

Getters Sometimes we may need to compute derived state based on store state, for example filtering through a list of items and counting them: computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } } If more than o

vuex.vuejs.org

+ Recent posts