개발새발

12/5

📝 할 일

• 3차 과제 : todo-list 찐찐마무리
• 4차 과제 : 쇼핑몰 제품 조회 api 활용해서 화면에 출력
• webpack 복습

✅ 한 일

• 3차 과제 : todo-list 마무리

원래 어제 끝냈어야 했는데 css에 한번 신경쓰니 너무 많이 걸려서 밤을 새서 마무리를 했다

뭔가 끝내긴 했는데 좀 찜찜해서 일단 readme를 작성하고 제출을 했다

• 4차 과제 : 쇼핑몰 제품 조회 api 활용해서 화면에 출력

한 1시간인가 자고 일어나서 바로 4차 과제 기능 분배를 하고 바로 구현을 했다

사실 시간이 정해진 건 아니었지만 자면 못 깰 것 같아서 바로 시작했다

팀원분이 크롤링을 다 해서 완성한 전체 상품 그리드에 전체 상품 api 정보를 가져와서 반복적으로 뿌려주는 작업을 했다

상세페이지를 구현하는 팀원을 위해서 path를 이용한 파라미터 전송을 사용하여 link 컴포넌트로 주소에 상품 id 값을 넣어줘서 useParams 로 url 을 가져온 뒤 해당 id 값으로 각 상세페이지를 출력하도록 구조를 짰다

• webpack 복습

webpack 강의를 듣긴 했는데 뭔가 이해가 거의 안된 채로 들은 느낌이라 복습을 했다

여러 번 써봐야 오류를 잡으면서 익숙해질 것 같다ㅎ..

12/6

📝 할 일

• 백준 브론즈3 5문제
• webpack 강의 복습

✅ 한 일

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

이번 5문제에는 모두 별찍기 문제였는데 사실 나는 별찍기 문제를 별로 좋아하지 않는다..

뭐 다른 문제들도 좋아한다고는 할 수 없지만 별찍기는 흥미가 가지 않기 때문이다

이번 2441번 별찍기 문제는 이런 식으로 출력되어야 하는 문제다

*****

 ****

  ***

   **

    *

let filePath = process.platform === "linux" ? 0 : "../example.txt";
let input = require("fs").readFileSync(filePath).toString().trim();
input = Number(input);

let ansArr = [];
let j = 5;

for (let i = 0; i < input; i++) {
  let ans = "";
  ans += " ".repeat(i);

  if (j > 0) {
    ans += "*".repeat(j);
    j--;
  }

  ansArr.push(ans);
}

console.log(ansArr.join("\n"));

그래서 이렇게 문제를 풀어봤는데 오답이라고 떴다

for (let i = 0; i < input; i++) {
  let space = "";
  space += " ".repeat(i);
  
  for (let j = input - i; j > input - i - 1; j--) {
    let star = "";
    star += "*".repeat(j);
    result += space + star + "\n";
  }
}
console.log(result);

풀다풀다 안돼서 구글링을 해봤더니 위처럼 이중 for 문을 사용하여 풀어줬다

도당체 무슨 차이인지 모르겠다

• webpack, typescript 강의 복습

어제 강의를 듣다가 밤샌 여파로 엄청 졸아서 거의 듣지 못해 복습을 했다

typescript 는 배우면 간단한데 쓰다보면 엄격하게 검사를 해주기 때문에 어려운 것 같다

계속 쓰다보면 ts 만 쓰게 된다던데 뭔가 webpack 이랑 같이 해줘서 그런지 더 헷갈리는 것 같았다

예전에 만들어 놓은 간단한 js 프로젝트들을 ts로 변환하는 연습을 하면서 계속 써봐야 겠다

12/7

📝 할 일

• 블로그 정리
• 백준 나머지 4문제

✅ 한 일

• 블로그 정리

블로그 정리를 하려고 했으나..

강의를 오프라인으로 들어서 팀원들과 함께 있다보니 다른 팀원의 4차 과제 오류를 잡아주느라 반도 쓰지 못했다..ㅠ

일지에 변명거리만 자꾸 늘어놓는 것 같아 양심이 콕콕 찔린다

내일은 꼭 해냄.

• 백준 1문제(…)

어느정도 마무리를 했으니 나머지를 다 풀어보려 했으나 또 시간이 오래 걸려서 1문제 밖에 풀지 못했다ㅠ

2442번 별찍기 문제는 트리처럼 별들을 출력하는 문제다

출력 결과를 보니 줄마다 공백은 4 3 2 1 0 이고, 별은 1 3 5 7 9 로 규칙이 보이길래

while 문으로 i 가 4일 때 공백 4개와 star 1 개를 출력하고, i 가 3 일 때 start 3, i 2 일 때 start 5, ... 를 i 가 0이 될 때까지 반복했다

console 을 while 문 안에 찍어서 안될 것 같았지만 일단 정답으로 제출해봤는데 정답이라고 떠서 당황했다

사실 반복문 안에 console 을 찍으면 대부분 에러가 나서 시도도 안해보는데 이번에는 돼서 기분이 좋지만? 당황스러웠다

구글링을 해서 좀 더 좋은 코드를 찾아봤다

let output = "";

for (let i = 1; i <= input; i++) {
  output += " ".repeat(input - i) + "*".repeat(i * 2 - 1) + "\n";
}
console.log(output);

굉장히 간결하고 간단해서 좋은 코드인 것 같아 올려본다

12/8

📝 할 일

• 블로그 정리
• 노마드 코더 리액트 마스터 클래스 styled components 듣기

✅ 한 일

• 4차 과제 배포 & 블로그 글 정리

블로그 정리를 시작하려는데 갑자기 팀원분이 pr merge 전 테스트로 볼 수 있도록 deploy preview 를 사용하자고 netlify 로 배포 한번 해달라고 해서 netlify 배포는 처음이지만 해봤다

https://goddino.tistory.com/190 와 https://heropy.blog/2018/01/10/netlify/ 를 참고해서 배포하고

https://docs.netlify.com/site-deploys/overview/#deploy-preview-controls 와

https://tecoble.techcourse.co.kr/post/2021-08-13-test-automation/ 를 참고하여 deploy preview 를 이해했다

배포하다가 https://merrily-code.tistory.com/123 이곳과 동일한 에러가 나서 해결했다

deploy preview 는 위 이미지처럼 설정했고

팀 레포라 잘못될까 무서워서 개인 레포를 하나 배포하여 deploy preview 를 어떻게 하면 쓸 수 있는지 알아봤다

위 이미지처럼 pr 를 하면 해당 pr 에서 deploy preview 가 준비되었다고 알려준다 그러면 빨간 동그라미의 url 을 들어가서 merge 전 pr 의 상태를 확인할 수 있다

배포를 완료하고 일지를 썼다 쫌 양심에 찔리지만 요즘 바쁘다는 핑계로 일지가 엄청 밀려서 기억력 테스트를 하면서 작성했다

강의 들었던 것도 같이 정리해서 내일 개발 블로그 제출할 때 같이 포스팅해야겠다

• 노마드 코더 리액트 마스터 클래스 styled components 듣기

이제 어느정도 기초 문법을 익힌 것 같고 계속 비슷한 프로젝트로 연습할 것 같아서 마스터 클래스 강의로 넘어갔다

근데 자꾸 강의를 들으면 필기를 하려는 버릇이 있어서 이번엔 필기를 하지 않고 쭉 들어보려고 했다

이해가 안되는 부분은 영상 좌표를 적어놓고 다 본 후에 다시 돌아가서 복습해보는 식으로 해보려고 했다

styled components 는 한번 배워봤던 거라 어렵진 않았고 이해가 되지 않는 부분은 없어서 후루룩 볼 수 있었다

아직 효과는 잘 모르겠지만 일단 계속 이런 방식으로 해보고 효과가 없다면 다시 방식을 바꾸는 식으로 해야겠다

12/9

📝 할 일

• 12월 1일자 백준 5문제 마무리

✅ 한 일

• 12월 1일자 백준 5문제 마무리

드디어 5문제를 마무리했다

2443번 별찍기-6 문제는 별을 거꾸로된 트리 모양으로 출력하면 되는 문제다 각 줄마다 별은 9 7 5 3 1 이고 공백은 0 1 2 3 4 로 이전 문제랑 반대로 되어 있다 하지만 이전 문제랑 비슷해보여 똑 같은 방식으로 조건만 다르게 줬는데 백준에서는 오답으로 처리됐다 그래서 이전에 풀었던 별찍기 문제를 구글링했을 때 나온 간결한 코드로 조건만 다르게 해줬더니 정답으로 됐다

2444번 별찍기-7 문제는 다이아몬드 모양으로 출력하면 된다 각 줄마다 공백은 4 3 2 1 0 1 2 3 4, 별은 1 3 5 7 9 7 5 3로 트리와 역트리 모양이 합쳐진 모양이다 그래서 트리와 역트리 for 문을 합쳐서 출력해줬다

2445번 별찍기-8 문제는 출력 모양을 보고 규칙을 유추해서 출력하라고 되어 있다 각 줄마다 공백은8 6 4 2 0 2 4 6 8, 별은 1 공백 1 / 2 공백 2 / 3 공백 3 / 4 공백 4 / 55 / 4 공백 4 / 3 공백 3 / 2 공백 2 /1 공백 1으로 별은 보타이, 공백이 역트리와 트리 모양을 합친 것으로 보였다

그래서 두개의 for문을 두고 공백, 별, 공백이 반복되도록 했는데 첫 for 문은 input 의 1 을 뺀 값부터 감소하여 0까지 출력하고 다음 for 문은 첫 for 문의 마지막과 중복되면 안되니 1부터 input 까지 반복되도록 했다 그래서 두for 문의 i 를 출력해보면 4 3 2 1 0 1 2 3 4 가 나온다

사실 for 문의 초기화와 조건문을 처음에 5~0, 1~5 이런 식으로 줬더니 공백이 더 출력되어서 출력 형식이 잘못되었다는 결과가 나왔다 공백을 @ 기호로 치환해주었더니 위 사진의 nodemon이라고 쓰여있는 것을 기준으로 위 것의 결과가 나오게 되었다 그래서 input 에서 1을 뺀 값으로 수정해주었다

11/28

📝 할 일

•  노마드 코더 리액트 to-do-list 파트 강의 수강

✅ 한 일

• 노마드 코더 리액트 to-do-list 파트 강의 수강

곧 3차 과제로 들어가는 투두리스트를 수강하게 되어 반가웠다

사실 3차 과제는 api 를 이용한 투두리스트이고 해당 파트는 값이 랜더링하면 사라지는 거라 사실상 허우대뿐이긴 하지만 뭔가 반가웠다

useState 로 input 의 value 값을 받아오고 그 값을 배열로 데이터를 쌓아서 그 배열을 반복적으로 출력해주는 거였다

정말 간단하게 구현했지만 useState 에 대한 활용도를 넓혀준 수업 같았다

해당 강의에서는 onChange 를 이용해서 input 값의 value 값이 바뀔 때마다 todo 가 추가되도록 해줬는데 나는 onKeyPress, onKeyDown을 사용하여 enter 키를 누를 때마다 todo 가 추가되도록 해주고 싶어서 적용했다

<input value={todo} onChange={onChange} type="text" />

onChange 가 아닌 onKeyPress, onKeyDown 등을 사용하면 onChange이벤트를 넣던지 readOnly 속성을 넣어서 변화를 막으라고 위의 이미지처럼 에러가 뜬다

그래서 onChange 를 사용하던가 value 를 defaultValue 속성으로 변경해야 한다고 한다

그러나 defaultValue 로 적용해주면 input에서 다른값으로 고쳤지만 실질적으론 값이 변하지 않는다는 문제점이 있기 때문에 onChange 를 사용해야 한다

11/29

📝 할 일

• 백준 3문제(24일자 이제야 완.)
• 노마드 코더 리액트 coin-tracker 파트 강의 수강

✅ 한 일

• 백준 3문제(24일자 이제야 완.)

24일에 하기로 했던 5문제를 이제야 다 풀었다^^…

브론즈 3에 들어간지 얼마나 되었다고 이렇게 힘들어하는지 모르겠다…

그나마 나머지 3문제는 그렇게 어렵지 않아서 어제 오늘 다 풀 수 있었다

1837번 암호제작 문제는 간단하게 암호를 2부터 k 값까지 나눈 나머지가 0 일 때 나쁜 암호로 지정하고 아니면 좋은 숫자를 출력하도록 했다

2010번 플러그 문제는 간단하게 첫번째 멀티탭을 값을 저장해놓고 다음 멀티탭부터 그 멀티탭에서 1을 빼준 뒤 저장해준 값에 누적해주고 그 값을 출력해줬다

2061번 좋은 암호 문제는 1837 번과 다르게 어렵게 되어 있는 것 같아서 풀다가 설마? 하고 1837번 정답을 제출했더니 정답이라고 나왔다^^.. 아직도 왜 정답인지 모름.

• 노마드 코더 리액트 coin-tracker 파트 강의 수강

해당 파트는 코인들의 값 정보들을 담고 있는 api로 출력해보는 강의였다

이번에 4차 과제는 제품 정보, 계좌 정보 등 핀테크 관련한 api 들을 이용하여 팀 프로젝트를 해보는 과제라서 우리 팀은 리액트를 기반한 프로젝트를 하기로 결정해서 해당 수업이 도움을 많이 줄 수 있을 것 같아 기대가 되었다

간단하게 useEffect 로 api를 불러서 useState 로 state에 값을 담아주고 그것을 반복해서 출력해주는 강의였다

처음 api를 배웠을 때도 이런 방식으로 했었는데 오랜만이라 좀 생소했다

11/30

📝 할 일

• 노마드 코더 리액트 movie-app 파트 강의 수강
• 4차 과제 : 핀테크 api 전체 상품 그리드
• 3차 과제 : todo-list 조회, 삭제 기능 추가

✅ 한 일

• 노마드 코더 리액트 movie-app 파트 강의 수강

이번에 2차 과제로 movie api 로 movie-app 을 만들어서 이 기회에 리액트로도 만들어 보게 되는구나 또 기대가 되었닿ㅎ... 맨날 기대만ㅎ…

암튼 차례차례 들으면서 해보는데 강의 댓글에 라우터 버전이 달라서 오류가 난다고 해서 5 버전의 switch 도 써보고 6 버전의 routes 도 써봤는데 에러가 오조오억개나가지고 구글링을 했는데도 잘 안나왔다

그래서 혹시나 싶어 파일과 코드를 아예 분리했더니 잘 작동이 되었다

route 안에 해당 페이지에 들어갈 컴포넌트들을 다 넣는 것이 아니라 route 당 컴포넌트 하나만 넣고 해당 컴포넌트 안에 자식 컴포넌트들을 불러들이는 식으로 해야 한다

• 4차 과제 : 핀테크 api 전체 상품 그리드

메인 페이지의 전체 상품 그리드를 잡는 역할을 맡았다

아직 다른 팀원이 크롤링을 하는 중이라 전체 상품에 대한 정보 api 가 없어서 팀원이 보내준 json placeholder 링크로 json 파일을 하나 만들어서 반복해서 요소를 뿌려줬다

js 로 하는 건 2시간도 안되어서 끝났는데 이제는 오히려 css 에 시간이 많이 든다

노마드 코더가 도움이 많이 되었다

• 3차 과제 : todo-list 조회, 삭제 기능 추가

저번에 추가하는 건 input 태그로 간단하게 했는데 추가하자마자 조회하는 것에서 막혀서 미루고 있다가 마감일이 일주일 정도 남아서 다시 하기 시작했다

그래서 조회 api 가져오고, 반복해서 랜더링 하는 함수를 이용하여 뿌리고, 삭제 버튼 추가해서 지우기도 완료했다

근데 추가하고 한번 새로고침을 해줘야 할 일들이 랜더링된다… 추가하자마자 조회하는 건 어떻게 했더라..?

12/1

📝 할 일

• 백준 5문제
• 3차 과제 : todo-list 추가와 동시에 화면에 나타나도록 설정, 수정 기능

✅ 한 일

• 백준 5문제

백준 5문제를 풀려고 했으나 일이 생겨 문제 등록만 하고 아무것도 못함..^^

3차 과제 끝나고 며칠동안까지 백준은 거의 못 풀 듯하다..

• 3차 과제 : todo-list 추가와 동시에 화면에 나타나도록 설정, 수정 기능

추가와 동시에 조회를 해서 요소들을 반복해서 랜더링하는 방법으로 하려고 했으나 입력이 될때마다 조회하는 값들이 모두 출력이 되어서 리스트 전체를 지웠다가 다시 랜더링을 하게 되었다

하지만 그렇게 하면 추가된 할 일을 포함한 나머지 할 일들이 다같이 지워졌다 랜더링되기 때문에 메모리나 모든 면에서 효율적이지 않은 코드같다

일단 임시방편으로 이렇게 해놓고 좀 더 고민을 해봐야 할 것 같다

수정 기능은 갑자기 일이 생겨서 시작을 하지 못했다

12/2

📝 할 일

• 3차 과제 : todo-list 수정 기능

✅ 한 일

• 3차 과제 : todo-list 수정 기능

for 문을 돌려서 수정 input 요소와 해당 기존 할 일이 적혀있는 텍스트 요소의 dataset 탐색하여 해당 id 값이 동일하다면 수정을 해주라고 설정했다

이렇게 하는 것이 맞는 건지 모르겠지만 내 머리로 더 나은 코드가 생각나지 않기 때문에 임시방편으로 구현해놓고 나중에 피드백을 받아 수정해야겠다

사실 멘토의 피드백에 자꾸 의존하는 것은 좋지 않지만 그것을 고민할 시간에 경험을 쌓는 것이 더 중요하다고 생각하기 때문에 일단 먼저 구현해놓고 리팩토링할 때 좀 더 고민해봐야 겠다

12/3

📝 할 일

• 3차 과제 : todo-list 추가, 조회, 수정, 삭제 기능들 디버깅

✅ 한 일

• 3차 과제 : todo-list 추가, 조회, 수정, 삭제 기능들 디버깅

필수 사항의 모든 기능들을 구현했으니 한번 오류들을 잡아야 할 것 같아서 하루종일 오류들을 찾고 고치는 데 시간을 보냈다

일단 임시방편으로 처리했던 것부터 수정하니 난리가 나서 진땀을 뺐고 해결하고 보니 아무것도 아니라서 어이가 없었다

근데 할 일의 순서를 지정해주는 부분에서 해결을 하지 못했다

조회한 값들의 길이를 추가할 때 순서(order) 의 값으로 넣어주려고 했더니 항목 추가를 한 다음 조회를 하고 있어서 하지 못했다

그래서 화면에 출력되는 할 일(todo)들의 길이를 order 값으로 지정했지만 중간 할 일을 삭제를 하고 다시 추가하면 할 일 길이의 다음 값으로 출력되기 때문에 order 값이 중복된다

또 멘토님께 물어봐야지…

12/4

📝 할 일

• 3차 과제 : todo-list 일부 선택 사항 완성, 모듈화, css

✅ 한 일

• 3차 과제 : todo-list 일부 선택 사항 완성, css

필수 사항만 완료하긴 아까워서 시간이 없지만 일부 선택 사항을 구현하기로 했다

그래서 단 시간 내에 쉽게 구현할 수 있는 것만 골라 순서대로 구현했다

1. 할 일을 완료한 항목과 완료하지 않은 항목을 분류해서 출력

2. 할 일을 완료한 항목들을 한 번에 삭제

3. 할 일 목록이 출력되기 전 로딩 애니메이션 보이도록 설정

4. 그 외 동작이 완료되기 전 로딩 애니메이션 보이도록 설정

5. 프로젝트를 최대한 예쁘게 만들기

이렇게 5가지를 구현했는데 마지막 꺼는 차마 내 입으로 이쁘다고 말하기는 뭐하지만 일단 노력해서 나름 꾸몄으니 이쁘다고 합리화해본다ㅎ..

1번은 select option으로 각 option의 value값으로 true, false를 넣어주고 선택한 후 버튼을 클릭해주면 화면에 랜더링해주는 함수에다가 value 값을 전달해줘서 input checkbox 의 checked 값과 전달된 값이 동일하다면 반대의 todo 를 삭제하도록 설정해줬다

2번은 완료된 할 일들의 아이디를 모두 저장해서 for 문으로 버튼만 누르면 삭제될 아이디가  delete api 함수로 전달되어 삭제되도록 설정했다

3, 4 번은 구현한 것보다 괜찮은 애니메이션을 찾는 데 시간이 더 걸렸다

https://uiball.com/loaders/ 라는 곳을 찾아서 구현을 해보려고 했는데 npm 으로 설치를 해줘야 적용할 수 있었다 나는 cdn 이나 css 를 통해서 구현하고 싶었기 때문에 다음 프로젝트 때 활용해보기로 하고 내가 하고 싶은 노트 컨셉에 맞도록 시계 침이 돌아가는 걸로 정했다

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  말고 다른 기능으로 써보고 싶었다

11/14

📝 할 일

• 저번주 js 복습
• 백준 5문제
• 블로그 글쓰기

✅ 한 일

• 저번주 js 복습

강의 녹화본을 다운받아서 보는데 배속 하는 방법을 몰라 꽤 오래 걸렸다

그래서 필기를 하면 더 오래 걸릴 것 같아 일단 강의를 쭉 봐보기로 했다

사실 js 심화 부분을 이전에 교육 받을 때 배웠던 것 같은데 다시 보니 새로워서 다시 필기를 하면서 이해를 해야 할 것 같다

• 백준 5문제

이번에는 대부분 풀긴 풀었는데 좀 대강 끼워맞춘 느낌이라 좀 찝찝했다

그리고 16199 번 나이 계산하기 문제는 거의 30분 동안 손도 못대서 결국 구글링으로 답을 찾아봤는데 세는 나이와 연 나이는 생일과 관계 없고 세는 나이는 올해연도 - 생년에 +1 해주고 연 나이는 올해연도 - 생년을 해주면 되는 거 였다 만 나이는 생일이 지났는지, 지나지 않았는지만 계산해주면 끝!

16204 문제도 살짝 꾸역꾸역 끼워 맞춰 풀어서 답을 따로 또 봤는데 그냥 앞뒷면의 각 ox 가 겹치는 최소값을 더해주면 되는 거였다

역시 수포자라 아무래도 문제 해석 능력이 많이 부족한 것 같다.. 계속 풀면 키울 수 있겠지..?

• 블로그 글쓰기

원래 이제껏 필기한 걸 정리하지 못해서 정리한 후에 올리려고 했는데 복습하고 백준 문제 푸느라 필기를 다듬기만 하고 끝났다^^.. 이번 주 안에는 정리해서 올려봐야지

11/15

📝 할 일

• js 저번주 강의 복습
• 백준 5문제
• 리액트 공부 시작하기

✅ 한 일

• js 저번주 강의 복습

하루 당 3시간의 강의 이틀 치를 보려고 하니 필기를 하지 않아도 오래 걸려서 오늘까지 봤다

어느정도 이해가 된 듯 해 이번 주 안에 저번에 놓친 필기를 마무리 해야 겠다

• 백준 5문제

이번에도 갑자기 수학문제가 출현해서 당황스러웠다^^.. 수학 문제는 아예 손도 못 대겠다

이게 잘 몰라서 그런건지 수학이라니까 겁나서 그런건지 아니면 둘 다인지ㅎ

17362 번 수학은 체육 과목입니다 문제는 구글링 설명을 봐도 잘 모르겠다

손을 보면 8번 움직인 후 다시 처음부터 반복되는 걸로 알 수 있습니다.

즉, 입력받은 수를 8로 나눈 나머지로 해도 똑같은 결과가 나온다는걸 알 수 있습니다.

1 ~ 5 중 수를 선택해서 출력해야 하므로 입력 받은 수를 8로 나눈 나머지가 0, 7, 6인 경우 1 ~ 5 중 1가지 수를 출력해주고 아닌 경우 해당 수를 출력해주면 됩니다.

0인경우 8번을 누르므로 위 사진을 보면 2을 선택하면 된다는걸 알 수 있습니다.

이와 같은 방법으로 7 -> 3, 6 -> 4를 해주면됩니다.

이렇게 해설을 해줬는데 봐도 잘 모르겠다ㅠㅠ 조원분들께 물어봐야 할 것 같다

• 리액트 공부 시작하기

드디어 틈이 나서 리액트 공부를 시작했다

2시간 정도 했는데 노마드 코더의 리액트 초급 강의를 들으며 전에 했던 리액트를 상기 시켜봤다 아직 여는 부분? 초반 부분까지만 봤는데 리액트가 작동하는 원리를 알 수 있어서 좋았다

하지만 노마드 코더의 단점은 코드도 보고 자막도 보느라 집중이 잘 되지 않는다는 것이다..

정말 설명도 잘하고 흥미가 가도록 알려주시지만 영어 때문에 자막을 봐야 한다는 것 때문에 다른 강의를 봐야 하나 싶다

11/16

📝 할 일

• 알고리즘/자료구조 : 시간복잡도 파트, 정렬 파트 복습
• 블로그 정리, github 정리

✅ 한 일

• 알고리즘/자료구조 : 시간복잡도 파트 복습 및 과제 수행, 정렬 파트 복습

시간복잡도 파트 역시 문제 읽기와 해석밖에 하지 못했다 그래도 카드 가져가기 문제는 시간을 맞춰놓고 계속 치면서 연습했더니 어느정도 익힌 것 같아 기분이 좋았다

정렬 파트는 순서대로 선택정렬, 버블정렬, 삽입정렬 이렇게 3가지 정렬 방법을 어떻게 푸는 건지 배워봤다 선택과 버블은 어느정도 머리에 꾸역꾸역 집어넣어서 이해가 되었는데 삽입은 도저히 이해가 되지 않아서 강사님이 옆 자리의 조원분에게 설명해주는 것을 낑겨 듣고 이해가 됐다 삽입은 말 그대로 현재 위치와 이전 위치를 끝까지 비교하면서 현재 자리에 있는 데이터가 알맞게 들어가도록 삽입하는 것인데 아무래도 for 문이 증가하며 돌았다가 감소하며 돌았다가 정신이 없어서 더 헷갈린 것 같았다 계속 풀어보면 어느정도 이해가 될 것 같다

• 블로그 정리, github 정리

블로그 정리를 하려고 봤더니 필기가 거의 열흘 치 정도가 쌓여 있었다

미리미리 해놨어야 했는데 조느라 못 들은 거, 필기 놓친 거, 부득이 하게 빠져서 못 들은 거 등등 다시 듣고 올리려고 미루다 보니 밀렸다

막상 수업이 끝나면 복습하고 과제를 수행하느라 바빠 필기를 수정할 시간이 없었다

그래서 앞으로는 밀리느니 그날 그날 필기를 하든 못하든 그냥 블로그에 올리고 나중에 수정하는 방식으로 해야 겠다

github 정리는 이것저것 막 올리는 바람에 repository 관리가 잘 되지 않아 지저분한 상태라 했어야 했는데 블로그 정리를 하는 김에 처리를 해버리기로 결심했다

하지만 이전에 교육 받은 것들도 취합해서 정리하려니 용량이 너무 방대하고 api key 가 숨어 있는 것 같아 일단 만들어 놓은 초기 repository 를 하나 수정하여 몰아넣기만 했다

천천히 보면서 개인적인 정보나 민감한 자료는 수정을 거쳐줘야 겠다

그래도 올려야지 맘만 먹고 있었던 알고리즘 자료구조 수업 자료들을 올려서 뿌듯했다ㅎㅎ

11/17

📝 할 일

• 백준 5문제
• 노마드코더 리액트 state 강의 보기

✅ 한 일

• 백준 5문제

전부 조건문이나 메서드로 간단하게 해결되어서 수월하게 풀었다

• 노마드코더 리액트 state 강의 보기

오랜만에 리액트 강의를 보니 생소하고 새로웠다 각 잡고 필기도 하고 강의도 들으려니 시간이 되게 오래 걸렸다

js 를 좀 더 이해하고 리액트를 다시 보니 이해가 더 잘 되고 작동원리나 리액트의 장점이 뭔지 잘 느껴졌다

사실 강의만 들으면 하루만에 다 볼 수 있는 양이었는데 아무래도 강의를 다 듣고 내가 한 번 만들어보고 글로 정리를 하니 state 부분 밖에 하지 못했다

앞으로 속도를 좀 올리기 위해서 방법을 고안해봐야 겠다

11/18

📝 할 일

• 알고리즘/자료구조 : 정렬 복습
• 알고리즘/자료구조 : 이분검색 복습

✅ 한 일

• 알고리즘/자료구조 : 정렬 복습

선택정렬, 버블정렬, 삽입정렬은 코드도 복잡하고 이해하기도 어려웠는데 이후 sort 함수를 이용한 문제들은 나름 수월했다

하지만 마지막에 푼 이진수정렬 문제는 forEach, while, if 다양하게 사용해서 어려웠다

정수 데이터들을 배열로 지정하고 각 데이터들의 나머지가 0이 나올 때까지 2로 나눠주고 나오는 나머지들을 이진수화라고 한다

그 중 1 의 개수를 누적하여 1의 개수가 가장 적은 것부터 많은 것까지 즉, 오름차순으로 정리하고 누적된 값이 같다면 해당 데이터도 오름차순으로 정리해주는 것이다

먼저 정답은 배열로 나와야 하니 빈 배열로 초기화하고(answer), 누적된 값도 카운팅해줘야 하니 0 으로 초기화(cnt), 해당 데이터와 누적된 값을 각각 비교해줘야 하니 빈배열로 초기화(pair), 마지막으로 해당 데이터로 계속 나눠주는 while 조건문을 지나면 0 이 되기 때문에 해당 데이터를 저장할 변수를 선언(tmp)해준다

들어온 배열 데이터를 forEach 로 돌려 각 element 를 tmp 에 저장하고 cnt 는 한번 돌 때마다 값이 쌓여있을 테니 다시 0으로 초기화,

forEach 안에서 while 문으로 해당 값이 0이 될 때까지 나눠줘야 하니까 tmp 가 0 보다 크다면 { cnt 에 tmp를 나눈 나머지(이진수) 를 누적해주고(0은 더해도 0이니까 1만 카운팅됨) tmp를 2로 나눈 몫을 또 2로 나눠줘야 하니 tmp 에 parseInt(tmp/2) 를 저장한 것 } 을 계속 돌도록 설정하고,

while 문이 끝나고 나온 element 값과, 누적된 값(cnt) 를 배열로 해서 pair 배열에 넣어준다

그리고 forEach 문이 끝나면 pair 배열에는 각 데이터와 이진수 중 1의 개수가 누적된 값이 쌍으로 들어 있을텐데 sort 함수로 누적된 값이 같다면 element 를 오름차순으로 정렬하고 아니라면 그냥 오름차순으로 return 하도록 설정해준다

정답으로 필요한 건 각 element 니까 pair 에 forEach 문을 돌려 answer 에 각 0번 인덱스만 넣어주고 answer 를 출력하면 끝!!!

설명하려니 한나절은 걸리는 것 같다…

• 알고리즘/자료구조 : 이분검색 복습

이분검색은 탐색을 해서 뭔가를 찾아내야 하는 문제일 때, 선형탐색을 해서 찾으면 간단하지만 n개의 숫자만큼 탐색을 해야 하기 때문에 검색할 양을 절반으로 줄여주는 방법이다

예를 들어 오름차순이나 내림차순으로 되어있는 n 개의 정수가 주어졌을 때 어떤 값을 찾아내야 하는 문제가 있다

양 쪽 끝을 포인터로 지정하여 그 둘을 더한 값의 반 즉, 중간지점을 찾는 것이다 찾는 값이 그 중간지점보다 작으면 포인터 오른쪽 끝을 중간지점-1을 해서 탐색하는 창을 왼쪽으로 옮기고, 중간지점보다 크다면 포인터 왼쪽 끝을 중간지점+1 을 해서 탐색하는 창을 오른쪽으로 옯긴다

해당 조건을 계속 반복하다보면 값을 찾을 수 있다 좀 더 복잡하지만 시간복잡도를 줄일 수 있는 방법이다

11/19

📝 할 일

• 백준 5문제
• 리액트 강의 수강

✅ 한 일

• 백준 5문제

이번에도 전부 조건문이나 메서드로 간단하게 해결되어서 오래 걸리지는 않았다

• 리액트 강의 props 파트 수강

일이 생겨서 할 일 실패..

내일은 꼭 한다 해낸다

11/20

📝 할 일

• 백준 5문제
• 리액트 강의 props 파트 수강

✅ 한 일

• 백준 5문제

25494번 단순한 문제는 풀고 보면 단순했지만 머리에서는 단순하게 풀 수 없었던 문제다

조건에서 나머지가 다 같아야 한다고 했는데 말그대로 숫자들 중 가장 작은 수만 구하면 되는 문제였다

25591번 푸앙이와 종윤이는 괜히 어렵게 if 문으로 d 가 100 이상이면 c+q 와 r 을 다르게 출력해라 라고 지정해줬는데 그냥 출력할 때 c+q 와 r 을 출력해주면 되는 거였다

25625 번 샤틀버스는 문제 자체를 이해하지 못했는데 출력하라는대로 구색만 맞췄더니 정답이라고 해서 쫌 놀랐다 조원분들한테 여쭤봐야 겠지만 x 는 편도 시간이고 y 분 후에 버스가 공학관으로 도착하는 것인데 그럼 공학관으로 찍고 설대입구에 와야 민준이가 탑승할 수 있는 것 아닌가..? 그럼 x+y 를 해주면 되는건데 x 보다 y 가 크면 y-x 를 출력해줘야 하는지 이해가 안된다…

• 리액트 강의 props 파트 수강

props 는 써왔던 거라 익숙하다고 생각했는데 또 onClick 에 함수를 적용하니 헷갈렸다