[Pre-Project 개발일지]-5

오늘은 전반적인 프론트엔드 통합을 하기로 했는데
라우터를 프론트팀원분이 만드셔서 거기로 통합해주시기로 했다.
그동안 나는 프론트팀원분이 만드신 임시 제이슨서버를 이용해 crud를 구현하기로 했다.
그런데 생각해보면 crud라고 할게 있나 싶은게 내가 만든 부분은 게시글 읽는 R부분과 회원가입의 C밖에 없는 것 같다.

준호님의 데이터를 받아서 해보려고 헀지만 데이터를 깃에 올려두신게 아니라 셀프로 하신 것 같다. 생각해보면 관련없는 데이터는 맞기 때문에 굳이 깃에 올리지 않는게 맞는 것 같다.
마침 백엔드분도 계셔서 백엔드에서 간단한 json형태로 된 예제를 요청해 받아서 제이슨서버를 시도했다.

서버를 만든 후 map을 뿌렸지만 제대로 작동이 되지 않는 문제가 발생했다.
마침 스터디분들이 모여 있어서 대화해본 결과 시작하자마자 fetch를 받아오긴 하지만 받는 그 짧은 간격에 null값을 map 처리하려고 하다보니 오류가 나버리는 것이었다.
이를 해결해기 위해서는 ispending을 사용해서 roding을 띄우거나 아니면 null 체크를 해서 null이 아닌 경우에만 데이터를 넣는 방식으로 해결해야 했다.
여기서 추가적으로 중요한 것은 삼항연산자 내부에 true를 null로 해버리게 되면 변경이 되지 않아 null로 고정되어버리기 때문에 true는 넣을 데이터로 작성하고 false값에 null이 나올 경우 넣을 데이터를 넣어줘야 했다.


받아올 때 null 값이 먼저 들어오는 오류는 아래와 같은 상황에서 data === null ? (데이터 순서 반대로)를 하게되면 null값이 인식된 후 고쳐지지 않는다.

      {data !== null ? (
        <div className="body-main">
          {data.map(
            (data, idx) =>
              data.title
              // <Question data={data} key={idx} handleClick={handleClick} />
          )}
        </div>
      ) : null}

 

map으로 데이터를 가져올 수 있게 한 뒤 내부 데이터를 정렬하려고 하는데
데이터가 정말 너무 많았다.
일단 대략적으로 작성한 값으로는 출력할 값들이 부족해 대다수는 (조회수, 투표수, 생성일(curd중 r 부분 담당이라 추가가 postman밖에 안됨), 작성자 등)default값으로 사용할 수 밖에 없었다.

중간에 이슈, 프로젝트, 칸반도 정리하고 6시가 넘어 얼추 마무리를 한 뒤
라우터까지 담당하시는 팀원분에게 데이터를 넘겼다.(내 브랜치에 push했다.)

모양은 아직 엉성하지만 fetch를 사용해 구현했기 때문에 실제 데이터도 저렇게 들어온다는 장점이 있다. 내일 라우터가 완료되면 다시 더 다듬을 예정이다.


내일 해야할 예상 작업은
1.맵핑할 데이터들을 정리해 객체형태로 백엔드분들에게 말씀드려서 필요 데이터를 정리
2.회원가입 페이지의 봇 부분에 넣을 이미지? 결정을 마무리 하고  회원가입 페이지 마무리
3.생각해보면 2번의 회원가입해서 넣어줄 id,password,email등의 정보는 현재 객체에 없는데(있다면 기껏해야 작성자 id?) 이 부분은 따로 관리할건지에 대해서도 이야기 해봐야곘다.(아마 그럴듯)
4.맵핑할 데이터들을 정리했으면 그에 맞는 값들로 바꾼 후 css 다듬기
5.중간에 위 작업들을 하기 전 이슈를 미리 만들어 어떤 작업을 할지 알 수 있게 해주기

밤에 연락이 와서 가보니 내용은 잘 수정해서 통합이 되었지만 push를 할 수 없는 상황이 되어버렸다. 아무래도 그냥 파일을 덮어씌웠더니 추가로 올라가지 않는 것 같은데 
1.pull을 새로 받아서 하는 방식도 안되고
2.switch를 사용해 시점을 바꿔서 다시 push를 하려고 해도 변화가 없다고 하고
3.새로 클론을 받아서 파일을 대체시키고 다시 보내려고 해도 보내지지 않고
4.새 브랜치를 만들어도 기존 브랜치 이전데이터가 전송되어버리고
5.메인으로 병합을 시도해봐도 통하지가 않았다.

지금은 내 브런치에도 넣어보려고 시도중이다.
내 브런치에서 데이터를 추가한 뒤 커밋, push, merge까지 모두 정상적으로 된다..
아무래도 팀원분께서 하시던 도중 여러개가 켜져서인지 아니면 다른 문제인건지 충돌이 내부적으로 나서 작동이 안됬던 것 같다.
어찌됐건 문제는 해결됬기 때문에 안심하고 잘 수 있을 것 같다.




CT(1).떡 먹는 호랑이는 a와 b는 1,0 / 0,1 / 1,1 에서부터 피보나치식으로 a,b의 갯수가 늘어나는 것(a,b 순서로)을 이용해 푸는 문제로 해당 피보나치 회차의 a,b갯수를 떡의 갯수에 대입해 a와 b를 구하는 방식이다.
특이하게도 이 문제는 복수정답?을 허용하기 때문에 예제와 정답이 달라서 맞게 했는지 직접 체크를 해봐야 했던 문제다. 해결 코드는 아래와 같다.

let input = `7 218`.split(' ').map(Number)

let day = input[0] //기간
let rc = input[1] //떡 갯수(rice cake)
let dp = [0,0,1,1,2,3,5] //피보나치인데 3일부터 시작이기 때문에 앞 값은 대충 넣었다.(진짜 피보나치가 아니고 피보나치 a,b의 갯수를 구하기 위한 피보나치이기 때문에)

for(let i = 7 ; i<= day; i++){ //더 필요한 경우 필요한 만큼 구하게 for문
    dp[i] = dp[i-1] + dp[i-2]
}

for(let i = 1 ; i <= input[1] ; i++){
    if((rc - (dp[day-1] * i))%dp[day] === 0){ //떡 갯수에서 i만큼 a에 곱해서 차감해보고 b로 나누어 떨어지면 그 값을 아래에서 출력 후 brake로 메모리 낭비를 막는다.
        console.log(`${i}
${(rc - (dp[day-1] * i))/dp[day]}`)
        break
    }
}

 

CT(2).점프 문제는 각 행렬 내부 칸마다 점프할 수 있는 수치가 있고 그 수치만큼만 아래 또은 오른쪽으로 이동할 수 있는 문제로 일반 문제처럼 dp값을 합쳐주면 되는 문제였다.
문제 해결 도중 1,1,1이 합쳐져서 3이 되야 하는데 12가 나와서 순서를 확인해보니
마지막 칸은 input이 0으로 되어있어 점프가 0인 이상한 상황이 되어버렸다.
그렇기 때문에 현재 dp값을 한번 제자리 점프로 올려주고 다시 아래쪽 방향으로도 제자리 점프로 두배 해줘서 3의 4배인 12가 되어버린 것이었다. 
아무리 코드를 잘 짜더라도 마지막 위치의 점프횟수가 0임을 모르고 있다면 풀 수 없는 문제였으므로 자세히 문제를 읽고 좀요 포인트는 수도코드로 기입해두는 습관을 들여야겠다.
하지만 typeError가 떠서 제출이 되지 않는다..

이유는 특이하게도 input을 변경해서 사용했는데 변경 전 다른 값에 할당했다고 하더라도
input이 변경되면 영향이 가는건지 js에서는 문제가 없었지만 백준에서는 문제가 있는건지 그 부분을 고쳐주니 잘 진행이 되었다. 
 
하지만 98%쯤에서 오류가 나서 다시 확인해보니 숫자 제한이 2^63-1보다 작다로 BigInt를 써야했다..

CT(3).극장 좌석문제는 특정 배열형태의 좌석에서 고정된 인원을 제외하고 조합을 하지만
조합 방식은 본인 자리에서 1칸밖에 이동하지 못하기 때문에 피보나치수열의 형태를 띄고 있는 문제였다. 간단하게 각 구간사이의 길이를 dp형태로 만든 피보나치에 대입해 result에 곱해주는 방식으로 풀 수 있었다.