[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 1일차 과제( 가장 긴 단어 반환하는 함수, 암스트롱 수 구하기 )

 

2024.08.19(월) - 1일 차 과제

 

1일 차 첫 번째 과제는 다음 두 가지였습니다.

 

첫 번째 문제는 아래 예시와 같이 

"Hello, wor" 을 매개변수로 받으면 Hello, 와 Wor 중 더 긴 Hello, 를 반환하고

"ab cde" 를 매개변수로 받으면 ab 와 cde 중 더 긴 cde 를 반환하는 함수를 만들어보는 것입니다

 

위 문제를 보고 "Hello," 를 반환하는 것으로 보아 우선 입력string(=매개변수 string)을

공백으로 분리해야겠구나 생각이 들었습니다. 자바스크립트에서 split이 그러한 분리를

해주는 역할이기에 split을 사용해야겠다고 생각했습니다.

 

먼저 함수를 저장할 변수를 printLongestWord라 이름 짓고

오늘 배운 화살표 함수로 함수를 작성하겠습니다.

 

찾고자하는 문장을 str로 지정하고 공백으로 분리합니다.

split은 공백으로 분리하고 각 분리된 요소들을 배열로 반환합니다.

그것을 words에 저장합니다.

가장 긴 단어의 길이를 longestLength

가장 긴 단어를 longestWord로 하고 각각의 최소값인 1과 a (a말고도 그냥 한 글자면 됨)를 저장합니다.

 

그리고 분리된 요소들만큼 반복을 돌며 가장 긴 단어를 찾을 것이기 때문에

배열 길이 만큼 반복을 해주는 아주 편리한 map 함수를 사용합니다.

map 반복문 안에 if 문을 다음과 같이 작성합니다.

말로 설명하자면

"지금 참조하는 해당 단어의 길이가 longestLenth 보다 길다면 longestLength를 e.length로 최신화하고

longestWord를 e로 최신화해라."

 

반복을 마치고 나면 결국 가장 긴 단어의 길이가 longestLengh에 저장되고

가장 긴 단어가 longestWord에 저장이 되므로 map 함수 이후에 

return longestWord를 하면 됩니다.

const printLongestWord = (str) => {
  let words = str.split(' ');
  let longestLength = 0;
  let longestWord = 'a';
  words.map((e)=>{
    if(e.length > longestLength){
      longestLength = e.length;
      longestWord = e
    }
  })
  return longestWord;
}


let a = printLongestWord("Hello, wor");
let b = printLongestWord("ab cde");

console.log(a);
console.log(b);

 

 

그리고 위의 함수를 타입스크립로 작성하고 타입을 정의한다면

매개변수로 str이 string이고 return값 또한 string이므로

다음과 같게 됩니다.

const printLongestWord = (str:string): string => {
  let words = str.split(' ');
  let longestLength = 0;
  let longestWord = 'a';
  words.map((e)=>{
    if(e.length > longestLength){
      longestLength = e.length;
      longestWord = e
    }
  })
  return longestWord;
}

 

#### 추가 ####

sort 내장함수를 사용하면 좀 더 코드가 간결해진다.

// 아래와 같이 sort 내장함수를 사용하면 훨씬 간단하게 할 수 있다
str.split(" ").sort((a,b) => b.length - a.length)[0];

---

 

 

두 번째 문제는 100부터 999까지 암스트롱 수를 구하는 것입니다.

암스트롱의 수는 세 자리의 정수 중에서 각 자리의 수를 세 제곱한 수의 합과 자신이 같은 수를 말합니다.

예를 들어 153 = 1 + 125 + 27 입니다. 이와 같은 수를 암스트롱의 수라고 말합니다.

 

각 자리의 수를 세 제곱한 수의 합과 자신이 같은지를 알려면  

먼저 각 자릿수의 값을 구하는게 첫 번째 임무였기에

 

단순하게

백의 자리 수에는 100으로 나누고 

십의 자리 수에는 앞서 구한 백의 자리 값에 100을 곱하여 뺀 후 10으로 나누고

일의 자리 수에는 (처음에 구한 백의 자리 값에 100을 곱한 것과 두 번째로 구한 십의 자리값에 10을 곱한 것을 더하여)

빼주면 일의 자리 값만이 남습니다.

 

그렇게 하여 모두 더한 값을 result 에 저장하여 i 와 비교하여 같은 값은 암스트롱 수 이므로

armstrongArray에 push 합니다. 그리고 console.log 를 이용하여 출력합니다.

 

그런데 결과 값이 이상하여 하나하나 디버깅을 해보니 세제곱 값에 이상한 값이 들어있는 것이었습니다.

소수점이 있는 것을 보아 나누기 할 때에 생긴 소수점이 문제란 것을 찾아

소수점을 버리는 함수를 찾아보니 Math.trunc라고 있어 사용하여 문제를 해결하였습니다.

 

// 소수점 없애기 전!
let num1 = i/100;
let num2 = (i - (num1 * 100))  / 10;
let num3 = i - (num1*100 + num2*10);

const armstrongNumber = function(){
  const armstrongArray = [];
  for(let i = 100; i < 1000; i++){

    //각 자릿수의 세제곱 값 구하기
    //소수점 아래 버리기 trunc
    let num1 = Math.trunc(i/100);
    let num2 = Math.trunc((i - (num1 * 100))  / 10);
    let num3 = Math.trunc(i - (num1*100 + num2*10));
    
    let sum1 = Math.pow(num1, 3);
    let sum2 = Math.pow(num2, 3);
    let sum3 = Math.pow(num3, 3);
    
    //각 자릿수의 세제곱 값 더한 값 result
    let result = sum1 + sum2 + sum3;
    
    //i와 result 비교 같다면 암스트롱 수이기에
    //armstrongArray에 추가(push)
    if(i === result){
      armstrongArray.push(i);
    }
  }
  console.log(armstrongArray);
}

armstrongNumber();

 

정답은 153, 370, 371, 407 입니다

 

암스트롱 수라는 것을 처음 들어보았는데 신기했고 흥미로운 과제였습니다.

얼핏 보면 어려운 문제인 것 같아도 작은 부분부터 차근차근 하나하나 해결해 나가면

쉽게 해결할 수 있다는 것을 체험할 수 있었습니다.

 

 

#### 추가 ####

split("")과 map(Number) 를 사용하여 각 자리수의 세제곱 값을 좀 더 쉽게 구할 수 있다

const isArmstrongNumber = (num:number): boolean => {
    const digits = num.toString().split("").map(Number);   // [1, 5, 3]
    const sumOfCubeDigits = digits.reduce(
        (acc, digit) => acc + Math.pow(digit, 3), // acc:0, acc:1, acc:126, acc:153
        0	// acc 초기값 설정
    );
    return sumOfCubeDigits === num;  // 암스트롱수? 원본숫자 === 각 자리수의 세제곱의 합
};

const printArmstrongNumbers = (): void => {
    for(let i = 100; i <= 999; i++) {
        if(isArmstrongNumber(i)){
            console.log(i);
        }
    }
};

printArmstrongNumbers();

 

 

 

 

——————————————————————————

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다. #유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정