D'story

오늘 한 일

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

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

오늘 배운 것

• 토코톡 뷰 프로젝트의 package.json에 sass-loader 같은 게 왜 들어가 있는지 알게 되었다. <template>, <script>, <style>에 lang attribute를 주려면 해당 loader의 설치가 선행되어야 한다. vue loader 공식문서에 들어가서 어떤 loader가 필요한지 확인한 후 설치해주면 된다.

• 컴포넌트를 main.js에 import하면 전역으로 사용할 수 있다.

// main.js

import Component from '@/components/Component.vue';

Vue.component('Component', Component);

• 전역으로 사용할 컴포넌트가 너무 많아서 일일이 import 하기 귀찮고 불편하면, 아래 링크를 참고하여 automatic registration을 실행하는 것도 가능하다.

• PascalCase, camelCase, snake_case에 이어 kebab-case라는 것도 있다...!?