[Main-Project 개발일지]-24(주말)

모각코에서 동기분이 파이어폭스 for developer 브라우저를 멘토님에게 추천받았다며 권해주셨다.
기능은 크롬의 개발자도구와 살짝 비슷하지만 reduce의 내부 동작순서라던지 특이한 기능들이 많이 있는 것 같고
보이는 화면 또한 조금 더 프로그램 같은 느낌으로 ui가 깔끔한 느낌이었다.

리액트 강의는 wrapper 컴포넌트 방식과 그를 이용한 mapping에 대해 나오는데 mapping 부분은 평범했지만 wrapper부분은 정말로 특이했는데 컴포넌트 내부에서 div태그를 한단계 더 감싸 관리하는게 아닌 상위 컴포넌트를 만든 다음 그 컴포넌트 내부에 기존 컴포넌트를 넣는 다단게?식 컴포넌트 마구잡이 양산 기술이었다.

하지만 기술은 어디에나 사용방법이 있는 것 처럼 route를 내부로 놓은 다음
@@상위 컴포넌트로 wrapping?을 하고 내부에 들어있는 내용들을 props.children으로 사용하는 신기한 모습을 보였다.
이 부분은 신기했기 때문에 강조표시로 @를 넣어뒀다.

form을 이용하는 방식도 처음 보는 내용이었는데
event.target[0].value를 사용하는 방식이 아닌
useRef를 import한 다음 const xxxRef = useRef()라는 방식으로 값을 받아왔다.
기존 방식을 사용하는 것에도 문제는 없지만 이런 방식들을 미리 배웠다면
이런 방식으로 편하게 해결했을 것 같은데 진작 봐두지 않은게 아쉽기도 하고
여러가지 방식을 배울 수 있었기 때문에 좋았던 것 같기도 하다.

리액트 등 js(client)에서 작성한 모든 코드는 볼 수 있기 때문에 데이터베이스와 직접 연결할 수 있다는 사실을 처음 알았다. 
단순히 리액트에서 db에 접근할 수 없다고만 생각하고 서버를 통해야 한다고만 생각했는데 (아직 데이터베이스를 다뤄본 적이 없기 때문에) 데이터베이스에 접근 자체는 가능했다는 부분이 신기했다.

파이어베이스에 데이터베이스와 api가 있어서 데이터베이스에 저장할 수 있다고 하는데
데이터베이스와 파이어베이스가 별개라고 생각했는데 데이터베이스와 서버가 하나로 결합된 느낌으로 데이터베이스의 주소로 보내면 중간에 파이어베이스가 받아서 전달해 걸쳐진 느낌이 되는 것 같다.

fetch를 사용할 때 async, await를 사용한다는 점을 다시 상기시켜줬지만
이 부분에 대해 잊고 있었던 가장 큰 이유는 컴포넌트 함수가 프로미스를 반환하게 되어 더이상 리액트 컴포넌트라고 할 수 없게 되어버린다는 단점 때문인 것 같다.

history.replace('/')로 메인으로 이동하는 방법도 볼 수 있었다.
다만 이 이동방식이 새로고침처럼 데이터를 날려버리는 느낌으로 깜빡이는 모습을 볼 수 있었는데 만약 그렇다면 다른 이동방식과 차별화가 없고 import history또한 해야 하기 때문에 매력적이지는 못한 이동방식인 것 같다.

fetch를 사용할 때 데이터 처리가 이상한 이유는 .json()도 프로미스를 반환하기 때문인데
.then을 새로 작성하는 방식으로 해결할 수 밖에 없는 것 같다.

로딩 중일 때 스켈레톤페이지 또는 로딩스피너를 사용하는게 정석이며 
지금 프로젝트에서 사용한 null값 방지용 더미데이터를 state에 미리 배정하는 것은 
좋지 못한 방식이라는 사실을 다시 한번 확인할 수 있었다.

 

내일은 리액트 전체순회부분을 마무리하고 redux나 react-query부분에 대해 더 조사하는 방향으로 가야 할 것 같고

알고리즘도 점점 정답이 아닌 부분까지만 맞추게 되는 경향이 있는데 기본 알고리즘 강의에서 약한 부분을 보충해야 할 것 같다.


CT(1).선수과목은 특정 과목을 들을 수 있는 시기를 파악하는 문제로 프로그래머스의 스킬트리와 조금은 유사하지만 여기는 각 과목당 가능한 순서를 나타내고 그 문제는 해당 과목의 순서를 들을 수 있는지 여부를 판단하는 문제로 조금은 다른 것 같다.

let input = `6 4
1 2
1 3
2 5
4 5`.split('\n')
for(let i = 0 ; i < input.length ; i++){//input number type 만들기
    input[i] = input[i].split(' ').map(Number)
}

let obj = {} // 1학기에 들을 수 없는 과목 리스트 정리
let queue = [] //정리된 과목 queue로 이동 후 while에서 처리예정
let nums = new Array(input[0][0]+1).fill(0) //각 과목당 들을 수 있는 최저학기
for(let i = 1 ; i < input.length; i++){ // 들을 수 없는 경우 추가
    let [a,b] = input[i]
    if(obj[b]){
        obj[b].push(a)
    }
    else{
        obj[b] = [a]
    }
}

for(let i = 1 ; i <= input[0][0] ; i++){//obj -> queue로 옮기기 지금 보면 key in obj도 괜찮았을 것 같다.
    if(obj[i]){
        queue.push(i)
    }
    else{
        nums[i] = 1
    }
}
while(queue.length){ // 해당 queue에 들어있는 마지막(pop 사용 위해)부터 체크한 후 해당 필요 번호의 nums index위치가 0이 아니라면 그중 가장 큰 값+1 처리
    let last = queue.length-1
    let need = []
    for(let i = 0 ; i < obj[queue[last]].length ; i++){
        need.push(nums[obj[queue[last]][i]])
    }
    if(need.indexOf(0) === -1){ 
        nums[queue[last]] = Math.max(...need)+1
        queue.pop()   
    }
    else{ //만약 0이 포함되어 있다면 순번을 제일 뒤(맨앞)로 넘기기(pop->unshift)
        queue.unshift(queue.pop())
    }
}
console.log(nums.slice(1).join(' ')) //0은 편의를 위해 넣은 부분이니 제거 후 출력