Portfolio

멘토님께서 협업하실 때 가장 중요하게 생각하는 것은 무엇인가요?

답변

상호 피드백이 중요하다. 이후 개선 방안을 모색하는 것이 필요하다.
(회사) 기존 사례를 보고 흐름을 파악하는 것이 좋을 것이다.
(팀플) 인원이 적은 경우, 주도적으로 진행하도록 할 수 있도록 노력해보자.

현업에서 어떤 브랜치 전략을 사용하고 계신지 궁금합니다.

팀 프로젝트 단위에서는 어떻게 브랜치를 관리하는 것이 효과적인지 궁금합니다.
기능 별로 이슈를 만들어서 해당 이슈마다 브랜치를 생성하고 PR을 올린 후, 코드리뷰 후에 merge를 하는 방식으로 해 본 경험이 있습니다. 이 때는 그냥 main 브랜치에 merge 했는데 왠지 그렇게 하면 안될 것 같아서요.. development용 브랜치와 production(main)용 브랜치를 두고 관리하는 것이 좋을까요?

답변

배포 단계가 여러 개로 나뉜다. 배포 단계 별로 브랜치가 있다.

알파, 베타, a, 메인(마스터) 브랜치

알파는 테스트를 마음대로 할 수 있고, 베타부터는 여러 절차를 거쳐야 해서 복잡하다.

development에서 feature 빼고 PR 올리고 merge 하는 방식은 비슷할 것이다.
프로젝트할 때는 인원이 많아지기 때문에 development용 브랜치와 production(main)용 브랜치를 두고 관리하는 것이 좋을 것 같다.

main에서 급한 것은 hotfix로 보내고, 보통 기능은 development에 보낸다.

곧 팀프로젝트가 시작되는데, 멘토님께서 팀 프로젝트를 진행할 때 이것만큼은 꼭 사용해봤으면 || 시도해봤으면 하는 기술 스택이 있는지 궁금합니다.

답변

TypeScript..
리액트를 사용한다면 react-query와 recoil을 사용해보는 것을 추천한다.
빌드 툴에 대한 이해가 되어 있는 것을 기반으로 빌드 툴을 정해서 사용하면 좋을 것 같다.
(진짜 마지막) SSR로 ..

한 명이라도 Next.js를 해본 경험이 있다면 ..

리액트: setState으로 업데이트한 state값을 바로 사용할 수 있는지?


const [state, setState] = useState(false)

const handleChange = () => { 
 setState((state) => !state)
 onChange(state)
}

답변

사용할 수 없다.
참고 사이트: 리액트 렌더링 하는 방식

Automatic batching for fewer renders in React 18 · Discussion #21 · reactwg/react-18

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/reactwg/react-18/discussions/21

위 내용에 추가로 setState로 값을 변경할때 값을 복사해서 할당하는지 궁금합니다. (아래 사진의 data, setData를 활용해서 같은 메모리주소를 참고하는지 확인해보려고 했는데 아래와 같은 결과가 나와서 궁금합니다. 자바스크립트의 특성때문인것 같기도…)

답변

원래는 같게 나와야 한다고 생각한다.

set한 데이터를 접근하려고 생각하면 안된다. set이 가장 마지막에 된다.

렌더링이 되려면 하나라도 값이 변경이 되어야 한다.

아래와 같은 시나리오를 구현하기 위해서 어떤 방식으로 접근하는게 좋을까요?

시나리오

빨간색 input 요소에 focusin 되면 파란색 영역을 렌더링합니다.

파란색 영역에 렌더링된 영화를 클릭하면 해당 영화의 페이지로 이동합니다.

제 결과물의 문제점

영화는 a 태그로 감싸져 있으며, 영화 클릭과 동시에 빨간색 input 요소가 focusout.
파란색 영역이 DOM Tree 에서 제거되면서 이동이 안됨
해결하기 위해 input 요소에 focusin, focusout 이벤트에 다음과 같은 핸들러를 등록함


const onFocusHandler = ($event) => {
  const { type, relatedTarget } = $event

  if (relatedTarget?.tagName === 'A') {
    const { pathname, search } = relatedTarget

    if (pathname.indexOf('/search') === 0) routePush(pathname + search)
    if (pathname.indexOf('/movie') === 0) routePush(pathname)
  }
}

답변

생각한 방법은 맞는 방법이기 때문에 다른 부분에서 오류가 있을 것 같다.
각 리스트를 버튼으로 만들어서 onClick 이벤트를 걸어줄 것 같다.
혹은 vue는 CSR 기반 렌더링이기 때문에, a 태그에 event.preventDefault()를 해준다.

남겨주신 리뷰 중 웹팩에서 additionalData을 넘기는게 안좋다고 하셨는데, 그럼 이 부분을 처리할 다른 방법이 뭐가 있을까요? ㅠㅠ

답변

시작 지점에서 import를 하는 것이 더 좋을 것 같다.

웹팩을 딱 봤을 때 이해하고 관리하기 어렵기 때문에 최대한 위와 같은 옵션을 쓰지 않는 것이 좋다.

zero config를 지향하자.

요즘 강의를 통해 storybook을 학습하고 있는데 멘토님도 이러한 UI 워크샵?을 사용하시는지 궁금합니다.

답변

storybook을 많이 사용한다.
장점이자 단점은 props를 heavy하게 사용하게 되어 이를 지양하기 위해 노력한다.

[커피챗] 4