[TIL] 내일배움캠프 React 과정 2023.02.02

Today I Learned

• Programmers 문제 풀기
• 최종프로젝트 준비하기

 

---

Programmers 문제 풀기

가장 큰 수 찾기

나의 풀이

function solution(array) {
    let max_num = array[0];
    let answer = [];
    for (const i in array) {
      if (array[i] > max_num) {
          max_num = array[i];
          answer = [max_num, +i];
      }
    }
    return answer;
};

 

다른 사람의 풀이 01

function solution(array) {
    let max = Math.max(...array);
    return [max, array.indexOf(max)];
}

최댓값 찾아주는 메서드가 있었구나... 그렇구나... indexOf도 공부해 봐야겠다!

 

const array1 = [1, 3, 2];

console.log(Math.max(...array1));
// Expected output: 3

• **Math.max()**함수는 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환합니다.
• 출처 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/max

 

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// Expected output: 1

• indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.
• 출처 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

 

짝수와 홀수

나의 풀이

function solution(num) {
    return num % 2 === 0 ? "Even" : "Odd"
}

0단계를 55% 정도 풀고 1단계로 넘어간다.

 

 

다른 사람의 풀이

function evenOrOdd(num) {
  return num % 2 ? "Odd" : "Even";
}

숫자 0인 경우 false가 출력되기 때문에 이것을 이용해서 === 0을 생략할 수도 있다..!

• Falsy 값에는 빈 문자열 " ", 숫자 0, 불리언 false, null, undefined, NaN가 해당된다.
• Falsy 값이 아닌 모든 값은 Truthy 값으로 연산되며 결국 true로 평가된다고 이해할 수 있다.
• 항상 Truthy로 판단되는 자료형이 있다.
  • Array
  • Object

 

평균 구하기

나의 풀이

function solution(arr) {
    return arr.reduce((acc, cur) => acc + cur, 0) / arr.length
}

 

---

VSC global snippet 설정하기

{
  "Console log": {
    "prefix": "cl",
    "body": "console.log($1);"
  },
  "Console log with string template": {
    "prefix": "cs",
    "body": "console.log('$1:', $2);"
  },
  "React Fuction Component": {
    "prefix": "rfc",
    "body": [
      "export default function ${TM_FILENAME_BASE}() {",
      "  return (",
      "    <div>${TM_FILENAME_BASE}</div>",
      "  );",
      "};"
    ]
  },
  "UseState": {
    "prefix": "us",
    "body": "const [$1, set$2] = useState($3)"
  },
  "Arrow function": {
    "prefix": "af",
    "body": ["const $1 = () => {", "  $2", "};"]
  }
}

유튜브 영상을 보고 코드 스니펫을 몇 개 설정했다. 자주 쓰는 콜솔로그랑 rfc, useState, 화살표 함수 정도를 만들었다. 영상 보면서 따라 하니까 생각보다 어렵지 않았다!

 

참고

https://youtu.be/umeqCopb96w

https://snippet-generator.app/?description=React+Fuction+Component&tabtrigger=&snippet=&mode=vscode

---

회고

알고리즘 기초가 부족한 거 같아서 스파르타에서 제공해 준 알고리즘 강의 자료를 복습하고 있다. 거기서 문제를 풀 수 있는 다양한 방법을 접한 후에 실제로 문제를 풀 때 적용해보려고 한다. 근데 오전에만 잠깐 하다가 다른 거 공부하는 게 더 급한 거 같아서 그만뒀다.

 

오늘 최종프로젝트에 대해서 팀원분과 얘기도 많이 나누고 고민도 공유하며 미리 준비하는 시간을 가지기도 했다. 리더 부리더를 지원해서 좋은 점이 팀의 방향성이라든지 프로젝트 관련해서 미리 얘기를 나눌 수 있다는 점인 거 같다. 내일은 Next.js를 더 열심히 공부해야겠다!