우연한 기회에 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) 리뷰로 작성 되었습니다.
'Developer > 웹개발 교육 프로그램' 카테고리의 다른 글
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 - 사전직무교육 2주차 후기 (10) | 2024.06.10 |
---|---|
[에이블런] TIL(24.05.22): 자바스크립트 2 (0) | 2024.05.22 |
[에이블런] TIL(24.05.20): 자바스크립트 1 (0) | 2024.05.20 |
[에이블런] TIL(24.05.16): Git 2 (0) | 2024.05.18 |
[에이블런] TIL(24.05.14): Git (0) | 2024.05.18 |
[에이블런] TIL(24.05.09): 컴퓨터 구조 (0) | 2024.05.18 |