connecting dots

자바스크립트에서의 this 키워드일반함수: 호출 위치에서 this가 정의됨화살표 함수: 선언 위치에서 this가 정의됨일반함수 Function.prototype.call()--> call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다. 화살표 함수this를 가지고 있는 함수를 감싸는 함수가 있는지 봐야 함 !   (1) 방법은 보안에 취약(2) 방법을 통해 안전성을 높여야 함 !우리 프로젝트에서는 Vercel의 Serverless Functions를 사용해서 api 구현 엔드포인트 = {updatedtodo.id}https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos/${updatedTodo.id} API 코드서버..

즉시실행함수(IIFE)익명함수를 ( )로 감싸고 그 전체를 바로 (호출)하는 방식--> 원래 익명함수는 호출할 수 없음 (이름이 없으니까). 이를 가능하게 해주는 방식 ! 세미콜론을 명령 뒤에 안 붙이는 경우에는 위쪽의 명령과 섞이지 말라는 의미로즉시실행함수 앞에 ';'을 붙여줌. 이렇게 하면 오류가 나지 않음  비동기 처리 용어 쉽게 이해하기상황: 빵을 사러 서울에서 1시에 출발 ! 사고 다시 서울로 돌아온 시간 9시 !1. 대기(pending)- 1시부터 9시까지, 출발해서 다시 돌아올 때 까지, 8시간동안의 시간이 대기상태 (기다리고 있는 것)- 가져오고 있는 중 (ing)- 도착했으면 대기 끝 2-1. 이행(fulfilled)- 빵을 잘 사왔으면 '빵을 사러 다녀오다' 미션이 제대로 이행됨 -->..

JSX Key 속성 이해하기리액트에서 요소의 리스트를 나열할 때는 key를 넣어줘야 함키는 리액트에서 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 됨.요소에 안정적인 id를 부여하려면 배열 내부의 요소에 key를 제공해야 함 리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 반영--> 리스트에서 나열할 때 바뀐 부분을 어떻게 찾을까 ? key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있음 ! 3번을 1,2번 뒤에 추가할 때는 react가 3번만 추가하면 된다고 쉽게알 수 있음3번을 1,2번 앞에 추가할 때는react가 모든 요소가 새롭게 된 것이라고 인식하고 모든 자식 엘리먼트를 새롭게 그려버림이 경우 key를 추가햐서 1,2번을 새롭게 그리는 것이 아닌3번을 추가 후 1,2번은 자리만 이..

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..

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 ..