[유데미x스나이퍼팩토리 프로젝트 캠프] Next.js 3기 Day 1

 

우선 내가 궁금했던,, 자스와 타입스크립트 차이점

Js : 웹 개발 주로 사용, 웹 페이지를 대화식으로 만든다, 멀티 스레싱 X, 클라이언트 측 스크립팅 언어

Ts : Js의 상위 버전, Js의 모든 기능이 있다, 정적 유형 검사를 제공, 클래스 기반 객체를 만들 수 있다.

 

 

1) Typescript 설치 진

우선, 타입 스크립트를 설치한 후 실습을 진행했다.

VS code 에서 적당히 파일을 만든 후,

// 버전확인
npx tsc -v

//타입스크립트 초기화
npx tsc --init

터미널에서 위와 같이 진행한다.

 

2) 기본 자바스크립트 문법

(2.1) let, const, var

- let과 const는 자바스크립트에서 변수를 선언할 때 사용하는 키워드로 ES6에서 추가되었다.

- var 키워드는 선언을 중복할 수 있고, scope의 범위가 전역함수로 제한되고, 호스팅이 가능하기 때문에 사용하지 않는게 좋다.

- let은 기존 var를 대체하는 변수 역할을 하고, const는 기존에 없던 상수 역할을 한다.

let num = 10; //재할당 가능
num = 20;

const numArr = [];
numArr.push(10);
console.log(numArr);

 

(2.2) 템플릿 문자열

기존 큰 따옴표나 작은 따옴표 대신 ` (백틱)으로 문자열을 정의

const str = 'A'; 
const str2 = "B"; 
const str3  = `10 + 20 = ${10 + 20}`;
console.log(str3);

 

(3) 화살표 함수

(3-1) 함수 선언문
function sum(a,b){
     return a+ b;
}

// 화살표 함수로 바꾸면 아래와 같이 변경
(a,b)=> {
     return a + b;
     };

 

(3.2) 함수 표현식

- 익명함수 ( annoymouse function ) : 함수명 대신 변수명에 함수 코드를 저장하여 구현하는 방식

//기본 뼈대
function() {
  console.log("hello!");
}

 

활용 예제

const printHello = function () {
    console.log("hello");
};

 

 

- 기명함수 ( named function ) : 함수 표현식으로 만든 함수에 이름을 붙여주면 기명 함수 표현식이다.

이렇게 말하면 되게 직관적으로 와닿는데 예제로 살펴보겠다.

const printhello = function (){
	console.log('Hi');
}
console.log(printhello.name);

function 뒤에 함수 이름을 정해주지 않았는데 이러면 변수 이름 자체를 값으로 가진다.

 

const printhello = function printHi (){ 
	console.log('Hi');
}
console.log(printhello.name); // printHi 출력

printhello();// Hi 출력
printHi(); //ReferenceError // 함수 호출할 때는 사용 불가

위와 같이 함수에 이름을 정해주면 ! 함수 이름을 값으로 갖지만, 함수 외부에서 함수를 호출할 때는 사용이 불가하다.

 

 

(4) 비구조화 할당

: 좌측은 변수, 우측은 해당 변수에 넣는 값

- 장점 :  배열, 객체 내 값을 추출하는 코드가 매우 간단하다. 기본 값 지정이 가능하다.

 

(4.1) 배열

비구조화 할당 전 코드

const fruit = ["apple", "banana", "orange"];

const apple = fruit[0]
const banana = fruit[2]
const orange = fruit[1]

console.log(apple);
console.log(banana);
console.log(ornage);

 

비구조화 할당 후 코드

const fruits = ["apple", "banana", "orange"];
const [ apple, banana, orange] = fruits;

console.log(apple);
console.log(banana);
console.log(orange);

 

 

(4.2) 객체

비구조화 할당 전 코드

const person = {
    personName : 'John',
    personAge : 23,
    personGender : "male",
};

const personName = person.personName;
const personAge = person.personAge;
const personGender = person.personGender;

console.log(personName);
console.log(personAge);
console.log(personGender);

 

비구조화 할당 후 코드

const person = {
    personName : 'John',
    personAge : 23,
    personGender : "male",
};

const {personName, personAge, personGender} = person;

console.log(personName);
console.log(personAge);
console.log(personGender);

 

(5) spread 연산자

- 깊은 복사와 얕은 복사가 있고

- * 기본 자료형과 * * 참조 자료형으로 구분할 수 있다.

* 기본 : 문자, 숫자, 논리, undefined, null, symbol

** 참조 : 함수, 배열, 객체

 

(5.1) 배열 - 깊은 복사

: arr1 배열 변수를 arr2에 할당하고, 두 변수의 같음을 확인

const arr1 = [10, 20, 30];
const arr2 = arr1;

console.log(arr1 === arr2);

두 변수가 왜 결과값이 같게 나오냐면, 배열은 참조 자료형이고 별도의 주소값을 가지고 있기 때문에

arr1이 가지고 있는 배열의 주소 값을 arr2도 가지게 됨으로써 결과가 똑같이 나온다.

 

(5.2) 배열 -  얕은 복사

const arr1 = [10, 20, 30];
const arr2 = arr1;

arr1.push(40); // 배열에 40추가

console.log(arr1); // [10, 20, 30, 40]
console.log(arr2); // [10, 20, 30, 40]

중간에 배열을 추가하면서 새로운 배열로 다시 만들어지기에 arr2는 arr1의 배열 변수의 주소값을 가지고 있지 않다.

그래서 arr1 값을 변경하여도 arr2는 영향을 받지 않아, 얕은 복사라고 한다.

 

(5.3) 배열 -  병합

const num1 = [10,20];
const num2 = [30,40];
const combinedNum = [num1[0], num2[1], num2[0], num2[1]];
const combinedNumSpread = [...num1, ...num2];

console.log(combinedNumSpread);

 

(5.4) 객체 - 깊은 복사

const obj1 = { name: "철수" };
const obj2 = obj1;

obj1.age = 20;

console.log(obj1); // { name: '철수', age: 20 }
console.log(obj2); // { name: '철수', age: 20 }

const person1 = {name : "John"};
const person2 = {...person1};

person2.name = "Su";

console.log(person1);
console.log(person2);

 

 

(5.5) 객체 -  병합

const user1 = {name : "John"};
const user2 = {age : 20};
const combineUser = {...user1, ...user2, age:30};

console.log(combineUser);

 

 

3) TypeScript 기본 타입

//타입 스크립트는 자바스크립트의 확장언어
let str = "A";
let num: number = 10;
let nul: null = null;
let sym: symbol = Symbol();
let bol = true;

let arr : [] = [];
let odj: {} = {};
let fn: () => void = function () {};

// 1.배열
let arr: string[] = ["A", "B"];
let arr2: Array<number> = [10,20];
let obj : {} = {};
let fn: () => void = function () {};

///2. 튜플
let arr: [number, string] = [10, "B"];
let obj: { name: string; age: number} = {name : "John", age: 20};
let fn: () => void = function() {};

// 함수 선언문
function sum(n1: number, n2: number): number {
    return n1 + n2;
}
sum(10, 20);

// 함수 표현식
const sum2 = function sum(n1: number, n2: number): number {
    return n1 + n2;
};

 

function (a, b) {return a+b} 를 통해 함수 표현식을 구현할 수 있다.

실습 진행

---

마무리 한 줄:

사실 자스는 접해보아도 타입 스크립트는 이번 캠프로 처음 접해보는 것이라 강의를 들을 때 조금 힘들 것 같다는 생각을 했으나 자바스크립트랑 별 차이를 못 느껴서 수업에 잘 따라갈 수 있었다.

 

---

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

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정