[221121-221127] 조금 재밌을지도?

 

 

11/21

📝 할 일

• 백준 5문제
• 수강생 간 코드리뷰

 

✅ 한 일

• 백준 5문제

 브론즈 4 마지막 4문제를 풀었다

다른 건 괜찮았는데 25965번 미션도네이션 문제가 진짜 너무너무 어려웠다

그래서 결국 풀지 못하고 다음날 스터디 팀원한테 물어봐서 해결했다

팀원분도 해결하지 못했다가 해결한 문제다

구글링할 때 어떤 분이 이 문제는 브론즈 4가 아닌 것 같다고 하셨는데 격하게 동의한다

근데 몇 일 후 다시 들어가보니 브론즈 4 에서 없어졌다 😑

해당 문제는 입력받은 것을 어떻게 구분할지가 관건인데

const filePath = process.platform === "linux" ? 0 : "example.txt";
let input = require("fs")
  .readFileSync(filePath)
  .toString()
  .trim()
  .split("\n")
  .map((el) => el.trim());
let ans = [];
for (let i = 1; i < input.length; i++) {
  if (input[i].length === 1) {
    //if (input[i].split(' ').length === 1) { --> 이렇게 수정해주면 정답
    let M = Number(input[i]);
    let sum = 0n;
    let [k, d, a] = input[i + M + 1].split(" ").map(BigInt);
    for (let j = 1; j <= M; j++) {
      let [K, D, A] = input[i + j].split(" ").map(BigInt);
      if (K * k + A * a - D * d > 0n) sum += K * k + A * a - D * d;
    }
    ans.push(sum);
  }
}
console.log(ans.join("\n"));

이렇게 푸는 것이 답이었다...

팀원분은 길이가 1일 때로 구분해줬다

 

 

• 수강생 간 코드리뷰

첫번째 수강생분!

1. index.html

(1) 56번

다른 이유가 없으시다면 class 로 main 과 section 을 지정하는 것 보다 main, section 태그를 사용하는 것이 더 시멘틱할 것 같습니다

(2) 99번

위 57번 줄에서 search-container 라고 쓰셨듯이 detail-container 라고 명시해주는 것이 더 통일성이 있을 것 같습니다

 

2. detail.js

(1) 9, 10번

두 줄 밖에 없어서 말씀드리기가 조금 민망하지만 console.log 와 주석은 가능하면 지우고 올리는 것이 더 낫다고 알고 있습니다

 

3. getDetail.js

(1) 3번

Promise 생성자와 resolve, reject 도 사용하셨네요 혹시 이번에 강사님을 통해 배운 것을 활용하셨다면 배운 것을 모두 활용해보는 자세 멋있고 본 받아야 할 점인 것 같아요

 

4. renderDetail.js

(1) 29번

템플릿 리터럴 백틱을 사용하셨으니 `/${details.Ratings[i].Source}.png` 이렇게 변경해도 될 것 같습니다

 

5. css

가끔 영화 제목이 많이 길면 영화 목록을 보여줄 때 길이에도 영향을 줘서 일정하지 않아 보입니다 혹시 실례가 안되면 두줄 정도 이상 되었을 때 말줄임표를 해주는 것이 어떨까요?

`

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

`

**변경 후**


 

 

두번째 수강생분!

1. css

- 모듈화를 하셨네요 저는 매번 처음부터 하지 않아서 나중 가면 코드 정리는 대충하곤 하는데 깔끔한 것 같네요

 

2. header.css

(1) 20번

max-width 와 min-width 를 정해주신 이유가 있을까요?

혹시 나중에 반응형을 추가하신다면 max-width 와 min-width 를 둘 다 지정하면 화면을 줄였을 때 화면 밖으로 나가는 현상이 있어서 width: 1000px 만 적용해도 간단하게 구현이 가능할 것 같아 말씀드려요

 

3. main.css

(1) 3번

혹시 info.css 와 header.css 의 기본설정이 동일해보이는데 맞을까요? 중복되는 코드는 모듈화를 하는 것이 좀 더 나을 것 같습니다

 

(2) 181번

영화 제목이 많이 길면 영화 목록을 보여줄 때 길이에도 영향을 줘서 일정하지 않아 보입니다 혹시 실례가 안되면 두줄 정도 이상 되었을 때 말줄임표를 해주는 것이 어떨까요?

이렇게 적용하시면 아마 position: absolute 때문에 밑에 글씨가 더 보일텐데 저는 그 부분을 따로 txt 구역으로 감싸서 구역에 position: absolute 를 적용해주었으니 혹시 말줄임표를 적용한다면 참고해주시면 될 것 같습니다

 

`

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

`

 

**변경 후**


 

 

 

 

 

11/22

📝 할 일

• 백준 5문제
• 리액트 강의 create-react-app 파트 수강

 

✅ 한 일

• 백준 5문제

드디어 브론즈 3 에 진입했다 브론즈 3 을 먼저 풀어본 스터디 팀원분이 어렵다고 말을 해주셔서 조금 무서웠다

아니나 다를까 문제 자체를 이해하기가 어려운 문제가 나왔다

1085 번 직사각형에서 탈출 문제는 그려서 이해해봤는데 처음엔 어렵게 풀다가 규칙을 발견해서 풀게 되었다 내 위치가 곧 직사각형의 경계선까지 가는 길이고, 그 반대 경계선까지 가는 길이가 직사각형의 w 와 y 를 내 위치에서 빼주는 것이었다

1247 번 부호 문제는 입력 숫자들을 이해하지 못해서 일단 팀원분 코드를 찾아 보긴 했는데 그래도 이해가 잘 되지 않았다 전날 푼 미션도네이션 문제와 유사하게 입력을 받은 것을 구분하는 게 관건인 것 같은데 입력 숫자들이 어떤 의미인지그래서 해당 문제를 푼 팀원한테 물어봤다

 

 

• 리액트 강의 create-react-app 파트 수강

다른 건 다 알고 있어서 특별한 건 없었고 css module 즉 post css 를 다시 배웠다

솔직히 css module 이라고만 알고 있었지 거의 순수 css 나 scss 를 써서 내가 이제껏 배운 게 css module 이고 post css 인지도 몰랐다

팀원분이 post css 라고 하시길래 뭔지 몰랐는데 물어봤더니 내가 배운 거였더라^^..

 

 

 

 

 

 

11/23

📝 할 일

• 알고리즘 : 이분 검색 파트 복습
• 알고리즘 : 그리디 파트 복습

 

✅ 한 일

• 알고리즘 : 이분 검색 파트 복습

데이터 센터 문제는 절반 이상의 컴퓨터가 차가운 공기를 받기 위해 냉각기를 최소 몇 분 가동해야 하는지 반환해야 하는 문제였다

function solution(borad) {
  let answer = 0;
  let left = 1,
    right = 0,
    sum = 0;
  borad.forEach((el) => {
    right = Math.max(right, Math.max(...el)); // Math.max(...el) 각 배열에서 비교한 것에서 나온 최대 값과 다음 배열에서 나온 최대값을 계속해서 비교함
    sum += el.reduce((a, b) => a + b, 0); // 각 배열을 더해준 값을 sum 에 누적해서 전체 값의 합을 구함
  });
  console.log(right);

  // count function : mid 까지 냉방기를 튼 것의 컴퓨터들을 다 더해줘야 함
  function count(mid) {
    let cnt = 0;
    borad.forEach((e) => {
      for (x of e) {
        if (x >= mid)
          cnt += mid; // x = 9, mid = 5 면 mid 가 더 작으니 mid 까지 더하고
        else cnt += x; // 반대로 x = 3, mid = 5 면 x 가 더 작으니 x 까지만 더해줌
      }
    });
    return cnt;
  }

  // 이분 검색
  while (left <= right) {
    mid = parseInt(left + right / 2); // mid 분까지 냉방기를 튼다
    if (count(mid) >= sum / 2) {
      // 컴퓨터들을 반 나눠서 그것보다 크면 정답
      answer = mid;
      right = mid - 1; // 그러나 더 나은 값을 찾아줘야 하니 더 최소값을 찾기 위해 right 를 mid 보다 작게
    } else left = mid + 1; // 아니라면 더 큰 값을 찾아줘야 하니 정답을 찾기 위해 left 를 mid 보다 크게
  }
  return answer;
}

console.log(
  solution([
    [15, 3, 1, 5, 6],
    [3, 0, 7, 4, 3],
    [8, 5, 7, 5, 6],
    [9, 6, 1, 5, 5],
    [5, 5, 8, 5, 1],
  ])
);

 

 

마구간 정하기 문제는 최대 좌표까지에다가 c 개의 말을 배치해서 가장 가까운 두 말의 최대 거리를 반환하는 문제였다

function solution(nums, c) {
  let answer = 0;
  nums.sort((a, b) => a - b);
  let left = 1,
    right = Math.max(...nums);

  function count(mid) {
    let cnt = 1; // 제일 왼쪽에 말 하나 배치
    let endPoint = nums[0]; // 최근에 넣은 말의 좌표
    for (let i = 1; i < nums.length; i++) {
      //
      if (nums[i] - endPoint >= mid) {
        cnt++;
        endPoint = nums[i];
      }
    }
    return cnt;
  }

  while (left <= right) {
    let mid = parseInt((right + left) / 2);
    if (count(mid) >= c) {
      answer = mid;
      left = mid + 1;
    } else right = mid - 1;
  }

  return answer;
}

console.log(solution([1, 2, 8, 4, 9], 3)); // 3
console.log(solution([5, 9, 10, 12, 14, 15], 3)); // 5

 

 

• 알고리즘 : 그리디 파트 복습

 사실 그리디가 뭔지 이해하고 푼 것이 아니라서 대충 sort 함수를 이용하면 되는구나 하면서 풀었다

선긋기 문제는 수직선상의 점과 점사이를 잇는 선들의 총 길이를 반환하는 문제였다

시작 좌표를 기준으로 오름차순 정렬, 한 선에서 s 는 첫 점이고 e 는 끝 점, 그 다음 선이 e 라는 값이 다음 선의 시작점보다 작은지 큰지 판별하고, 작다면 e 를 다음선의 끝점으로 변경, 그리고 반복해서 판별하여 크다면 끊어진 것을 의미하니 answer 에 e-s 를 누적해주고 마지막 선의 e-s를 answer 에 누적한다

for 문은 두번째 선부터 돌고 만약 시작점이 e 값보다 작거나 같고 끝점이 e 보다 클 때 e 는 nums 는 nums[i][1]

여기서 선 안에 다른 선이 포함되어 있을 때는 없는 걸로 쳐야 한다

회의실 배정 문제는 그리디는 곧 회의실 배정이라고 할 수 있을 정도로 유명하다고 한다

회의실은 하나인데 회의가 겹치지 않고 회의를 할 수 있는 최대 회의의 수를 반환하는 문제이다

그리디는 반례를 찾아야 하는데 이 문제에서는 긴 회의가 있을 수 있고 자잘한 회의가 있을 수 있다 그럴 때 긴 회의가 시작 시간이 맨 앞이라고 그걸 할 수 있는 회의로 반환해버리면 회의는 하나밖에 하지 못한다는 것이 반례이다

그래서 시작시간으로 정렬하지 않고 끝나는 시간으로 오름차순 정렬하고, et 는 회의가 끝나는 시간, et 보다 회의가 시작하는 시간이 같거나 크면 회의를 할 수 있으니 et 를 해당하는 회의의 끝나는 시간으로 변경하고 answer 를 증가시킨 것을 반복하여 반환한다

 

 

 

 

 

11/24

📝 할 일

• 백준 브론즈3 5문제
• 리액트 effects 강의 수강

 

✅ 한 일

• 백준 1문제(…)

풀긴 풀었지만 2시간이나 걸렸다 원래 2시간 안에 5문제를 풀려고 했으나 구글에 답도 안나와서 얼른 풀자 했는데 1문제 푸는데 시간을 다 써버렸다...

브론즈면 코테에서 나오지도 않을 문제인데 이렇게 오래 걸려서 우짜나...

1598번 꼬리를 무는 숫자 나열 문제인데 숫자와 숫자 사이의 이동거리를 구하는 문제였다

먼저 각 숫자를 나머지 연산자와 나누기 연산자를 이용해 좌표를 구하고 각 좌표를 빼준 값에서 더해주면 된다

 

 

• 리액트 effects 강의 수강

사실 useEffect 도 처음 배울 때 정확히 이해하고 쓴 건 아니라서 이제야 좀 이해가 잘 되는 느낌이었다

쓰면서도 이게 맞나? 라는 느낌이었는데 이제는 좀 알고 쓸 수 있을 것 같았다

특히 cleanup 은 알지도 못했던 기능이었는데 확실히 많이 쓸 일은 없을 것 같았다

어떤 코드를 실행했다가 지울 때도 어떤 함수를 실행시켜 지워줄 수 있다는 기능으로? 이해했다

 

 

 

 

 

11/25

📝 할 일

• 백준 브론즈3 1문제(…)
• 재귀 용법 강의
• 알고리즘 복습

 

✅ 한 일

• 백준 브론즈3 1문제(…)

어제 1703번 생장점 문제를 풀다가 문제 자체가 이해가 되지 않아서 팀원에게 물어봤다

나무의 나이, 생장점 개수, 가지치기 개수, 생장점 개수, 가지치기 개수, ...

한 줄에 나무의 나이만큼 생장점 개수와 가지치기 개수가 반복되어 출력되고 각 나무에 대한 남은 생장점 개수를 출력하면 되는 거였다

그래서 나는 각 줄에 대해 이중 for 문을 돌려서 cnt 는 처음 생장점 개수로 설정한 뒤 현재 값이 짝수번째에 있는 숫자면 cnt 와 현재 숫자 다음 숫자와 곱해서 cnt 값으로 넣어주고 홀수번째 숫자면 cnt 에서 다음 숫자를 빼서 cnt 값으로 넣어줬다

즉 생장점에 가지치기를 빼고 다음 나이에는 그 값에 그 나이 생장점을 곱하고 그 값에 그 나이 가지치기 값을 빼준 것이다

 

 

• 재귀 용법 강의

오늘 자 알고리즘 수업인 재귀함수와 DFS 기초 파트를 위해 강사님이 재귀 용법 강의를 듣고 오라고 하셔서 급하게 들었다

재귀 용법은 간단하게 말하면 함수 안에서 자기 함수를 불러서 스택 마냥 호출한 함수들을 반복적으로 쌓아서 나중에 호출한 함수 값부터 출력해주는 것이다

비슷한 문제들을 계속 설명해주셨는데 워낙 이해하기에 복잡하게 돌아가서 다 듣고 나서도 긴가민가했다

 

 

• 알고리즘 복습

그리디 과제로 내줬던 씨름선수 문제를 풀어봤다

씨름 선수 문제는 다른 사람들이랑 비교해서 키도 크고 몸무게도 무거운 사람이 있으면 탈락, 없으면 선발되는데 그에 대한 최대 인원 반환하는 문제였다

이 문제는 키나 몸무게를 기준으로 내림차순 정렬을 먼저 해준 뒤 나머지 키나 몸무게를 차례로 비교해주는데 첫 사람의 값을 max 로 넣고 그 max 를 다음 사람의 값과 비교하여 크면 max 값으로 넣어준 뒤 카운팅을 해주고 작으면 탈락시킨다 

 

오늘 배운 재귀함수와 DFS 기초 파트는 이해하기에만 급급해서 거의 풀어보지는 못했다

배울수록 이해가 점점 되지 않는 느낌이었다

강사님은 재귀함수를 이용해 자연수 n 에 대해 1 ~ n 까지 반환하는 문제로 설명하셨다

1. 스택과 같다. 함수가 호출되면 스택이라는 자료구조에 스택프레임이라는 것이 생긴다

2. 함수가 호출되면 매개변수와 지역변수(함수안에서 생성된 변수), 복귀주소(할 일이 끝나면 제자리로 복귀) 를 컨트롤한다

3. 스택 상단의 프레임이 작동하고 dfs(n-1) 을 만나는 순간 호출이 일어나면 그 자리까지 했다고 슬립상태에 들어가고 dfs(2) 가 작동된다.

4. 다시 2에 대해 dfs(n-1) 호출되면 그 자리까지 했다고 기억하고 dfs(1) 이 호출, 이것이 반복된다

5. 그리고 dfs(0) 이 되면 return 이 되고 스택상단의 d(0) 은 그냥 스택에서 사라지고, dfs(1) 들어가면 함수 끝에서 dfs(n-1) 라인으로 올라가서 다음 라인인 console.log(n) 이 출력되고 dfs(1) 삭제, 이것이 스택에서 다 사라질 때까지 반복된다.

 

다른 파트들은 꾸역꾸역 이해하면 다 이해가 되어서 문제도 쉽든 어렵든 오래걸리더라도 풀었는데 재귀는 쉬워도 어려워도 다 풀지 못했다..ㅠㅠ

 

 

 

 

11/27

📝 할 일

• 2차 과제 : movie api 2차 제출 완.

 

✅ 한 일

• 2차 과제 : movie api 2차 제출 완.

2차 과제를 제출하고 피드백을 받은 부분과 미완성이었던 부분을 수정했다

특히 모듈화를 어느정도 성공해서 너무 뿌듯했다 사실 좀 미루다가 오늘 거의 다 구현을 하게 되었는데 피드백을 받겠다는 마음보다 내가 리팩토링을 해내야 겠다는 다짐이 더 컸다

모듈화를 하긴 했지만 영화 목록을 랜더링 하는 부분은 아직도 코드가 많이 긴 것 같아 정리할 필요성을 느낀다

그리고 hashchange 를 if 문으로 하는 것보다 switch 문으로 조절하는 것이 더 직관성이 있다고 피드백을 해주셔서 수정을 하긴 했는데 case 문 안에서 if 문을 많이 사용하여 코드의 효용성이 의심되긴 한다

이때 localStorage 를 이용하여 검색어를 localStorage 에 저장해 뒤로 가면 저장한 검색어로 나오도록 반영하고 했는데 어찌저찌 연도 반영은 되지만 아직 type value 와 page count value 반영은 하지 못했다 또 오류도 너무 많이 생겨서 localStorage  말고 다른 기능으로 써보고 싶었다