[항해99 26일차] 2022.04.01 TIL /프로토타입, 컴포넌트 쪼개기

오 새로운 주차가 시작되면서 심화 강의가 지급되었다.

리덕스랑 친해질 시간도 부족했는데 ㅠㅠ.

 

심화주차의 순한맛 과제는 "로그인 사용자용 매거진 사이트 만들기"

매운맛 과제는 "리액트로 일정 관리 캘린더 만들기"인데...

 

둘 다 어려워보이는데 캘린더가 훠어어얼씬..어려워보이고, 어떻게 만들어야될지 감도 안온다.ㅠㅠ

그래서 일단 순한맛 과제를 수행해야겠다.

순한맛 과제는 ㅎㅎ강의내용이어서..수월하게 할 수 있을 것 같다!!!

 

 

<오늘 할 일>

1. 주특기 심화 강의 듣기 !!

2. 알고리즘 문제 풀기

3. Mingle Friday

 

강의들으러 고고 !

 

[Javascript] - 변수와 상수  👈이렇게 정리해뒀다!

블록스코프는 {} 중괄호

함수스코프는 함수범위

 

📖 Prototype 프로토타입..

 

기술 면접에서 많이 나온다고 한다. 

자바스크립트는 동적 언어다. 즉 class가 없는 언어이다.

class는 es6버전 이후로 지원 되는 것이고, 자바스크립트가 클래스를 흉내내는 것 뿐.

 

👀[클래스 기반] ex) java, c++, ... 객체 생성 전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성

👀[자바스크립트] 클래스 없이 객체를 생성(리터럴과 생성자)

 

📖 Prototype패턴 : 리소스를 절감하는데 애쓰는 패턴 / 복사해서 새로운 것을 만드는 것.

 

 🤔 👉 이것을 자바스크립트와 엮어서 생각하면 약간 복잡해진다.

 

🔥꼭 알아야될 것🔥

 

1️⃣ 자바스크립트는 프로토타입 기반이라서 모든 객체들은 프로토타입을 다 가지고 있다.

자바스크립트에서는 객체를 만들 때 함수를 사용해서 만드는데, 함수의 프로토타입을 복사해서 객체를 만든다.

2️⃣ 객체는 자기가 어디에서 복제되었는지 기억을 하고 있다.

 

💡 [**프로토타입 객체와 프로토타입 링크]**

하나는 프로토타입 객체, 또 하나는 프로토타입 링크(`[[Prototype]]`(숨김 프로퍼티)가 참조하는 값과
`__proto__` )예요.

아직까지 면접 질문에 자주 출몰하고, 프로토타입 링크를 이야기할 때 `__proto__` 를 써서 이야기 하지만,
`__proto__` 를 사용하는 방식은 구식이에요. 😖 
(deprecated되었거든요.)

면접을 대비한다면 위 예제처럼 `__proto__` 로 직접 접근하는 방식을 알아두는 편이 좋지만,
그게 아니라면 가급적 `Object.getPrototypeOf()`를 이용해 참조하고,
프로토타입 체인에 연결할 때는 `Object.create()` 를 이용해 연결합시다!

( 🐯 관련 링크→)

 

메인페이지 (포스트 목록) 만들기

 

src 파일 안에는 

components : elements엮어서 중간단위 컴포넌트 ex) 게시글

elements : 최소단위 컴포넌트, 스타일

pages : 페이지 단위의 컴포넌트, 

redux : 리덕스 관련

shared : 공용으로 쓰는 아이들, 파이어베이스 파일

 

 

자꾸...경고창이 떠서 index.js파일을 이렇게 변경해줬더니 에러가 안뜬다!

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import './index.css';
import App from './shared/App';

const root =ReactDOMClient.createRoot(document.getElementById("root"));
root.render(
    <App />
);

 

갑자기 컴포넌트를 쪼개는 것 조차..어려워진다...

튜터님은 쉽다고..하시는데,, 나는 익숙하지 않아서 그런지 어렵다. ㅜ.ㅜ

 

 

음 버튼 컴포넌트랑 인풋 컴포넌트 만들고있는데

개념이 익숙하지 않아서 어렵다.

무한반복하면 나아지겠지?ㅋㅋㅋㅋㅋ

 

 

프로미스 강의는

📖 Promise  👈이렇게 정리해뒀다!

로그인, 회원가입을 하고 나면, 유저 정보를 우리가 알아야 되는데,,

그때 우리가 .then을 많이 사용할거라서 promise개념, 자바스크립트 비동기 작업 개념을 알면 이해도 더 잘되고 응용을 할 수 도 있다고 한다.

 

솔직히 한번 봐서는 잘 이해가 가지 않는데,

과제 다하고 시간 남으면 강의 또 봐야겠다.

 

내일은 2-3강의 볼 차례다.

지금은 뇌가 뭐랄까 제대로 안 움직이는 느낌이라서 자야겠다.ㅋㅋㅋㅋㅋㅋ

 

아 그리고 오늘 밍글데이에서 신서유기 인물퀴즈에서 울 팀이 1등 했다.ㅋㅋㅋㅋ

.......난이도가 왔다리 갔다리해서 내가 아는 인물도 있었고,,몰랐던 인물도 있었다.

난 귀여운 걸 좋아해서.. 만화 캐릭터들은 거의 다 알았는데, ㅎㅎ

 

< 내일 할 일>

 

1. 2-3 강의 듣기

2. 아침에 청소하기

3. 책 좀 읽기. (모던 자바스크립트)

4. 로그인 회원가입 기능 구현완료하기 ! (이해도 하기!!)