기술 로그 - Dumboz/yalp Wiki

공통

1. git push 방지

2. git revert 방법 (일반적인 상황)

3. git revert 방법 (merge commit 상황)

(가정: 최신 commit이 merge commit 인 상황)

step 1) git log를 확인하여 현재 commit hash를 확인한다

step 2) 현재 merge commit에서 merge 된 commit 을 확인한다

commit 8f937c683929b08379097828c8a04350b9b8e183
Merge: `8989ee0` `7c6b236`
Author: Ben James <[email protected]>
Date:   Wed Aug 17 22:49:41 2011 +0100

Merge branch 'gh-pages'

Conflicts:
    README

현재 merge에서는 8989ee0(1번)와 7c6b2362번) 두 commit이 merge 되었음

step 3) git revert <현재 Hash> -m <되돌아갈 hash의 번호>

ex) git revert 8f937c68 -m 1 (1번 commit으로 되돌아감)

참고 자료 1

참고자료 2

BrowserRouter : history 를 관리할 수 있게 만들어 주는 react router Oulet : swap children NavLink : 함수로 인수를 전달하면 isActive 인자가 전달되어 선택 여부를 반환한다 useNavigate :

4. Proxy 서버 설정 방법

[문제 상황] yelp API 에서 client side로 request 요청을 하는데 필요한 CORS header를 제공하지 않는다. (참고 1)

[해결 방법]

  1. 'cors-anywhere.herokuapp.com' 을 get 요청 시 url 앞에 붙여주면, API에 우회하여 요청 가능하다. 하지만, 1일 요청 제한이 있어 근본적인 방법이 될 수 없다
  2. 따라서 server로 Yelp API 요청을 해야 하는 상황이므로, client 에서 api 요청을 했을 때 server가 요청하는 것처럼 동작하기 위해 proxy 중계 서버를 두었다

proxy 오해와 깨달은 점

[깨달은 점]

  1. server를 만들지 않고도 package.json에 proxy를 yelp api url로 설정하면, 자체적으로 proxy 서버가 구동되어 origin을 바꿔 api요청을 우회할 수 있을줄 알았다.
  • [답변] package.json에 proxy는 origin을 바꾸는 역할이 아니고, 중계 서버가 무엇인지 지정하는 설정이다.
  • [답변] proxy 서버는 중계 서버인데, yelp api 주소를 중계 서버로 설정한 것이 문제였다. (yelp api가 중계 서버가 될 수 없는 이유: yelp는 중계 서버가 아니라, 목적지가 되어야 한다. 중계 서버로 설정할 이유가 없다.) 따라서 중계(proxy)서버를 직접 구축하여, 해당 서버에서 API 요청을 보내도록 우회 및 설정하였다.
  1. 왜 클라이언트에서 보낸 요청은 CORS에러가 나고, proxy 서버로 우회했을 때는 CORS에러가 나지 않는가?

5. Router 설정

6. Redux 기술 부채

강희

컴포넌트

1. 컴포넌트 안에서 비동기 요청을 사용할 때 무한 리렌더링이 발생

async function call(query, setState) {
  const { data } = await axios.get('/api' + query);
  setState(data);
  return { data };
}

const Exam = () => {
  const [state, setState] = useState({});
  const { pathname, search } = useLocation();
  call(pathname + search, setState);

  return <div>{JSON.stringify(state)}</div>;
};
  1. react-async라이브러리에서 제공하는 useAsync() hooks을 사용
  2. useEffect() 를 사용해서 Mount시에만 비동기 함수를 호출하도록 구현
  • 이 방법은 state가 초기 값일 때, 비동기 함수가 state를 update해줬을 때, 즉 2번 렌더링이 발생함.

스토리북

1. 컴포넌트 불러올 때 발생한 에러

  • [문제 상황] cannot read properties of undefined (reading 'displayName') 이라는 에러가 발생함
  • [해결책] export default 로 꺼내온 컴포넌트를 일반 export 방식으로 내보낸 컴포넌트를 가져오는 방식을 사용해서 발생한 에러였음. default 로 내보낸 컴포넌트를 가져오는 방식을 사용하여 해결함.

2. 전체 컴포넌트들에게 Global style 적용하는 방법

  • [문제 상황] 전체 컴포넌트에게 styled-component로 작성된 GlobalStyle 컴포넌트를 적용해주어야했음.
  • [해결책] Global decorators 를 사용하여 해결함. storybook - decorators

박지영

  1. 상태 관리를 하면서 중복을 최소화 시키는 방법
  1. StoryBook

손원재

윤석규

  1. 중첩된 컴포넌트의 click 이벤트가 중복 문제
  1. 컴포넌트 내 여러 상태 관리
  1. 리스트 렌더링 시, key 값을 컴포넌트에 prop으로 전달할 경우
  1. mouseOver 대신 CSS Hover 사용하여 모달 구성

  2. keyPress 대시 keyDown

  1. List rendering 시, 랜더링 되는 각 컴포넌트 참조