10/27(수)팀 프로젝트 질문사항

지은 1팀

• develop에서 main으로 머지할 때도 풀리퀘를 날려서 머지를 하려고 합니다! 혹시 이 방법으로 머지하는게 맞을까요!? 아니면 다른 방식으로 해야할까요!?

• 여러개의 풀리퀘중 하나의 풀리퀘를 머지하고 난후 다른 풀리퀘에서 충돌이 있어날경우 어떻게 충돌을 해결해야할까요!?
• 깃헙 레포에서 충돌해결후 머지 (우선 이 방식으로 해결중입니다. 😂)
• 로컬에서 pull 받아오고 충돌해결 후 다시 push ⬅️ 이게 맞는것 같은데 CLI로 어떻게 진행해야하는지 잘모르겠습니다 (간단한 상황 예시를 준비했습니다!)

• 컴포넌트 스타일정의는 현업에서 어떤 방식으로 많이 사용하시나요? 혹은 사용 우선순위나 어떤 유형일 때는 이거써라 하는게 있을까요!?
• 이모션 styled
• 이모션 css
• 인라인 스타일
• css or scss 파일
• 혼합사용 - 혼용은 금지!!
 

• styled 컴포넌트를 작성할 때 내부에서 아래와 같이 변수를 사용하는것도 괜찮을 방식일까요!?

const Button = styled.button`
	--font-color: ${({ fontColor }) => fontColor};


	color: var(--font-color);

	&:active {
    border: solid 2px var(--font-color);
  }
`

• 특이케이스가 아닌 왠만한 모든 컴포넌트에 React.memo 를 선언해서 사용해도 괜찮을것 같다고 생각했습니다! 부모 컴포넌트가 리렌더링 될 때 자식으로 전달하는 props가 변경되어 자식이 리렌더링 되는 현상을 막을수 있어서 React.memo 를 적극 활용하면 좋을것 같다고 생각하는데요! 선협님 강의를 보면 컴포넌트 만드실 때 React.memo 를 안 씌우시던데 이유가 있을까요!? 혹은 제가 잘못 알고 있는걸까요!?
• 같은 맥락으로 useMemo useCallback 도 state와 콜백함수를 메모이제이션 하기 때문에 왠만하면 적극적으로 활용하는게 좋을것 같다고 생각하는데 괜찮은걸까요!?

• useRef 로 리렌더링 될 필요가 없는 지역변수로써 사용하는 케이스가 와닿지가 않습니다. 설명좀 부탁드려도 될까요!?
• useRef vs useMemo 의 차이가 있나요..!?
• 아래는 그냥... 예시로 가지고 와봤습니다..!

// 예제 useTimeoutFn
import { useCallback, useEffect, useRef } from 'react';

const useTimeoutFn = (fn, ms) => {
  const timeoutId = useRef();
  const callback = useRef(fn);

  useEffect(() => {
    callback.current = fn;
  }, [fn]);

  const run = useCallback(() => {
    timeoutId.current && clearTimeout(timeoutId.current);

    timeoutId.current = setTimeout(() => {
      callback.current();
    }, ms);
  }, [ms]);

  const clear = useCallback(() => {
    timeoutId.current && clearTimeout(timeoutId.current);
  }, []);

  useEffect(() => clear, [clear]);

  return [run, clear];
};

export default useTimeoutFn;



// 사용
import useTimeoutFn from '@hooks/useTimeoutFn';

export default {
  title: 'Hook/useTimeoutFn',
};

export const Default = () => {
  const [run, clear] = useTimeoutFn(() => {
    alert('실행!');
  }, 3000);

  return (
    <>
      <div>useTimeoutFn 테스트 </div>
      <button onClick={run}>3초 뒤 실행!</button>
      <button onClick={clear}>멈춰!</button>
    </>
  );
};

• stylelint 설정을 해서 사용하던 중 styled 컴포넌트안에서 적용이 안되는 이슈가 있었습니다 ㅜ 혹시 어떻게 설정하셨는지 공유해주실수 있나요!?
• styled 컴포넌트안에서는 js문법이라 충돌되는 이슈가 있습니다 😂
• 이슈현상 : https://www.notion.so/oranjik/211022-04e54473ef4041b0829272d31f41f5e2
• stylelint 설정 상황: https://www.notion.so/oranjik/3ee543f0ed3c4ddd8bb6e791413e42ab

지은 2팀