[Pre-Project 개발일지]-4(주말)

어제 진행하던 css 수정을 조금 더 진행하기로 하고 작업을 시작했다.

전반적으로 복잡했지만 css에서 제일 이해가 안됬던 부분은 svg중 어떤 것은 복사가 되고
어떤 것은 복사가 되지 않는 것 이었다.
화살표가 위아래로 되어있는 이미지는 두개라서 안되는건가? 라고 생각했지만
자세히 보면 위 아래에 있는 이미지들도 두개의 이미지가 겹쳐서 만들어진 하나의 이미지였다.

fill을 통해 색을 변경하던 도중 어떻게 해도 변경이 되지 않아 이런저런 시도를 해봤는데
결론적으로는 path 내부에 fill로 색감이 정해져 있었다.
이런식이면 내부에 fill로 색을 줘서 굳이 클래스명을 남발하지 않아도 됬을건데
이제서야 이걸 발견한게 아쉽다.

글자가 svg파일과 함께 있을 경우 정렬이 잘 되지 않아 div, span을 써보고 flex와 align-times:center도 해보고 text-align도 해보고 여러가지 시도를 해봤지만 하나도 통하지 않았다.
심지어 텍스트를 감싼 후 margin과 padding값을 변경해도 움직이지 않아 당황하던 중 검색을 통해 vertical-align이라는 방법을 찾아내 해결할 수 있었다.
css는 거의 학습이 정규시간 외에 투자하지 않아서 그런지 부족한 면이 많지만
하나씩 시도할수록 여러가지 기능을 배우게 되어 조금씩 재미가 붙는 것 같다.
(알고리즘만은 못하지만..)

회원가입페이지를 얼추 하던 중 2시 30분이 된걸 보고 
내일도 팀원분이 언제 소통이 필요하실지 모르기 때문에 일단 마무리하고 자기로 한다.

내일 진행해야 될 부분은 혹시 제이슨서버나 서버가 열렸다면 서버에서 받은 데이터를 뿌려보는 것과 기능추가가 있겠다.

우측 봇 이미지는 아직 결정이 되지 않아 그 근처부분을 아직 손대지 못하고 있다.

CT(1).Object.keys(obj)[j]를 이용해서 문제에 접근한 것 까지는 좋았지만 저 값은 key이기 때문에 사실은 obj[Object.keys(obj)[j]]로 써야 하는 것이었다.
console.log()를 다섯차례 이상 사용하고 나서야 어디에서 문제가 생긴 것인지를 발견할 수 있었는데 dp를 객체에 처음 저장해서 작업하다보니 일어난 문제였다.

하지만 제대로 정답이 출력됨에도 불구하고 82%정도에서 오류가 났는데 원인은 정확하게 파악할 수 없었다. 이론적으로는 맞지만 동작이 문제인 것인지 정확하게 파악할 수 없었고 이 해결책을 더이상 손대기 어려울 정도로 복잡해져 버려서 다시 문제 조건을 파악해보니 일반적 dp로도 해결할 수 있음을 발견했다..
실버2에서 지나치게 복잡한 해결책을 도입했는데 js의 불안정성으로 82%에서 멈춘게 아닌가 생각된다. 2~3시간이나 한문제에 소비해버렸는데 객체를 dp로 다루는 법에 대해 학습할 수 있어서 좋은 경험이었던 것 같다. 아래는 객체 시도 코드와 해결 코드를 비교한 내용이다.

let input = `6
10 40 80
30 60 60
50 80 70
70 100 100
90 120 40
110 140 50`.split('\n')

let num = Number(input[0])
let arr = []
for(let i = 1 ; i <= num ; i++){ //객체에 넣어주기 위한 배열 정
    input[i] = input[i].split(' ').map(Number)
    let [a,b] = input[i]
    arr.push(a)
    arr.push(b)
}
arr.sort((a,b) => a-b) //배열 순서 정리
arr.unshift(0) //0번째 순서를 위해 배열에 0 unshift

let obj = {} //객체생
for(let i = 0 ; i < arr.length ; i++){
    obj[arr[i]] = 0 //객체에 키값을 arr에서 받아오고 내용물은 0으로 초기화(dp화)
}
for(let i = 1 ; i < input.length ; i++){
    let [a,b,c] = input[i] //input 내부값 3가지를 받아오기
    for(let j = 1 ; j < Object.keys(obj).length ; j++){ // 키 갯수로 1~갯수-1까지(0이 있으므로) 순회
        if(Number(Object.keys(obj)[j]) === b){ //현재값이 b(종료일)인 경우
            obj[Object.keys(obj)[j]] = Math.max(obj[Object.keys(obj)[j-1]] , obj[a] + input[i][2]) //종료일에 해당하는 날짜의 시작일 참가인원 + 회의참가인원과 종료일 전날의 참가인원을 비교
        }
        else{
            obj[Object.keys(obj)[j]] = Math.max(obj[Object.keys(obj)[j]] , obj[Object.keys(obj)[j-1]]) //맥스값을 계속 비교해 추가되지 않더라도 전날의 값을 넘겨주기(dp처리방식)
        }
    }  
}
console.log(obj[arr[arr.length-1]]) //마지막 값 가져오기

//-------------------아래는 정답처리된 간단한 dp----------------------
let input = `6
10 40 80
30 60 60
50 80 70
70 100 100
90 120 40
110 140 50`.split('\n')

let num = Number(input[0])
for(let i = 1 ; i <= num ; i++){
    input[i] = input[i].split(' ').map(Number)  //input 배열 내부값 숫자들로 변경
}
let dp = new Array(num+1).fill(0) // dp생성
dp[1] = input[1][2] //dp는 -2까지 가게 되므로 첫번째 값과 0번째(0입력되있음)값 설정

for(let i = 2 ; i <= num ; i++){
    let [a,b,c] = input[i]
    dp[i] = Math.max(dp[i-2] + input[i][2] , dp[i-1]) // 바로 전값 또는 2칸전의 값 + 추가될 회의인원 비교 후 큰값 넣어주기
    
}
console.log(dp[num]) //최종값 출력

CT(2).동물원은 사실상 타일 문제와 유사한데 규칙성이 중요한 문제였다.
세로로 nx2의 배열 내부에 직접적으로 마주하지 않게 사자를 배치하는 문제인데
일정한 패턴에 의해 2(n-1) + (n-2)의 dp만 출력해주면 되는 문제였다.


CT(3).그나마 쉽다고 해서 돌게임, 선분교차, 빙고 3가지 플래티넘~다이아 문제를 확인했지만 역시 등급이 등급인만큼 쉽지 않았다.. 플래티넘 중 최약체라는 소문을 듣고 오늘 풀어야지 하고 생각했다 도전한건데 2시간가량 3문제를 맛만 보며 이상한 것들만 배우고 끝나버렸다. 특히 돌게임은 거의 다 접근했는데 이상하게 정답이 나오지 않아서 포기한 상황이다..