J.LOG J.LOG

JSX 리액트에서는 딱 하나의 html 파일만 존재합니다. (public 폴더 아래에 있는 index.html) 그럼 리액트에서 어떻게 뷰를 그릴까요? JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다. HTML을 품은 JS === JSX! 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 할 수 있어요. JSX 규칙 태그는 꼭 닫아주기 // input 태그를 닫지 않고 넣어볼거예요! function App() { return ( ); }​ 무조건 1개의 엘리먼트를 반환하기 return ( 안녕하세요! 리액트 반입니다 :) // 에러! );​ JSX에서 javascript 값을 가져오려면 중괄호를 사용 const cat_name = 'perl'; // r..

Array 내장 함수 map: 배열에 속한 항목을 원하는 대로 변환하고 새로운 배열을 만들 때 사용하는 함수. 원본 배열은 변하지 않는다. const array_num = [0, 1, 2, 3, 4, 5]; const new_array = array_num.map((array_item) =>{ return array_item + 1; }); // 새 배열의 값은 원본 배열 원소에 +1 한 값입니다. console.log(new_array); // (6) [1, 2, 3, 4, 5, 6] // 원본 배열은 그대로 있죠! console.log(array_num); // (6) [0, 1, 2, 3, 4, 5]​ filter: 조건을 만족하는 항목들을 골라서 새 배열로 만들어 주는 함수. 원본 배열은 변하지 ..

서버와 클라이언트, 서버리스(Serverless) 서버는 웹사이트에 보여줄 것을 클라이언트에 전달하는 역할을 한다. 클라이언트는 우리가 웹사이트를 보는 도구이다. 서버리스(Serverless)는 내가 서버를 만드는 것이 아닌 이미 작업이 완료된 서버를 빌려 쓰는 것이다. 백엔드리스 X DOM (Document Object Model) DOM은 HTML 단위 하나하나를 객체(object)로 생각하는 모델이며 트리구조로 되어있다. React 리액트(React)는 자바스크립트 라이브러리의 한 종류이다. ※ 자바스크립트 문법 알아보기 Class - 객체 지향 프로그래밍에서 특정 객체를 생성하기 위한 변수와 함수를 정의하는 틀 클래스 구성 class Cat { // 생성자 함수 constructor(name) {..