connecting dots

Redux 알아보기- state: 데이터- action: 함수함수도 하나의 데이터이긴 함. 데이터 중 함수는 호출 가능호출을 해서 추가적인 명령을 실행하는 개념 동기 처리는1) 액션을 만들어서 데이터를 어떻게 변경할지 type(액션의 이름)과 payload(매개변수)로 설정한다.2) 필요한 곳에서 디스패치 액션을 호출한다.3) 액션(내부 로직으로)에서 상태를 업데이트할 수 있다.비동기 처리는1) 액션을 만들어서 데이터를 어떻게 변경할지 type(액션의 이름)과 payload(매개변수)로 설정한다.2) 필요한 곳에서 디스패치 액션을 호출한다.3) 액션(내부 로직으로)에서 상태를 업데이트할 수 있다.- fulfilled/rejected (무엇을 의미하는 것인지 등은 파악해야 함)만일 사용자가 버튼을 클릭하는..

*                줄래 ?       (요청, request)브라우저 https://www.heropy.com                줄게       (응답, response) 가장 먼저 ! html 가져옴 (화면의 구조를 그림. index.html)http = 프로토콜 (통신 규약) + s --> 보안을 위해서 ! * 로컬 서버(개발 서버) 실제 서버가 아님. 개발할 때만 씀vs배포 (다른사람이 접근할 수 있는 서버로) *for (let i = 0; i ++ 보다 +=를 추천 (더 명확함) *defer를 사용한다 = html 우선 먼저 다 읽고 나서 js 실행해줘 ! (먼저 불러오지만 html 다 읽을 때 까지 대기)  JS 코드 뜯어보기const usersEl = document.q..

Q.  챗 지피티에 의존을 너무 많이 해요 / 챗 지피티가 없으면 코드를 못 짜겠어요 A. 챗 지피티에게 코드를 주고 이걸 설명해줘 ! 하는 건 오케이. but 챗 지피티에게 코드를 짜줘 ! 하는건 이제부터 하지 않기.어떠한 코드를 해석해달라고 해서 그걸 이해하고 학습하기 위한 도구로 사용하는 것은 좋지만코드 생산을 위해서 쓰지 말 것. 최신 코드 부분에 있어서는 챗 지피티에서 정확히 알려주지 않음.구글링, 공식 문서 등을 통해 크로스 체크는 필수. Q. 정규 실시간 강의를 따라가기 어려워요 A. 실시간 강의가 어렵다고 다른 거 하지말고 일단 열심히 듣기.최대한 필기 열심히 하면서 이해가 안되는 것들 메모해두고 나중에 질문해보기.지금 이해가 안가도 몇 주, 몇 달 혹은 몇 년 이후에 '아하 !' 하는 순..

hot module replacement모듈 전체를 다시 로드하지 않고 애플리케이션이 실행되는 동안 교환, 추가 또는 제거함실행 중인 상태의 코드의 변경 된 부분을 바꿔치기하는 것 copilot said ...Hot Module Replacement(HMR)는 리액트 개발에서 코드가 변경될 때 페이지를 새로 고치지 않고도 변경된 내용을 바로 반영해주는 기능이에요. 이 기능 덕분에 개발자가 코드 수정 후 저장할 때마다 페이지를 새로고침하지 않아도 변경된 내용을 즉시 볼 수 있어요.Vite는 기본적으로 HMR을 지원해요. 추가 설정 없이도 바로 사용할 수 있어요.비유로 설명하기한번 상상해보자. 네가 그림을 그리는 중이라고 생각해보자. HMR이 없다면, 색깔을 조금 바꿀 때마다 종이를 새로 갈아야 하는 상황이..

--> 함수형 컴포넌트와 클래스 컴포넌트는 App.js에서 불러오는 것은 같지만 모양이 다름 !클래스는 복잡하지만 다양한 기능을 제공함. 대표적인 기능이 상태 ! (함수형 컴포넌트는 지원하지 않음) 클래스 컴포넌트함수형 컴포넌트상태지원미지원요즘 거의 안 씀리액트가 함수형 컴포넌트에서도상태를 사용할 수 있는 방법을 만들어줌  - 상태(state)많은 데이터 중에 값이 변하는 것, 앱이 실행하고 나서 상황, 시간의 흐름 등에 따라 값이 변하는 것  --> onIncrement 잘 호출되고 숫자도 올라가는데 화면의 숫자는 여전히 1 ?--> 함수를 호출하는게 없고 마크업 처럼 쓴 것도 호출이 아님. 리액트에게 넘겨주는 것임      버튼 클릭 시 정상적으로 숫자 증가    --> 최근에 들어서는 클래스 컴포넌..

type FooterProps = { message: string color?: 'blue' | 'red' | 'green' | 'yellow" // 또는}type HeaderProps = { title: string size?: 'small' | 'medium' | 'large' color?:'blue' | 'red' | 'green' | 'yellow"}function Header(props: HeaderProps) { return ( {props.title} )}function App() { return ( // 오류 발생, color에는 black이 들어갈 수 없음 ! )}vite: 간단해서 많이 사용↓webp..

컨택스트(context)_this상황에 따라 this가 가리키는 것이 무엇인지 맥락 파악해야 함 1. this는 객체이다2. this가 전역 공간에 있을 때는 전역 공간(window 객체)를 가리킴--> this === window3. 실행 맥락(excute context)으로 this를 연결한다.4. 실행 시 소유자 확인이 안되면 this는 전역 객체에 연결된다. const obj = { id: 1, getId: function () { return this.id; } // this는 obj를 가리키고 있음.};console.log(this.id) // window에 id가 없는 것과 같음console.log(obj.id)console.log(obj.getId())// method를 호출하는..

import / export여러 개의 자바스크립트 파일의 특정한 변수/함수를 가져다 쓰기 위함 script.jsimport sum from './cal.js'// import * as cal from './cal.js' : default없을 때, 다 가져올래, 이름을 줄수 있음// 내가 만든 건 ./로 경로 지정을 해줘야 하지만 node_modules에 있는 것은 경로지정 안해줘도 됨const result = sum(100, 200);// const result = cal.sum(100, 200);console.log(result) cal.jsexport function sum(a, b) { return add(a, b);}export default function div(a, b) { return ..