컨플릭트를두려워하지말자

https://emotion.sh/docs/typescript

이모션 공식 문서대로 

tsconfig.json 파일 안에 

{
.
.
.
.

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"
}

이 부분을 추가하자!

css-in-js 스타일 라이브러리중에 emotion이 코드도 깔끔하고 수정이 쉬워서 자주 사용중인데

프로젝트에 typescript를 도입하니 여기저기 에러가 튀어나온다 ...

번들러랑 바벨 다루는게 더 익숙해져야겠지 ~.~ 

npm run start  또는 

yarn start 등을 사용해 리액트 프로젝트를 실행했을 때,

react-scripts 관련 오류가 발생할 때가 있다. 

보통은 npm install --save react-scripts 또는

yarn add react-scripts를 입력해 설치하면 문제가 해결되지만 

typescript를 사용하는 경우엔 위의 방법으로 해결이 안되는 경우가 있다. 

그럴땐 우선 package.json 파일 안의 dependencies를 살펴보자 

  "dependencies": {
        .
        .
        .
        .
        .
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.24.0",
    "react-scripts": "5.0.0",
    "typescript": "^5.5.3",
    }

나처럼 react-scripts가 5버전 이상인 경우에는

typesciprt가 4버전까지 지원이 된다. 

(2024.7 기준. 이후 버전에는 달라질 수도 있음)

나의 경우엔 "typescript" :  5.5.3 버전이 설치되어 있었는데 

저 부분을 ^4.9.5로 수정한 후 다시 실행했더니

정상적으로 로컬호스트가 실행되었다! 

https://school.programmers.co.kr/learn/courses/30/lessons/176963

function solution(name, yearning, photo) {
    const map = new Map();
    for(let i=0;i<name.length;i++){
        map.set(name[i],yearning[i]);
    }

    var answer = [];
    for(let pdx in photo){
        let sum = 0;
        for(let idx in photo[pdx]){
            if(map.get(photo[pdx][idx]))
                sum+= map.get(photo[pdx][idx]);
        }
        answer.push(sum);
    }
    return answer;
}

해시 사용하니까 너무쉽다 하면서 풀었는데 

다른사람의 풀이 보니까 더 멋지게 푼 분이 있더라 허걱 ;;;

return photo.map((v)=> v.reduce((a, c)=> a += yearning[name.indexOf(c)] ?? 0, 0))

이렇게 푸셨음 헐 ......

https://school.programmers.co.kr/learn/courses/30/lessons/176963/solution_groups?language=javascript&type=all

아직 reduce 쓰는게 어색해서 잘 안 쓰게되는 것 같다 공부가 부족해서 그런거겠지!! 

예제 보면서 공부 하자잣 

https://school.programmers.co.kr/learn/courses/30/lessons/12946#qna

학생때 풀었던 문제죠? 

근데 기억안나서 게시판에서 해설 보고 이해했다...재귀 공부 하자 .. 

function solution(n) {
 
    var answer = [];
    
    function hanoi(n,start,end,mid){
        if(n==1){
            answer.push([start,end]);
            return;
        }
        else{
            hanoi(n-1,start,mid,end);
            answer.push([start,end]);
            hanoi(n-1,mid,end,start);
        }
    }
    hanoi(n,1,3,2);
    return answer;
}

예제에서나오는 원반이 2개 있을때

작은 원반을 중간으로, 큰원반을 끝으로 보낸 다음, 다시 작은 원반을 끝으로 보내는 과정을

예로 들어 설명하면, 

1. hanoi(n-1,start,mid,end) = hanoi(1,1,2,3)

> n==1 이므로 [1,2] push 후 return

2.answer.push([start,end])  

>처음의 hanoi(n,1,3,2)에서 start end인 [1,3] push

3.hanoi(n-1,mid,end,start) = hanoi(1,2,3,1)

>n==1이므로 [2,3] push 후 return 

https://school.programmers.co.kr/learn/courses/30/lessons/147355

function solution(t, p) {
    var answer = 0;
    var lastIdx = t.length;
    var len = p.length; //잘라야하는 문자열 크기 
    var now = 0;
    while(lastIdx-len>=now){
        let copy = t.slice(now,len+now)
        if(Number(copy)<=Number(p)){
            answer++;
        }
        now++;
    }
    return answer;
}

파이썬으로도 공부를 해야하나 하는 고민.... 파이썬 안 한지 오래됐는데말이지 

가장 많은 석유를 시추할 수 있는 열을 찾아야 하는 문제 

지나가는 석유 덩어리 전부를 추출해야 하므로 너비 검색을 위해 bfs를 사용했다. 

https://school.programmers.co.kr/learn/courses/30/lessons/250136

정확도 테스트는통과했으나 효율성 부분 4개테스트에서 시간초과가 발생했다. 

gpt4o의 힘을 빌려봐도 마땅한 답이 나오지 않는다... 역시 파이썬이 답인가............

function solution(land) {
    var answer = 0;
    var col = land[0].length;
    var row = land.length;
    
    var visited = Array.from({ length: row }, () => Array(col).fill(false)); // 외부에서 초기화
    
    const bfs = (land, visited, start) => {
        var directions = [[0, -1], [0, 1], [-1, 0], [1, 0]]; // 상하좌우
        var queue = [start];
        visited[start[0]][start[1]] = true; // 시작점을 방문 처리
        let oilCheck = 1;
        
        while (queue.length > 0) {
            const [x, y] = queue.shift(); // 선입선출 방식으로 꺼내기 
            for (let [dx, dy] of directions) {
                const nx = x + dx;
                const ny = y + dy;
                if (nx >= 0 && nx < land.length && ny >= 0 && ny < land[0].length && !visited[nx][ny] && land[nx][ny] === 1) {
                    queue.push([nx, ny]);
                    visited[nx][ny] = true;
                    oilCheck++;
                }
            }
        }
        return oilCheck;
    };
    
    // 석유 크기 계산
    for (let i = 0; i < row; i++) {
        for (let j = 0; j < col; j++) {
            if (land[i][j] === 1 && !visited[i][j]) {
                bfs(land, visited, [i, j]);
            }
        }
    }
  
    const getMaxSize = (colIndex) => {
        let maxSize = 0;
        let visited = Array.from({ length: row }, () => Array(col).fill(false)); // 초기화
        for (let i = 0; i < row; i++) {
            if (land[i][colIndex] === 1 && !visited[i][colIndex]) {
                maxSize += bfs(land, visited, [i, colIndex]);
            }
        }
        return maxSize;
    };
    
    for (let j = 0; j < col; j++) { // 열을 탐색
        let res = getMaxSize(j);
        if (res > answer) answer = res;
    }
    
    return answer;
}

답이 나올때까지 좀 더 고민해봐야겠다. 

https://school.programmers.co.kr/learn/courses/30/lessons/178871

처음 작성한 코드 (시간초과)

function solution(players, callings) {
    var answer = [];
    var ph = new Map();
 
    for(let idx in players){
         ph.set(players[idx],idx);
    }
    
    answer = players;
    let ans = []; 
    callings.forEach((val)=>{
        let idx = ph.get(val);
        ph.set(answer[idx-1],idx);
        
        answer.splice(idx,1);
        answer.splice(idx-1,0,val);
        
        ph.set(val,idx-1)
    
    })
    
    return answer;
   
}

시간소요를 줄이기 위해서 findIndex 대신 해시맵을 사용해 플레이어들의 등수를 인덱싱 한 것 까진 괜찮았으나,

여전히 splice를 사용한 탓에 4개의 테스트에서 시간초과가 떴다. 

통과한 코드

function solution(players, callings) {
    var answer = [];
    var ph = new Map();
 
    for(let idx in players){
         ph.set(players[idx],idx);
    }
    
    answer = players;
    callings.forEach((val)=>{
        let idx = ph.get(val);
        ph.set(answer[idx-1],idx);
        let tempt = answer[idx-1]
        
        answer[idx]=tempt;
        answer[idx-1]=val;
        ph.set(val,idx-1)
    
    })
    
    return answer;
}

생각해보니 중간에 뭔가를 삽입할 일이 없는데 splice를 사용하는것은 비효율적이란 생각이 들었다. 

그래서 단순하게 생각하니 문제가 풀렸다 ~.~ 몇시간이나 고민했네 ... 

https://school.programmers.co.kr/learn/courses/30/lessons/181188

function solution(targets) {
    var answer = 0;
    targets.sort((a,b)=>a[1]-b[1]);
    console.log(targets)
    var max = 0;
    for(let i = 0; i<targets.length;i++){
        let [s,e]=targets[i];
        if(s>=max){max=e; answer++;}
        // console.log(" max",max,"ans",answer,s,e)
    }
    return answer;
}

처음 정렬을 할 때 start 기준으로 했더니 오류가 났는데 

end 기준으로 했더니 다시 정답이 나왔다 ㅎㅎ .. 그리디알고리즘(탐욕법)공부를 하자 !!!

그리고 단속 카메라 문제 

https://school.programmers.co.kr/learn/courses/30/lessons/42884

질문창에서 거의 같은문제라고 해서 봤더니 범위기준만 다르고 똑같더라 

function solution(routes) {
    var answer = 0;
    var max = -30000;
  
    routes.sort((a,b)=>a[1]-b[1]);
    console.log(routes);
    for(let i in routes){
        if(routes[i][0]>max){
            max=routes[i][1];
            answer++;
        }
    }
    return answer;
}