#1주차 과제 개발 log

heyj·2022년 2월 25일

원티드프리온보딩

wanted_PreOnboarding

목록 보기

1/7

과제 설명

두 번째 기업과제를 진행습니다.

첫번째 과제 때는 구현 기능, 기술스택, 프로젝트 구조 등을 진행하면서 조정했는데, 이번에는 가장 먼저 팀원들과 기술스택, 구현 기능, ui, convention 등을 정리하고 파트를 나눠 진행했습니다.

이 방법이 처음에는 정리하는 데 시간을 너무 많이 쏟는 게 아닐까 생각했는데, 이후에는 기능 개발에만 몰두 할 수 있어서 정말 좋았어요!

저는 팀 프로젝트 경험이 없어 따라가는 데 벅찼는데, 다른 팀원들께서 너무 잘 이끌어주셔서 원활히 과제를 진행할 수 있었습니다.(우리팀 만세!!ㅠㅠ)

저희가 구현해야 하는 사항은 크게 3가지였습니다.

2개의 스택리스트에 있는 아이템들의 리스트 영역 이동
스택리스트 안에 있는 아이템들의 순서 이동(드래그앤드랍)
드롭다운으로 열리는 세팅으로 리스트 제어

저는 3번 기능을 맡아 진행했습니다.

Setting

제일 고민했던 부분은 상태관리였습니다.
첫번째 과제때는 리덕스를 사용해서 상태관리를 했기 때문에 쉬웠는데,
혼자 고민을 해야하니 너무 어려웠습니다..ㅠㅠ

다른 팀원들께 조언을 구했고
페이지별 이동이 없는 프로젝트여서 리덕스, 컨텍스트를 사용하기 보다는
App 컴포넌트에서 props를 전달해 주는 방식으로 구현하기로 결정을 했습니다.

1. 타이틀 변경하기

input값이 들어오면 onchange함수를 이용해 value를 세팅해주고 이후 submit을 하거나 하는 동작으로 연결했는데, 이번에 구현할 때는 enter를 치면 반영이 되도록 해야 해서 onChange가 아닌 onKeyUp을 사용했습니다.

onchange, onkeyup, onkeydown?

onchange는 focus가 발생하기 전의 원래 입력값과 비교해 변화가 일어났을 경우, 해당 element가 blur될 때 이벤트가 발생합니다.

onkeyup은 키를 눌렀다가 뗄 때 이벤트가 발생합니다.

onkeydown은 키가 눌렸을 때 이벤트가 발생합니다.

실행방법

토글이 빨강색일 경우 input에 값이 입력되지 않습니다.
토글이 초록색일 경우 input에 값을 입력하고 enter를 누릅니다.

2. 검색하기

검색 역시 토글 스위치가 초록색으로 바뀌면 input이 활성화 되도록 했습니다. 검색어를 입력하고 enter를 치면 검색이 가능해지도록 만들었습니다.

값을 비교하는 것은 includes() 메소드를 이용했습니다.

const onKeyUp = (e) => e.keyCode === 13 && setKeyword(e.target.value);

<Input
	placeholder={'search'}
	disabled={searchDisabled}
	onKeyUp={onKeyUp}
/>

{list?.map((item, index) => {
  return (
    item.name.includes(keyword) && (
      <ListItem
        key={item.id}
 		id={item.id}
 		...
      />
   )}
)}