[Main-Project 개발일지]-34

안타깝게도 네틀리파이로 배포하신 프론트 팀원님이 
휴가를 내셨기 때문에 배포를 다시 하기는 애매하다
외적으로 보이는 모습이 확 바뀌는 것도 아닌데 휴가중인 사람을 굳이 부르기도 그렇고
그냥 리팩토링을 진행하기만 하고 자가배포로 테스트해보는 정도로 진행해야겠다.

중간에 내일 발표에 대한 설명을 줌으로 해주는데 다들 줌 설명보다는
게더타운이 아닌 zep라는 새로운 공간을 탐험하느라 정신이 없었다.

점프, 찌르기, 따라가기, 코어탕(?)사이에 들어가기, 기차놀이 등
중간에 관리자가 수정하겠다고 5번정도 서버 재부팅을 하지 않았다면
다들 더 능숙해지지 않았을까 싶기도 하다.

내일은 10시부터 12시까지 Q&A를 받아야 하는데
팀원 중 세분이 불참(휴가 및 사고)하셨지만 다행히 프론트1 백엔드1 구색은 맞출 수 있었다.
질문이라고 해도 기껏해야 이 기능은 어떻게 처리했냐 정도겠지만
다들 로그인, crud, api가 기본이기 때문에 서로 질문할 내용도 별로 없다는 걸 알 수 있다.

문제라면 수료생들이 다 합해서 240명이 되지 않을 것 같은데 300여명이 참여한다는 말을 들어보면 멘토님들과 크루들까지 모인다는 건데 그분들의 날카로운 질문이 조금 걱정된다.

2팀이기 때문에 두번째로 타겟이 되기 쉬운 안타까운 위치인데
다들 1팀부터 올라가기보다는 랜덤한 위치에 방문해 탐험하는 재미를 느끼셨으면 좋겠다.

로컬스토리지 값을 바탕으로 로그인을 판단하는 부분으로 다 뜯어 고치려니 쉽지는 않았는데
일단 서버측은 항상 꺼져있기 때문에 정확히 돌아가는지 판단하기 애매했고
로컬스토리지를 받는 행위 자체가 서버에서 받은 값을 넣는 것이기 때문에 기본 절차가 막힌 느낌이었다.

리팩토링을 하다보니 테스트케이스를 추가하면 이걸 수정했을 때 생기는 오류가 뭐가 있는지 체크해가며 넘어갈 수 있을 것 같은데 그런 기능이 없어서 아쉬웠고
단발성의 개발이 아닌 유지보수 및 개선이 필요한 서비스라면 테스트케이스가 있는게 훨씬 안정적이고 장기적으로는 더 빠른 개발이 가능할 것 같았다.

앱->헤더->메모까지 타고 내려간 로그인 연동을 제거한 후
localStorage.getItem("localToken")를 바탕으로 판별하게 바꾸고
Main/LoginMain을 합친 컴포넌트에서도 로그인이 아닌 로컬스토리지 판별로 바꿔줬다.

마지막으로 login 컴포넌트로 들어가 isLogin 관련 상태값들을 제거하고 마무리했다.(로컬스토리지는 여기서 추가했기 때문에 제거말고 할일이 없다)

회원가입 부분에 유효성검사만 통과하면 alert로 축하메세지를 보냈지만
이제는 서버에서 status 201을 반환한 경우메나 발송하게 변경했고

netlify에서 새로고침이 되지 않는 문제도 _redirects파일에 /* /index.html 200을 넣어 public 폴더에 넣은 다음 빌드하니 정상처리되어 아무 곳에서나 새로고침을 해도 정상작동했다.

추가적으로 console.log는 다 처리헀지만 주석으로 남겨둔 이전 처리과정들이 많기 때문에
전체 주석 제거작업을 진행했다.

진행 도중 Addfood에서 className={"tag" + (tag === "육류" + " " ? "tagNow" : "")}방식으로 처리해 unexpected concat? 과 같은 경고창이 우르르 쏟아졌는데 중간에 " "를 제거하고 tagNow 앞부분에 공백 한칸을 추가하는 방향으로 변경했다.

Find에서는 비밀번호 처리를 프론트에서 하면 문제가 생길 수 있다고 백엔드에서 해야 한다는 조언만 듣고 백엔드에서 진행되지 않아 사장된 페이지였다. 주석들은 나중에 처리해야 할 내용들이 있기 때문에 지우기 아쉬웠고 작동하지 않는 함수에는 alert로 기능미구현이 출력되게만 수정해줬다.

Fooddetail 부분의 필요없는 데이터를 지우던 중
@현재 위치의 데이터를 상태값으로 받아 실시간으로 수정해야 하는 부분은 컨트롤하기가 애매했다. 아래와 같은 처리를 했는데 왜 ...으로 구조분해 할당을 진행한 다음 filter를 했는지 이해가 되지 않는 상태인데 서버가 없기 때문에 구조분해 할당을 지워되 되는지 확신이 없어 대안을 주석처리해 추가한 다음 넘어갔다.
  const [here, SetHere] = useState(
    ...data.filter((el) => el.id === Number(id))
  );

이미지 파일은 alt가 필요하다는 경고창을 보고 뿌려줄 이미지들과 대표 이미지에 alt로 설명문구를 넣어주니 경고가 사라졌다.

총 20여개의 컴포넌트를 전부 처리하며 주석제거 및 state 최적화와 순서 오류, 경고메세지 제거 등의 작업과 netlify 새로고침 redirect까지 마쳤다.

수정된 내용들

CT(1).백준 3009 네 번째 점은 세 점을 가지고 직사각형의 나머지 점의 위치를 찾는 문제로 x,y축 좌표 중 2개는 일치하고 하나만 다른 점을 찾아 'x y'의 형태로 표기하면 된다.

let input = `5 5
5 7
7 5`.split('\n')

let arrA = []
let arrB = []
let result = []
for(let i = 0 ; i < 3 ; i++){
    let [a,b] = input[i].split(' ').map(Number)
    arrA.push(a)
    arrB.push(b)
}
arrA.sort()
arrB.sort()

if(arrA[1] === arrA[0]){
    result.push(arrA[2])   
}
else{
    result.push(arrA[0])
}
if(arrB[1] === arrB[0]){
    result.push(arrB[2])   
}
else{
    result.push(arrB[0])   
}

console.log(result.join(' '))