[Main-Project 개발일지]-22

오늘은 시작부터 오후 멘토링을 대비해 프론트엔드 작업물을 보여주기 위한 합체 작업 및 링크 관리(거의 최종) 및 상태, 이미지깨짐, state관리 등에 대해 수정하며 비교했다.
루트는 무난하게 관리할 수 있었고 login state는 useState를 사용해 관리했는데 새로고침을 하면 날아가는 문제가 있기 때문에 오후 백엔드분들과 합의 후 로컬스토리지 사용여부를 결정해야 할 것 같다.

size를 보던 중 overflow를 사용해도 이미지가 초과로 늘어져 좌우 이동 슬라이더가 나오는 문제가 있었는데 header를 조금 만져보다가 이미지 부분의 사이즈를 100vw에서 100%로 바꾼 다음 문제가 사라졌다. 100vw는 아무래도 정확하게 100%와는 다른 것 같다.

mainsum이라는 컴포넌트를 대충 만들어서 main페이지 두개를 합쳐놨고 (로그인 메인, 비로그인 메인) isLogin이라는 state를 통해 삼항연산자로 번갈아가며 출력될 수 있게 관리하고 /경로(메인)로 정리해줬다.

리액트쿼리의 장점에 대해서 설명해주시고
상태관리등에 대해 말씀해주셨다
실시간으로 상태 변경 추가(메모장, 재료 추가 등)과
로딩관리 그리고 중간중간 재 요청의 기능이 있다는 부분이 강조됐다.

그리고 로그인 상태관리에 대해서도 
액세스 토큰, 리프레시 토큰을 동시에 준다면 json형태로 body에 담아서 줄 수 있는데
헤더에서도 읽어지면 헤더를 그냥 써도 큰 상관은(엑세스 토큰만 쓰면)없을 것 같기도 하고
엑세스 server->client ->(server에 전달(요청시))
헤더에 추가하거나 쿠키를 사용해서 보내는데

새로고침을 해도 유지되려면 로컬스토리지에 담은 다음 있으면 담아서 요청하고
secure cookie를 사용하는 것도 보안을 위한 한 방법이고
헤더를 쓰지 않고 secure cookie를 사용해 토큰을 전송하는 것도 방법인데
백엔드 구성으로는 이건 어렵고

로그인->로컬스토리지 -> 요청시 로컬스토리지 검사 후 토큰이 있으면 헤더에 담아 보내고 없으면 로그인이 없다는 처리

리프레시 토큰도 적용하지 않으면 30분마다 재로그인을 해야 하기 때문에
api토큰이 유효할 때 마다 30분 연장하는 방법 또는 리프레스 토큰 두가지 방법인데
리프레시 토큰은 보통 액세스 요청 -> 시간만료(리프레시토큰 보유) -> 클라이언트에서 서버로 새로운 액세스 토큰 요청 -> 서버에서 액세스 토큰 발급 -> 클라이언트에서 액세스 토큰을 담아서 요청 -> 처리의 순서라고 알려주셨다.

오버패칭 언더패칭에 대한 고려 또한 중요한데 아래의 두가지를 통해 어떻게 해결할 수 있고
react-query , react swr 
이 부분은 bff개념으로 rest api가 쓰기 힘들면 프론트엔드에서 쓰기 좋게 응답을 바꿔주는 개념(당근마켓 원지혁님  feconf 확인해보기)이라고 하는데 클라이언트측에서 조금 더 입맛에 맞게 가공하는 방식인 것 같다.

면접을 대비한다면 불편한 부분을 계속 개선 가능한지 고민해보는게 도움이 된다고도 하셨고

깜빡이는 화면을 대신해서 더미데이터를 넣는 것 보다는
로딩화면을 구성하거나 스켈레톤등을 추가해 주는 것이 실제로는 더 보기 좋다고 하셨다.

suspense를 사용하지 않고 있는데
로딩중일 때 suspense를 사용해서 처리를 하는 편도 추천해주셨고

중요한 것은 말한걸 다 해본다기보다는
이런게 있다는 것을 알고 있지만 고려 후 사용하지 않았다의 차이가 있기 때문에
대안들에 대해서 학습해서 답변할 수 있게 하는 것이 좋다고 정리해주셨다.

styled components의 사용에서 현재는 css처럼 사용하고 있는데 이 부분이 괜찮은지에 대해 질문드리자 styled components를 사용할 떄 재사용성도 중요하지만
유지보수나 가독성도 중요한데  styled components와 react를 사용한다면
목적이 없는 div를 여러개 사용하기보다는 별도의 컴포넌트화 시켜서 사용하는게
조금 더 좋은 방법일 수 있다는 조언도 해주셨고
div가 너무 복잡한 경우에는 layout 디자인 설계가 잘못되었을 수 있는지 생각해봐야한다는 말씀도 해주셨다.

SEO 등과 aria label등의 접근성을 챙기면 좋지만 아직 이런 소규모 프로젝트인 경우
완성도와 SEO를 동시에 챙기기는 어려울 수 있으니 완성부터 하고 챙기기를 추천해주셨다.
(처음부터 챙긴게 아니다보니?)

styled components가 너무 유연하기 때문에 초보자들의 입장?에서는 
어떤게 anti-patten인지 모를 수 있는데 차라리 tailwinds css(css를 조건을 가해서 사용하기 때문에 정확?)를 써보는 것도 좋다는 의견도 제시해주셨고

지금은 컴포넌트 안쪽에 하나의 컴포넌트로 구성되어있지만
세분화해서 나눌 수 있는데 coponent와 css 사용법에 대한 고민이 필요하다고 하셨다.
(예를 들자면 기능별로 세부 컴포넌트를 쪼개서 넣어준다던지)

멘토링이 종료된 후 백엔드분들과 서버 테스트를 진행했는데
초반에 아래와 같은 문제점들이 발견되었고
1.(프론트) 로그인 유지가 안되게 새로고침처럼 페이지이동하고 있는데 spa이동방식 찾기
2.(백엔드) header가 오지 않고 있음
3.(백엔드) password가 넘어오고 nickname은 넘어오지 않고 있음
3.fooddetail 수정,냉장고변경
4.메모장이 안되고 있음
5.api도 해야한다.

도중 2번은 해결되었고 3번은 수정이 필요하며 중복된 3번은 사실 더 내용들이 있는데 2시간이상 작업하며 전반적으로 수정을 마쳐 서버와 연동을 끝내고 실시간으로 데이터를 주고받을 수 있게 했기 때문에 저 부분만 남은 상태였다.
메모장 및 api도 백엔드분들이 해주실 부분이기 때문에 내일 만나서 정리하는 부분만 마치고
server담당하셔서 오늘은 참여하지 않으셨던 백엔드분이 https로 업그레이드만 하신다면 현재까지는 cors오류가 없기 때문에 mix오류도 https로 해결해서 클린한 배포상태가 될 수 있을 것 같다.


내일 해야 할 일은
1.냉장고 재료추가등의 버튼이 하단으로 가지 않은 상태인데 수정요청
2.프로필, 아이디/비밀번호 찾기(미사용 예정)인 부분들의 css 수정여부 고려
3.route 교통정리를 완료했으니 미사용 route 수정이 필요하다(main, loginmain 등)
4.백엔드분들과 실시간으로 재료 modify등 마무리작업 해주기
5.서버 유지시켜달라고 요청한 후 로컬스토리지에 적용해보기
6.리액트 쿼리에 대해 진지하게 고려해보는 시간 30분이상 가지기(axios처럼 겁먹고 시도를 안한 느낌이 강하다)



CT(1).욱제는 사과팬이야!!라는 문제는 조금 까다로운 매지컬 구사과의 순간이동 경로 가짓수 구하는 문제였다. 설명이 조금은 불친절했지만 예시 문제를 역산하면 도착지에 스폰될 가능성도 있다는 점만 주의하면 크게 어렵지 않았다.
E, S, B, X로 우측, 하단, 우측or하단, 도착지 4가지의 문자가 존재하며
엄청나게 감사하게도 순간이동의 규칙상 외곽으로 갈 수 있는 선택지 자체를 주지 않는다는 조건 덕분에 간단하게 dp +=으로 해결할 수 있다고 생각하고 작성하였으나
+=으로 할 경우 나머지처리를 할 수 없기 때문에 다시 전체 수정을 통해 나머지처리를 한 후 제출했다.

let input = `3 3
EES
EES
EEX`.split('\n') //NxM 정해지지 않은 배열( 1 <= (N,M) <= 3000 )

let direction = input.slice(1) //배열만 가져와 편하게 비교하기
let dp = [] //dp용 빈배열 선언 후 아래에서 채우기
for(let i = 0 ; i < direction.length ; i++){
    dp.push(new Array(direction[0].length).fill(1)) //nxm배열 형식으로 1 채우기(어디서든 나타나서 이동 가능)
}

for(let i = 0 ; i < direction.length ; i++){
    for(let j = 0 ; j < direction[0].length ; j++){
        if(direction[i][j] === 'B'){ //B면 우측, 하단에 현재 경로 가짓수 더해주기
            dp[i][j+1] = (dp[i][j+1] + dp[i][j])%1000000009
            dp[i+1][j] = (dp[i+1][j] + dp[i][j])%1000000009
        }
        else if(direction[i][j] === 'S'){ //S면 하단에만 더해주기
            dp[i+1][j] = (dp[i+1][j] + dp[i][j])%1000000009
        }
        else if(direction[i][j] === 'E'){//E인 경우 우측에 더해주기
            dp[i][j+1] = (dp[i][j+1] + dp[i][j])%1000000009
        }
    }
}
console.log(dp[direction.length-1][direction[0].length-1]) //목적지(우측 최하단) 출력