[Main-Project 개발일지]-29

중간에 사고가 나서 못오시는 팀원분을 제외한 프론트/백엔드가 모여 기술발표 자료를 모으던 중 프론트 팀원분이 이대로는 볼륨이 너무 작아 발표하기 애매하다는 의견을 주셨다.
레시피 검색 및 추천 기능이 없는 것에 대한 아쉬움과
그 부분이 없다면 냉장고 재료 관리 및 레시피 추천이 아니라 단순한 냉장고 재료관리 어플로 변하기 때문에 간단하더라도 추천 기능자체가 있어야 할 것 같고
아니라면 레시피 추천 등에 대한 부분을 제거해 간략하게 발표할 수 밖에 없다고 하셔서
결국 다시 만들기 시작했다.
백엔드에서 api가 오면 만들기로 하고 미뤘었기 때문에 여태 지체됬었던 일인데
하필이면 어제 저녁 담당하시는 백엔드분이 사고가 나셔서 참여가 힘들어졌다.

api로 천개의 레시피를 받아서 state를 통해 관리하며 
내부에서는 filter로 처리하고
map에서는 value, index로 넣을 경우 index값을 사용할 수 있기 때문에
title부분과 index만 필터링해 검색기능을 구현했다.
index를 prams로 사용해 data의 index 위치에 접근할 수 있게 지정했고
현재 내 보유 재료가 제목에 들어가는 데이터를 다시 가공한 다음 이미지, index 두가지로 처리해 img가 나오며 index를 통해 다시 index, params로 상세 정보 조회가 가능하게 만들었다.

도중 데이터를 처리하는데 계속해서 indexOf가 처리되지 않는 문제가 발생했다.
제대로 처리되지 않는 문제들이 발생했는데 api 데이터가 일관성이 없는 문제는
slice(-3)을 통해 png,jpg,PNG,JPG filter를 넣어 해결했으며

props를 제대로 넘기지 않거나 데이터 형태에 맞는 호출을 하지 않아 생긴 오류들이 있었는데 실시간으로 확인하지 못하고(전부 axios로 받은 데이터라 build를 하지 않으면 로그인 등을 사용할 수 없었다.) 감으로 추측하며 console 한번씩 찍어서 빌드하며 퀴즈풀듯이 진행하다보니 조금 더 복잡하게 해결한 느낌은 있지만 출력까지 원하는 결과대로 잘 만들어낼 수 있었다.

공공api를 매번 호출하고 있는데
최적화 할 수 있는 방법에 대해서 질문을 하셨다.
클라이언트에 올리기라고 말씀을 해주시는건가 했지만
클라이언트처럼 배포를 하나 더 해서 중계 서버?처럼 데이터만 담아둔 서버처럼 응답하는 클라이언트를 만들라고 하시는 것 같았다.

기본적으로 useEffect로 로컬스토리지가 있을 때만 동작하게 했는데 
멘토님이 추천해주신건 return 사용이었다.

이걸 getItem이 없으면 return을 시켜버리고 그 다음에 나머지 처리를 하게 하는데
if (!localStorage.getItem("localToken")) {
  return;
}
이 패턴을 얼리리턴이라고 하는데 코드가 복잡할 경우 사용하면 좋고 하셨다.


.then을 사용하게 되면 내용 파악을 하기 어려울 수 있어서 async등을 사용하는 것도 좋고

useEffect를 사용해서 중복되는 부분이 있는데
이 부분을 리팩토링 해주는 것이 좋을 것 같다.

isLogin은 굳이 체크할 필요가 없고 localToken로 체크를 할 수 있고
logout은 localtoken만 제거해도 동작하기 때문에 리팩토링이 필요하며
changed등의 의존성배열이 들어있으면 처음1회 시행이 되지 않고
해당하는 의존성배열이 변경될 때만 적용되기 때문에 문제가 생겼던 것이라고 말씀해 주셨는데
의존성배열이 변경되기 전 최초 1회 동작은 하기 때문에 구조적인 문제라고 생각한다.
get을 받아오는 모든 useEffect에 의존성배열이 들어있는데 그렇다면 기존 동작자체가 설명할 수 없다.

의존성배열 또는 상태값들을 사용하기보다는 고정된 값을 최대한 사용할 수 있게 해야 한다고 설명해주신 부분에는 공감했고 state등의 값의 사용을 줄일 수 있는 방법이 있다면 적극적으로 개선해야 한다고 생각한다.

그리고 취업 관련해서는 
"전략적으로 접근을 해라
좋은 회사들을 처음부터 지원하기 보다는
내가 별로 마음에 안들더라도 이것저것 지원해서 밑에서부터 경험을 쌓아서
이력,코딩테스트,면접 등의 경험을 쌓아서 진짜 원하는 회사에 지원하는 것을 추천한다"고 말씀해주셨다.

혹시 궁금하거나 어려운 점이 있지만 물어볼 사람이 없는 경우에는
답변해주실 수 있다고 말씀해주시고 마무리를 했다.



CT(1).백준 11721 열 개씩 끊어 출력하기는 '\n'이 제대로 먹히지 않아 그대로 콘솔을 반복하게 만들었다.

 let input = `OneTwoThreeFourFiveSixSevenEightNineTen`
for(let i = 0 ; i < input.length ; i+=10){
    console.log(input.slice(i,i+10))
}