2023.08.14(월) 슈퍼코딩 부트캠프 프론트엔드 React 인턴 Day 1 보고

• 오늘의 다짐

<사랑하고 사랑받는 방법>

자기 비하나 과장하지 않기

상대방을 진심으로 칭찬하기

상대방의 감정을 인정하고 이해하기

​

• TO-DO LIST

- 10:00 Daily Scrum

- 1강 오리엔테이션 ~ 5강 JS(ES6+) Part.1 수강하기

- 17:00 정기 팀 회의

Internet - How does the Internet Work? 읽기

​

• 배운 내용 요약 정리

JavaScript(ES6) / React / Frontend Tools / TypeScript / Next.js

Frontend Developer Roadmap

​

- 리액트

UI를 만들기 위한 JavaScript 기반의 라이브러리

매번 서버로부터 HTML 파일을 받아오지 않더라도 js 조작함으로써 새롭게 페이지 조작 가능

(기존의 전통 웹 브라우저 방식의 문제점 해결)

​

- 리액트의 특징

1. 선언형

필요한 컴포넌트만 렌더링

예측 가능하고 디버깅 용이

재사용해서 생산성 향상

추상화 수준이 높음

2. 컴포넌트 기반

컴포넌트에서 상태를 관리

재사용해서 생산성 향상

3. Virtual DOM

실제 DOM과 동일

리플로우/리페인트(브라우저 렌더링) 최소화 -> 절차 간소화

​

- 리액트 vs 바닐라 자바스크립트(다른 라이브러리/프레임워크 없이 순수한 js)

원래 node랑 npm 설치 되어 있었음 !

- JS 기초 문법

값: 데이터 조각의 단위

변수: 값을 저장하는 공간

​

원시 타입의 종류

1. Number (소수점 포함 모든 숫자)
2. String (문자열)
3. Boolean (True or False)
4. Undefined (정의되지 않음)
5. Null (값이 없음)
6. Symbol (ES6 = ES2015)
7. BigInt (ES2020) (큰 숫자n)

​

- template literal

Name = 'Kim';

templateLiteral = `hello ${myName}`;

console.log(templateLiteral);

​

- 자바스크립트의 동적 타이핑

변수를 선언할 때 따로 타입을 선언해 줄 필요가 없고,

변수의 값이 바뀜에 따라 타입이 자동적으로 바뀐다.

​

• 부족한 점

지금은 프론트엔드 오티 & 첫 날 수업이라 크게 어려움은 없다.

흐흐 드디어 내가 다 아는 내용이다 ~.~

이것도 근데 얼마 못 가겠지. .

​

• 스스로 시도해본 것들

​

• 해결 내용

​

• 알게된 점

전에는 리액트 단어만 말로 들어봤는데,

아직은 추상적이긴 하지만 뭔지 조금은 알게 되었다.

​

• 헷갈리거나 실수한 점

​

• 회고

주특기 시작 첫 날 ! !

아침부터 일정이 있고 너무 피곤해서 정기 회의 전까지 강의를 제대로 못 들었는데,

다행히 첫 주 첫 시간이라 기초적인 개념을 다뤄서

내가 빠르게 따라갈 만 했다.. 휴

잘 따라가야지