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

 

우연한 기회에 Next.js 일경험 프로그램에 참여하게 되었다.

서류작성을 하고 면접까지 본 뒤 바로 3주 간의 사전직무 교육에 참여하게 됐는데, 이제 막 한 주차 학습이 끝나서 관련 내용을 회고해 볼 생각이다.

 

 

한 주 동안 배운 내용

한 주차 학습 필기 내용

우선 한 주 동안 강의를 들으며 노션에 필기한 내용.

한 주 만에 `자바스크립트 -> 타입스크립트 -> 리액트 기초`까지 진도가 나갔다.

자바스크립트는 처음에 변수와 표현식부터 시작했는데,

var num1 = 10 + 20; //표현식
30; //값

 

(이런 거...)  

이틀만에 렉시컬 환경이나 자바스크립트 동작 원리에 대한 이야기까지 수업이 진전되었다.

자바스크립트 렉시컬 환경, 콜스택 등은 여러 번 들어도 이해가 쉽지 않다. 강의 자료를 참고해서 더 공부해 봐야겠다...

그 외에도 새롭게 익히게 된 내용들을 포스팅해보겠다.

 

공부 내용 정리

1. 자바스크립트

실행 컨텍스트

• 자바스크립트 실행 시 글로벌 실행 컨텍스트가 생성되어 스택의 맨 아래 쌓이고, 함수가 새로 생길 때마다 그 위로 함수 컨텍스트가 쌓이게 된다.
• 같은 실행 컨텍스트 안에서, let, const는 변수명을 중복으로 생성할 수 없다.
• 환경 레코드(Environment Record)와 외부 렉시컬 환경 참조(Outer Lexical Environment Reference)는 실행 컨텍스트의 구성 요소이다.
  • 외부 렉시컬 환경 참조는 컨텍스트와 컨텍스트를 이어주는 다리 역할을 한다. 이를 통해 변수 검색 시 상위 스코프로 이동하며, 결국 전역 실행 컨텍스트까지 올라갈 수 있다. 전역 실행 컨텍스트에서 변수를 찾을 수 없다면, ReferenceError가 발생하게 된다.
• 실행이 모두 끝나면 실행 컨텍스트가 제거된다.
• 자바스크립트 실행 시 선언문을 환경 레코드에 기록한다. var는 초기화까지 진행되지만 let, const는 초기화가 되지는 않는다
• let, const는 호이스팅되지만 초기화되지 않은 상태로 TDZ에 존재하며, 실제 코드에서 값이 할당될 때 초기화된다. TDZ 동안에는 참조할 수 없다.

2. 타입스크립트

주의) 타입추론 에러

type TUser = {
  name: string;
  age: number;
  gender: "male" | "female";
};

const user: TUser = { name: "jane", age: 22, gender: "male" };

//이런 경우, gender가 string타입으로 타입추론되어서, 오류가 발생
//gender 타입에 string을 추가해주어야 오류 사라짐
const user2: TUser = user;

 

타입의 확장

interface IUser {
  name: string;
  age: number;
}

interface IWorker {
  company: string;
  position: string;
}

interface IUserAddress extends IUser, IWorker {
  zipcode: string;
  address: string;
}

--------------------------------------------------------

type MyWorker = {
  readonly company: string; //속성 값 변경 불가
  position: string;
  getMoney?: (amount: number) => number;
};

type TEmployee = Person & MyWorker;

const worker1: TEmployee = {
  name: "Smith",
  age: 22,
  company: "Google",
  position: "Developer",
};

 

3. 리액트

리액트 구동 (`npm run dev` 입력 시 발생하는 이벤트)

→ `index.html` 파싱

• `(root) div` 태그 내부에 main.tsx 코드가 들어감

→ main.tsx 구동

• `createRoot(document.getElementById('root')!)` 내부 컴포넌트가 실행됨

→ `App.tsx` 컴포넌트 내용이 화면에 보인다.

 

 

배운 내용이 워낙 많다 보니 몇 가지 추리기가 힘들었지만, 몇 가지만 작성해 보았다.

추가로 이번 주차에 과제도 몇 가지 진행했는데 프로그래머스 레벨1 정도 되는 자바스크립트 과제 몇 개가 주어졌다.

해당 과제는 시간이 많이 소요되지 않으면서도 자바스크립트 기초에 대해 공부할 수 있어서 좋았다.

금요일에는 피그마 & tailwind를 이용한 퍼블리싱 과제가 나왔다! tailwind로 팀 프로젝트 진행 중이라 연습할 수 있는 기회가 되어 즐겁게 작업했다. 

 

마무리

나의 경우 오프라인으로 수업을 듣다가 거리가 너무 멀어서 온라인으로 변경한 경우인데, 개인적으로 온라인 강의 환경인 Zep이 너무 귀엽게 느껴졌다. 수업 들을 맛이 나는 환경...!

다음 주 수업은 난이도가 더 올라갈 것 같지만 열심히 듣고 복습해 보기로... 화이팅😊

 

---

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