[Pre-Project 개발일지]-9

오늘도 사람들이 오지 않고 있긴 하지만 디스코드 초록불인걸 보면
어딘가에서 열심히 하고 계시지 않을까 생각한다.
모이는 시간적의 규칙을 굳이 정할 필요가 없었지 않을까 생각하지만
어제 나도 회의시간에 지각을 했기 때문에 이 부분에 대해서 뭐라고 하긴 그렇다.

회원가입이 과연 처리되지는 미지수지만 회원가입 페이지를 마무리하기 위해 작업을 시작했다.
로그인 부분의 링크 처리를 하는데 밑줄이 마음에 걸려 Link태그를 기준으로 css를 수정했으나 text-decoration, text-decoration-line 등의 기능들이 통하지 않았다. 어떤 이상한 곳에서는 textDectoration:none이라고 주장하기도 하고 문제점을 찾다 보니 Link 태그는 사실 a태그로 처리되어 css도 a태그의 css를 따라간다는 것을 알게 되어 styled components에서 a{text-decoration: none;}으로 처리했다.

input 부분에 value를 하나씩 따서 처리하려고 했는데 onChange로 값이 넘어오지 않아 알아보다가 form으로 감싸져 있는 경우 onSubmit을 통해 내부 값들을 객체들이 포함된 배열 형태로 받아올 수 있고 그 배열을 다시 뜯어 사용할 수 있어 event.target[0] , [1], [2]의 형태로 id, password, email을 받아올 수 있었다. useState를 사용할 필요가 없는 방식인데 이전에는 useState와 event.target.value를 사용했었기 때문에 ????? 지금 작성하는 도중 생갔났는데 value를 지정해서 state값을 넣어줘야만 value를 받아올 수 있고 event.target.content(?)같은 기능을 사용했어햐 하지 않나 싶다. textcontent? 이미 지난 일이기 때문에 굳이 다시 시도해보지는 않고 넘어간다.

아직 서버 DB에(?) 기능이 추가되지 않은 상태라 fetch로 post하는 부분까지는 구현했지만
실제로 올라가는지 확인을 할 수는 없는 상황이다.
status 201을 반환받은 경우 로그인페이지로 가야할지 로그인을 시켜줘야 할지 논의되지 않아
이 부분에 대해서는 나중에 논의가 필요하다(화요일까지 배포 마감인데...ㅠ)

유효성검사로 아이디와 비밀번호를 체크해준 후 두가지 중 하나라도 통과하지 않는 경우 
에러메세지를 저장시킨 후 콘솔에 찍어주고 (이부분은 alert으로 알려주거나 modal창을 띄우거나 해야 할 것 같은데 일단 보류) 모두 통과할 경우 post를 보내게 하고 post의 결과로 status 201이 오면 login page로 이동하게 만들었다.
주소를 변경하는 부분에서 조금 당황했는데 window.location.href ="주소값"으로 처리했다.

 

추가부분
해야 할 부분에 대한 issue 관리하기
토큰(jwt) 로그인유지 
페이지네이션
non-login header 부분에서 login / signup page로 이동이 가능하게 만들기
빌드에 대한 학습
유효성검사에서 통과하지 못한 경우 알림 만들기
시간이 남으면 footer도 하긴 해야겠다.. 우리만 없어





CT(1).회의실 배정이라는 문제는 새로운 포인트를 알게 해줬는데 const로 설정한 문제를 다시 수정하려고 하면 typeError가 나온다는 점이었다.
너무 당연해서 신경쓰지 않고 있었는데 내가 직접 문제를 풀 때는 let을 사용하고 위에 입력값을 받아오는 부분은 항상 쓰던 default값인 const라 착각했던 것 같다.


CT(2).곱셈이라는 문제는 예전에 BigInt로 처리하려고 하다가 실패했던 문제인데 지금 보니 피보나치 행렬로 해결했던 분할정복 거듭제곱 문제와 같은 원리였다.

a의 b제곱을 c로 나눈 것이므로 각각의 연선에 c로 나누는 작용을 하며
재귀를 이용해 계속해서 나누는 느낌으로 해결했다. 코드는 아래와 같다.
(조건상 20억이 넘는 수치가 들어갈 수 있으므로 곱하기가 들어간 후 나누기에는 불안정해 BigInt를 사용했다)

let [a,b,c] = [10n,11n,12n]

function recurtion(a,n) {
    if(n === 1n){
        return a
    }

    if(n%2n === 0n){
        return recurtion((a*a)%c,n/2n)
    }
    else{
        return a * recurtion((a*a)%c,(n-1n)/2n)
    }
}

console.log(String(recurtion(a,b)%c))

 

 

CT(3).이번 문제도 이전에 틀렸던 문제인데 기존에 작업할 때는 중복값을 set을 통해 해결했으나 이번에는 push 전 indexOf를 통해 체크한 후 push해줬다. 이걸로는 해결이 되지 않았는데 조건내에 처리할 작업의 숫자가 16777216개였다.
기존에는 재귀를 처리할 때 이전에 처리한 idx와 같은 숫자는 처리하지 않았지만
같은 자릿수에 같은 숫자를 넣고 돌리는 것은 의미가 없기 때문에 a === i의 조건을 arrs[a] === arrs[i]로 조건을 변경했다.
문제는 6가지 숫자의 6줄의 조합을 1,2,3,4,5,6으로 돌렸을 때 18750개가 나온다.
이 많은 출력값들이 다 들어가면 느릴 수 밖에 없는데 한도는 8가지 숫자의 8가지 조합이기 때문에 수정한 값도 처리되지 않을 것 같다.

또한 저렇게 변경하니 이전과 같은 숫자가 들어갈 경우 idx가 다른 경우에는 처리되지 않는 문제가 생겼다..

일단 아래 코드와 같이 수정을 거듭한 결과 제대로 처리는 된다.

function recul(n,a,str) {
    if(n === 0){
        if(result.indexOf(str.trim()) === -1){
        result.push(str.trim())       
        }
        return
    }    
    let count = 0
    for(let i = 0 ; i < nums[0] ; i++){
        if(a === i){
            continue
        }
        else if(count === 1 &&arrs[a] === arrs[i]){
                continue
            }
        else{
        recul(n-1,i,`${str} ${arrs[i]}`)
            if(arrs[a] === arrs[i]){
                count = 1
            }
        }
        
    }

하지만 아직도 시간초과는 해결되지 않았는데 이 많은 결과값을 다 출력하는게 정상적인 문제인지도 의아하다..
그리고 위에서 한 내용을 복잡한 내용으로 비교하니 다른 값이 들어가는 문제가 발생했다.
다시 리팩토링을 해야 할 것 같다..
이번에는 배열을 내부에 넣어준 후 그 idx값이 사용되었는지를 확인하고 중복을 제거하는 방식으로 시도해봐야겠다.

위에서 추가했던 배열 내부에 중복이 있는지 확인하는 체크를 제거한 후 new Set()을 다시 사용해봤다. 훨씬 빨진 것 같아 제출하니 드디어 통과다!
생각해보면 배열을 조회하는 것을 4만여번 진행하니 16억번의 계산을 해야 하는 것이었다..

최종적인 코드는 아래와 같다.

let input = `8 8
1 2 3 4 5 6 7 8`.split('\n')

let nums = input[0].split(' ').map(Number)
let arrs = input[1].split(' ').map(Number).sort((a,b) => a-b)
let result = []

function recul(n,a,str) {
    if(n === 0){
        // if(result.indexOf(str.trim()) === -1){
        result.push(str.trim())       
        // }
        return
    }   
    
    for(let i = 0 ; i < nums[0] ; i++){
        if(a.indexOf(i) !== -1){
            continue
        }
        else{
        recul(n-1,[...a , i],`${str} ${arrs[i]}`)
        }
    }
}
recul(nums[1] , [] , '')
result = [...new Set(result)]
// console.log(result.length)


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

이겼고 잘 싸웠다!..

CT(3).class4 문제에서 몇개 남지 않은 실버들이 거슬려 처리하려고 했는데
분명 특이한 접근방식이지만 답은 나올 수 밖에 없는데 60퍼센트쯤에서 오답이 나왔다.
하지만 이제 백준과 js의 더러움에 충분히 적응했기 때문에 이건 내 코드의 문제가 아닌 숫자의 한도 때문임을 의심했고 BigInt로 모든 계산식을 수정하자 정답으로 처리되었다.
이번에는 조건 자체가 10억 이하임을 명시했기 때문에 BigInt를 사용하지 않아도 될줄 알았는데 조금은 의아했다.
해결 코드는 아래와 같다.

let input = `100 40021`.split(' ').map(BigInt)
let dp = {}

function recurtion (a,n) {
    if(n === 30n){
        return
    }

    if(a<1000000000n){
        dp[(a*10n) + 1n] = n
        dp[a*2n] = n
        recurtion((a*10n) + 1n , n+1)
        recurtion(a*2n , n+1)
    }
}
recurtion(input[0],2)

if(dp[input[1]] === undefined){
    console.log(-1)    
}
else{
    console.log(dp[input[1]])
}

CT(4).스니펫을 보던 도중 왜 못풀었는지 답답해하던 문제들이 보여 자꾸 손이 가는데
이번 문제도 input을 제대로 받아오지 못한 문제였다.
input은 5줄이지만 사실 맨 위에 값 하나만 이용하면 풀 수 있는 문제였기 때문에
input = 15라는 식으로 문제를 푼 후 자연스럽게 input = Number(xxxx)로 처리해버렸다.
사실은 5줄이기 때문에 let input = Number(xxxx.split('\n')[0])와 같은 형식으로 처리해야했다.
그 당시에 처리가 되는데 안된다는 답답함이 진심임은 알고 있지만 입력같은 기초적인 부분을 놓쳤다는 사실은 조금 아쉽다.