1. 이번주 수업에서 좋았던 점은? (Liked)
2. 이번주에 새롭게 배운 점은? (Learned)
3. 배운 것에 관해서 내가 부족했던 부분은? (Lacked)
4. 앞으로 뭘 더 하면 좋을까? (Longed for)
1일차
1일차는 React를 배우기 전에 알아야 하는 JavaScript 기본 개념에 대해서 정리했다.
let vs const (*var)
let은 재할당 가능
const는 재할당 불가능
함수 표현 방법 3가지
//함수 선언문
function printHello() {
console.log("Hello")
}
//함수 표현식
const printHello = function printHello() {
console.log("Hello")
}
//화살표 함수
const printHello = function printHello() {
console.log("Hello")
}비구조화 할당(Destructuring Assignment)
//배열 비구조화 할당
const [a, b, c] = ["apple", "banana", "cherry"];
// 일반적인 객체 할당
const user = {
name: "John",
age: 34,
gender: "male",
};
//객체 비구조화 할당
const { name, age, gender } = {
name: "John",
age: 34,
gender: "male",
};스프레드 연산자(Spread Operator)
스프레드 연산자는 깊은 복사나 병합에 용도로 사용한다.
복사한 배열이 원본 배열과 같이 변경되는 형태로 복사되는 것을 얕은 복사라고 한다.
const arr1 = [1, 2, 3];
//얕은 복사
const arr2 = arr1;
//깊은 복사
const arr2 =[...arr1]과제
/*
[코드를 작성할 때 생각한 부분]
1.interface를 사용하여 함수가 어떤 형태(매개변수 + 리턴값)인지 확인할 수 있도록 구현하자!
2.순수함수로 만들자, 외부의 데이터를 의존하지 않도록 구현하고 결과가 항상 같게 구현하자!
3.함수가 하나의 일만 하도록 구현하자!
4.확장성을 고려해서 구현하자!
5.의존성을 분리하자!
[리팩토링한 부분]
1.지정된 횟수를 반복하는 방식 -> 입력된 횟수로 반복되는 방식
for (let i = 100; i <= 999; i++) {
};
2.findArmstrongNumbersInRange가 getArmstrongNumber에 의존하는 방식 -> getArmstrong을 매개변수로 받아서 사용하는 방식
const findArmstrongNumbersInRange: IfindArmstrongNumbersInRange = () => {
const result = getArmstrongNumber(i);
};
*/
//과제 2
interface IgetArmstrongNumber {
/*
[!질문] number | false가 맞는지 number | boolean가 맞는지 궁금합니다.
함수의 return 값이 number | false인 것을 명확하게 알 때는 명시적으로 호출하는 것이 맞는 것인지 궁금합니다.
*/
(number: number): number | boolean;
}
interface IfindArmstrongNumbersInRange {
(startNumber: number, endNumber: number, getArmstrong: IgetArmstrongNumber): (
| number
| boolean
)[];
}
const createGetArmstrongNumber = (): IgetArmstrongNumber => {
return (num) => {
const cubedSum = num
.toString()
.split("")
.map((item) => parseInt(item) ** 3)
.reduce((acc, cur) => acc + cur);
/*
[!질문] 맞은 경우에는 number를 반환 하고 틀린 경우에는 false를 반환하는게 적절한지 궁금합니다.
함수명을 isArmstrongNumber로 바꿔서 boolean 형식만 호출하게 하고,
true/false의 값을 이용해서 결정하는 것이 맞는 방식인지 고민이 됩니다.
*/
return cubedSum === num ? num : false;
};
};
const findArmstrongNumbersInRange: IfindArmstrongNumbersInRange = (
startNumber,
endNumber,
getArmstrong
) => {
const armstrongNumbers: (number | boolean)[] = [];
for (let i = startNumber; i <= endNumber; i++) {
const result = getArmstrong(i);
/*
[!질문] 만약 type을 바꿔야 하거나 생각한 타입과 다를 때는 할 때는 어떻게 해야 하는지 궁금합니다.
number타입만 가질 수 있다고 생각하고 구현한 코드인데,
interface에 명시된 IgetArmstrongNumber return 값 number | boolean으로 인한 오류가 발생합니다.
*/
if (result) {
armstrongNumbers.push(result);
}
}
return armstrongNumbers;
};
const getArmstrongNumber = createGetArmstrongNumber();
console.log(findArmstrongNumbersInRange(100, 999, getArmstrongNumber));2일차
npm vs yarn
npm은 싱글스레드(한번에 하나의 작업)
yarn은 멀티스레드(한번에 여러개의 작업)
패키지 매니저는 어느 것을 쓰냐에 따라 지원을 할 수도 있고 안 할 수도 있기 때문에 그냥 속 편하게 다 지원해주는 npm을 쓰는 것이 편리할 수 있다.
npx
명령어를 실행하면, ‘로컬→글로벌→네트워크에서 다운로드’ 단계를 통해서 실행해줌
create-react-app vs vite
프로그래밍에서 반복되는 작업이나 패턴에 대한 일종의 표준화된 코드를 보일러 플레이트라고 한다.
create-react-app은 최신 업데이트가 2년전인만큼 대응이 늦다.
vite는 vue 창시자(Evan You)가 만들었으며 성능이 좋아서 요즘 대세이다.
중요 렌더링 경로 (Critical Rendering Path)
데이터를 요청하면 8비트 데이터→character(문자열)로 변환→token(토큰화)→DOM으로 파싱하는 과정을 거친다.
1-1.HTML파일이 오면 HTML 파싱이 일어나고 DOM Tree를 그리는데 JS가 온다면 멈추고 JS부터 실행한다.
1-2.HTML파일이 오면 CSS파일이 CSS파싱이 일어나고 CSSOM이 만들어진다.
2.(1-1,1-2)가 끝나면 renderTree(DOM,CSSOM을 합치는 작업)가 만들어진다.
3.Layout이 일어난다. 이때 renderTree로 설정해둔 것을 기준으로 배치가 일어난다.(트리를 만드는 과정)
4.Paint가 일어난다.배치된 것을 기준으로 그림이 그려진다.
DOM에 변화가 일어나면 renderTree를 생성→리플로우→리페인트가 일어나는데 이것은 많은 리소스가 발생한다.
React에서는 Virtual DOM과 Real DOM을 비교하는 Diffing 알고리즘(변경된 부분만 바꾸기 위한 알고리즘, 루트부터 단계적으로 확인한다.)을 통해서 이런 과정에서 많은 리소스가 발생하지 않도록 한다.
리플로우,리페인트 동작을 최소화하는 것이 중요하다!
React를 사용하는 이유
리플로우,리페인트 같은 리소스를 잡아먹는 작업을 줄여서 로직에 집중하게 만들어 DX(개발자경험)를 향상시킬 수 있다.
Reconciliation(재조정) 과정에서 diffing 알고리즘을 통해 DX를 향상시킬 수 있다.
바벨(Babel)
React에서는 브라우저가 이해하지 못하는 jsx라는 형식을 사용하기 때문에 바벨이라는 컴파일러를 통해서 이를 변환해준다.
웹팩(Webpack)
웹팩은 모듈 번들러이며, 1세대는 웹팩 2세대는 Vite다.
지금 React에서는 바벨과 웹팩(vite)를 사용한다!
npm run dev
'내부적으로 개발 서버를 구동→index.html 호출→index.html 읽가→웹 브라우저 구동'이 일어난다.
console을 이용한 동작시간 확인 방법
console.time(), console.timeEnd() 메소드를 안에 코드를 넣으면 동작시간을 간단하게 확인할 수 있다.
jsx의 문법규칙
1.항상 하나의 태그만 반환을 해야한다.
2.className이 javascript 코드에서는 class다.
기타 지식
React.Fragment를 사용하면 단순히 묶는 역할만 해준다.*<></>가 React.Fragment이다.
jsx를 반환하는 함수가 작성된 파일을 컴포넌트라고 하며 항상 대문자(파스칼케이스)로 작성 되어야 한다.
export default로 사용되는 경우는 import할 때 이름을 마음대로 지을 수 있다.
export라고 내보내지는 경우는 import로 받아올 수 있는데 default가 없다면 동일한 이름으로 해야한다.
createElement로 가장 로우레벨로 컴포넌트를 만들수 있다.
대부분의 os 환경에서 jsx문법을 해석할 수 있는 컴파일 환경이 구성되었다.
컴파일러가 없는 환경에서는 createElement를 사용해서 jsx 컴포넌트를 만들 수도 있다.
HTML4와 HTML5의 차이는 시멘틱 태그, 빈 태그를 다시 닫지 않아도 되는 것이다.
javaScript에서 값으로 표현될 수 있는건 표현식, jsx에서 표현식이라는 건 중괄호를 사용해서 표현할 수 있는 것이다.
3일차
### React 기본 개념은 추가할 예정
과제
# 프로필 카드 컴포넌트 만들기
### 고민했던 점
[] ProfileCard를 backgroundImg, Porfile 2가지 컴포넌트로 나눠야 하는가?
- 서로 다른 관심사가 되지 않을까 라는 생각을 함 - Profile은 사용자의 정보를 가져오기 때문에 같이 묶을 수 있지만, backgroundImg 사용자가 제공할 수도 있고 안 할 수도 있기 때문에 고민이 됨
[] 재사용성을 높히기 위해서는 img태그의 alt 속성, button의 text도 외부에서 받아야 하지 않나?
- 만약 다 외부에서 받는 형태로 컴포넌트를 제작한다면 props가 너무 많아지는 문제가 생기는데, 이런 경우에는 모두 외부에서 받고 옵셔널과 기본값 제공하는 방식으로 해결하면 되는지 궁금함
[] Card 컴포넌트의 img태그가 중복되는데 이런 경우에는 img태그는 따로 컴포넌트로 빼야하는가?
### 잘했다고 생각하는 점
- css를 둘러보다가 사용하시지 않은 css 클래스 선택자를 발견해서 적용함
- pixabay라는 사이트 이미지를 이용해 봄
- buttonText를 외부에서 받도록 하고 없는 경우 기본값으로 'Follow'가 되도록 수정함
- Card 컴포넌트는 UI로직만 처리하고 상위 컴포넌트인 ProfileCard는 데이터 로직을 처리하도록 함
### Todo
- Follow 버튼을 누르면 sucoding 유튜브가 구독이 되도록 설정하는 기능 추가
# props 실습
### 고민했던 점
[] onClickHandler의 매개변수들도 onClickHandlerProps로 빼야하지 않나라고 생각함 - 작성 중 생각해보니 onClickHandler는 함수이기 때문에 별도로 뺴서 작업할 수 있겠다라는 생각이 듬
### 잘했다고 생각하는 점
- 이벤트를 전달할 때 매개변수를 사용하는 법을 응용하려고 해봄
### Todo
- onClickHandler 타입 지정해서 사용하기
4일차
추가예정
5일차
추가예정
1. 이번주 수업에서 좋았던 점은? (Liked)
아주 기본적이지만 중요한 개념을 제대로 정의하고 갈 수 있어서 좋았다.
2. 이번주에 새롭게 배운 점은? (Learned)
TypeScript에서 타입을 추론하는 방법과 Custom Hook을 잘 만드는 방법을 배웠다.
3. 배운 것에 관해서 내가 부족했던 부분은? (Lacked)
재사용 가능한 컴포넌트를 만든다고 생각했는데 의존적인 컴포넌트를 만들고 있었다.
4. 앞으로 뭘 더 하면 좋을까? (Longed for)
Type을 잘 지정해서 컴포넌트를 설계하고 공통적인 부분은 Hook으로 처리할 수 있도록 코드를 다시 구현해보며 연습한다.
