Slack 클론코딩 2주차

인프런 Slack 클론 코딩

섹션 1. 로그인, 회원가입 만들기를 수강했다.

---

📚배운 점

1. 비구조화 할당 팁

const {data, , value} = useSWR('url');

비구조화 할당 시 저렇게 빈칸을 넣어서 임시로 필요 없는 값을 처리할 수 있다!

2. 타입스크립트 제네릭 & hooks 분리

// useInput.ts
const useInput = <T = any>(initialValue: T): [T, (e: any) => void, Dispatch<SetStateAction<T>>] => {
  const [value, setValue] = useState(initialValue);

  const handler = useCallback((e) => {
    setValue(e.target.value);
  }, []);

  return [value, handler, setValue];
}

2-1. 위와 같이 T를 사용하여 들어올 타입을 제네릭으로 설정할 수 있다. 처음 써보는 문법인데 유익하다!

2-2. 또한 위와 같이 input 이벤트를 처리할 때 따로 hooks 디렉토리를 만들어서 사용하면 좋은 것 같다.

// 사용 시
import useInput from '@hooks/useInput'

const [email, onChangeEmail, setEmail] = useInput('');
const [nickname, onChangeNickname, setNickname] = useInput('');

3. 쿠키 제거

아래와 같이 개발자 도구의 Application 탭의 Cookies에서 저장된 쿠키를 확인할 수 있으며, 삭제할 수도 있다. 물론 삭제하면 로그인을 다시 해야한다.

로그인 테스트 후 로그아웃을 하려는데, 아직 로그아웃 api 혹은 화면 이 구현되지 않았을 때 사용하면 좋을 것 같다.

4. proxy 설정

웹 / 서버 개발자라면 한 번쯤 겪어봤을 CORS 에러..
물론 백엔드 쪽에 CORS 설정해주세요~ 하고 기다릴 수도 있겠지만, 가끔 참지 못하고 테스트하고 싶을 때가 있다.

그럴 때 프론트에서 대처할 수 있는 임시 방안으로 proxy가 있다.

// webpack.config.ts

 output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/dist/',
     proxy: {
       '/api/': {
         target: '서버 가동한 주소',
         changeOrigin: true,
         ws: true,
       },
     },
  },

이렇게 proxy를 설정함으로써 프론트 to 서버가 아닌 서버 내에서 요청이 보내진 것처럼 하여 CORS 에러를 피할 수 있다.
이것도 요긴하게 쓸 수 있을 듯..

5. SWR & Opti / Pessimistic UI

상세히 정리하면 글이 길어질 것 같아 따로 정리하기로 결정..

Redux & RTK만 써봤던 내 입장에서 SWR은 신세계였다.
보일러플레이트 코드가 이렇게나 줄어들다니..

좋아요 기능 구현 후 서버 호출 시 Optimistic하게 쓰기! 이것도 추후 SWR과 같이 정리해보겠다.