[TIL] 실전에서 배우기

좋은 레퍼런스

좋은 프로젝트는 코드도 좋다. 코드를 많이 많이 살펴보고 기술도 뭐 쓰는지 배워보자

GitHub - woowacourse-teams/2022-moamoa: 🪐 스터디를 "모아모아" 🪐

참고하기 정말 좋은 코드들이 많은 프로젝트이다.

 

min-height child height 100%

min-height와 height 100% 둘 다 적용되지 않는다

모달 제작중에 min-height를 설정해준다음 내부 요소가 많아지면 늘어나는 형태를 하고 싶었다. 하지만 min-height를 설정해주면 내부 height 100%가 잘안먹힌다

height: 1px;
min-height: 400px;

 

이럴때는 height를 임의의 pixel을 적용해주면 된다.

min-height: 100% 값을 상속 받지 못하는 문제와 Firefox에서 td 요소 width 값 미적용 문제

 

multiple border button 만들기

디자인 수정 전 / 수정 후

selected 되면 background 색이 전체가 다 바뀌는게 아니고 하나의 레이어가 더 존재한다.

다양한 방법이 있다고는 하지만 box-shadow가 제일 좋은 방법이라고 생각한다.

border: 2px solid ${({ theme }) => theme.colors.DIM_GRAY};
border-bottom: 5px solid ${({ theme }) => theme.colors.DIM_GRAY};
box-shadow: inset 0 0 0 3px ${({ theme }) => theme.colors.FLORAL_WHITE};
border-radius: 10px;

이렇게 inset 설정을 해주면 box-shadow가 element 내부에 생성된다.

box-shadow - CSS: Cascading Style Sheets | MDN

 

modal

modal을 만들다보면 모달의 종류도 많아지고 한 화면에서 여러개의 모달 오픈 버튼을 제어해야할 때가 있다. 그렇게 되면 모달 개수마다 state와 함수가 생기게 되어버려서 처리가 쉽지가 않고 각각의 모달 관리도 쉽지 않다.

 

화면의 반복되는 요소마다 모달이 필요하다면 더더욱 골치가 아파진다. 이 경우에는 너무 많은 모달이 생기면서 렌더링도 상당히 오래걸리게 된다.

 

그럴때는 모달의 상태를 관리하는 방식이 옳다

모달 상태를 관리할 때,

contextAPI를 사용해도 좋고 선호하는 상태관리 라이브러리를 이용하여 관리해도 좋다.

모달을 여는 작동을 action으로 제어해주면 된다.

 

모달을 화면 단에 그려줄때는 portal을 사용해서 index.html에 그려주는 방식도 좋고,

모달을 관리하고 그려주는 컨테이너 컴포넌트를 사용해도 좋다.

 

redux를 이용해서 상태관리해주고 portal을 사용하지 않고 구현해보았다.

import React from 'react';
import { useSelector } from 'react-redux';
import loadable from '@loadable/component';
import { nanoid } from 'nanoid';

const MODAL_COMPONENTS = {
  createRoom: loadable(() => import('./CreateRoomModal')),
  quitRoom: loadable(() => import('./QuitRoomModal')),
  inviteCode: loadable(() => import('./InviteCodeModal')),
  setting: loadable(() => import('./SettingModal')),
  ...
};

function ModalContainer() {
  const modalList = useSelector((state) => state.modal);

  const renderModal = modalList.map(({ type, props }) => {
    const ModalComponent = MODAL_COMPONENTS[type];
    return <ModalComponent key={nanoid()} id={type} {...props} />;
  });

  return <div className="modals">{renderModal}</div>;
}

export default ModalContainer;

[React] Portal을 사용한 모달창 만들기

 

[React] 효율적으로 모달 관리하기

 

로컬에서 https 적용하기

리프레쉬 토큰을 적용하면서 set-cookie를 사용해야하는데 same-site 정책 때문에 테스트가 어려운 경우가 있다.

이런 경우에는 로컬에서 ssl을 적용한뒤 테스트해주면 된다.

 

이런 방법없나 싶으면 꼭 있다.

 

🔐 https로 React 로컬 테스팅하기

 

SSE

SSE는 Server Sent Event의 준말이다.

직역하면 서버에서 보내는 이벤트라는 말인데, 웹소켓의 양방향 통신과는 다르게 단방향으로만 통신할 수 있다.

다시말하면, 서버에서 클라이언트로 데이터를 받기만하는 방식이다.

서버에서 이벤트가 발생할 때마다 클라이언트로 데이터를 전달할 수 있다.

예를 들어서, 푸쉬같은 기능을 개발할 때 많이 적용한다.

 

우리 프로젝트에서는 실시간 방 리스트 조회를 위해서 적용했다.

처음에는 api를 이용한 방법과 소켓통신중에서 고민을 많이 했었는데 둘다 만족스럽지 못한 선택지였다.

polling이나 long-polling은 오버헤드가 생길 수 있는 방법이기 때문에

이런 경우에서도 SSE를 적용할 수 있다.

 

 

웹소켓 과 SSE(Server-Sent-Event) 차이점 알아보고 사용해보기