Index
Date
의 회의록 마스터 : 고주형
Participants
TEAM FIRE (윤영기 고주형 이하령) + WonYong Jeong
Discussion topics
CORS
로컬 호스트 허용해
Global Config
서버든 클라든 global config를 만들자
ENV
env에 따라 다른 Config값을 써서 다른 주소를 사용하도록 만들자
ENV 종류
Stage
Prod
백엔드의 경우 ENV 종류에 따라 다른 ACL 리스트를 사용해라
프로젝트 진행 사항
공유화면 작동
입장 설정
입장 한 후 화면
입장 준비 화면
프론트엔드 코드리뷰
Auth 컴포넌트를 감싼다
모달
모달 속성은
BaseLayout 안에서
모달이 있으면 띄워져 라고 선언 할 수 있다
일반적 레이아웃 구성
항상 들고 다닐 정보를 레이아웃으로 가지고 다닌다
모달 정보를 어떻게 끼웁니까?
컨텍스트 변수로 한다.
Store는 모든 컴포넌트는 영속되는 것을 가져올 수 있다. 그렇다면 모달이 떠잇는지 아닌지 설정할 수 있다
해당 스토어에서 Open dialog, Close dialog, (공용으로 사용한 common code)등을 설정한다,
Main.tsx
정원용 멘토님의 관점
스타일이 그 코드가 가진 책임이 무엇이고 거기에 충실한가?
Main 컴포넌의 역할은?
컴포넌트는 리턴을 명료하게 해 주어야 한다.
컴포넌트가 주고자 하는 것은 무엇이냐?
리턴 대상인 컴포넌트를 명료화해라!
컴포넌트는 결국 UI를 그려주는 것이다.
→ UI를 리턴하는 코드가 명료해야 한다
명료화는 어떻게하나요?
책임을 줄여라
네이밍 바꾸기
헤더Section
타이틀Section
LoginSection
등으로 네임밍을 바꿀 필요가 있다.
Handler의 네이밍
이벤트를 기준으로 생각한다.
...Handler -> onLogin={,,,handler}
스타일의 차이일 수 있다.
React는 XXX핸들러라고 많이 한다.
하지만 onXXX가 더 직관적이라고 생각한다.
모달에 관한 코드를 분리하라
두 가지의 방법
밑에서 다른 컴포넌트
그 안에서 만들 수 있다
// 함수로 추출
const LoginComponent = isModal ? <Modal onLogin={onLoginClose}> ... </Modal> : null
Scroll을 위한 CSS
질문: 엄청 큰 img 어떻게 보일까?
답: 전체가 노출된다.
1. body의 heigth을 설정해야 한다.
기본은 0
2. overflow: auto
line break를 설정하면 x방향 스크롤도 보인다
Scrolls(LobbySection)
filtering한 것들의 리스트는 변수로 빼주자.
Store 객체
상태 관리하는 라이브러리 zustand
simple해서 좋네
멘토님이 쓰는 것
Redux가 코드를 많이 생성해야 돼서 불편 → Redux Thunk?(리덕스의 코드를 생성해줌)
이런 컨셉의 훅 모듈을 사용해서 개념(slice)을 만들어 준다.
Auth로 감싸진 컴포넌트
Auth 아래는 Auth된 유저들만 사용할 수 있는 컴포넌트
로그인 해야되는 페이지와 로그인하지 않아되 되는 페이지가 구분된다.
칭찬
styled가 아래에 있는 것 좋아.
main, scroll도 그렇고 간결하게 책임을 나눠가지려고 한 노력이 보인다.
코드 리뷰 정리
렌더링 되는 항목이 간결한지 봐라
수도코드 수준까지 간결하게 해라
팁(서버든 클라든)
먼저 수도코드를 짜고 시작해라.
주형이 코드리뷰 때 부스트랩에서 해야할 것
2. 3. 작성 후 시작했다.
프론트도 똑같이 가능하다.
백과 클라이언트의 차이
보는 관점이 다르다.
왜? 시작점이 다르다
프론트엔드는 UI
→ UI가 명료하게 나오느냐?
서버는 로직
→ 해당 서버 사이드의 로직이 명료하게 보이느냐?
HTTP
HTTPS는 평문을 보여주지 않음.
HTTP
평문 텍스트
크롬은 이쁘게 파싱해준다
공백 두개로 분리
STATUS / HEADER / BODY
Keep alive에 따라 연결 바로 끊고 안 끊고가 달라진다
백엔드에서 HTTP 버전에 따라 다르게 설정
이야기한 메소드와 HTTP 의 버전. ‘/‘ -> URL 경로 로 보인다.
즉 서버 입장에서 root page를 들어갔다는걸 알려줌
telnet을 이용한 실습
HTTP를 사용하는 (레거시 지원 때문에) 쇼핑몰 사이트로 실습 시작
Request의 헤더에 압축을 받아드일 수 있다는 옵션을 꺼야 제대로 평문으로 보인다
accept encoding 꺼주고 다시 똑같이 보내면 제대로 나옴 -> 압축되지 않은 정보가 나옴.
1번 섹션 : 보낸 내용
2번 섹션 : 받은 내용
3번 섹션: body
즉 HTTP는 사람이 읽을 수 있구나! 를 알 수 있음
규칙이 있음 -> HTTP scheme, 상태코드 등 2번 섹션에 나옴. 헤더는 엔터 단위로 나온다. 한 줄의 헤더에 공통적으로 ‘:’ 가 나옴. 즉 한 줄에서 colon을 기준으로 key와 value가 나온다. 즉 type -> text html이 존재함
헤더에 들어가는 내용이 쭉 포함되어 있다!
접속하고 나서, 계속해서 엔터를 쳤는데도 불구하고 끊어지는 표시가 안나옴. 왜? keep-alive 땜시 후속 커넥션을 지속적인 연결을 시도했음
빼도 요청이 계속 들어옴… 왜?? 헤더상에는 keep-alive가 빠져있지만, 서버에서는 client가 끊어질 조건이 아니면, 끊지를 않아서 계속 연결이 유지가 되어 있음. 왜? HTTP 1.1 이라서 그럼. HTTP 1.1이면 기본적으로 keep-alive를 지원하기에 그렇다.
HTTP 0.9
GET 만 했는데 헤더 없이 바디가 오면 HTTP 0.9
Keep alive가 기본이 아님
첫 줄 엔터 치는 순간 바로 끊김
서버는 client가 요청하는 버전에 따라 같은 헤더임에도 다를 수 있다.
HTTP 1.1
사실 CORS는 헤더 하나만 설정하면 끝나
