[취업준비일지] - 78 - 원티드 인턴십 7일차

기능 구현에 들어갔는데 생각보다 여유있게 진행할 수 있었다.
다만 생각처럼 기능이 잘 만들어진다는 부분의 여유였지
시간적으로는 상당히 압박을 받고 있다.

현재 CRUD중 레이아웃 작업을 하며 구현한 CR은 넘어가고
Delete는 간단히 해결한 상태고
Update를 진행하는데 기존 데이터는 출력되면서
새로운 데이터를 입력받는 부분이기 때문에
이 부분은 추가 데이터를 입력받아
수정 가능한 포맷에 넣어주고
기존 데이터는 입력이 불가능한 상태로 남겨두고

수정 포맷으로 들어갈 경우
기존 데이터는 props로 받아오는 것이기 때문에 유지하며
modify용 state를 따로 생성해 객체 형태로 데이터를 넣어준 다음
취소 버튼을 누를 경우 state에 기존 props를 재할당 하는 방식으로
데이터를 유지할 생각이다.

작업을 진행하던 도중 수정 버튼은 isModify를 통해 관리했지만
닫아버릴 경우 isModify가 유지되기 때문에
다른 상세정보를 누를 경우 수정 상태로 열리는 문제를 발견했고
닫는 모든 행동에도 isModify(false)를 추가했다.

버튼에 onClick={onClose}로 처리한 부분은 함수 두개를 넣어줘야 했는데
잠깐 생각했다가 화살표 함수로 처리할 수 있는 것을 바로 떠올리고 
아래와 같은 방식으로 해결했다.
onClick={() => {
  onClose();
  setIsModify(false);
}}

Update 부분에서 이미 객체 내부에서 다루고 
각 state마다 다른 배열에 넣어줬기 때문에 state 변경이 조금 까다로웠다.
state를 체크한 다음 state의 변경이 없는 경우에는 기존 위치에서 내용만 변경하고
만약 state가 변경된 경우는 현재 state에서는 삭제한 다음
새로운 state의 배열 뒷부분에 추가하는 형태로 진행했다.

초기 id에 따른 오름차순 정렬은 있었지만
그 뒤로는 자유자재로 옮길 수 있는 DnD기능의 Isshe Tracking이기도 하고
옮겨진 순서를 그대로 저장한 상태로 새로 오름차순 정렬 기능도 없기 때문에
변경된 내용을 쉽게 알 수 있도록 후순위 추가로 결정했다.

CRUD 구현 완료 후 localStorage를 구현하려고 헀는데
데이터를 넣으니 [object Object]로 출력되었다
이것도 이전에 구현한 경험대로 JSON.stringify(obj) 형태로 넣어주니
정상적으로 들어갔다.
또한 이런 방식으로 넣은 경우에는 JSON.parse를 사용하지 않으면
{"todoArr":[],"inProgressArr":[],"doneArr":[],"idNow":1} 형태로
출력되기 때문에 JSON.parse()로 감싸서 객체 형태로 받을 수 있었다.


DnD를 구현하려고 했으나 생각보다 문제가 많았다.
기초적인 수준 구현은 정말로 쉬웠는데
시작 전 해당하는 id를 기록한 다음 
해당하는 위치에 그 id값의 리스트를 이동시키면 끝났다.

다만 여기서 문제가 되는 것은 떨어트릴 위치 문제였는데
해당하는 각 리스트가 최종 목적지라면 문제가 없지만
해당 리스트가 아닌 부분으로 옮기려고 하면 이동되지 않는다.

왜냐하면 해당 목적지 감지 자체를 해당 리스트의 위/아래로 하려는 것이기 때문이다.

반대로 해당 리스트가 아닌 컨테이너 부분을 감지한다고 하면
다른 사람들이 대부분 만든 느낌으로 맨 끝부분 또는 맨 앞부분에
던져넣듯 들어가버리고 사이에 끼워넣는 것을 할 수는 없었다.

문제를 해결하기 위해서 여러가지 시도를 해봤지만 답은 없었고
결국 최종적으로 좌표값 기준으로 떨어진 곳의 위치를 찾아냈다.
console.log(document.elementFromPoint(e.clientX, e.clientY));

하지만 해당 방법이 제일 정확하게 엘레먼트를 잡아냈지만
리스트들의 틈 사이를 찍을 경우 상위 엘레먼트인 컨테이너가 찍혀버렸다.

이 방식을 사용한 가장 큰 이유는 데이터가 들어있지 않거나
데이터라인 밖에 존재하는 최 후방에 추가하려는 의도였는데
그 사이에 데이터가 들어있다면 의미없는 행동이 되어버린다.

데이터의 y축 좌표값을 구한 다음 아래의 코드를 통해 자식노드들의 범위를 구하고
element.parentElement.childNodes[i].getBoundingClientRect();
index0을 시작으로 아래 조건을 만족할 때 마다 index++로 index를 찾았다.
e.clientY >= (elementRect.top + elementRect.bottom) / 2

그 뒤 기존 데이터에서 해당 배열 부분의 list 하나만 filter id를 통해 제거하고
옮길 새 데이터(moveList)를 해당 state의 index에 splice 해줬지만
1회 이동 후 자꾸 터져버리는 문제가 발생했다.

데이터 자체가 망가져버려서 로컬스토리지를 몇번 비워가며 비교해보니
옮길 데이터의 state를 변경해주지 않고 새로운 state에 할당해서
옮기려고 하면 존재하지 않는 state에서 접근하기 때문에
null을 옮기려던 위치에 던져버려서 null을 읽지 못하는 문제였다.

새로 옮길 moveList의 state를 옮길 곳의 state인 finalState로 지정해
문제를 해결하고 정상작동시킬 수 있었다.

정상 작동이라고 생각했지만
같은 state 내부에서 이동할 경우 하단으로 2칸 이동하는 문제가 발생했다.
왜 그런지 생각해보면 [a,b,c,d,e]의 배열에서
c를 c의 바로 다음자리 (index 3)에 넣으려고 하는 경우
[a,b,d,e]로 변경된 상태에서 index 3의 위치인 d 다음에 들어가버린다.

이 부분은 index를 넘겨주기 전 체크한 다음
같은 state인 경우 continue로 index를 추가하지 않는 방식으로 진행했다.

id를 찾을 수 없다며 문제가 발생해서 확인해보니
state 체크를 하는 도중 element.childNodes[i].id로 진행했었는데
리스트 위에다 떨어트릴 경우 
element.parentElement.childNodes[i].id로 접근해야
내가 생각했던 비교용 id에 접근할 수 있었다.

내가 만든 DnD

동기분에게 구현 완료 이야기를 하니
동기분들 팀에서는 rect를 쓰기 귀찮아서 closest을 사용했다고 한다.
조금 더 편한 방법일 수 있곘지만
그 처리 방식 또한 빈 공간 예외처리가 있기도 하고
내용물이 없을 경우 골치아플 수 있을 것 같다.

팀 제출용 gif를 작업하시던 분이 오후 10시가 넘어서 집에 가셔야 했기 때문에
다시 녹화를 하고 gif를 만들기로 했다.
문제는 이번에는 crud는 당연한 부분이기 때문에 
DnD기능에 대한 퍼포먼스를 보여야 하는데
시연연상을 하나만 하기는 뭔가 아쉬웠다.

물어봐도 추가로 생각나는 시연할 내용이 딱히 없으셔서
dnd 시연 영상을 gif로 만들기로 했고
길이들을 조금 다르게 구성하고 
내용들을 눈에 띄는 특수문자 등으로 만든 다음
사이에 끼워넣고 맨 위와 맨 아래로도 넣는 모습을 찍어 마무리했다.



1.Design Pattern은 설계 기법으로
구현이 아닌 아이디어라 원칙들로 코드의 방향성을 결정한다.
이를 통해 재사용, 호환성, 유지보수 등을 위해 패턴을 사용한다.

생성 패턴 - 객체의 생성 방식 결정
구조 패턴 - 객체간의 관계 조직
행위 패턴 - 객체의 행위를 조직, 관리 연합

 

 

(1).백준 5013 Death Knight Hero는 조금 특이했는데
Chains of Ice, Death Grip, Obliterate라는 세가지 기술을 사용하고
Chains of Ice 다음에 바로 Death Grip을 사용하면 패배하고
그렇지 않은 경우 승리하는 조건을 가지고 있었다.

영어로 된 문제라 처음에는 단순하게 
Death Grip이 Chains of Ice보다 먼저 사용되면 이긴다고 생각했는데
(Death Grip은 이름만 봐도 이길 것 같은 느낌)
이유는 모르겠지만 자세히 읽어보니 순서 자폭기 같은 느낌이었다.

간단히 includes로 체크한 다음 없는 경우 ++로 처리했다.

let input = `3
DCOOO
DODOCD
COD`.split('\n')

let count = 0
for(let i = 1 ; i < input.length ; i++){
    if(!input[i].includes("CD")){
        count++
    }
}
console.log(count)