2023년 5월 6일 결산과 개발이야기

[LuticaCANARD]

이번 주에 개발한 것과 새로운 일

서로님

개발한 것

• 로그인 폼

새로운 일

• 로그인 CSS

민규님

개발한 것

• 회원가입 폼

새로운 일

• Recoil 문서화

이건 어제 저녁먹다가 생각난건데, Recoil은 민규님이 써보신 것으로 알고있어서, 한번 민규님이 여기 이슈에 사용법이랑 사용이유, 그리고 사용 방법에 대해서 정리해보셨으면 좋겠어요!

• 회원가입 비밀번호 로직

저

개발한 것

• 회원가입 CSS 작업, Page routing 재설정

새로운 일

• Kafka 문서화(.github repo), i18n 문서화(여기 이슈), AWS 아키텍쳐 설계

하고싶으신거 있으면 말씀주세요!

있었던 이슈

• SWC의 불안정성 버그

SWC의 불안정성인지 뭔지 모를 이유로 빌드가 되지 않아서, 비활성화했어요. 만약 로컬에서 되시면 부활시키셔도 되는데, 커밋하실때는 꺼주세요! (빌드툴이니끼요)

진행된 구상

Kafka의 Pub-Sub모델 활용 방안

• Topic을 하나의 서버라고 두고, 메세지에는 채널과 메세지, 그리고 보낸 사람을 명시한 다음, 수신서버는 메세지를 받으면 채널에 있는 사람에게 그 메세지를 보내는 것이죠. 그러면, 수평확장에도 확장성이 늘어날 거에요.
• 문제라면, 오버헤드가 좀 있을것 같아요. 우리 프로젝트 규모에서 굳이 그정도의 파이프라인을 설비해야 할까요? 일단은 고려대상으로 올려두고, 채팅 서버의 설계를 진행하면 될 것 같아요!

잡담

• 제가 일을 하나 더 맡게됬어요! 자세한건 아직은 말씀 못 드리긴 하는데, 꽤 재밌는 일이 될 것 같아요 ㅋㅋ

[LuticaCANARD]

I18N, i18next 사용법

i18n?

• 소프트웨어는 하드웨어보다도, 문화에 가까운 영역이라서, 언어와 문화의 로컬화가 이루어져번역쌍이야 해요!
• 요컨데, 우리가 중국어나 영어로 문서보는거랑 한글로 문서보는것중에서는 한글로 문서 보는것이 편하듯이, 소프트웨어는 특히 언어가 유저에 맞아야해요!
• 그러한 방법론이 i18n,즉 현지화에요! 한국어를 쓰는 사람이 로그인 창을 보면, "로그인"으로 뜨고, 영어를 쓰는사람이 로그인 창을 보면 "login"으로 뜨게 만드는 것이죠!

그래서 어떻게 쓰는데? : 이론

• 자세한건 찾아봐도 좋지만, 여기서는 활용과 구성에 대해서 간단히 서술할게요!
• i18n 파일을 만들고, index.js를 만들어 놨어요. i18n의 초기설정은 거기서 진행 될 것이고, 언어 리소스 파일들은 거기에 있을거랍니다.
• 초기언어 설정울 보면, Navigator가 있어요. 얘가 브라우저의 설정을 가져오는 역할을 해요!
• 그러면, 그 안에 있는 디렉토리-파일들은 키:번역된 텍스트 쌍이에요! 번역은 저 파일을 번역가에게 주면 되겠죠?
• 이게 App.tsx에서 불러와지면서 자연스럽게 설정되고, 불러올 수 있어요!

그래서 어떻게.... : 실전

import { useTranslation } from 'react-i18next';
...

  const { t, i18n } = useTranslation(); // 이름 꼭 맞춰주기!
  ...
<p1>{t(파일:키}</p1>

로 정리했어요!! 파일에 저장된 단어를 키로 가져오면 된답니다!

• vscode 에 아마 i18n 확장이 있을테니 잘 찾아보시면 좋을거에요!

[LuticaCANARD]

5월 5일 Scss 변경사항 정리

• From.... Apply scss to login.tsx #11
• 1c9a9af

뭐가 바뀌었나요?

• Root부분을 재 설정해줬어요. 이걸 먼저 해줘야 다른 부분에서도 문제가 안 생깁니다!
• register부분을 만들었어요!

어떻게 바뀐건가요?

Root

• Root부분에서 변경점은 이래요

 height:100vh;
 width: 100vw; // 꽉채워주기. visual width

• 여기서 height는 그 영역의 높이, width는 그 길이인데, vw와 vh로 채워줬어요!
• vw는 보이는 길이 (Viewport Width) vh는 보이는 높이 (Viewport height)에요! 100vw면 보이는 전체 길이를 삼는 것이죠!
• %와 의 차이는, 부모 자식의 고려 여부라고 생각해볼 수 있어요! %는 부모와 자식간의 상관 관계고, vw/vh는 그냥 말 그대로 보이는 크기이기 때문에, 전혀 다른 결과가 나와요!
• 나중에는, viewport같은 개념이 나오니까 한번 찾아보는 것도 좋아요!(쓸 것 같진 않지만)

더 깊게는... https://webclub.tistory.com/356

Register

• 일단, 모바일과 데스크탑의 경계를 만들었어요!

$mobiile: 350px; // scss기능이에요. 맨앞에 $붙히면 변수 쓸 수 있어요!

• scss는 변수를 저장하는 기능이 있어서, 이걸 재활용할 수 있어요. (맨앞에 $붙히면 된답니다)
• css도 변수를 프로퍼티로 저장 할 수 있지만, 자기 자식들만 사용 가능하다는 특징이 있어요. scss변수는 전처리되어서 css로 변환하는 것이기 때문에, 독립적으로 사용가능하다는 차이점이 있는거에요!
• 그래서....

@media (max-width:$mobiile) {
    height:auto;
  }
  @media (min-width:calc($mobiile + 1px)) {
    height:min(95vw,$mobiile); // 화면이 크면... 정사각형으로!
  }

• @media
  는 media query라는 기능이에요. 특정 조건을 만족하면 이 css를 실행시키는 Css의 기능이에요!
• max-width는 최대 X px까지는 이걸 붙힌다... 이런 느낌이고, min은 X px부터는 이걸 붙힌다는 느낌이라서, 모바일 대응에도 상당히 유용한 도구에요!
• calc(a - + * / b) 는, 단위가 달라도 계산 가능하게 해주는 CSS명령어에요!

바뀐건 아니지만 볼만한거

button:hover {

• CSS는 특별히, : 로 시작하는 연산자들이 있어요. 이건 특별한 조건을 만족하면 css가 추가되는 건데, 저 경우는 버튼 위에 마우스가 호버되는 경우 발동되는 거에요!

button:focus,
button:focus-visible {

• ','은 둘 다 같은 css를, focus는 말 그대로 탭을 통해서도 누를 준비가 되어 강조된 경우에 사용되요!

prefers-color-scheme: light

• 이건 맨 처음에 브라우저가 다크모드쓰는지 화이트모드 쓰는지만 검증하고 바뀌지 않는 설정이에요!

From other project...

• From https://github.com/LuticaCANARD/LuticaCANARD.github.io/blob/main/src/app.scss

Animation

• 대충 애니메이션이라면, 몇 개의 상태를 정해놓고 그 움직임을 묘사하는 것을 의미해요.
• 중간을 채워넣는 건, 손으로 그려서 채워넣는 경우(지브리 애니메이션 ..etc)도 있지만, 저희 같은 개발자들은 사진 같은 방법으로 진행해요!

- 이렇게 중간 키프레임들을 채워넣으면...

• 이렇게 출력 되는 식으로 나와요!

원리...? : https://docs.unity3d.com/kr/2017.4/Manual/TimelineChangingInterpolation.html
더 보기... https://docs.unity3d.com/kr/2021.3/Manual/animeditor-AnimationCurves.html

Animation in web

• 웹에서는, 저번에 문건으로도 보여드렸지만 이번에는 저 사진과 대응해볼게요!

(사실, Js/Ts써서 시간에 맞춰도 되고, Jquery같은 방법도 있지만, 이건 근본/원천기술 같은 느낌으로 알려드리는거라 CSS로 해보는거에요!)

.stack:hover{ // 호버가 되면....
  transform: scale(1.5);
  animation-name: stack_onhover; // 발동할 keygream 이름
  animation-duration: 0.5s; // 발동할 시간
} //일단 이런 클래스를 넣죠.

@keyframes stack_onhover
{
  from{
    transform: scale(1.0); // 크기가 0인 상태에서~
  }
  to{
    transform: scale(1.5); // 크기가 커지는 상태로!
  } 
} // 

.stack:not(:hover){
  transform: scale(1);
  animation-name: stack_offhover; // 얘를 한번 생각해보세요!
  animation-duration: 0.5s;
}
// 일반적인 클래스에 넣으면, 보통은 클래스가 등장할 때 애니메이션이 발동되요! 

• 이러면,
  
• 이런 애니메이션이 만들어져요!

개인적인 생각?

• 로그인을 하면... 성공한다면 포켓몬을 잡듯 작아지는 애니메이션이면 좋지 않을까요? 로그인 실패라면 경고창 띄우듯 해도 좋고... 제 생각이에요!

[LuticaCANARD]

https://m.thisisgame.com/webzine/nboard/213/?n=56672