D'story

오늘 한 일

• 어제 올린 PR이 통과(?)되고 나서 부족한 부분을 보완하는 후속 작업을 했다. url 파라미터가 변경되는 대로 바로 반영되지 않는 건 로그인 페이지뿐만 아니라 다른 페이지도 마찬가지여서 어제와 마찬가지의 방식으로 수정했다.
• 프로젝트 디렉토리 내 components 폴더에 index.ts를 생성해서 아직은 많지 않은 컴포넌트들을 배럴링 했다.
• 아무튼 첫 번째 항목을 완료해서 마음 놓고 있었더니, 거기서 건든 것 외의 다른 url 파라미터가 바뀌면 그것 또한 전혀 반영되지 않는 문제가 제보되어 급히 수정했다.
• 로그아웃을 하면 로컬스토리지에 이메일과 같은 유저 정보가 포함된 데이터들이 그대로 남아 있게 되어서, 유저 정보가 담긴 데이터는 삭제하도록 했다.
• 이메일과 전화번호의 유효성을 검사하는 정규표현식을 거듭 수정하고, 회원가입할 때 뿐만 아니라 로그인을 할 때에도 적용하도록 했다.
• 그리고 오늘도 약간의 뷰 공부를 했다.
• 승진님이 프론트엔드 환경변수 설정과 관련해서 말씀하시는 걸 들으려고 시작한 허들에서, 끝은 약간 삼천포로 빠졌지만 1시간 20분간 너무 재밌고 유익한 시간을 보냈다. 정말 여쭤보고 싶었던, 근데 언제가 좋은 타이밍인지 모르겠던 '게임회사에서도 깃을 쓰나요' 질문에 대한 대답부터 시작해서 온갖 피가 되고 살이 되는 말씀을 해주셨다. 역시 짱짱시니어님

오늘 배운 것

• Vue Router에서 path 대신 name을 사용하면, 나중에 path가 변경되더라도 일일이 찾아다니며 다 바꿀 필요 없이, router 디렉토리의 index 파일에서의 path 한 번만 바꿔주면 된다.

this.$router.push('/about') // 변경 전
this.$router.push({name: 'about'}) // 변경 후

• name과 함께 params를 넘기고, router의 index 파일 안에서 해당 route에 props: true 옵션을 주면, 그 컴포넌트 안에서 params를 그대로 props로 받아서 쓸 수 있다.

오늘 한 일

• 지금 우리의 SSO 프로젝트에 작업 기한이 붙어버렸다. 어, 뭐 사실 저번 달에도 앞으로 한 달 정도 예상한다고 하셨었는데 생각해 보면 거기서 크게 달라진 건 없는 것 같긴 하다.
• 아무튼 그래서 어쨌든 나는 계속해서 리액트 작업분을 뷰로 다시 똑같이 구현 중에 있는데, 갑자기 머리가 잘 안 돌아가는 것 같고 머릿속이 좀 뿌예지는 것 같고 뭔가 생각한 대로 안 되고 있다. 리액트에서는 이렇게 이렇게 하니까 잘 됐는데, 왜 뷰는...! 그러니까 나는 뷰린이가 맞아
• 일단 여기서 첫 번째 문제. 뷰 공식문서를 다 안 봤다. 이것부터 처리(?)해야 한다. 리액트도 사실 공식문서를 보기 전에는 얼기설기 대충 돌아만 가는 코드를 짤 뿐이었다. 지금은 그때보다 더 능숙하게 잘 한다고는 말 못하지만, 코딩하면서 스스로 의심해야 할 포인트, 구글링에 적합한 검색 키워드, 에러가 나면 디버깅을 시작해야 하는 지점, 다른 사람들의 코드에서 눈여겨 보아야 하는 것들을 그래도 많이 알게 되었다. 보통 그런 것들은 공식문서에서 짚어주기 때문이다.

오늘 배운 것

• 공부 열심히 해야지. 역시 다른 차원에 있는 코드를 한 번 구경해 봐야 정신을 차리지.

오늘 한 일

• 아침 스크럼이 끝났을 때를 적당히 노리다가 케이님과의 허들 타임에서 어제까지 온갖 종류의 에러를 만난, 변명 아닌 변명을 구구절절하게 풀었다. 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(인가): 식별한 유저에게 적절한 권한을 부여하는 과정