리액트3 State and LifeCycle(생명주기) element 렌더링을 이용한 째깍거리는 시계 예시 const root = ReactDOM.createRoot(document.getElementById('root')); function tick(){ const element = ( Hello, world It is {new Date().toLocaleTimeString()}. ); root.render(element); } setInterval(tick, 1000); Clock 컴포넌트를 만들어서 완전히 재사용 하고 캡슐화 하는 방법 const root = ReactDOM.createRoot(document.getElementById('root')); function Clock(props){ return( Hello, world! It is {prop.. 2023. 3. 7. element(엘리먼트) element(엘리먼트) - 엘리먼트는 React 앱의 가장 작은 단위 이다. - 엘리먼트는 화면에 표시할 내용을 기술 한다. const element = Hello, world; - 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체(plain object)이고 쉽게 생성 가능하다. - React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다. DOM에 엘리먼트 렌더링 하기 - HTML 파일 어딘가에 가 있다고 가정 - 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 "루트(root)" DOM 노드라고 한다. - React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. - React를 기존 앱에 통합하려는 경우 원하는 만.. 2023. 3. 4. login page algorithm 1. 패키지 설치 - node js 다운로드 npm init - express js 다운로드 npm install express --save - index.js파일 만들기 - index.js 에 기본적인 express js app 구현 - mongoose 설치 및 연결 - db 모델, 스키마 생성 2. 회원가입 기능 만들기 - register 라우터 생성 - client - server 통신할 body-parser 다운로드 npm install body-parser --save - body-parser options(urlencoded or json) 추가 -모델 User 객체(인스턴스) user 생성 - mongoDB의 document 메서드 save 이용해서 err, userInfo 를 각각 실패, .. 2022. 9. 4. 이전 1 다음