[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 Day 1

 

사전직무교육 Day1

 

 

오프라인 참가자이지만 병원진료 때문에 온라인으로 참여하게된 ZEP

 

프로젝트 캠프 React 2기 과정에 참여하게 된 첫날이다. (두근두근)
오전에는 오리엔테이션과 총 네개의 기업 프로젝트가 소개되었고, 오후에는 본격적인 사전직무교육이 진행되었다.

 

나는 오프라인 참가로 신청했지만, 캠프 첫날에 하필 병원 진료예약이 되어있어 어쩔 수 없이 온라인으로 참가했다.

강사님이 강단 위에 올라가 화면공유와 함께 수업을 진행하고, 수강생들은 카메라를 켠 채 수업을 듣는 방식이었다.

애초에 오프라인 참가였기 때문에 온라인으로 참여할 수 있는 경험을 할 수 있어서 신기하고 좋았다.

 

오늘은 간단한 자바스크립트 문법과 타입스크립트 기초에 대해 학습했다.

자바스크립트는 익숙했지만, 타입스크립트는 사용하기 시작한지 얼마 안되서 더 집중했던 것 같다.

 

---

 

⚠️ 필수 자바스크립트 문법

• let / const / var
  • let, var 는 재할당이 가능
  • const 는 재할당이 불가능
  • var 는 사용을 지양해야함 (예상치 못한 버그 발생을 줄이기 위해)
• 함수 표현식 / 함수 선언문 / 화살표 함수
• 비구조화 할당

// 배열(array)

const fruits = ['blueberry', 'lemon', 'pineapple'];

const a = fruits[0];
const b = fruits[1];
const c = fruits[2];

console.log(a, b, c); // 'blueberry', 'lemon', 'pineapple'


const [a, b, c] = fruits;
console.log(a, b, c); // 'blueberry', 'lemon', 'pineapple'

// 객체

const fruits = {
	name: 'banana',
    color: 'yellow',
    taste: 'sweety',
};

const fruitsName = fruits.name;
const fruitsColor = fruits.color;
const fruitsTaste = fruits.taste;

console.log(fruitsName, fruitsColor, fruitsTaste); // 'banana', 'yellow', 'sweety'


const {fruitsName, fruitsColor, fruitsTaste} = fruits
console.log(fruitsName, fruitsColor, fruitsTaste); // 'banana', 'yellow', 'sweety'

• 스프레드 연산자
  • 얕은 복사
    • 참조 자료형(배열,객체)에서 주소값을 복사하므로 값을 수정할 경우 주소값이 일치하여 함께 수정됨
  • 깊은 복사
    • 참조 자료형(배열,객체)에서 새로운 주소값을 복사하므로 값을 수정할 경우 주소값이 일치하지 않으므로 함께 수정되지 않음
    • 이 경우에 스프레드 연산자를 사용
    • 배열의 경우 2개 이상의 배열을 병합할 때 간단히 인덱스를 활용해 합치거나 스프레드 연산자를 사용
    • 객체의 경우 2개 이상의 객체를 병합할 때 스프레드 연산자를 활용
      • key가 중복일 경우 가장 마지막 key, value가 덮어씌워짐

 

🌀 타입 스크립트

 

타입스크립트는 자바스크립트에 type이 추가된 확장 언어

 

타입스크립트로 작성된 코드를 실행하려면 자바스크립트 코드로 변환해주는 작업이 필요한데, 이를 컴파일(compile)이라고 함

• 타입스크립트 기본 타입
  • string
  • number
  • boolean
  • object
  • Array
  • tuple
  • any
  • null
  • undefined
• 타입스크립트 함수 타입
  • 매개변수에 타입 지정
  • 반환값에 타입 지정
  • 옵셔널 파라미터
    • 타입으로 지정한 매개 변수를 생략할 수 있음
    • ? 기호로 표시
• 타입 오퍼레이터
  • 유니언 타입
    • OR( || ) 연산자와 같은 역할을 함
    • 오퍼레이터( | )로 여러개의 타입을 결합
    • 연결된 타입 중 1개만 만족하면 됨
  • 인터섹션 타입
    • AND( && )연산자와 같은 역할을 함
    • 오퍼레이터 ( & )로 2개 이상의 타입을 결합
    • 연결된 타입 모두 만족해야함
• 인터페이스
  • 객체 타입을 지정할 때 사용
  • 타입 지정을 하기 복잡하거나 나만의 인터페이스를 만들고자 할 때 주로 사용함

 

📚 오늘의 과제

• 문장에서 가장 긴 단어를 반환하는 함수 만들기

const getLongestStr = (str: string):string => {
	const arr: string[] = str.split(" ");
    return arr.reduce((a:string, b:string):string => a.length > b.length ? a : b);
};

getLongestStr("a, apple");

1. 문장으로 이루어진 문자열 한개를 매개변수로 받아온다.
2. 띄어쓰기를 기준으로 단어가 나뉘어진다.
3. 단어의 글자수를 비교한다.

위와 같이 문제에서 도출해낼 수 있는 조건을 추려내면,

띄어쓰기를 기준으로 단어가 나뉘어지므로 문자열을 배열로 변환하여 접근하는게 편할 것 같다고 생각했다.

split() 메서드를 사용하여 문자열을 배열로 변환하고, reduce() 메서드를 통해 단어의 글자수를 비교하였다.

 

• 암스트롱 수 구하기

const getArmstrongNumbers = (num: number): number | undefined => {
  if (num > 99 && num < 1000) {
    const str: string = num.toString();
    const sum = str.split("").reduce((acc: number, val: string): number => {
      return Number(acc) + Number(Math.pow(Number(val), 3));
    }, 0);

    if (num === sum) return num;
  }
};

getArmstrongNumbers(407);

1. 100 에서 999 사이의 수이다.
2. 407을 예로 들면 아래와 같다.
   407 = 64 + 0 + 343
   4 0 7 => 4의 세제곱 + 0의 세제곱 + 3의 세제곱

위와 같이 문제에서 도출해낼 수 있는 조건을 추려내서 첫번째와 같은 결과를 제출했다.

매개변수로 임의의 숫자를 받아왔고, 그 수가 100~999 사이의 수일 경우에 결과값을 출력할 수 있도록 했다.

각 자릿수의 세제곱근을 더한 값과 매개변수로 받아온 숫자가 일치한지 비교하기 위해 reduce() 메서드를 사용하는 것으로 생각했다.

reduce() 는 배열 메서드이기 때문에 매개변수로 받아온 숫자를 배열로 변환하기 위하여 숫자 타입을 문자열로 변환 후 배열로 변환시켰다.

reduce() 메서드의 매개변수가 각각 문자열로 변환되었기 때문에, Number() 메서드를 사용해서 다시 숫자 타입으로 변환시켰다.

Math.pow() 메서드를 활용해서 세제곱근을 구하여 누적합을 구해 매개변수로 받아온 숫자와 합이 같은지 비교 후, 같으면 매개변수를 반환하도록 하였다.

 

 

하지만 문제를 완전 잘못 이해했다..!

100 에서 999 사이의 수라는 뜻은 100부터 999까지의 수 중에서 암스트롱 수인것을 순차적으로 출력하는 것이 목적이었던 것이다.

친절하게 다시 설명해주신 강사님께 감사의 인사를...

const findArmstrongNumbers = (start: number, end: number): number[] => {
  const armstrongNumbers: number[] = [];

  for (let num = start; num < end; num++) {
    const sum: number = num
      .toString()
      .split("")
      .reduce((acc: number, val: string) => {
        return acc + Math.pow(Number(val), 3);
      }, 0);

    if (sum === num) {
      armstrongNumbers.push(num);
    }
  }

  return armstrongNumbers;
};

console.log(findArmstrongNumbers(100, 1000));

 

문제를 다시 이해하고, 함수를 다시 만들었다.

100에서 999까지의 수를 비교하기 위해 매개변수로 암스트롱 수를 찾을 수의 범위(시작 수, 끝 수)를 받아오도록 했다.

그 후 for문으로 100~999까지의 수의 범위 내 숫자를 순차적으로 반복할 수 있도록 하였고, 나머지는 위에서 설명한 것과 비슷하다.

다른 점이 있다면, 순차적으로 받아올 암스트롱 수를 넣어줄 빈 배열을 만들고, num 값과 sum 값이 동일할 경우 push() 메서드를 통해 빈 배열에 순차적으로 삽입하고, 삽입된 배열을 반환하도록 했다.

 

---

 

첫날이라 서류 작성하고 제출해야 할 것도 많고, 주의사항 등 집중해서 들어야 할 내용도 있었고, 병원도 다녀와서 정신이 없었다.

하지만 강사님과 스텝분들의 열정이 느껴져서 덕분에 강의와 오리엔테이션 시간 내내 집중해서 들을 수 있었다.

다 아는 내용이라고 간과하지 말고 끝까지 집중해서 수업도 잘 듣고, 과제도 최선을 다 해야겠다.

 

화이팅!! 😇

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.