[React] Day_27 데일리 정리

 

어디 한번 시작해볼까나... 리액트.. TIL... (읏차.)

 

 

에... 신..나는 월요일입니다. 여러분..! (하나도 안신나!)

오늘 뭔가 병주고 약주고 같은 하루였슴둥

갑자기 냅다 2주치 강의를 주시더니 28시간 내에 전부 들으라고 하질 않나...

(아니 근데 이거 진짜 맞나..? 아니 이거 맞아..요? ㅇ<-<)

꾸역꾸역 듣다가 갑자기 다들 축하한다길래 음? 뭐지 하고 슬랙을 봤더니

이 B급갬성 그 자체인 TIL이 우수 TIL로 선정이 되었다고 하지를 않ㄴr...

리액트 설치하다가 갑자기 냅다 에러떠서 얼라리 얼타다가

조금 어이없게(?) 해결도 봤구요..

여튼 결론만 말하면 할일이 겁나 많았지만? 해냈..Da...

( 그리고 덕분에 인트로에 쓸말이 많아졌다 히히..)

 

차마 부끄러워서 링크는 못올리고요. 대충 이미지만 보십쇼.

 

 

(??? : 지영님 그거 구운몽엔딩인거.. 아시죠?) 당신은 틀렸어! 

여튼 정리 오늘도 쌈뽕.. 하게 가보자고요-! ^-^)v 

G-o.

 

 

 

React (리액트) 강의 정리

1주차 : JS.. 또 너야?🤦🏻‍♂️

 

지긋지긋한 JS.. 이제는 안녕일줄 알았거늘..

 

 

1주차...는 신나는 복습시간 ^-^... (아놔 JS의 축복이 끝이업네.)

1주차 정리는 그래서... '어 이건 새로본다. 아 이건 다시 새겨야겄다...' 하는것만 적어보겠습니다.

(귀찮아서 아님! 진짜 강의만 2시간이 넘는데... 이거 다 풀어서 정리하면.. TIL 의미가 사라짐..ㅠ)

 

 

객체 정리 (속성 추가 및 수정, 그리고 삭제.)

 

React에선 state 사용, 그래서 객체 속성 삭제 or 수정 잘 안함.

(상태를 불변하게 유지하는 방법 주로 선호하므로.. 결론 : 잘 안쓰임. 참고만 하자.)

 

- 정리 (예시로 대체)

let user = {
  name: "림졍",
  age: 26,
  isAdmin: true,
	printHello: () => console.log("안녕!")
};

user.email = "john.doe@example.com"; // 추가
user.age = 16; // 수정
delete user.email; //삭제
console.log(user);

 

 

객체 주요 메서드 정리

 

- Object.keys() : 객체 key only

const user = {
  name: "림졍",
  age: 26,
  isAdmin: true
};
const keys = Object.keys(user);
console.log(keys);  // ["name", "age", "isAdmin"]

 

- Object.values() : 객체 값 only

// 위 코드 참고

const values = Object.values(user);
console.log(values);  // ["림졍", 26, true]

 

- Object.entries() : key-value  배열 반환

// 위 코드 참고

const entries = Object.entries(user);
console.log(entries);
// [["name", "림졍"], ["age", 26], ["isAdmin", true]]

 

- Object.assign() : - 원본 객체 속성, 대상 객체안에 복사하여 넣어줌

// 위 코드 참고, user : 대상 객체

const userDetails = {
  occupation: "아가개발자"
};  //원본 객체


Object.assign(user, userDetails);
console.log(user);
// {name: "림졍", age: 26, isAdmin: true, occupation: "아가개발자"}

 

 

Rest Operator

 

스뿌레드와 비슷하지만.. 사용방법은 매우 다르다! (응?)

남은 부분을 하나의 변수로 그룹화 (Grouping) 가능(배열, 객체)

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

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

// 객체 분해 할당 예시 -> 그룹화에 유용
const person = { name: '림졍', age: 26, job: "homekeeper", password: "1234" }

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

console.log(sampleObj) // => { name: '림졍', age: 26, job: "homekeeper" }

 

 

Short Circuit Evaluation(단축 평가)

 

- 논리합 연산자 ( || )

좌변의 연산자 falsy 일 때만 우변 피연산자 평가. ( If 좌변이 truthy, 결과값 return. 우변 평가 X. )

+) falsy값 → ( false /  0 / "" / null / undefined / NaN )

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

console.log(getUsername({ name: '림졍' })); //림졍
console.log(getUsername({})); //신원미상

 

- 논리곱 연산자 ( && )

좌변이 trythy일때만 우변 평가, 특정 코드 실행할 때 유용

(밑의 예시처럼.. if 조건이 한개라면 밑에처럼 사용하면 편하다!) 아니 나는 지금까지 뭐했던 ㄱㅓ...ㅈㅣ...?

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

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

 

 

Optional Chaining ( ?. )

 

경로 속성 없어도 에러 대신 undefined 값 출력 → 중첩된 객체 속성 안전하게 접근가능 (에러 방지도 ^0^)

장점 : 코드 안정성↑ + 간결-깔끔.

const user = {
    profile: {
        name: "림졍",
        details: {
            age: 26,
            location: "서울시 동대문구"
        }
    }
};
console.log(user.profile?.details?.age); // 출력: 26
            
const user2 = {};
console.log(user2.profile?.details?.age);  // 출력: undefined
// 단, 값은 undefined로 여전함..

 

+) 메서드 호출도 가능하다.

const result = user.profile?.getDetails?.();  
// user.profile.getDetails가 없으면 undefined 반환

 

 

Null 병합 연산자 ( ?? )

 

논리 합과 찔끔 비슷하지만 다름. 좌변이 null or undefined일 경우에만 우변 평가.

(null or undefined가 아닌 falsy 값 → 유효한 값 처리 시 사용)

// 사용자의 위치 설정이 없으면 기본 위치를 제공
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"

논리합 연산자 VS Null 병합 연산자

• 논리합 연산자 : 좌측 값 falsy ( false /  0 / "" / null / undefined / NaN ), 우측 결과 return
• Null 병합 연산자: 좌측 값 null or undefined (only), 우측 return, 다른 falsy 는 무시. (평가 X.) ←

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

 

 

 

 

2주차 : 드디어 React 시작.. 근데.. 어.. 어라.. 어라라?

 

 

 

React 소개

 

리액트 = 자주 사용하는 프론트엔드 라이브러리

잊지말자. React는 프레임워크가 아닌 '라이브러리' ㄷㅏ. (IT-G MA!)

(왜냐... 그러기엔 ... 기능이 부족해서 ^-^;;)
+) Web Application에 주로 사용

• 프레임워크 : 모든 프로그래밍적 재원을 지원하는 '기술의 조합' (기능 구현에만 딱 집중할 수 있도록 해줌.)
  ex) [Vue.js, Angular.js] :  Javascript 기반 웹 프론트엔드 SPA
• 라이브러리 : 공통 기능의 모듈화가 이루어진 프로그램의 집합 

 

React 특징

 

리액트는... SPA가 특징임! 근데 복수 페이지처럼 보인다! 어라라? (ㅅ..속았다!)

SPA (Single Page Application) ↔  MPA (Multiple Page Application)

하나의 페이지로 이루어진 어플리케이션 ↔ 2개 이상의 페이지로 이루어진 어플리케이션

+) SSR (Server Side Rendering) : 초기 화면 로딩 시 서버에서 완성된 HTML 파일, 브라우저에 전송

렌더링 : HTML 문서 자체 생성하는 과정

 

cf. 라우팅(Routing)

한 웹페이지에서 다른 페이지로 이동하는 기능

(미니프로젝트때 경력있으신분들이 이야기하는것만 들었는데.. 이거였군..)

• Hashed Routing : 브라우저 내에서만 사용하는 값, url 요청에 영향X
• Browser Routing : 주소 뒤에 #가 보이는 구조 없이 유저에게 보여주는 구조

 

 

React 설치

 

- 설치에 앞서...

우선 림졍은 크롬, VsCode, Git, Node 까지 모두 설치가 완-료되어있는 상태이다.

따라서 yarn 과 Vite만 설치하는 방법만 적어놓을 예정..

(Git과 Node의 경우.. 다른 티스토리나 블로그에 친절히.. 설명이...으읍)

 

- yarn 설치 (ft. 오류 해결법)

yarn : npm이랑 같음, but 보다 성능적으로 개선된 친구.

VsCode를 열고, 터미널을 열어... 아래의 코드를 복붙해서 실행해보자.

npm install -g yarn

 

바로 된다면... 여러분은 아주 운이 좋으신거구요..?

Mac의 경우 대부분 안되는 경우가 많다고 하더군요.. (tmi_림졍은 맥북을 사용중이다.)

(npm이 -g 폴더에 접근 권한이 없어서 발생되는 문제)

일단 저의 경우는 아래처럼 떴습니다..

npm ERR! code EACCES
npm ERR ! syscall mkdir
npm ERR! path /뭐시기어쩌고저쩌고
npm ERR! errno -13

 

이런 경우 우선, npm 디렉터리 상태부터 확인하고, 해결을 보는 편인데

림졍의 경우. usr/local 로 뜨게 되어 폴더의 소유권 문제를 해결하여 문제를 해결했습니둥..

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

 

위의 코드를 냅다 터미널에 복붙하면  password : 라고 뜨면서 비밀번호를 입력하라고 할겁니다.

이럴때.. 무엇을 입력해도 뭐가 나오질 않거든요?

당황하지 않-고. 본인의 노트북 비밀번호 입력하세요. (or 권한 설정비밀번호일겁니다.)

원래 안뜨는게 정상입니다. 여튼 입력하면 설치가 되니 걱정마세요

여러분은 이렇게 1시간을 허비하지마세요.. 제발

 

((여러분은 어라 왜 안뜨지 하면서 엉엉 울지 마세요.. 저처럼요..))

[출처 : 링크 바로가기 ] ← 저를 살리신 은인이십니다 흑흑.. (근데 sudo 이후부턴 이것저것 찾아봄요..)

 

 

- Vite 설치 (바이트 아니고 비트입니다. 비이-트.)

 

프랑스어로.. 빠르다라는 뜻이래요.. ㅇㅅaㅇ...

 

명령어 딸-깍으로 한번에! 개발 환경을 구축해주는 원클릭 완제품 중 하나

(또다른 원클릭 완제품으로는 CRA가 있는데.. Vite보다 느려서.. 여튼 우리는 Vite를 사용할거임.)

VsCode 터미널에 냅다 아래의 명령어를 복사해서 붙여넣어주자.

yarn create vite my-react-app --template react

 

이거 하고 다음엔 이거 붙여주면... 끝!

cd my-react-app
yarn
yarn dev

 

 

 

마무리 - 아직도... 남았다고..? 이러다.. 나.. 죽어...

 

힝 너무 힘들어용..

 

아니 오늘 들은 강의 젠부 다 적어보려고 했더니.. 4개 남기고 GG...

너무... 고봉밥이라... 이건... 징차 무리인거 같아요...ㅇ<-<.

내일 강의듣고... 프로젝트도 시작하고... 하아...

언. 제. 다. 하. 지. 진. 짜. ^-^..

무튼 오늘 쓸만큼은 다 썼다고 생각해서..

나머지는 내일 하지 뭐...이쯤 하고 자렵니다요..

구빠이.

 

 

 

Today KPT 회고

• Keep :  B급갬성 TIL! 우수상을 받다! 이대로만 하자!
• Problem : 읍으읍... 고봉밥급 강의정리 너무 힘들어요...
• Try : 촉박하지만 스퍼트를 달려보자고.. (죽겠어요.)

 

 

ㄲ

ㅡ

ㅌ