20230523(화)_ JavaScript 문법 종합반 1회차 진행 중

목표와 달성률

[금일 달성 항목]
1. JavaScript 문법 종합반 2주차 : es6, 일급객체로서의 함수, Map과 Set 1회차 완강
2. JavaScript 문법 종합반 3주차 : 데이터 타입(심화), 실행 컨텍스트, this 1회차 완강

3. 코딩테스트 입문 LV.0 / Day2 사칙연산, 조건문, 배열

4. TIL 특강 참여

 

[내일 목표]

1.  JavaScript 문법 종합반 4주차 : 콜백 함수와 동기/비동기 처리 1회차 완강

2. JavaScript 문법 종합반 5주차 : DOM과 클래스, 클로저 1회차 완강

2.  코딩테스트 입문 LV.0 / Day3 사칙연산, 배열, 수학

 

 

---

문제 해결 과정 1

[문제]

정수 num1과 num2가 매개변수로 주어질 때, num1을 num2로 나눈 값에 1,000을 곱한 후 정수 부분을 return 하도록 soltuion 함수를 완성해주세요.

 

제한사항  

• 0 < num1 ≤ 100
• 0 < num2 ≤ 100

입출력 예

num1	num2	result
3	2	1500
7	5	2333
1	16	62

 

[시도]

전날 알게된 Math.floor 라는 함수를 사용하여 정수 중 큰 수를 반환하도록 하였습니다.

근데 자꾸만 오류가 났습니다. Math.floor is not a function (Math.floor는 함수가 아닙니다.)

function solution(num1, num2) {
    return(Math.floor = (num1/num2)*1000);
}

 

[해결]

var로 변수를 선언 후 다시 시도했습니다.

function solution(num1, num2) {
    var answer = Math.floor((num1/num2)*1000);
    return answer;
}

 

[알게 된 점]

다른 사람들의 풀이에 다양한 방식이 있어 공부가 되었습니다.

 

Math.trunc() 함수를 사용하여 해결

function solution(num1, num2) {
    return Math.trunc(num1 / num2 * 1000);
}

 

화살표 함수를 사용하여 해결

const solution = (num1, num2) => Math.floor(num1 / num2 * 1000)

 

 

parseInt 함수 사용하여 해결

function solution(num1, num2) {
    return parseInt(num1 / num2 * 1000);
}

참고 링크

https://jamong-icetea.tistory.com/14

parseInt()함수와 Number()함수의 차이

var strNum = "10.123";
console.log("parseInst :" + parseInt(strNum)); // 10
console.log("Number :" + Number(strNum)); // 10.123

vs에서 확인해보니 Number는 소수를 가져가지만, parseInst는 소수를 가져가지 않는 것을 알 수 있었습니다.

 

 

 

---

문제 해결 과정 2

[문제]

정수 num1과 num2가 매개변수로 주어집니다. 두 수가 같으면 1 다르면 -1을 retrun하도록 solution 함수를 완성해주세요.

 

제한사항  

• 0 ≤ num1 ≤ 10,000
• 0 ≤ num2 ≤ 10,000
•  

입출력 예

num1	num2	result
2	3	-1
11	11	1
7	99	-1

 

[시도]

if 문을 사용하였습니다.

function solution(num1, num2) {
  var answer = 0;

  if (num1 == num2) {
    answer = 1;
  } else {
    answer = -1;
  }
  return answer;
}

var answer = solution(2, 3);
console.log(answer);

 

[해결]

해결은 하였으나 다른 사람의 푼 코드가 더 직관적이었습니다.

 

[알게 된 점]

3항 연산자 사용하여 해결

function solution(num1, num2) {
    var answer = num1 === num2 ? 1 : -1;
    return answer;
}

 

화살표 함수를 사용하여 해결

const solution = (num1, num2) => num1 === num2 ? 1 : -1

 

 

---

문제 해결 과정 3

[문제]

첫 번째 분수의 분자와 분모를 뜻하는 numer1, denom1, 두 번째 분수의 분자와 분모를 뜻하는 numer2, denom2가 매개변수로 주어집니다. 두 분수를 더한 값을 기약 분수로 나타냈을 때 분자와 분모를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요.

 

제한사항  

• 0 <numer1, denom1, numer2, denom2 < 1,000

입출력 예

numer1	denom1	numer2	denom2	result
1	2	3	4	[5,4]
9	2	1	3	[29,6]

 

[시도]

lv.0 임에도 불구하고 난이도가 갑자기 올라가 해결을 못해 구글링을 하였습니다;

 

[해결]

function solution(numer1, denom1, numer2, denom2) {
  let denom = denom1 * numer2 + denom2 * numer1; //분자구하기
  let numer = denom1 * denom2; //분모구하기

  let minNum; //작은수찾기
  if (denom < numer) { 
    minNum = denom;
  } else {
    minNum = numer;
  }

  while (true) { //참이면 계속 반복해줘
    if (denom % minNum === 0 && numer % minNum === 0) { //나머지가 0으로 되면
      return [denom / minNum, numer / minNum]; //배열로 보여줘
    }
    minNum -= 1; //아니면 작은수 -1해줘
  }
}

https://blog.naver.com/leesh2985/223098891665

분수의 덧셈

 

[알게 된 점]

간단한 수학 문제를 코드로 가져와서 풀면되는 것을 깨달았습니다

 

추가로 더 간결하게 코드를 작성한 사람도 있었습니다.

function fnGCD(a, b){
    return (a%b)? fnGCD(b, a%b) : b;
}

function solution(denum1, num1, denum2, num2) {
    let denum = denum1*num2 + denum2*num1;
    let num = num1 * num2;
    let gcd = fnGCD(denum, num); //최대공약수

    return [denum/gcd, num/gcd];
}

fnGCD라는 최대공약수를 찾는 함수를 사용한건데 자세히 풀이한 사람의 블로그가 있어 참고로 가져와봤습니다.

https://velog.io/@youngman98/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-JS-%EB%B6%84%EC%88%98%EC%9D%98-%EB%8D%A7%EC%85%88

프로그래머스 JS: 분수의 덧셈

 

풀이는 아래와 같다고 합니다.

function fnGCD(a, b){ // 여기서 a는 분자들의 합, b는 분모들의 곱이다
	// 삼항연산자에서 %를 했을때 나머지가 있다면 true가 되어 fnGCD(b, a%b)가 실행되고
	// 나머지가 없다면 false가 되어 b가 실행된다.
    return (a%b)? fnGCD(b, a%b) : b;
	// (a%b)를 해서 나머지가 있는 true가 되고 fnGCD(b, a%b)가 실행되면
	// 유클리드 호제법에 따라 b를 a/b의 나머지인 a%b로 나눈다.
	// 이를 나머지가 0이 될 때 까지 반복한다.
	// 0이 된다면 마지막으로 나눈수가 최대공약수가 된다.
}

개발을 잘하려면 영어도 수학도 잘해야하는 것을 깨달았습니다 ㅠ..

 

 

 

---

문제 해결 과정 4

[문제]

정수 배열 numbers가 매개변수로 주어집니다. numbers의 각 원소에 두배한 원소를 가진 배열을 return하도록 solution 함수를 완성해주세요.

 

제한사항  

• -10,000 ≤ numbers의 원소 ≤ 10,000
• 1 ≤ numbers의 길이 ≤ 1,000

입출력 예

numbers	result
[1, 2, 3, 4, 5]	[2, 4, 6, 8, 10]
[1, 2, 100, -99, 1, 2, 3]	[2, 4, 200, -198, 2, 4, 6]

 

[시도]

와씨 1주차 자바스크립트 기본문법에서 배운 map()메소드를 사용했습니다! 아는게 나와서 얼마나 반가운지

let numbers = [1, 2, 3, 4, 5];

let squaredNumbers = numbers.map(function (number) {
  return number * 2;
});

console.log(squaredNumbers); // [ 2, 4, 6, 8, 10 ]

vs code에서 실행하고 잘 나오는 것을 확인했습니다!

근데 프로그래머스스쿨에서는 자꾸 오류가 났습니다;; 분명 맞는데??

대체 왜인지 모르겠어서 다른 사람들의 해결방안을 살펴보았습니다.

 

[해결]

https://blog.naver.com/nodame3806/222898364553

[JavaScript] 프로그래머스 코딩테스트 연습 : 배열의 2배 만들기

위 블로그를 참고하였습니다. 쓰는 방식이 잘못된 것을 알게되었습니다.. 앞뒤 구분도 못하는 코린이란;;

추가로 다른 방식으로 해결하는 방법도 알게되었습니다.

 

Map method를 활용한 해결 방안

const solution = (numbers) => {
    return numbers.map(x => x*2)
}

const solution = (numbers) => numbers.map((number) => number * 2)

function solution(numbers) {
    var answer = [];
    return numbers.map(number => number * 2);
}

정렬만 다르지 위 아래 같은 방법이죠.

해설: map() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하여 결과값을 만듦.

 

reduce를 활용한 해결 방안

function solution(numbers) {
    return numbers.reduce((a, b) => [...a, b * 2], []);
}

해설: 만약 numbers가 [1,2,3,4,5]라면 b는 currentValue로써 1부터 5를 순차적으로 돌고, ...a는 accumulator 이걸 누적해서 배열에 복사하는역할 [1], [1,2] ~ [1,2,3,4,5] 그리고 두번째인자 []빈배열은 배열에 담아 반환하기 위해 콜백함수의 초기값으로 전달.

 

 

 

---

느낀점

참여 2일차, 강의에 이해가 안가는 부분이 너무 많아 튜터님께 방향성에 대해 질문드렸습니다. 

한 번에 이해를 못하는게 당연하시다면서, 튜터님께서는 빠르게 3회독 or 5회독을 권장하셨습니다. 

추가로, 프로그래머스 스쿨을 통해 조금씩 공부하고 해설해보면서 계속 적용해보려고 합니다.

조급한 마음이 들지만 이해하기 위해 계속 노력하고자 합니다.

 

---

특강

TIL 특강 - 강민철 튜터

• 어떤 내용이 TIL에 들어가야 하나 (문시해알)
  : 문제
  : 시도
  : 해결
  : 알게된 점
• TIL을 쓸때 알아야 할 것
  : 회사에 아는 것을 증명하는게 중요
  : 성장, 성실함, 흡수력, 내가 까먹지 않아야함 (뭘 배웠는지 설명할줄 알아야함), 갈등상황 해결
  : TIL은 알다라는걸 증명하는 수단, 개별 적용의 답안지
• TIL을 쓸때 하지 말아야 할 것
  : 예쁘게 꾸미기
  : 통째로 붙인 코드
  : 강의 내용 복붙 요약
  : 감성적인 글
• WIL 쓰는 법
  : TIL에서 알게된 것 총정리
  : 이번주 목표 달성 여부 / 다음주 목표 세우기

---

VSCODE 사용시 유용한 단축키 정보

https://inpa.tistory.com/entry/VS-Code-%E2%8F%B1%EF%B8%8F-%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%8B%A8%EC%B6%95%ED%82%A4-%EC%A0%95%EB%A6%AC

💽 유용한 VSCode 단축키 모음 - 개발을 누구보다 빠르게