오늘 한 일

  • 구글 로그인 버튼이 잘 나온다면 버튼을 렌더링 할 때 나오는 에러는 일단 두기로 했다. 기분 좋게 올리려는데 깃 에러가 발목을 잡았다. 아니, pull 다 했는데 왜 또 pull 하래ㅠㅠ 결국 로컬 디렉토리 자체를 날려버리고 작업을 다시 했다. 어차피 내가 작성한 코드 몇 줄 없었어...ㅎ...기억 잘 나...
  • PR 없이 그냥 올리기로 했었는데, 막상 처음부터 PR 올리는 법을 배워 놔서 그런지 PR 없이 머지하는 방법을 모르겠어서 그냥 하자니 걱정도 되고 다짜고짜 PR을 날렸다. 그랬더니 처음으로 케이님이 보는 것만으로도 심장 쿵쾅거리는 리뷰를 남겨주셨다. 어차피 한 컴포넌트 안에서만 사용할 파일인데 굳이 전역으로 등록해서 불러오고 있었다. 후다닥 고쳐서 다시 올렸다. 
  • 3시에는 PT mix가 있었다. 비록 영어로 진행되었고 듣기만 하는 입장이었지만, 한 번도 들어본 적 없던 ROAS 같은 마케팅 용어들도 알게 되고 재미있었다.
  • 온보딩 팀과의 싱크업이 있었다. 더 상세히 확정되어야 하겠지만, 양쪽에서 겹친다고 판단되는 작업들이 있어서 디자인 등을 공유하게 됐다. PO가 없었던 우리 팀 특성상 가이드 해주실 분이 있게 되면 좋을 것 같다.
  • 구글 로그인 때문에라도 회원가입을 하는 신규 유저에 대해서는 이메일 확인하는 절차가 필요하다고 판단되어, 흐름 상 회원가입 페이지와 정보 이용 동의 페이지 사이에 인증 코드 입력 페이지를 넣게 되었다.

오늘 배운 것

  • 로컬에서 작업할 때도 브랜치를 따로 따고, merge(pull?)는 최대한 자주 합시다.
  • ROAS가 뭘까요?
 

좋은 ROAS는 얼마일까요? (ROAS 계산법) - HelloDigital

궁극적으로 ROAS(Return On Ad Spend, 광고수익률)는 자사의 전반적인 ROI가 아니라 특정 광고의 효과를 측정하기 위함입니다. 그렇다면 ROAS와 ROI는 무엇이 다를까요? 지금 바로 헬로디지털 블로그에서

www.hellodigital.kr

 

오늘 한 일

  • 지난 금요일 퇴근 직후에 맞닥뜨린 문제가 있었다. 리액트에서나 뷰에서나, url 파라미터를 받아서 로컬스토리지에 저장한 다음 그걸 꺼내서 화면에 띄워야 한다. url 파라미터가 바뀌면 그 즉시 스토리지에 저장된 값이 바뀌고, 화면에도 바로 반영 되기를 바랐다. 예를 들면 사용자가 A 사이트를 통해 로그인을 시도했다가 곧바로 로그아웃을 하고 나갔는데 바로 다시 B 사이트를 통해 로그인을 시도했다면, 이 사용자가 어디서 유입된 건지에 대한 데이터가 화면에 다르게 보여져야 한다. 리액트에서는 별다른 고민 없이 작성한 코드로 바로 원하는 결과가 나왔는데, 뷰에서는 그게 되지 않았다.
  • 이것저것 찾아보고 적용해봐도 보란 듯이 데이터는 따로 놀았고, 당장 너무 궁금하고 해결하고 싶었지만 금요일이니까 접어뒀었다. 그리고 월요일을 맞아 다시 꺼내보았다. 그런데 무심코 넣어 본 코드로 해결되었다!?
  • 컴포넌트가 마운트 될 때마다 실행되게 하려고 url 파라미터를 로컬스토리지에 저장하는 코드를 mount() 안에 넣어뒀었는데, 그 바로 아래에 해당 데이터가 있으면 그 데이터를 this.key에 할당한다. 그리고 template에서는 key를 보여준다.
<template>
	...
    <span>{{ key }}</span>
</template>

<script>
	...
    data() {
        key: '',
    },
    mount() {
        // url 파라미터를 로컬스토리지에 저장한 후
        if (window.localStorage.key) {
            this.key = window.localStorage.key
        }
    }
   	...
</script>
  • 그렇게 문제 하나를 해결한 후에 프로젝트 디렉터리에 있던 리액트 프로젝트를 통째로 뷰 파일들로 갈아치웠다. 커밋을 하려니 메시지에 적을 커밋 타입을 뭐라 해야 할지 모르겠어서 꽤 오래 고민을 했다. feat, fix, chore도 아니고, 그렇다고 modify, change도 아닌 것 같고. 결국 질문을 남겼고 동균님 말씀대로 refactor를 선택하기로 했다.
  • 프로젝트 매니저로 yarn을 쓰던 리액트에서 npm을 쓰는 뷰로 바꾸면서 리드미 내용도 수정하고 안심하며 PR을 날렸는데, copy 파일들이 함께 올라가 버렸다. 첫 리뷰를 받은 후에야 실수를 알게 되었다. 대체 왜 안심했지
  • 그리고 오늘은 뷰 공부를 조금 했다. 이제는 조금 익숙하게 쓰고 있던 vue cli 말고도 터미널에 vue ui 명령어를 입력하면 브라우저에서 ui를 통해 프로젝트를 관리할 수 있다는 것도 알게 되었다.
  • 상현님한테서 얻은 소스 덕분에 마우스 커서에서 물방울이 생긴다. 그리고 블로그 테마 색상을 변경했다. 물론 난 파란 계열을 선호하지만 기존 색상도 괜찮다고 생각했는데 신랄하게 공격을 받아서 흑흑 조금 마음이 아프다.

오늘 배운 것

  • 다양한 코드 스니펫을 제공하는 Emmet을 vue에서도 사용할 수 있다는 것도 처음 알았다. 리액트만 가능한 줄...
 

Emmet — the essential toolkit for web-developers

Emmet — the essential toolkit for web-developers Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: Demo | @@@ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expan

emmet.io

 

오늘 한 일

  • 아침 스크럼이 끝났을 때를 적당히 노리다가 케이님과의 허들 타임에서 어제까지 온갖 종류의 에러를 만난, 변명 아닌 변명을 구구절절하게 풀었다. PoC 프로젝트인 만큼 속도가 중요해서, 빠르게 작업할 수 있다면 리액트를 사용해도 괜찮다고 하셨다. 역시 PoC이기 때문에 리액트로 짜 놔도 코드 전체가 다 엎어질 수 있다고도 하셨다.
  • 그렇다면 나는 배운 게 도둑질이라 리액트로 속도를 내보기로 했다. 지금까지 손댔던 모든 부분을 미련 없이 통째로 밀어버리고 프로젝트를 다시 생성했다. 오늘 만든 페이지는 단 두 개, 로그인과 회원가입이었고 디자인은 원래 있는 것을 그대로 따다 썼다. 두 페이지를 라우팅 하는 과정에서는 드디어 react-router v6를 적용해 보았다. <Switch>가 <Routes>로 바뀌고 <Redirect>가 없어지는 등 다양한 변경사항이 있지만 공식문서가 워낙 잘 되어 있어 큰 어려움은 없었다. 애초에 <Route>가 둘밖에 없기도 하고
  • 단순한 유효성 검사 정도의 간단한 기능만 붙인 후 작업을 마쳤다. 상현님의 도움으로 내 생애 첫 PR을 날려보았다. reviewer에는 세 분 다 올려놓고 한 분 확인이 나자마자 기다렸다는 듯이 바로 머지했다는 게 함정ㅋㅋ..
  • PR도 해봤겠다, 그러고 나니 이제는 기능을 붙여야겠는데, 로그인이나 회원가입에 쓸 api가 있는지, 있다면 어떤 건지, 명세는 있는 건지를 전혀 모르겠다는 문제가 있었다. 지금 진행되는 이 프로젝트에서 내가 맡은 부분이 정확히 어디까지인가도, 처음에는 안다고 생각했는데 생각할수록 아리송했다. 그래서 잠깐의 낯가림 고민 끝에 채널에 헬프를 쳤다. 그리고 발렛 키를 든 승진님이라는 천사가 날아왔다..
  • 지난번 첫 싱크업 때의 미로 보드 한쪽에 도식을 그려가며 거의 40분 가량 설명을 해주셨다. authentication과 authorization부터 시작해서 OIDC, OAuth의 기능과 역할, 전체 흐름이 어떻게 되는지, 거기서 내가 작업할 파트가 무엇인지까지... 설명을 잘 못하시는 것 같다고 자꾸 말씀하셨지만, 이해가 너무 잘 되는 설명이었고, 만약 이해가 안됐다 하더라도 그건 제가 바보이기 때문인 거죠ㅠㅠ 그리고 바쁘실 텐데 시간 내 주셔서 감사하다고 말씀드리니 시니어들은 이런 설명을 하는 것도 시니어의 일이라고 생각한다고도 말씀하셨다. 나도 꼭 이런 멋있는 시니어가 되고 말겠다.

오늘 배운 것

  • 상현님한테 PR 날리는 법을 배우는 중에 git commit -am 명령어로 git add . 를 생략하고 한 번에 입력하는 방법이 있다는 것을 처음 알았다! 충격 나는 그것도 모르고 지금까지 일일이 git add . 입력 후에 git commit -m 을 했다. 다만 나는 새로 생성한 프로젝트에서 git add 를 한 번도 한 적이 없기 때문에 오늘 나의 경우에는 적용할 수 없었다.
 

Git commit할 때마다 add하지 않는 법, 기본 에디터 변경

그동안 버전 관리할 때 nano hello1.txt git add hello1.txt git commit -m "Message 3" 이렇게 일일이 귀찮게 입력하지 않아도 되는 법! git add . 현재 디렉터리 밑에 있는 모든 파일을 add git add 디렉토리..

hyunjungchoi.tistory.com

  • authentication(인증): 유저가 누구인지를 식별하는 과정, authorization(인가): 식별한 유저에게 적절한 권한을 부여하는 과정
 

What Is the Difference Between Authentication and Authorization?

While authentication and authorization are often used interchangeably, they are separate processes used to protect an organization from cyber-attacks. As

www.sailpoint.com

 

편의성을 높인 ID 인증 관리 - OIDC[OpenID Connect]가 주목 받는 이유

편의성을 높인 ID 인증 관리 - OIDC[OpenID Connect]가 주목 받는 이유

www.samsungsds.com

 

OAuth 개념 및 동작 방식 이해하기

1. OAuth란? image 웹 서핑을 하다 보면 Google과 Facebook 및 Twitter…

tecoble.techcourse.co.kr

오늘 한 일

  • 어제부터 연습 삼아 떨어진, 말하자면 '회사 홈페이지 클론코딩' 작업을 하고 있다. 작업 순서도 내 맘대로, 커밋도 내 맘대로, 폴더 구조도 내 맘대로, 아무리 연습이라 해도 처음부터 너무 엉망으로 시작한 게 아닌가 싶다. 착수하기 전에 뭔가 계획을 짜고 시작해야 했나? 매일 공식문서들만 들여다 보다가 오랜만에 코딩만 해도 되는 시간이 오니 반가워서 이성을 잃었었나.. 하지만 이미 돌이키긴 늦었지.
  • 나는 지금까지 프로젝트를 하면서 깃허브만 이용했었는데, 회사에서는 비트버킷에서 코드를 관리한다. 처음으로 깃허브가 아닌 다른 플랫폼을 접해봤고, 말로만 들었던 소스트리도 한정적인 부분에서나마 직접 사용하게 되었다.
  • 환경이 약간 달라져서 그런지 git add 해놓고 금방 후회하고, commit 해놓고 또 후회하는 일이 자꾸만 생겼다. 이것까지 추가해서 넣었어야 했는데...!!

오늘 배운 것

  • 그래서 준비한 git add, commit, push 되돌리는 방법 링크
 

[Git] git add 취소하기, git commit 취소하기, git push 취소하기 - Heee's Development Blog

Step by step goes a long way.

gmlwjd9405.github.io

  • 예전 글이긴 하지만 깃허브, 비트버킷, 깃랩은 여러 차이점이 있다고 한다.
 

깃허브 대 비트버킷 대 깃랩: 개발자의 마음을 사기 위한 치열한 경쟁

오늘날의 소프트웨어 개발은 너무 복잡해져서 만들어야 할 소프트웨어를 이해하고 제작하는 데 도움이 되는 소프트웨어를 만들어야 할 판이다. 코드가 코드를 낳고, 그 코드가 또 다른 코드를

www.itworld.co.kr

+ Recent posts