[TIL] 240513 (React My Todo List 만들기 완료)

·2024년 5월 13일

TIL

목록 보기
40/268
post-thumbnail

🥞 오늘 한 일

  • 리액트 입문주차 개인과제 완료
    • UI 구현하기
    • Todo 추가 하기
    • Todo 삭제 하기
    • Todo 완료/취소 상태 변경하기
  • 스탠다드반 수업 (15:00)
  • 스탠다드반 1st 과제 완료
  • 알고리즘 코드카타
    • 기사단원의 무기

🍽️ 문제 해결

스탠다드반 1st 과제

jsx의 onClick 내 함수 사용

문제 및 해결과정

<button onClick={removeUser(user.id)}>삭제</button>

버튼을 클릭하면 removeUser 함수를 실행하려고 했다. 그러나 계속해서 오류가 났다. 분명 버튼을 누르지도 않았는데 함수가 실행되는 것이다. 그 때 나는 금일 스탠다드반 수업에서 들었던 내용을 떠올렸다. jsx에서 사용하는 문법은 html에서 사용하는 문법과 조금 다르기에, 다음과 같이 작성해주어야 한다.

<button onClick={() => removeUser(user.id)}>삭제</button>

문제가 해결되었다.

알고리즘 코드카타

기사단원의 무기

문제

숫자나라 기사단의 각 기사에게는 1번부터 number까지 번호가 지정되어 있습니다. 기사들은 무기점에서 무기를 구매하려고 합니다.

각 기사는 자신의 기사 번호의 약수 개수에 해당하는 공격력을 가진 무기를 구매하려 합니다. 단, 이웃나라와의 협약에 의해 공격력의 제한수치를 정하고, 제한수치보다 큰 공격력을 가진 무기를 구매해야 하는 기사는 협약기관에서 정한 공격력을 가지는 무기를 구매해야 합니다.

예를 들어, 15번으로 지정된 기사단원은 15의 약수가 1, 3, 5, 15로 4개 이므로, 공격력이 4인 무기를 구매합니다. 만약, 이웃나라와의 협약으로 정해진 공격력의 제한수치가 3이고 제한수치를 초과한 기사가 사용할 무기의 공격력이 2라면, 15번으로 지정된 기사단원은 무기점에서 공격력이 2인 무기를 구매합니다. 무기를 만들 때, 무기의 공격력 1당 1kg의 철이 필요합니다. 그래서 무기점에서 무기를 모두 만들기 위해 필요한 철의 무게를 미리 계산하려 합니다.

기사단원의 수를 나타내는 정수 number와 이웃나라와 협약으로 정해진 공격력의 제한수치를 나타내는 정수 limit와 제한수치를 초과한 기사가 사용할 무기의 공격력을 나타내는 정수 power가 주어졌을 때, 무기점의 주인이 무기를 모두 만들기 위해 필요한 철의 무게를 return 하는 solution 함수를 완성하시오.

실패한 풀이

function solution(number, limit, power) {
    let arr = [];
    for (let i=1; i<=number; i++){
        let num = 0;
        for (let j=1; j<=i; j++){
            if (i%j===0){
                num++;
            }
        }
        if (num > limit){
            arr.push(power);
        } else {
            arr.push(num);
        }
    }
    let result = arr.reduce((acc,cur)=>acc+cur);
    return result;
}

알맞게 잘 풀었다고 생각했지만, 11~16, 18, 24, 25번째 테스트 케이스에서 시간 초과로 실패했다.
그리하여 더 효율적인 코드를 생각해보게 되었고, 약수를 1부터 끝까지 계산하지 않는 다른 방법을 찾아보았다.

성공한 풀이

function solution(number, limit, power) {
    let arr = [];
    for (let i=1; i<=number; i++){
        let num = 0;
        for (let j=1; j<=Math.sqrt(i); j++){
            if (i%j===0){
                if (i/j== j){
                  num++;
                } else {
                  num = num +2;
                }
            }
        }
        if (num > limit){
            arr.push(power);
        } else {
            arr.push(num);
        }
    }
    let result = arr.reduce((acc,cur)=>acc+cur);
    return result;
}

크게 달라지진 않았지만, 반복문 내에서 약수를 구하는 방법을 찾아서 적용시켰더니 무사히 통과할 수 있었다.
도움받은 출처

🍪 배운 것

스탠다드반 수업

리액트 기초주차 복습

  1. 리액트 프로젝트 셋업 (by Vite)
  2. JSX 이해하기
  3. useState 동작 간단하게 살펴보기
  4. 객체/배열 구조분해할당에 익숙해지기
  5. spread operator & 배열 map 메소드
  6. 다양한 배열 메소드 익숙해지기

🍴 느낀 점

아직 입문 주차라서 그런지 과제를 빠르게 완료할 수 있어서 좋았다. 하지만 강의와 과제, 수업에서도 계속 비슷한 개념을 반복하고 있어 그만큼 중요하다고 생각이 들기 때문에 끝났다고 그대로 두지 말고 계속 반복 학습을 하면서 익숙해지는 시간이 필요한 것 같다.

🍳 내일 할 일

  • 리액트 입문주차 개인과제
    • 질문 답변 작성
  • 리액트 기초과정 학습목표 질문 정리
profile
웹 프론트엔드 개발자

0개의 댓글