기록

◉ 리액트 프로젝트 생성 시 폴더와 파일 구조 살펴보기 • public : create-react-app으로 개발할 React 프로젝트의 static 파일들(index.html)이 저장된 폴더 - public/index.html : 개발한 React 프로젝트가 표시될 파일 • src : 실제 React를 사용하여 개발을 할 때 사용하는 폴더 - src/index.js : 우리가 개발한 React 프로젝트를 index.html 파일에 표시하기 위한 파일 - src/App.js : 기본적으로 제공되는 React 컴포넌트 예제 - src/App.css : App 컴포넌트에서 사용하는 CSS 파일 - src/App.test.js : App 컴포넌트를 테스트하기 위한 파일 - src/reportWebVitals...

◉ JSX(JavaScript XML) ▪︎ Javascript에 XML을 추가한 확장한 문법 ▪︎ JSX : 리액트로 프로젝트를 개발할 때 사용 → 공식적인 자바스크립트 문법은 아님 ▪︎ 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨 ▪︎ ( 참고 ) https://goddaehee.tistory.com/296 ◉ 리액트 ▪︎ 컴포넌트 방식으로 화면을 구성함 ▪︎ 무조건 하나 이상의 컴포넌트가 있어야 함 따로 생성하지 않을 경우, App.js가 생성됨 ▪︎ 컴포넌트란? - 화면에 보여지는 요소(부분)을 의미 - 다른 곳에서는 위젯 또는 컨트롤이라고 함 ◉ App.js 실습 1. App 컴포넌트에서 사용할 라이브러리 불러오기. ▪︎ ES6부터 라이브러리를 불러올 때, ..

◉ 리액트 컴포넌트를 만드는 방법 ▪︎ 리액트 - UI를 위한 자바스크립트 라이브러리 - 독립적이고 재사용 가능한 컴포넌트를 기반으로 작동함 - 데이터 흐름 : 상위 컴포넌트 → 하위 컴포넌트 - UI를 선택적으로 렌더링해서 효율을 높이기 위해 VDOM(Virtual Document Object Model)을 이용함 ▪︎ VDOM - 경량화된 DOM - 실제 DOM을 처리할 때보다 훨씬 빠르게 조작 가능 ▪︎ 리액트 컴포넌트 - 두 가지 방식으로 정의 가능 ① 자바스크립트 함수 이용 function App(){ return Hello World; ] ② ES6 클래스 이용 class App extends React.Component { render(){ return Hello World; } } - re..

◉ Node.js 설치 ▪︎ Node.js : 자바스크립트 기반의 오픈소스 서버 측 환경 ▪︎ 구글에 Node.js 검색 후, 사용 중인 운영체제에 맞는 LTS(Long Term Support) 버전 선택 ▪︎ 다운로드 받은 파일 풀고 클릭하면, 아래와 같이 화면 보임 - '계속' 클릭 - 설치 완료 ▪︎ 터미널 창에서 설치 확인하기 node --version npm --version ◎ npm : 자바스크립트용 패키지 관리자로, Node.js 설치하면 함께 설치됨 ◉ VS Cod 설치 - 코딩을 시작하도록 도와주는 코드 편집기 ▪︎ https://code.visualstudio.com/에서 다운로드 받기 ( 이미 설치한 상태이므로, 다운로드 과정 생략 ) ◉ VS Code 확장 1. React js c..