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

서로님

개발한 것

• 로그인 폼

새로운 일

• 로그인 CSS

민규님

개발한 것

• 회원가입 폼

새로운 일

• Recoil 문서화

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

• 회원가입 비밀번호 로직

저

개발한 것

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

새로운 일

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

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

있었던 이슈

• SWC의 불안정성 버그

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

진행된 구상

Kafka의 Pub-Sub모델 활용 방안

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

잡담

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

• 상태를 봐서, 더 이상 login page에 변동이 없을것으로 판단되는 경우 아래와 같이 진행함

• 회의가 왠지 토요일에 진행될 것 같긴한데 진행상황 보고 추진여부 검토

Task1

• 디렉토리 정리함
• 비 공용 component의 경우, page별로 배치하고, 공용 component의 경우 별도파일로 분리배치함.
• atom/molecule 구조역시 이때 재검토함
• 판단기준은 그때 판단하여도 좋음.
• 이건 로그인 페이지 풀리퀘스트 받고 처리!

Task2

• 기획서 폴더만 준비함
• 다음 대면스터디때 협의후 사용.

Task3

• 회원기능 구현요청

이건 설계부터 문서화할것. 살짝 복잡해질것으로 보임

• MVC 패턴

모델, 뷰, 컨트롤러 구조는 웹에서 맨날 쓰이니 참고해두세요!

https://blog.naver.com/jhc9639/220967034588

• css flex

모바일 대응 생각하면 아주 유용한 css!
https://d2.naver.com/helloworld/8540176

• css animation

웹에서 애니메이션 만들기는 이게 많아요!
https://poiemaweb.com/css3-animation
유니티도 이거랑 유사한 개념의 애니메이션 스킬이 쓰이니까 참고해두세요!

jquery 도 있어요. 근데 그건 안쓰니까 생략할게요! (사실 비슷함)

• i18n과 국제화
  https://miaow-miaow.tistory.com/m/32

• 슬랙 클론코딩 ( 웹버전 )

주제

• 중요 브런치간 머지시 코드리뷰를 해야할까요?
  (* 여기서 말하는 코드리뷰: github에 있는 pull request를 통해서 코드를 확인하고 main에 받을때 심사하게하는 일련의 과정을 의미합니다..)

세부주제

• 중요 브런치를 어떻게 정의할 까요?

저는 배포를 담당하는 master, 개발한걸 모아둔 develop에 merge를 시도할 때만 코드리뷰를 하게 하는게 맞다고 봅니다...

• 코드리뷰시 한명만 봐도 충분할까요?

사실 팀원 적어서 괜찮지 않을까 싶어요...

참조

#1

개론
https://goldenrabbit.co.kr/2023/05/08/nodebackend/

고민하던 것

MSA의 적용?

• 마이크로아키텍쳐 서비스, 즉 MSA는 단 하나의 서버대신, 여러개의 작은 서버로 대응하는 것을 의미해요. 도커, 카프카, 레디스같은 데브옵스 기술등이 발전하면서 가능해졌죠.
• 원래, 이 프로젝트의 잠재적 설계사항에 레디스와 카프카가 적용됬던 이유가, 이 마이크로아키텍쳐 서비스의 구축을 위해서였어요. (민규님이 언제 날카롭게 짚으신 부분이었어요. 레디스의 사용은 사실 이래서였는데, 이때 MSA를 어떻게 도입할지 자세하질 않아서 답은 못드렸었네요.)
• 하지만, 조금 신개념이에요. 저는 그래서 발신과 조회서버/ 채팅수신 서버 이 두개만 분리해서 부분적으로 진행하려 해요. 그러면, 필요시에 분리하는 느낌으로 될테니까요!

4월 과업 목록 (1단계)

FRONT side

Atom으로는 info input.tsx를 선정하고, FORM 이 달라서 안맞음.
moucle로는 login.tsx, member.tsx를 선정하자.

• 로그인 화면 디자인
• 회원가입 화면 디자인
• React component/Page 구축
• OATH2.0 버튼 공간 남겨두기 !!!

참고가 될?만한 스택?

• Tailwind CSS > React Native에서도 확장해서 쓸 수 있어요. 아마 도움이 되실지도?
• SCSS > 직접 CSS를 다루셔야 할 떄 쓰세요!
• AJAX,AXOIS > 서버와 통신때 쓰시면 됩니다!

BACK side

이미 src/server.ts와 express는 넣어놨으니 그것으로 구축을 시도하게 하면 됨. PORT 번호는 const로 정의시키게 할 것.

• 로그인 데이터 건네받기
• 회원가입 데이터 건네받기

참고가 될?만한 스택?

• Express

TIP

• 서버가동은 동일하게

npm run dev

이고,

• 주소는 보통 http://localhost:${PORT}/${router} 입니다.

Interfaces

Login info

• ID : string (유저의 id)
• Password : string (평문 비밀번호) -> HTTPS 통신으로는 PW가 누출될 위험이 적다고 판단 할 수 있음.

회원가입

• Login info 상속
• Username : String (유저의 닉네임 등)
• ... 뭐가 있어야할까

INFRA

• Docker를 통해 PostgreSQL운용 개시
• 팀원들 로컬 서버 운용이 적절한지 확인.

오늘 물어보고 되면 일단 둬보고 안되면 하교후에 내가 틀을 짜고 화요일날까지 지켜보고 수요일날 어떻게 할지 정해보자....

https://goddaehee.tistory.com/m/305

자료모음

맘껏쓰셔도 되요. 다만 맨위에는 어떤 주제인지만 대강 요약해주세요