TodayILearn

실시간 Date 출력 & padStart와 padEnd

'\\n'은 각 문자의 뒤에 줄바꿈 문자를 추가합니다. 이를 백틱을 사용해 템플릿 리터럴로 바꿔도 동일하게 작동합니다:

useEffect, localStorage

IndexPage 기존 일기 수정 및 삭제 기능 ing

버튼 눌렀을 때, 해당 게시글의 id를 알아보기위해const \[editId, setEditId] = useState(null);수정 중인 일기를 추적하기 위해:editId는 현재 수정 중인 일기의 ID를 저장합니다. 이렇게 하면 사용자가 "수정" 버튼을 눌렀을 때,

1) diary.id === editId ? { ...diary, title, content, data: TodayDate } : diary 2) `onClick={() => editBtn(diary.id)}` 와 `onClick={editBtn}` 차이 3) 삭제함수

JSON.stringify와 JSON.parse

는 이메일 형식을 검사하기 위해 자주 사용되는 정규 표현식(Regular Expression)입니다. 이 정규 표현식의 의미와 사용법에 대해 설명드리겠습니다.^: 문자열의 시작을 의미합니다.\[^\\s@]+: \[] 안에 있는 것은 문자 클래스를 나타냅니다.^는 부정(

# 그림 앱 강의 ## Array.from() # 타입스크립트로 블록체인 만들기 Alias / 화살표 함수 / readonly / tuple / undefined / null / any / unknown / void / never / Call Signatures /

# 배열 만들기 2 정규 표현식 regExp / `test()` 메서드 / toString() / Generator / Array.from() / replaceAll() / every() /

boolean / null / undefined 설명 함수오버로딩

⚽크롬앱 getElementById / querySelector / css 선택자 / addEventListener ⚽타스 type /Interface / 추상클래스 / 상속 / property를 추가 / 추상클래스로 대체 / 다형성 / Lib Configuration

app.js 만 아래로 수정하면 빨강<->파랑 번갈아 가능(토글처럼)"active" string이 계속 쓰이면 에러의 위험이 있다.일단 "clicked"로 수정 또는const clickedClass = "clicked"로 만들어준다.sexy-font 유지한 상태로

함수 오버로딩 / type 가드 / class / 객체지향 프로그램? / constructor / abstract 추상클래스 / interfaces

# type과 interface - 추상클래스 대체, 상속, 프로퍼티에 type 추가하는 방법 Polymorphism / Targets / Lib Configuration / `$ npm i -D ts-node` $ npm i -D @types/node

#Math 메서드 round/floor/ceil/random/max/min/abs/trunc/pow/sqrt/cbrt/sign/log/log10/exp #parseInt vs floor

JSON.stringify() JSON.parse() Date.now() arr.filter() navigatore.geolocation.getCurrentPosition(모든게 잘 됐을때 실행 될 함수, 에러가 났을 때 실행 될 함수)

2.4 Booleans 1) null : 아무것도 없는 상태로 채워짐 => 절대 자연적으로 발생하지 않는다. 변수(variable)안에 어떤 것이 없다는 것을 확실히 하기 위해 사용. ✏️ 여기에는 값이 "없다" 2) undefined : 변수(variable)은

querySelector getElementsById 선택자 `#`: 아이디 / `.` 클래스 사용법 CSS 선택자 Events className과 classList의 차이 toggle

#크롬앱 4강 Input Value / username의 유효성 검사 / `${}`사용법 /

# 크롬앱 7강 JSON.stringify : obj, array > string JSON.parse() : string > array filter는 항상 true를 반환

#vanila VS React JS JSX function과 const(화살표함수) const x = [1, 2, 3]와 const first = a[0]의 차이 (current) => current + 1)

useState 기본식(암기필요) clean up 코드 To Do List then과 async 비교

JSX 기본형태 const[초기값, 수정될 값] = useState() 구조 분해 할당

12.1 Rendering the Movies 구조분해할당

module.css useEffect clean up 코드 then Components and State

findIndex / indexOf 와 find 조합

3.0 call signature function 함수 & 화살표 함수 > function add(a:number, b:number){ return a + b } const addd = (aa:number, bb:number) => aa + bb call si

4.2 interface type version > interface version > interface 합치기 type 합치기 => 불가능

2.2 ({ ... })와 { ... }의 차이 화살표 함수를 사용할 때, 함수 본문이 객체 리터럴을 반환하는 경우 괄호 사용이 필수입니다. 예제를 통해 이 점을 알아보겠습니다. 올바른 형태 여기서는 (name: string): Player => ({ name }

rendering : react code를 브라우저가 이해할 수 있는 html로 바꾸는 것create-react-app을 사용해 react만으로 application을 생성하면 => client side application react는 사용자 브라우저인 client

CSR (Client Side Rendering) SSR (Server Side Rendering)

Hydration CSR vs SSR & Hydration CSR이 사용자와의 상호작용이 빠른 이유 CSR에서의 Hydration SSR/SSG에서의 Hydration CSR, SSR, SSG 비교

6 1. switch : 한번에 하나의 route를 렌더링 할 수 있는 방법 2. useRouteMatch : 특정한 url에 있는 지의 여부를 알려준다. 7.7 1. non-mutation : 원래 것은 바뀌지 않는다. slice했어도 기존 x는 변하지 않는다.

setValue(event.currentTarget.value); ==== ========== const { currentTarget: { value } } = event; setValue(value);

BrowserRouter / params

6.10 Recap

🎥 framer-motion `animate` 속성 완전정복: 문자열 vs useAnimation 컨트롤 비교

useState("초기값")은 value와 setValue를 만들어줍니다.value → 현재 상태값 (문자열)setValue → 상태를 수정하는 함수onChange 이벤트가 실행될 때event.currentTarget은 이벤트가 발생한 input 요소를 가리킵니다.ev

Link to vs path /절대경로 vs 상대경로 / 중첩 라우팅 / useQuery

6.5 To Do Setup / 6.6 react-hook-form(register, watch) 🔥6.5~6.10 useForm 다시보기🔥

📌 목적: 기존 TO_DO / DOING / DONE 외에 사용자가 직접 만든 카테고리를 포함하여 ToDo 항목을 분류하고 관리할 수 있도록 구조 확장.→ 이 코드는 단일 선택된 카테고리 상태를 의미합니다.→ enum을 사용해 "TO_DO", "DOING", "DON

ul에 droppableProps/innerRef/placeholder를, li에 draggableProps/dragHandleProps/innerRef를 모두 넣어야 정상적으로 드래그&드롭이 동작`draggableProps`와 `dragHandleProps` 역할

DragDropContext(onDragEnd)-div-Droppable(droppableId)-{()=>()}-Draggable(draggableId, index)-{()=>()}

8강 챌린지

🔥# useRouteMath vs useParams🔥

스크롤값에 따라 배경색 변경하는 방법

# useHistory() # useNavigate() # Link & 쿼리스트링 처리법 # searchParams, state # ${movieId} vs :movieId

8.3 Variants part One 아래 두 코드는 동일하게 동작한다. 8.7 MotionValue >Box가 움직일때마다 x를 통해 감지되고, x는 useMotionValue를 통해 x의 좌표를 감지할 수 있고, x.get()을 통해 콘솔에 직접 찍어 좌표의 변

TIL - ReactJSMaster part 5 : BrowserRouter/Switch

TIL - ReactJSMaster part 5 : React Router `useParams` && display flex-block

:coinId === ${coinId}

5.9 React Query

ReactQuery

'(' 또는 ')' 로만 이루어진 문자열 s가 주어졌을 때,괄호가 올바르게 짝지어져 있으면 true, 아니면 false를 반환하라.예시조건문자열 길이 ≤ 100,000'(', ')' 만 포함됨이 문제의 핵심은👉 열린 괄호 '('와 닫힌 괄호 ')'의 균형을 맞추는 것

괄호 짝 맞추기 문제를 풀다 보면,마지막에 이런 코드가 자주 등장합니다 👇처음 보면 “어라? count가 0이면 true라고 설정한 적 없는데?”이런 의문이 생기죠.하지만 이 한 줄에는 자바스크립트의 비교 연산 원리가 숨어 있습니다.자바스크립트에서 === 연산자는두

{user?.displayName ? user.displayName : "Anonymous"} >> shortcut {user?.displayName ?? "Anonymous"}

routes 👉 URL에 직접 대응되는 페이지 단위 컴포넌트 components 👉 페이지를 구성하는 재사용 가능한 조각들

try / catch / finally는 “에러를 잡아서 프로그램이 죽지 않게 제어하는 장치”입니다.에러가 발생할 수 있는 코드를 시도(try)하고,에러가 나면 잡아서(catch) 처리하고,무조건 실행해야 할 정리 작업을 finally에서 수행한다.대표적인 예:JSON

async / await는 “시간이 걸리는 작업의 결과를 기다려야 할 때” 사용합니다.자바스크립트는 기본적으로 비동기 언어입니다.출력:👉 기다려주지 않습니다.서버 요청 (로그인, 데이터 조회)파일 업로드 / 다운로드토큰 검사외부 API 호출위치 / 권한 요청DB /

instanceof는 “이 객체가 어떤 생성자(클래스)로 만들어졌는지”를 확인할 때 쓰는 연산자입니다.instanceof는 어떤 객체가 특정 생성자(클래스)의 인스턴스인지 확인한다결과는 항상 true / false 입니다.👉 배열은 Array로 만들어졌고👉 Arra