D'story

지금까지 한 일

• 지난달 말이 SSO 릴리즈였기 때문에 지난달에는 기능을 개발하고 에러를 잡는 데 거의 모든 시간을 썼다. 애초에 로그인에 관련된 것들을 다루는 프로젝트였던 만큼 스코프가 아주 크지 않았기 때문에, 내가 괜히 이유 없이 혼자 걱정하고 안절부절 못한 것과는 별개로 업무적으로 부담이 크진 않았다.
• 프로젝트 성격상 시한부(...) 팀이었던 게 어느 정도 명확했던 만큼, 이후에 팀 배정은 어떻게 되며 이 프로젝트는 어떻게 되는지에 대해 얘기가 슬슬 나오기 시작했다.
• 그러다 릴리즈를 열흘 정도 앞둔 시기에, 케이트님의 퇴사로 프론트엔드가 빠지게 되는 스토어싱크 팀에 가면 적당할 것 같다는 결론이 나왔다. 그리고 스토어싱크는 8월 말에 릴리즈 예정... 릴리즈 전문?
• 그렇게 해서 SSO 릴리즈 주간에 살짝살짝 인수인계를 받으며 스토어싱크 쪽 업무에 발을 담그게 되었고, 이번주부터는 본격적으로 팀을 옮겨서 일을 시작하는 중이다.
• 개인적으로 뷰티파이를 좋아하지 않아서 SSO가 Vue 3인 게 참 마음에 들었었는데, 스토어싱크로 와 보니 여긴 Vue 2라서 뷰티파이를 쓰고 있다. 간만에 보는 Vue 2+뷰티파이 조합의 코드라 눈에 잘 익지 않았는데, 엊그제는 세훈님과 6시간짜리 페어 프로그래밍 덕에 프로젝트 디렉토리 구조를 좀 익힐 수 있었다. 어제는 세훈님이 주신 태스크를 혼자서 삽질해 보면서 연습하는 시간을 가졌고, 오늘 드디어 pr을 날릴 수 있었다. 근데 여기는 리뷰를 영어로 달아주시네요 엉엉 세훈님 말씀처럼 릴리즈 이후에라도 조만간 전체적으로 리팩토링을 할 수밖에 없는 상황이라 일단은 동작하는 코드를 만드는 데 우선순위를 뒀다.
• 지금까지 코드 읽는 것만으로도 삐걱대느라 시간이 걸렸지만 앞으로는 조금 더 속도가 붙지 않을까, 희망회로를 돌려본다.

오늘 한 일

• 요 근래 나에게 할당되었던 지라 카드는, 나 혼자서만 처리할 수 있는 게 아닌 걸 제외하고는 오늘까지 어느 정도 쳐낼 수 있었다.
• 그런데 기존 서비스에서는 회원가입할 때 비밀번호가 대소문자, 숫자, 특수문자 상관 없이 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) 공격에 취약한 방법이다.

• 이럴 땐 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>

• 자세한 내용은 아래 링크 참고

지금까지

• 개막이라도 하듯 6월의 시작과 함께 많은 일들이 있었다. 내가(또는 인간이) 참 많이 나약하다는 것을 깨달았고, 더 이상 이대로는 안되겠다고 생각했고, 병원의 힘을 빌리기로 했다. 그래서 지금까지도 병원 문턱이 닳도록 드나드는 중이다. 비록 한편으로는 약의 부작용으로 또 다른 고생을 하기도 했지만, 어찌 됐든 결과적으로 그럭저럭 상황은 이전보다는 많이 나아진 듯 보인다.
• 글을 쓸 마음의 여유가 없었는데 또 그런 것치고는 업무 시간에 알게 된, '이거 나중에 블로그에 올려야지' 하고 저장해 둔 링크들이 많다. 시간 날 때마다 조금씩 정리해봐야 할 것 같아서 오늘을 그 시작으로 할까 한다.
• 지금껏 거의 3주간 무슨 일을 했느냐 하면, ...기억이 안 난다. 이래서 기록이 중요한 건데 말이다. 계속 뭔가 해 왔고, 하면서도 '와 세상에! 나라는 바보가 이런 멍청한 실수를 한다' 하면서 자책하듯이 웃었던 적도 꽤 많았는데 진짜 하나도 기억이 안 난다. 되짚어 가면서 소급해서 적기보다는 앞으로 게을리하지 않는 게 나을 것 같다는 건 나만의 생각(합리화).

그 언젠가 배운 것

• 언젠가는 SSO에서 번역을 담당(?)하던 json 파일의 역할을 지완님이 i18n이라는 플러그인에 넘기셨었다. json 파일은 아무리 사용자가 설정한 언어에 따라서 다른 텍스트를 보여준다고 하더라도 그 과정 자체를 직접 만들어야 하고, 날것 그대로의 느낌이 있을 수밖에 없다. 하지만 i18n을 사용하면 그런 수고로움을 덜 수 있고, 상황에 따라 달라지는 변수를 넣어 텍스트를 바꿀 수도 있다.
• 그런데 이때 텍스트에 특수문자를 넣고 싶다면 이것이 말 그대로 literally string이라는 것을 알려줘야 한다(literal interpolation). 예를 들면 이메일 주소에 들어가는 @라든지. 이걸 literal 처리하지 않고 사용해 보니 콘솔에 에러가 찍히면서 화면 자체가 출력되지 않는 일이 발생했다.

• 이외에도 여러 변수를 한 번에 같이 출력하고 싶을 때에는 해당 부분을 {0}, {1} 하는 식으로 표현하는 list interpolation도 많이 사용하게 됐다.