만들면서 학습하는 리액트(react):소개편 - 018
소개편 React vanilla js로 DOM element 만들고 추가하기 const p = document.createElement("p"); p.textContent = "hello world"; document.body.appendChild(p); DOM에 엘리먼트...
최근 포스트
만들면서 학습하는 리액트(react):소개편 - Hello world - 017
소개편 Hello world 브랜치 이동 ```bash $ git checkout -f intro/hello-world ``` index.html 확인 ```html <!DOCTYPE html> <html lang="ko"> <head>...
만들면서 학습하는 리액트(react):소개편 - 가상돔 - 016
소개편 가상돔 상태변화를 UI에 반영하려면 DOM API 호출이 불가피 상태가 변하는만큼 DOM API 호출이 비례함 > 성능에 영향을 주게 됨 브라우져가 HTML과 css로 화면을 그리는 과정 - 주요렌더링경로(Critical Render Path) HTML 코...
만들면서 학습하는 리액트(react):소개편 - 리액티브 - 015
소개편 리액티브 특정 값에 의존해 자동으로 반응하는 것을 리액티브(reactive) 하다 고 함 데이터가 변경될 때마다 엘리먼트에 자동으로 반영시키는 방법 const state = { _data: "Hello world", }; const render = () =>...
만들면서 학습하는 리액트(react):소개편 - 데이터를 화면에 출력하는 방법 - 014
소개편 데이터를 화면에 출력하는 방법 리액트/뷰의 특징은 화면에 출력되는 유저 인터페이스를 상태로 관리할 수 있음 준비편에서 뷰는 템플릿 객체로부터 HTML 마크업 문자열을 가져와 엘리먼트의 innerHTML 속성에 저장 모델(store)의 데이터가 변경되면 컨트롤러...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 013
준비편 - 순수JS [순수JS 1] 최근 검색어 3 요구사항 검색시마다 최근 검색어 목록에 추가된다 구현 Store.js 수정 ... import { createNextId } from "./helpers.js"; ... export default clas...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 012
준비편 - 순수JS [순수JS 1] 최근 검색어 2 요구사항 목록에서 x 버튼을 클릭하면 선택된 검색어가 목록에서 삭제된다 구현 historyListView 수정 import { delegate, formatRelativeDate, qs } from ".....
만들면서 학습하는 리액트(react):준비편 - 순수JS - 011
준비편 - 순수JS [순수JS 1] 최근 검색어 1 요구사항 최근 검색어 이름, 검색일자, 삭제 버튼이 목록 형태로 탭 아래 위치한다 (추천 검색어와 비슷) 목록에서 검색어를 클릭하면 선택된 검색어로 검색 결과 화면으로 이동한다 (추천 검색어와 같음) 구현 ...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 010
준비편 - 순수JS [순수JS 1] 추천 검색어 3 요구사항 목록에서 검색어를 클릭하면 선택된 검색어의 검색 결과 화면으로 이동한다 구현 SearchFormView.js 수정 ... export default class SearchFormView exten...
만들면서 학습하는 리액트(react):준비편 - 순수JS - 009
준비편 - 순수JS [순수JS 1] 추천 검색어 2 요구사항 목록에서 검색어를 클릭하면 선택된 검색어의 검색 결과 화면으로 이동한다 구현 KeywordListView.js 수정 ... export default class KeywordListView ext...