분류 전체보기 (105) 썸네일형 리스트형 [React] DOM이란 무엇인가? 먼저 DOM이란 무엇인가?DOM은 Document Object Model의 약자로 쉽게 말하자면브라우저가 HTML을 JavaScript가 다룰 수 있는 객체 구조로 바꿔놓은 것 이라고 이해할 수 있다. 예를 들어위 이미지의 좌측과 같이 HTML을 작성했다고 하면 브라우저는 이것을 단순히 문자열로만 보는 것이 아니라 내부적으로 우측과 같은 트리 구조로 만든다. 이 구조가 DOM이다. HTML과 DOM의 차이예를 들어 파일에 이런 HTML 문서가 적혀 있다고 했을 때Hello이 HTML 문서를 브라우저가 읽으면 JavaScript에서 접근할 수 있는 DOM 객체가 생긴다. 이제 다음 JS 코드를 Console에서 입력하면const title = document.querySelector("h1");title .. [React] 컴포넌트 합성과 children 지금까지는 컴포넌트를 주로 이런 식으로 사용했다.Props를 전달하고 컴포넌트가 UI를 만드는 방식이다. 그런데 React에서는 이런 형태도 매우 많이 사용한다. 홍길동 프론트엔드 개발자처음 보면 Card 안에 다른 JSX 코드가 들어가 있다.이와 같이 컴포넌트의 여는 태그()와 닫는 태그() 사이에 작성된 모든 내용을 받는 특별한 Props가 바로 children이다. Step 1. 아주 간단한 children 코드 작성해보기src/App.jsxfunction Box({ children }) { return ( {children} );}function App() { return ( Hello React );}export default App;여기.. [React] useEffect 학습 전 참고하기: [React] React를 위한 JavaScript(3) 비동기 이번 실습 단계에서는 React 바깥에 있는 서버에서 데이터를 받아와 화면에 표시해 볼 것이다. 다만 useEffect를 배우면서 가장 먼저 잡아야 하는 것은 문법보다 언제 사용하는가이다.React 공식 문서에서도 Effect를 "외부 시스템과 컴포넌트를 동기화하는 수단"으로 설명하고, 단순 계산이나 사용자 이벤트 처리에는 불필요한 Effect를 쓰지 말라고 안내하고 있다. 지금까지는 React 내부적으로 다루었다.StatePropsEventComponent 하지만 실제 앱에서는 외부 세계와 연결해야 한다.React ↓서버 API데이터베이스브라우저 API타이머외부 라이브러리컴포넌트를 이런 React 바깥의 시스템과 동기.. [React] 컴포넌트 분리와 State 끌어올리기 지금까지 Todo 앱의 모든 코드를 App.jsx 하나에 몰아넣었는데 이제 React다운 구조로 나눠보자. 현재 Todo 앱에는 서로 다른 역할들이 섞여 있다. App├─ Todo 입력├─ Todo 목록 출력├─ Todo 하나 출력├─ 추가 기능├─ 완료 기능└─ 삭제 기능이걸 이렇게 나눠보자.App├─ TodoForm└─ TodoList └─ TodoItem 역할은App→ todos State 관리TodoForm→ 새로운 Todo 입력TodoList→ Todo 목록 출력TodoItem→ Todo 하나 출력 이다. 여기서 중요한 것은 State를 무작정 각 컴포넌트로 옮기는 게 아니라는 점이다. Step 1. 파일 만들기src 폴더 안에 다음 파일을 만든다.src/├─ App.jsx├─ TodoFo.. [Codex] Codex 프롬프팅 가이드 Step 1. 프롬프트를 4레벨로 구분하기Level 1 — 나쁜 프롬프트로그인 버그 고쳐줘.문제는 Codex가 판단해야 할 것이 너무 많다는 점이다.어떤 버그인지, 어느 파일인지, 리팩토링까지 해도 되는지, 테스트는 해야 하는지 모두 불명확하다. Level 2 — 보통 프롬프트로그인 실패 시 에러 메시지가 제대로 표시되지 않아.관련 코드를 찾아서 수정해줘.조금 나아졌다.Codex가 탐색해야 한다는 것은 알 수 있다.하지만 변경 범위와 완료 조건이 여전히 애매하다. Level 3 — 강한 프롬프트로그인 실패 시 서버에서 반환한 에러 메시지가 UI에 표시되지 않는 문제를 수정해줘.관련 로그인 흐름을 먼저 확인하고 원인을 찾아.제약:- 기존 API contract는 변경하지 마.- 새로운 dependenc.. [Codex] Codex 프롬프트 공식 Step 1. Codex 프롬프트 공식 (GCCD)Codex에 이렇게 물어보는 것은 초보적인 사용이다.이 코드 고쳐줘. 조금 더 나은 방식이라고 하면로그인 버그 고쳐줘.정도이다. 하지만 앞으로 목표로 할 방식은 다음과 같다.목표:로그인 실패 시 사용자가 원인을 알 수 있도록 에러 처리를 개선해줘.컨텍스트:src/auth/login.tssrc/auth/authService.tstests/auth/제약:- 기존 public API는 변경하지 마.- 새로운 dependency를 추가하지 마.- 현재 프로젝트의 에러 처리 패턴을 먼저 확인하고 따라가.- 불필요한 리팩터링은 하지 마.완료 조건:- 원인을 재현해.- 수정해.- 관련 테스트를 추가하거나 수정해.- 테스트와 lint를 실행해.- 마지막에 변경 파일과 .. [React] Todo List 만들기 실습 (2) [배열 항목 수정] 이번 학습 단계의 핵심: 배열 안의 특정 객체를 바꾸려면 map()으로 새로운 배열을 만든다. Step 0. 실습에서 다룰 Todo 객체{ id: 1, text: "React 공부하기", completed: false}객체에 완료 여부에 대한 completed 속성을 추가한다. Step 1. 새 Todo에 completed 추가하기handleSubmit 함수에서 newTodo 부분을 다음과 같이 변경한다.// 기존// const newTodo = {// id: Date.now(),// text: input.trim(),// };// 변경const newTodo = { id: Date.now(), text: input.trim(), completed: false,}; Step 2. 완료.. [React] Todo List 만들기 실습 (1) [배열 항목 추가와 삭제] 실습 목표 : Todo List에서 Todo 추가, 삭제 기능 만들기 우선 추가 기능부터 만들어보자.Step 1. 두 종류의 State가 필요하다const [input, setInput] = useState(""); // 현재 input에 적혀 있는 글const [todos, setTodos] = useState([]); // Todo 목록으로 처음에는 Todo가 없으므로 빈 배열로 초기화 Step 2. input 연결하기import { useState } from "react";function App() { const [input, setInput] = useState(""); const [todos, setTodos] = useState([]); function handleChange(event.. 이전 1 2 3 4 ··· 14 다음