TIL#29

박감자·2024년 10월 28일

TIL

목록 보기

29/34

강의가 왜 2~3시간씩인거지?!?!
-박감자-

시작 전에...

썸네일 고민을 많이 했는데 둘 다 써야 할 것 같아서...
JS 복습을 금방할 줄 알았는데
이게 듣다 보니 계속 졸아서 몇번을 되돌려서 들었는지 모르겠다.

리액트 강의 1주차

사실상 거의 JS 문법 복습이라...ㅇㅅㅇ... 이젠 너무 많이 쓴 내용인데...
와중에 새로운 걸 발견하긴 해서 적어보는 중

Rest Operator

이 문법을 모르는 건 아니지만 스프레드와 똑같이 생겼고 써본적도 거의 없어서 잠시 잊었다ㅋㅋㅋㅋ 아래는 사용법 예시. Grouping도 가능하다고 한다 (배열, 객체)

// 함수의 매개변수로써 사용 가능
function sum(...numbers) {
    return numbers.reduce((acc, current) => acc + current, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

// 객체 Grouping에 유용함
const person = { name: 'Young', age: 35, job: "developer", password: "1234" }

const {password, ...sampleObj} = person;

console.log(sampleObj) // => { name: 'Young', age: 35, job: "developer" }

Short Circuit Evaluation(단축 평가)

논리곱 연산자 `&&`

이게 가능한지는 몰랐는데 if 조건이 하나면 아래와 같이 사용하는 것이 가능하다

// 사용자가 로그인 상태이면 환영 메시지를 출력
let loggedIn = true;
let username = '르탄이';
loggedIn && console.log('환영합니다! ' + username); //환영합니다! 르탄이

loggedIn = false;
loggedIn && console.log('환영합니다! ' + username); //아무것도 출력되지 않음

아니 if를 안 써도 되는 멋진 문법이 있다니 (길게 쓰는게 싫은 감자이다)

논리합 연산자 `||`

|| 연산자도 아래와 같은데 사용이 가능하다 (개인 프로젝트에서 써본 경험이 있다)

// 유저 정보가 제공되지 않았을 때 기본 이름 제공
function getUsername(user) {
    return user.name || '신원미상';
}

console.log(getUsername({ name: '르탄이' })); //르탄이
console.log(getUsername({})); //신원미상

Optional Chaining `?.`

이건 진짜 처음 본다!! 아래와 같은 예시가 있을 때, 에러 대신 undefined 값을 주어서 에러를 방지할 수 있다 (값은 그래도 여전히 undefined)

const user = {
    profile: {
        name: "르탄이",
        details: {
            age: 30,
            location: "서울시 강남구"
        }
    }
};
console.log(user.profile?.details?.age); // 출력: 30
            
const user2 = {};
console.log(user2.profile?.details?.age);  // 출력: undefined

함수에도 마찬가지로 적용이 가능하다.

const result = user.profile?.getDetails?.();  // user.profile.getDetails가 존재하지 않으면 undefined 반환

Null 병합 연산자

논리 합과 조금 비슷하지만 다른 null 병합 연산자. 우선 사용법은 아래와 같다

// 사용자의 위치 설정이 없으면 기본 위치를 제공
let userLocation = null;
console.log(userLocation ?? 'Unknown location');  // 출력: Unknown location

userLocation = 'Seoul';
console.log(userLocation ?? 'Unknown location');  // 출력: Seoul

// 사용자 입력이 0인 경우에도 0을 유효한 값으로 취급
const temperature = 0;
console.log(temperature ?? 25);  // 출력: 0

삼항 연산자와 살짝 비슷한 느낌을 준다 예를 들면 첫번째 예시에서는

userLocation ?? 'Unknown location'
userLocation ? userLocation : "Unknown location"

위의 두 줄이 같은 의미로 쓰일 수 있다.
추가적으로 논리합 연산자와의 비교는 이렇다

논리합 연산자 : 왼쪽 값이 falsy (false, 0, "", null, undefined, or NaN)일때 오른쪽 결과 return
Null 병합 연산자: 왼쪽 값이 null혹은 undefined일때만! 오른쪽 return, 다른 falsy 값은 무시

let value = 0 || "fallback";  // "fallback" - 0은 falsy 값이다
let value = 0 ?? "fallback";  // 0 - null 혹은 undefined가 아니다.

1주차 강의에서 새로 배운 내용은 위와 같다

리액트 강의 2주차

드디어 본편!...인데 3시간....༼◉_◉ ༽...

React

프레임워크가 아닌 라이브러리임을 잊지 말자. 특징으로는 SPA (Single Page Application)가 있다. 자주 사용하는 프론트엔트 라이브러리로 Web Application에 주로 사용이 된다. 개인적으로는 리액트 말고 리액트 네이티브를 사용해본 경험이 있어서 이제 익숙해지는 일만 남은 것 같다

SPA (Single Page Application)

하나의 페이지로 이루어진 어플리케이션을 의미. 반대되는 개념으로 MPA (Multiple Page Application)이 있다 - 2개 이상의 페이지로 이루어진 어플리케이션.

또한 SSR (Server Side Rendering) 초기 화면 로딩 시 서버에서 완성된 HTML 파일을 브라우전에 전송하는 방식이라고 한다. 여기서 렌더링이란 HTML 문서 자체를 생성하는 과정을 의미한다.

Routing

한 웹페이지에서 다른 페이지로 이동하는 기능
Hashed Routing이라는 기술이 존재 : 브라우저 내에서만 사용하는 값으로 url 요청에 영향을 주지는 않는다.
Browser Routing : www.sample-homepage.com/about 처럼 뒤에 #가 보이는 구조가 아닌 없이 유저에게 보여주는 구조

모듈 설명 (그냥 노트)

오늘 모듈화에 대해 튜터님이 자세히 설명해준 세션이 있는데 그때의 노트를 정리 안하고 붙여놓기만ㅎㅎㅎ

script type="module" src = ""
defer가 보장되는 형태 이기에
head 쪽에 위치 시키는 것이 좋은 방법

관심사별로 쪼개는 것이 매우 중요 (가독성/기능면에서 효율적이다.)

type=module이 독립적인 스코프를 만들어준다.

"use strict" (문법 엄격히 - type=module에 내장되어있음)

link tag는 head 부분에 여러줄 쓰는 방법 (각 파일에서 import하는 것이 아닌) 효율적으로 한다고 한다.

모듈화는 처음부터 할 수 있으면 하는 것이 덜 수고스럽다.