🥬 상추의 공간

React JS 는 ui를 interactive(상호작용)하게 만들어준다. Before React Total clicks: 0 Click me React를 사용하지 않고 바닐라 JS로 코드를 짠 경우를 보자. (1)HTML을 만들고 (2)Javascript에 가져와 (3)event를 감지하고 (4)데이터를 업데이트한 뒤 (5)HTML을 업데이트한다. 계속 이런 방식으로 작업하면 복잡하고 비효율적이다. React Element 이번엔 React JS로 element를 생성하는 방식으로 해볼 것이다. 이를 사용하기 위해서는 react, react-dom를 import해야 한다. React JS는 HTML을 직접 작성하지 않고 JS 코드를 사용한다. const root = document.getElementB..

미션VSCode, Node.js, git 설치 및 github 계정 만들기해당 과정은 이미 되어있어서 통과했다. CRA(Creat React App) 활용해서 프로젝트 생성create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해주는 도구다. 아래 명령어를 통해 실행시킬 수 있다.npx create-react-app [폴더이름] 위 과정이 완료되면 지정한 이름의 프로젝트 폴더가 생성된 것을 확인할 수 있다.해당 디렉토리로 이동하고 아래 명령어를 입력하면 react 개발 전용 서버를 구동시킬 수 있다.npm start 심화 미션실제 면접 질문에서 자주 물어보는 내용이다. 아래와 같은 내용의 면접 질문을 받았을 ..

React란? 개발하고자 하는 웹 사이트의 UI(화면, view)를 효과적으로 만들 수 있도록 도와주는 JavaScript 기반 *라이브러리 **라이브러리 : 프로그래밍을 작성하는 과정에 있어서 특정한 기능을 도와주는 함수들의 집합, 각각 함수들은 독립적으로 작동하므로 필요한 함수만 호출하여 쓸 수 있다. 특징 선언적 - 대화형 UI 작성에 유리, 데이터가 변경되었을 때 효율적으로 렌더링 수행 컴포넌트 기반 - 캡슐화된 컴포넌트가 상태관리 및 UI 구성 재활용에 굳 장점 *클라이언트 렌더링과 *서버 사이드 렌더링 지원 **클라이언트 렌더링: 웹사이트에서 어떠한 데이터를 받아옴에 있어서, 필요할때 그때그때 데이터를 받아오는 방식 **서버 사이드 렌더링: 미리 웹사이트 화면에 필요한 요소들을 서버 쪽에서 미..