Portfolio

❓

팀원들이 작성한 프로젝트 중간 회고에 대해 이야기 나누고, 현재 개발 상태나 협업에 문제가 없는지 이야기 나눠주세요!

서비스 피드백

이메일 형식이 어디있을까!?

비밀번호 검증 프로세스에 약간의 허점

8글자 이상이여야 한다는 말이 없음
일부 특수문자 검사 누락 (특수문자를 입력했는데, 입력이 안 된 걸로 인식)

예시) Qwe123!@#

렌더링 최적화도 신경써주면 좋을 것 같다.

react devtools에 profile을 이용해보자.
useMemo, useCallback 등을 이용해서 함수나 값 등을 캐싱 + React.memo를 이용해서 props가 변경되지 않았을 경우, 렌더링이 안 되도록 해보자.

레이어 팝업

배경을 눌러도 닫히도록 하면 어떨까?

프로그래머스에서 제공하는 API정보가 그대로 클라이언트에 노출 되고 있음

proxy 를 사용하면 됨


// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
  resolve: {
    alias: [{ find: '~', replacement: path.resolve(__dirname, 'src') }]
  },
  server: {
    proxy: {
      '/api': {
        target: 'https://kdt.frontend.4th.programmers.co.kr:5011',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

auth-user 를 페이지를 이동할 때 마다 호출하고 있음 → 꽤 큰 낭비

한 번 호출한 다음에, localstorage 같은 곳에다 토큰 정보를 저장하고
api요청을 할 때 localStorage에 있는 토큰을 사용하고
만약에 토큰이 유효하지 않다거나 401이나 403에러가 발생하면 로그아웃 후 다시 로그인 하도록 하고

401은 아예 인증 정보가 없는 상태 (실제로 로그인이 필요함)
403은 로그인은 했으나, 권한이 없는 상태 (로그아웃이 필요하진 않고, 권한이 없다는 메세지를 띄워주도록)

글작성 완료 후 아무 피드백이 없음 → 계속 작성완료 버튼을 누를 수 있는 상태

글작성시 validation 실행 후 아무 피드백이 없음 → 내가 잘못 입력했는지, 제대로 입력했는지 알 수 없음

onChange의 경우, state의 변경을 자주 해주는 친구이고, 그러다보니 값이 변경될 때 마다 state를 사용하는 컴포넌트가 리렌더링이 될 수 있다. 이런 점들을 주의하자.

해결 방법은 ref를 이용하는 것


const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    textareaRef.current?.addEventListener('change', handleContent);

    return () => {
      textareaRef.current?.removeEventListener('change', handleContent);
    };
  }, [handleContent]);

🔥

중간 회고

종길님의 총평 → 빨리빨리 하려고 하다보니까, 여태까지 힘들게 쌓아왔던 문화들이 무너지고 있는게 느껴진다. 조금씩 어긋나는 느낌. 마음이 아프다.

우리들의 잘못이라기보단, 물리적 시간 자체가 많이 부족했을 수도 있고
모두의 수준을 똑같이 맞추기가 어려워서일수도 있고
이런 경험을 기반으로 다음에 팀프로젝트할 때 더 문화적인 부분을 신경쓰면 되지 않을까 싶기도.

무엇이든 물어보세요

지금 안 되는 부분.

무한 스크롤

Intersection Observer API - Web APIs | MDN

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

이걸 이용해서,

[준일팀] 17주차 커피챗

서비스 피드백

무엇이든 물어보세요