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

1.개인적인 소감

2.진행과정

3.배운 내용

다른 교육과정도 붙었지만 내 선택은 유데미 & 스나이퍼팩토리였다.

지인분께서 여기를 나오고 좋았다는 평과 수코딩님이 가르치는 next.js.

이 두가지가 나에겐 엄청난 매력으로 다가왔다.

개인적으로 생활코딩,수코딩님의 유튜브를 보며 코딩을 시작했기 때문에

강의 퀄리티는 의심치 않았고 생각보다 더 좋아서 놀랐다.

거리가 좀 있어서 피곤하긴 했지만 왕복 2시간은 문제가 안됐다.

첫날은 좀 여유있게 흘러 갔으나 다음날부턴 쉽지 않았다.

"아 내가 JS에 대해 정말 많이 부족하구나"

옆에 있는 동기분들도 대단하신 분들이 너무나 많아

이 분들과 함께 수업을 듣는다는게 스스로에게 대견할 정도였다.

나는 이 캠프에 온 걸 정말 잘한 결정이라 생각한다.

2. 1주차 진행과정

1일차 OT ,기업협업프로젝트 소개 및 투표 ,환경설정 및 자바스크립트 강의

2일차 자바스크립트 강의

3일차 자바스크립트 강의

4일차 자바스크립트 강의

5일차 자바스크립트 복습 및 타입스크립트

3.배운 내용

node.js 및 VSCode 세팅
웹의 역사
async, defer
JavaScript 변수, 자료형I

node js , VSCode

이미 설치되어있는것들이 많았지만 강사님께서 알려주신 것들 중에 새로 보는 것들도 있어서 추가로 몇개 더 설치했다.

Prettier 설정(command + )

프리티어 설정을 이미 해놨지만 , 잘 되어있는지 한번 더 확인했고 eslint는 삭제하라 해서 삭제했다.

(추가로 vscode 한국어 설정도 삭제했다..!)

그 후에 웹의 역사에 대해 설명해줬다.

웹의 역사

1993: 모자이크 브라우저
1994: 넷스케이프사 -> 넷스케이프 내비게이터
1995: 마이크로소프트 -> 인터넷 익스플로러(IE)
1995: 자바스크립트 -> 넷스케이프 내비게이터
1996: 마이크로소프트사 -> jscript
1997: ecmascript1
1998: ecmascript2
1999: ecmascript3
2000: ecmascript4 (expolore 점유율이 90프로를 넘었는데, 네비게이터 기준으로 발표하니 MS가 화남)
2009: ecmascript5 (파이어폭스 , 사파리 , 익스플로러 등 화해)
2015: ecmascript6
2016: ecmascript7

자바스크립트를 실행하는 방법

node main.js 터미널 입력
런타임 버튼 누르기
html 안에 , 자바스크립트 코드를 적는 것
내부 스크립트, 외부 스크립트로 하는 방법
크롬 브라우저에서 실행하는 방법

(이거 그냥 개발자도구 콘솔에서 console.log 찍는거임)

undefined가 나오는 이유는 입력과 출력 결과가 동시에 나온다.

응답 결과가 없으면 undefined가 나오는거임.

실무에선 외부 스크립트로 많이 사용한다.

아래는 데이터에 대한 용어다.

parsing => 코드를 그에 맞게 변환

fetching => 변환한 코드를 불러오는 것

Excuting => 불러오는 것

비동기

웹이 로드될 때 , 위에서 아래로 내려읽는 특성을 가지고 있다.

그치만 앞에 데이터가 5분 정도로 너무 오래 걸리는 데이터라면?

5분데이터 뒤에 것들은 보여지지 않게 된다.

이를 방지하기 위해 비동기를 사용할 수 있다.

async , defer가 그에 해당하며

이 키워드를 사용한다면 병렬로 처리할 수 있다.

즉, 5분이 걸리는 데이터를 나중에 보여주고

다른 것들을 먼저 보여줄 수 있다는 것이다.

async , defer

async : 스크립트를 비동기적으로 로드하고 로드가 완료되는 즉시 실행.

HTML 파싱이 중단 될 수 있음.

defer : 스크립트를 비동기적으로 로드 , HTML 파싱이 완료 된 후에 실행.

HTML 파싱이 중단되지 않음.

이건 스크립트의 실행시점을 제어할 뿐 , 기능에 영향을 미치진 않는다.

따라서 defer도 try,catch문을 사용할 수 있다고 함.

1. async 사용 예제

<!DOCTYPE html>

<head>

<title>Async Example</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

2. defer 사용 예제

<!DOCTYPE html>

<head>

<title>Defer Example</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

변수(var , let , const)

var

오늘날에 와선 var는 쓰면 안된다.

세가지 문제점이 있다.

1. 선언을 중복해서 할 수 있다.

var x = 1;

var x = 2;

console.log(x); // 2

이런식으로 선언을 중복할 수 있어서 가독성을 떨어뜨리고 버그를 유발할 수 있음.

2. scope의 범위가 전역/함수로 제한된다.

for (var i = 0; i < 3; i++) {

setTimeout(function() {

console.log(i);

}, 1000);

}

// 출력: 3, 3, 3

var로 선언된 'i'는 블록 스코프가 없기 때문에 , 모든 타임아웃 콜백은 마지막 'i'값을 출력한다.

3. Hoisting

'var'로 선언된 변수는 함수의 최상위로 끌어올려지기 때문에, 코드의 예측가능성을 떨어뜨린다.

let (재할당 가능)

똑같은 저장공간을 만들지 못할 뿐 , 이미 만들어진 저장공간은 바꿀 수 있음.

블록스코프({} 중광호 안에서만 유효하다)

중복 선언 불가하다.

const (재할당 불가능)

선언된 변수는 초기화 이후 재할당 불가하다.

블록스코프

중복 선언 불가

참조형 데이터(객체,배열) 변경가능

const로 선언된 객체나 배열의 경우, 변수 자체는 재할당 할 수 없지만 ,

객체의 속성이나 배열의 요소는 변경할 수 있음.

const obj = { name: 'Alice' };

obj.name = 'Bob'; // 가능

console.log(obj.name); // Bob

const arr = [1, 2, 3];

arr.push(4); // 가능

console.log(arr); // [1, 2, 3, 4]

용어 설명

const maxlevel = 99;

const (예약어 , 키워드) =>var,const ,let과 같이 어떠한 역할이 예약 되어 있는 것 =>변수 공간을 만들어 줌

99 : 값

키워드(var,const ,let과 같이 어떠한 역할이 예약 되어 있는 것)

변수명(maxLevel)식별자 ( 앞에 키워드가 어떤 키워드냐)

기호(=)는 연산자라고 부른다.

연산자 중에서도 할당연산자라고 부름.

오른쪽에 있는 값을 왼쪽에 할당하는 것을 할당연산자라고 부름.

자바스크립트는 문장이 끝나면 ;(세미콜론)을 붙혀줘야 한다.

const maxLevel = 10 + 20;

이런식으로 딱 떨어지는 게 아니라 연산해서 값을 도출해내면 , 그건 표현식이다.

10 + 20 ; => 표현식 : 어떠한 값을 도출해내는 식

30 => 값

배운 게 많아 쓰다가 너무 길어지기에 , 링크로 첨부하려고 한다.

https://dailycoding777.tistory.com/27

https://dailycoding777.tistory.com/29

자료형 , 연산자

자료형,연산자에 대해 배웠다.기본 자료형문자열(String), 숫자(Number), 불린(Boolean), 배열(Array), 객체(Object), 함수(Function), 널(Null), 미정의(Undefined) 참조 자료형배열 객체 함수num = 10e121000000000변수

dailycoding777.tistory.com

https://dailycoding777.tistory.com/29

자료형 , 연산자

dailycoding777.tistory.com

https://dailycoding777.tistory.com/30

함수

함수를 생성하는 방법 중에 익히 쓰는 방법이 두가지가 있다.함수 선언식 , 표현식이다. 함수 선언식은 fuction 함수이름 (){} 이런 형태를 갖는다.function add() {} 함수 표현식은 변수를 선언하고 ,

dailycoding777.tistory.com

https://dailycoding777.tistory.com/31

깊은 복사,얕은 복사

이 개념은 객체를 복사할 때 사용되는 개념이다. 얕은복사(Shallow Copy)객체의 최상위 레벨만 복사하고, 중첩된 객체는 복사하지 않고 참조를 공유합니다.즉,복사된 객체 내부의 중첩된 객체들은

dailycoding777.tistory.com

https://dailycoding777.tistory.com/32

Closer

클로저 : 실행 컨텍스트가 정상적으로 제거(종료)되지 못하는 현상 function outerFunc() { let count = 0; return function innerFunc() { count++; console.log(count); };}const counter = outerFunc();counter();counter();counter();counter(

dailycoding777.tistory.com

https://dailycoding777.tistory.com/33

타입 추론 , 타입 명시

타입추론 : 타입스크립트가 해당 변수의 타입을 추론하는 방법변수를 선언할 때 타입을 명시하지 않아도 타입스크립트가 할당된 값을 통해 타입을 추론 let num : number = 10;이렇게 타입을 써줘야

dailycoding777.tistory.com

https://dailycoding777.tistory.com/34

생성자 함수

생성자함수 : 자바스크립트에서 객체를 만들고 초기화하는 특별한 함수다.생성자함수는 일종의 템플릿으로 , 여러개의 유사한 객체를 쉽게 만들 수 있게 해준다. 생성자 함수의 기본 개념 1.대

dailycoding777.tistory.com

https://dailycoding777.tistory.com/35

타입스크립트 중급(옵셔널 프로퍼티,인터페이스,타입)

옵셔널 프로퍼티(optional property) :객체 안에서 name? 이렇게 쓰는 것이다.요소를 필수요소가 아닌 옵션인 요소로 만들 수 있다. 병합(Interface merging)interface User { name: string; age: number; gender: string; heigh

dailycoding777.tistory.com

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

'Front-End > Udemy&스나이퍼 팩토리' 카테고리의 다른 글

[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 후기 (0)	2024.07.26

데일리코딩