D'story

오늘 한 일

• 어제, 로그인 시도하면 자동으로 새로운 페이지로 리다이렉트 되어야 하는데 그게 안 되고 끝났었다.
• 그걸 해결하시는 과정에서 승진님이 전체적인 플로우를 바꾸셨고, 오늘 출근했을 때는 이미 내 코드에서도 그 부분을 고쳐주신 상태였기 때문에 나는 사실상 플로우 변화에 큰 영향을 받지 않은 거나 다름없었다. 다시 그려주신 다이어그램과 수정해주신 코드를 하나씩 비교하면서 실행해보니 이해하는 데 큰 어려움은 없었다.
• 변경된 플로우에 맞춰 그 외 다른 코드들을 조금씩 변경한 후에는 다시 로컬에서 뷰로 동일한 내용의 작업을 진행했다. 언제 리액트랑 바꿔치기 해야 될지 알 수 없으니 미리미리...!

오늘 배운 것

• 서버가 응답 헤더에 쿠키를 넣어서 보내주려면, 앞단에서는 그 직전 요청에 withCredentials 옵션을 보내줘야 한다. axios를 쓰는 경우로 예를 들면 이렇다. 헤더에 따로 넣을 필요 없이 config 부분에 그냥 바로 넣어주면 된다.

axios.post('http://server.url', {body_key: body_value}, {withCredentials: true});

• 아래 링크에 따르면 서버쪽에서도 쿠키를 넣을 때 헤더에 Access-Control-Allow-Credentials 옵션을 함께 넣어줘야 한단다. 그러면 헤더에 쿠키가 실려온다. 이후 이 쿠키는 같은 서버로 요청을 보낼 때마다 자동으로 헤더에 들어가게 된다. 정말 놀라운 사실은, 나는 이 쿠키를 서버에서 생성해서 넘길 수 있다는 것 자체를 처음 알았다. 항상 앞단에서 자체적으로 생성하곤 했었는데... 하나만 알고 둘은 몰랐구나ㅠㅠ

오늘 한 일

• 어제는 아팠다. 점심까지는 멀쩡했는데, 점심을 먹은 후에 속이 뒤집어지고 5시쯤 급격히 컨디션이 안 좋아지면서 거의 기절.
• 오늘은 pr 두 개 날렸다! pr 개수가 중요한 건 아니지만...
• 외부 클라이언트에서 우리의 oauth 어플리케이션으로 접근하면, 첫 페이지에서는 인증된 사용자인지 확인하고 인증되지 않은 경우 로그인 페이지로 리다이렉트 시킨다.
• 로그인 페이지에서 이메일, 비밀번호 넣고 로그인 버튼을 누르면 api 콜을 하는데, 자꾸만 cors 에러가 났다. 사실 프로젝트 시작하자마자 사용자 인증 여부 확인하는 과정에서부터 에러는 났었지만 그때는 크롬 익스텐션 중 cors 관련된 걸로 대강 해결했었다. 그러고 나서 로그인 페이지로 넘어와서 로그인 하는 api 콜을 하면, cors 익스텐션이 작동 중인데도 에러가 다시 났다.
• 익스텐션을 끄고 나서 승진님이 cors 관련된 요청 헤더를 넣어주시면서 첫 번째 에러는 다시 해결이 됐다. 그래도 여전히 로그인 api에서는 에러가 났다.
• 첫 번째 에러랑 두 번째 에러가 메시지 내용이 약간 달랐다. 첫 번째는 'Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.'였고, 두 번째는 'Response to preflight request doesn't pass access control check: It does not have HTTP ok status.'였다. 첫 번째는 해결했으니 됐고, 두 번째는 검색해봐도 이렇다 할 만한 해결책이 보이지 않았다ㅠㅠ
• 그러던 중 승진님이 내가 보내는 요청은 options method에서도 404 에러가 나면서 튕기는데, 인터넷에서는 사람들이 options method에 204로 응답하는 것 같더라 하시면서 204로 바꿔주셨고, 해결되었다. 원인이 알고 싶다
• 로그인을 하고 나면 반환되는 액세스 토큰을 다시, 처음의 그 인증된 사용자인지 확인하는 api 요청 헤더에 실어 보낸다. 인증된 사용자임이 확인되면 웹페이지가 다른 url로 리다이렉트 되어야 하는데...... 이게 잘 안되는 상태에서 일단 오늘은 끝.
• 퇴근 후: 오늘은 전화영어 두 번째 날이었다. 여전히 한 마디 뱉는 데 지나치게 신중해지지만 그래도 첫날보다는 말 많이 했다는 데 의의를 두겠다.

오늘 배운 것

• 로그인 api에서 cors 에러가 자꾸 날 때, 어차피 cors는 브라우저에서 띄우는 에러이니 터미널에서 api 콜을 해봐야겠다 싶어서 curl 명령어를 사용해봤다. 예전에 한 번 사용해본 적이 있어서 노션에 대충 적어놓은 걸 보고 따라해봤는데 아무래도 자료를 찾아봐야 할 것 같아서 찾아본 링크.

• 동균님이 알려주신 httpie. 맥 터미널에서 homebrew로 설치하고 http 명령어로 사용할 수 있다. curl에 비해 출력되는 모양새도 예쁘고 명령어도 훨씬 직관적인 느낌이다.

오늘 한 일

• 어제는 리액트로 로그인, 회원가입 페이지를 만들었고, 아직 사용할 api가 준비되지 않은 틈을 타 오늘은 어제와 똑같은 페이지를 뷰로 구현하는 작업을 시작했다. 역시 손에 익은 리액트만큼은 속도가 나지 않았다. 그래도 하루종일 붙잡고 있으니 비밀번호 입력값에 대한 유효성 검사만 제외하면 웬만큼은 비슷해진 것 같다.
• 비슷하게 생긴 두 페이지를 라우팅하려니 Vue Router가 필요했다. 한 번도 뷰로는 라우팅을 해본 적이 없어서 공식문서를 찾아봤더니, 놀랍게도 cli로 vue add router 명령어만 입력해주면 router 디렉토리가 자동으로 생성되고, app.vue 파일도 라우터가 적용된 가장 기본적인 템플릿으로 덮어씌워진다. 명령어 하나로 다 해결되는 건 참 좋은데, app.vue 파일 덮어쓰기 때문에라도 앞으로는 라우터가 필요하면 프로젝트를 생성하자마자 바로 적용하는 것이 훨씬 나을 듯하다. 페이지 이동을 하려면 this.$router.push('이동하려는 url path') 코드를 사용하면 된다.
• 분명 튜토리얼 때 별 어려움 없이 사용했던 것으로 기억하는데도, eventBus를 다시 구현해보려니 순서가 조금 헷갈려서 내 나름대로 낑낑대며 완성해보고, 상현님께 컨펌을 받았다. eventBus에 이벤트를 넣고, 넣은 것을 감지해서 처리하는 절차 자체가 틀리지는 않았는데, 어차피 Vuex를 사용할 거라면 그때 생성되는 store가 eventBus와 같은 역할을 한다는 얘기를 들었다. 어? 그러면 Vuex를 지금 당장 적용해보겠다! 방금 기본 프로젝트에 Vue Router를 추가로 설치했듯이, Vuex도 그렇게 하면 되겠거니 하고 공식문서를 다시 찾아보려던 찰나, 상현님의 한 마디: "vue create면 알아서 다 되는데?" ...?!
• 처음부터 cli로 시작했으니 당연히 vue create로 프로젝트를 생성해왔던 건데, 나는 터미널에 vue create '프로젝트명'을 입력하고 나면 나오는 선택지들에서 아무 고민 없이 'Default'를 선택했었다. 거기서 'Default' 대신 'Manually select features'를 선택한다면, TypeScript, Router, Vuex, Linter 등을 자유롭게 조합해서 프로젝트를 생성할 수가 있었던 것이었다...!! 이왕 조합해서 시도해 보는 김에 TypeScript와 ESLint + Airbnb config까지 끼얹어 보았다. 분명 작업 속도는 훨씬 더 느려지겠지만ㅋㅋ

오늘 배운 것

• Vue Router는 명령어 딱 하나만으로도 라우터가 생성되고 공식문서가 워낙 깔끔하게 잘 되어 있어서 원하는 기능을 갖다 붙이기가 어렵지 않다.

• vue create의 마법과도 같은 기능은 공식문서에 이미 있었다.. 공식문서를 잘 읽자. 다시 한 번 다짐

• Vue Router를 vue add router로 따로 붙이든, vue create로 처음부터 붙이고 시작하든, 터미널에는 history mode를 적용할 거냐는 질문이 나온다. 적용 안 하면 hash mode가 되어 url에 /#/이 추가된다. 이로써 누군가의 오랜 고민 해결! 아싸 맛있는 거 먹어야지

오늘 한 일

• 아침 스크럼이 끝났을 때를 적당히 노리다가 케이님과의 허들 타임에서 어제까지 온갖 종류의 에러를 만난, 변명 아닌 변명을 구구절절하게 풀었다. 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 를 한 번도 한 적이 없기 때문에 오늘 나의 경우에는 적용할 수 없었다.

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

오늘 한 일

• 어제 정해진 대로 기존 서비스에서 로그인 파트만 분리하(기를 시도해보)려고 프로젝트를 신규로 하나 생성해서 거기에 컴포넌트 단위부터 옮겨 보려고 했다. 그런데, 뭐 당연하지만 기존 프로젝트를 구성하는 다양한 파일들은 이미  서로서로 얽혀서 영향을 주고받고 있었다. 로그인과 관련된 작은 컴포넌트부터 옮긴 후, 거기에 영향을 미치는 다른 파일들을 가져오는 식으로 시도해 봤는데 그렇게 하면 결국 건드려야 하는 파일의 범위가 너무 넓어지고 말았다. 더욱이 기존 프로젝트의 전체 구성을 제대로 파악하지 못하는 나로서는 이게 맞는 건지 더 모르겠다ㅠㅠ... 고로, 오늘은 해낸 게 없다.

오늘 배운 것

• 다만 상현님 덕분에 nullish coalescing operator를 알게 되었다. ??: 덕분에 살았네 예를 들어, a ?? b 라고 쓰면 a가 null 또는 undefined일 경우 b이고, 그렇지 않은 경우에는 a이다. 한마디로 연산자 기준 왼쪽 값이 null 또는 undefined인 경우 오른쪽 값을, 아니면 왼쪽 값을 반환한다. ||는 truthy한 값을, ??는 defined한 값을 반환하기 때문에, 예를 들어 a에 할당한 값 자체가 0일 경우 ||를 사용하면 0을 falsy하게 취급하므로 원하는 결과를 얻지 못할 수도 있다.

오늘 한 일

• 오늘은 유난히 구글 캘린더에 잡힌 일정이 많은 날이었다.
• 10시 반에는 민기님이 프로덕트와 관련해 전체적인 프로세스를 알려주시며 큰 그림을 잡아주셨다. 11시에는 오박사님을 비롯해 태초마을에서 함께할 일행분들을 만났고, 다 같이 아테네의 지도를 그려보았다. 물론 나는 구경 헤헤 12시 반에는 에스더님이 TVA팀에 대한 설명을 해주셨다. 3시에는 PT Mix, 4시에는 TVA 스크럼, 4시 반에는 세일즈채널 데모를 참관했다.
• 어제 Kei님이 말씀해 주신 것처럼 태초마을에서는 현재의 로그인 프로세스를 별도의 어플리케이션으로 분리하는 작업을 한다. PoC로 간다는 건, 최종적으로는 엎어질 가능성도 있다는 뜻일까?
• 일단 로그인 파트의 프론트엔드 부분부터 떼어내야 하기 때문에 Docker로 구동을 시켜놓고 코드를 살펴보기 시작했다. 그런데 생각해보니 나 아직 Vue를 겨우 다룰 줄만 알지, 라우팅도 Vuex 사용도 할 줄 모른다. 오.. 할 거 너무 많아.. 이제부터 일학습병행이다

오늘 한 일

• 오늘은 지난 주에 이어 Go를 더 봤다.
• 별 문제 없이 잘 흘러가고 있다 싶을 때, 슬라이스를 만났고.. 처음에는 이해가 좀 된다 싶었다. 이 링크를 만나기 전까지는.

• (이건 나 혼자만 이해할 수 있는 끄적임..ㅠㅠ) 슬라이스의 length와 capacity가 어떻게 다른지, 무슨 차이가 있는지도 알겠고, append 할 때 append 하려는 요소의 개수가 슬라이스의 capacity를 초과하는 경우 capacity가 기존의 2배로 늘어난다는 것도 알겠다. 그런데 length = 0, capacity = 0 인 슬라이스에 0, 1, 2, 3, 4를 append 하면 왜 갑자기 length = 5, capacity = 6이 되냐고.. 0, 1, 2, 3을 append 할 때까지는 length와 capacity가 같은데. 마침 허들을 걸어주신 Kei님께 여쭤봤더니, 메모리 단편화를 지양하고 메모리 최적화를 달성하기 위한 Go만의 방법이 작용한 결과일 것이라는 답변을 받았다. 그리고 지금 당장 깊게 파고들어야 하는 문제도 아닌 것. 그래서 여기다 keep 하고 넘어간다 ㅠ.ㅠ 날코딩이긴 한데 미래의 나에게 맡긴다 흑흑.. 애초에 궁금했던 건 아래 코드 중 2번 케이스에 해당한다(capacity가 1 -> 2 -> 3 -> 4 -> 6 -> 8 순서로 늘어난다). 1번은 2번처럼 날코딩이 아닌 방식으로 해보려고 배열의 배열을 생성해서 시작했더니 capacity가 1 -> 2 -> 4 -> 8 순서로 늘어난다. 미래의 내가 다시 돌아왔을 때 '얘는 뭐 이런 쉬운 걸 고민해ㅋㅋ'라고 했으면 좋겠다. 제발

// https://go-tour-ko.appspot.com/moretypes/15
// https://go.dev/play/p/OKtCFskbp2t

package main

import "fmt"

func main() {

	fmt.Println("##### 1번 케이스 #####")

	var array [8][]int
	for i := 0; i < 8; i++ {
		for j := 0; j <= i; j++ {
			array[i] = append(array[i], j)
		}
		printSlice(array[i])
	}

	/*
	len=1 cap=1 [0]
	len=2 cap=2 [0 1]
	len=3 cap=4 [0 1 2]
	len=4 cap=4 [0 1 2 3]
	len=5 cap=8 [0 1 2 3 4]
	len=6 cap=8 [0 1 2 3 4 5]
	len=7 cap=8 [0 1 2 3 4 5 6]
	len=8 cap=8 [0 1 2 3 4 5 6 7]
	*/

	fmt.Println("##### 2번 케이스 #####")
	var a, b, c, d, e, f, g, h []int

	a = append(a, 0)
	printSlice(a)
	
	b = append(b, 0, 1)
	printSlice(b)

	c = append(c, 0, 1, 2)
	printSlice(c)

	d = append(d, 0, 1, 2, 3)
	printSlice(d)

	e = append(e, 0, 1, 2, 3, 4)
	printSlice(e)

	f = append(f, 0, 1, 2, 3, 4, 5)
	printSlice(f)

	g = append(g, 0, 1, 2, 3, 4, 5, 6)
	printSlice(g)

	h = append(h, 0, 1, 2, 3, 4, 5, 6, 7)
	printSlice(h)

	/*
	len=1 cap=1 [0]
	len=2 cap=2 [0 1]
	len=3 cap=3 [0 1 2]
	len=4 cap=4 [0 1 2 3]
	len=5 cap=6 [0 1 2 3 4]
	len=6 cap=6 [0 1 2 3 4 5]
	len=7 cap=8 [0 1 2 3 4 5 6]
	len=8 cap=8 [0 1 2 3 4 5 6 7]
	*/
}

func printSlice(s []int) {
	fmt.Printf("len=%d cap=%d %v\n", len(s), cap(s), s)
}

• Kei님의 제안으로 태초마을 주민이 되었다. 나도 이제 포켓몬 트레이너...!? 이것과 관련해서 내일 미팅부터 시작해서 뭔가 펼쳐질 것 같은데 재밌을 것 같아 기대도 되고, 내가 뭐라도 할 수 있을까 싶어 걱정도 된다.
• 전화영어 신청했다! 영어 공부도 할 거야, 이제.. 나만 영어 못할 수 없어ㅠㅠ

오늘 배운 것

• 궁금한 게 있으면 바로 질문하고, 이걸 지금 계속 고민할 필요가 있는 것인지 짚고 넘어가도록 하자.

오늘 한 일

• 오늘 아침은 어제 업무 설명을 들은 팀의 스크럼에 참여했다. 줌이나 구글밋이 아닌 미로에서 스크럼 보드를 보면서 바로 진행하는 방식이었는데, 접속부터가 잘 안 돼서 애를 먹었다. 결국 크롬을 버리고 사파리로 갈아탔더니 극적으로 2분 늦게 들어갈 수 있었다.
• 미로는 스크럼 보드도 보고 때로는 작성도 하면서 미팅도 하고, 이걸 한 번에 다 할 수 있다는 장점이 있었지만 한 가지 불편한 건 줌에서처럼 말하고 있는 사람의 카메라에 포커스 되는 기능이 없었다는 점이었다. 아직 어느 분이 어떤 목소리를 가졌는지 파악하지 못한 나로서는 입을 움직이고 있는 주인공을 찾아다니느라 스크럼 내내 혼자 바빴다. 뉴비의 고충
• 어제 뷰 공부하다가 남겨둔 한 챕터를 마저 봤다. 부모 컴포넌트에서 자식 컴포넌트로는 데이터를 props로 넘기고, 자식이 부모의 데이터를 변경하려면 emit을 사용하면 된다. 하지만 만약 자식이 부모를 거치지 않고 더욱 상위의 조상 컴포넌트가 가진 데이터를 건드리려고 한다면? 자식에게서 발생한 이벤트를 eventBus에 태우고, 조상 컴포넌트가 eventBus로부터 해당 이벤트를 감지하여 꺼내오면 된다.
• 그리고 좀 더 심화 자료를 찾아볼까 생각하던 찰나, 세훈님이 앞으로 공부하면 좋을 키워드들을 던져주셨다. 어차피 한 번쯤 만져봐야 하는 것들이라면 이번 기회에 조금씩이라도 봐 놓는 게 좋을 것 같아서 패기 넘치게 바로 Go로 넘어갔다. 패기가 과해
• Go를 설치한 후 구글링해 가면서 환경변수도 적당히 설정했다. 연습용 프로젝트 파일을 생성한 후 vscode 터미널에서 go run main.go 명령어로 실행하려니 자꾸 GOPATH, 또는 GOPATH와 GOROOT 관련한 에러가 떴다. 그런데 특이한 건 맥 터미널에서 같은 경로로 들어가 똑같은 명령어를 입력하면 내가 원하는 결과가 문제없이 출력되었다. vscode extension도 건드려보고, 환경변수도 다시 이리저리 바꿔보고, .mod 파일을 만들었다 없앴다 디렉토리를 바꿔봤다가 별 짓을 다 해봐도 계속 똑같았다. 맥 터미널에서는 돌아가는데 vscode 터미널에서는 돌아가지 않았다.
• 하다하다 지쳐서 처음부터 다시 해보기로 했다. 프로젝트 디렉토리와 ~/go 디렉토리를 전부 삭제해버렸다. 상현님이 노마드 코더 강의 영상이 잘 되어 있다고 해서 원래는 영상 내용을 볼 생각으로 들어갔다가 거기 달린 코멘트 하나를 보고 무심코 따라했는데 성공해버렸다. vscode에서 설치하라는 extension들을 안 깔아서 그랬던 건지 아직 정확히는 원인을 파악하지 못했다.
• Go를 심폐소생하기 전에, 시니어 분들이 진행하시는 테크 세션에 참석했다가 또 다른, 셀러들이 쉽고 직관적으로 서비스를 이용할 수 있도록 전체적인 프로세스를 관리하는 팀의 업무 설명을 들었고, 그러다 보니 나의 죽어가던 Go를 겨우 살려냈을 때는 이미 오후 6시였다..
• 남은 한 시간 동안 공식문서를 들여다 봤는데, 자바스크립트랑은 문법이 비슷하면서도 다른 면이 있어서 오히려 신기하고 재밌었다.

오늘 배운 것

• 아래 링크 코멘트의 2번까지는 이미 잘 되었으므로 나는 3번부터 순서대로 시도했다. 2번에서 go env를 입력하면 나오는 GOPATH는 '/Users/[username]/go', GOROOT는 '/usr/local/go'였다.