[Main-Project 개발일지]-9

어제 진행했던 회원가입 부분의 정리를 마치고 로그인 부분의 form 및 로그인 유지 버튼과 회원가입/아이디,비밀번호 찾기 안내 링크를 아래 추가해 로그인 부분을 마무리했고
중간에 백엔드에서 다시 또 회원가입/로그인(pre-project)을 시도해달라고 요청해 넣었지만 회원가입은 같은 양식에 post임에도 잘 전송되었지만 로그인은 반송되는 데이터가 없어서 안되는지 뭔지 모르겠다는 말씀을 하셨다.

이제는 주소값이 맞는건지 아니면 뭐가 잘못된건지도 모르겠는데
일반적인 데이터 관리법과 유사하게 관리해도 어떤 차이점이 있을지도 잘 모르겠다.
(게시글은 CRD만 가능한 상태)

메인페이지에서 전체 페이지들의 링크를 route로 나눠준 다음(어제 한 작업)
내부를 하나씩 채우고 있는데 
이제 회원가입/로그인이 된 상태고 아이디,비밀번호 찾기를 만들고 있다.
기능적인 부분 또는 레이아웃만 잡아도 될 것 같지만 또 하다보면 css도 단순하게 잡혀있기 때문에 자꾸 유사하게 만들려고 하다보니 시간이 생각보다는 조금 더 걸리는 것 같다.

프론트엔드 멘토분과 주간 멘토링을 진행했는데
전반적으로 완성할 수 있는 부분에 집중하라는 말씀을 다시 한번 해주셨고
로그인이 되지 않는 부분에 대해서 보다가 프록시를 다시 한번 진행해보라는 말씀을 해주셨다.
http와 https와는 상관없이 서버 뒤에서 작동한다고 하는데 프록시도 알아봐야 할 것 같다.

프론트엔드 작업을 진행하는 중 계속해서 로그인 및 회원가입 요청이 들어왔다.
port자체를 3000번으로 했고 진행하는 것 또한 리액트로 켜서 진행해야 하기 때문에
계속해서 껐다 켰다 하면서 진행했는데 한두번 진행하고 말거라고 생각해서 새로운 포트를 켜지 않았는데 로그인시도를 열번정도 하고나니 머리가 아팠다.

https에 대한 부분이라도 해결한 상태라면 배포한 서버와 소통하라고 할 수 있겠지만 주소도 명확하게 언급이 안됬던 상황이라 프론트엔드의 개입이 필요해서 더 복잡한 것 같다.
정해진 api에 소통해야 하는 부분인데 api가 명확하지 않은건지 체크를 해야 되는 부분은 아쉬웠다.

스터디에서 구글 소셜인증하는 방법에 대해 언급하는 내용이 있었는데
정 진행이 안되면 파이어베이스를 통해서 로그인을 처리해야겠다.

다음주에 진행할 코딩테스트를 준비해야 하는데 생각한 만큼의 프론트엔드 작업 진도를 나가지 못해서 아쉬움이 있다.

오늘 스터디 회의에서 netlify 프록시 우회에 대해 물어보고 아시는 분이 없다면 나중으로 미뤄야겠다.(프론트 작업이 우선일 수 밖에 없는게 로그인은 최종기능단계라고도 볼 수 있고 로그인이 없어도 기능들 테스트 및 구현은 가능하기 때문에)

 

저녁에 백엔드분이 클라이언트를 직접 테스트 할 수 있는 방법을 알려달라고 하셔서

받은 파일에서 npm install, npm start를 하시면 된다고 하고 같이 테스트를 마지막으로 해본 다음 pre-project 클라이언트를 놓아줬다.

할일 -  리디렉션 근본적인 이해 , 프론트엔드 작업 2~3페이지, 카카오 기출 3문제, 이슈관리, 마일스톤, 악시오스로 fetch 변경하기, async에 대한 추가적 이해


CT(1).리그 오브 레전설 (Small)이라는 문제는 조합에 관한 문제의 해결법을 다시 생각해볼 수 있게 만들어준 문제였는데 특정 숫자가 아닌 n이라는 값을 줌으로써 dp[i-n]+dp[i-1]로 가짓수를 구할 수 있다는 접근을 바로 할 수 있게 해줬다. 중간에 %를 괄호를 쓰지 않고 틀려서 철렁했지만 다행히 간단한 실수였고 바로 정답처리가 되었다.

let input = `250 2`.split(' ').map(Number) //입력

//let dp = new Array(input[0]+1).fill(0) //dp 0초기화
//dp[0] = 1 //가짓수이기 때문에 +해주려면 0은 1로 시작해야 한다. 생각해보면 처음부터 모든 경우의 수를 넘어가기 때문에 위에서 dp를 만들지 않고 dp = [1]로 시작했어도 문제가 없을 것 같다. (실제로도 문제가 없으므로 이부분 주석처리)
let dp = [1]

for(let i = 1 ; i <= input[0] ; i++){
    if(i >= input[1]){ //n이 10인 경우 10부터 1x10 1가지, 10 1가지로 2가지가 될 수 있다.
        dp[i] = (dp[i-1] + dp[i-input[1]])%1000000007 
    }
    else{
        dp[i] = dp[i-1]%1000000007
    }
}
console.log(dp[input[0]])

CT(2).성격 유형 검사하기는 간단하게 객체로 8가지 유형을 0점으로 초기화해준 후 for문으로 전체 점수를 기입해준 다음 상충되는 타입을 비교해 왼쪽이 같거나 크면 왼쪽 값을 아니면 오른쪽 값(동점 사전식 출력 조건)을 넣어주는 방식으로 처리했다.


CT(3).키패드 누르기는 조건이 제대로 입력되지 않아서 당황스러웠는데 같은 번호키를 다시 누를거라고 생각하지 못해 아래의 코드에서는 동작하지 않았다.(객체에 같은 번호를 넣어주지 않았기 때문에) 그래서 결국은 객체에 해당하는 번호의 거리를 0으로 추가하고 난 후에야 해결할 수 있었다.

function solution(numbers, hand) {
    let answer = '';
    let obj = {2:{1:1,2:0, 3:1, 4:2, 5:1, 6:2, 7:3, 8:2, 9:3, 0:3, '*':4, '#':4}, 5:{1:2, 2:1 ,3:2 ,4:1 ,5:0, 6:1 , 7:2 , 8:1, 9:2 , 0:2, '*':3 , '#':3 }, 8:{1:3, 2:2, 3:3 ,4:2 , 5:1, 6:2, 7:1 , 8:0, 9:1 , 0:1, '*':2 , '#':2 }, 0:{1:4, 2:3, 3:4 ,4:3 , 5:2, 6:3 , 7:2, 8:1, 9:2 , 0:0, '*':1 , '#':1 }}
    let left = "*"
    let right = "#"
    if(hand === 'left'){
        for(let i = 0 ; i < numbers.length ; i++){
            if(numbers[i] === 1 || numbers[i] === 4 || numbers[i] === 7){
                answer += 'L'
                left = numbers[i]
            }
            else if(numbers[i] === 3 || numbers[i] === 6 || numbers[i] === 9){
                answer += 'R'
                right = numbers[i]
            }
            else if(obj[numbers[i]][left] > obj[numbers[i]][right]){
                answer += 'R'
                right = numbers[i]
            }
            else{
                answer += 'L'
                left = numbers[i]
            }
        }
    }
    else{
        for(let i = 0 ; i < numbers.length ; i++){
            if(numbers[i] === 1 || numbers[i] === 4 || numbers[i] === 7){
                answer += 'L'
                left = numbers[i]
            }
            else if(numbers[i] === 3 || numbers[i] === 6 || numbers[i] === 9){
                answer += 'R'
                right = numbers[i]
            }
            else if(obj[numbers[i]][left] < obj[numbers[i]][right]){
                answer += 'L'
                left = numbers[i]
            }
            else{
                answer += 'R'
                right = numbers[i]
            }
        }
        
    }
    return answer;
}

CT(4).크레인 인형뽑기는 주어지는 이차원배열이 마음에 들지 않기 때문에 새로 이차원배열로 만드는 작업을 해준 다음 해당 배열의 길이가 0이 아닌 경우(0이면 통과) stack의 마지막 값과 비교해 일치하면 answer+2와 pop()을 해주고 아니면 push를 하는 방식으로 진행했다.

function solution(board, moves) {
    var answer = 0;
    let arr = []
    let stack = []
    let now = 0
    for(let i = 0 ; i < board.length ; i++){
        arr.push(new Array())
    }
    for(let i = board.length-1 ; i >= 0 ; i--){
        for(let j = 0 ; j < board.length ; j++){
            if(board[i][j]){
                arr[j].push(board[i][j])
            }
        }
    }
    for(let i = 0 ; i < moves.length ; i++){
        if(arr[moves[i]-1].length){
            let a = arr[moves[i]-1].pop()
            if(stack.length){
                if( a === stack.slice(-1)[0]){
                    stack.pop()
                    answer += 2
                }
                else{
                    stack.push(a)
                }
            }
            else{
                stack.push(a)
            }
        }
    }
    return answer;
}