1. ReactJS 프로그램 생성하는 법 cmd 창에서 파일을 생성하려고 하는 저장소로 이동 후 하단 명령어 입력 npx create-react-app [ 프로젝트 이름 ] VSCode 에서는 터미널에서 npm start 명령어를 통해 프로그램을 실행 App.js import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target..

modifier 함수를 가지고 state(setCounter)를 변경할 때 react에 의해 컴포넌트(function)가 재생성됨 (새로운 값을 가지고 리렌더링) 코드가 실행되는 과정 : 1. 버튼을 누르면 counter가 1이 됨 2. console.log(1), Total clicks: 1이 됨 3. 이는 컴포넌트 자체가 재생성 된 것임 4. 데이터(setCounter)가 바뀔때마다 컴포넌트를 리렌더링하고 UI를 refresh하는 것 바닐라 js를 대체 HTML요소를 생성하거나 찾을 필요 X 이벤트 리스너를 더해줄 필요 X UI 업데이트 필요 X -> return 안에서 HTML을 바로 생성해버렸고, 거기에서 바로 이벤트 리스너를 더해줬고, UI를 업데이트 하면 자동으로 리렌더링 됨 state를 바꾸..

https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co

1. IT 용어 이해 1.1 API란 무엇인가? - Application Programming Interface - 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 - User Interface, 즉 사용자와 프로그램과 소통하기 위한 접점 1.2 동기와 비동기란? - 동기 : 답변을 기다리는 것 - 비동기 : 답변을 기다리지 않는 것 1.3 프론트엔드 & 백엔드란? 프론트엔드 : 사용자가 마주 보는 인터페이스로, 주로 웹 및 모바일의 사용자 인터페이스 (UI) / 사용자 경험 (UX)를 개발하는 데에 초점 - 언어 : HTML, CSS, JavaScript - 테크놀로지 : AngularJS, ReactJS, Bootstrap 백엔드 :..

0. 자바스크립트 입문 강좌 0.1 DOM이란? - Document Object Model - 웹 문서를 제어하기 위해 웹 문서를 객체화 한 것 - 웹 문서, 즉 HTML을 객체화 함으로써 문서를 제어할 수 있음 0.2 BOM이란? - Browser Object Model - 웹 브라우저를 제어하기 위해 브라우저를 객체화 한 것 0.3 script 태그 defer, async - HTML에서 자바스크립트 파일을 사용할 때, 태그로 자바스크립트 파일을 불러옴 - 브라우저에서는 HTML 파일의 위부터 아래로 순차적으로 파싱 -> HTML이 파싱 되기도 전에 DOM 요소에 접근하려고 할 때, DOM 요소에 접근하려고 했기 때문에 발생한 문제 생성되지 않은 객체에 대한 문제 발생 [ 해결방법 1 ] body 태..