odada

1. 엘리먼트의 정의 리액트 앱의 가장 작은 블록들을 엘리먼트라고 한다. 개발자모드의 html 요소가 DOM 엘리먼트이다. 리액트 엘리먼트는 DOM 엘리먼트의 가장 표현으로 리액트 앱의 가장 작은 블록들을 엘리먼트라고 한다. 아래 코드가 실행될 때, 대입 연산자의 오른쪽 부분은 리액트의 creactElement() 함수를 사용하여 엘리먼트를 생성한다. const element = Hello, world; 2. 엘리먼트 표현 엘리먼트는 자바스크립트 객체 형태로 존재한다. 컴포넌트 유형과 속성 및 내부의 모든 자삭에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체 { type: 'button', // 엘리먼트의 유형 props: { // 엘리먼트의 속성 className: 'btn-red', child..

1. JSX란? JSX = JavaScript + XML/HTML A syntax extension to JavaScript (자바스크립트의 확장 문법) 대입 연산자를 통해 Html 코드를 변수에 저장한다. const element = Hello, world!; 2. JSX의 역할 JSX로 작성된 코드는 모두 자바스크립트 코드로 변환 JSX는 React.createElement()로 변환된다. // JSX Hello => // React.createElement() React.createElement('div', { id: 'foo' }, 'Hello'); 3. JSX의 장점 코드가 간결해진다. 가독성이 향상된다. // jsx 사용 Hello, {name}; // jsx 사용 안함 React.reactE..

React Package 설치Create React App 을 사용하여 React 프로젝트를 생성하고, React 프로젝트에 필요한 패키지를 설치하는 방법을 알아봅니다.1. Create React App 이란?Create React App은 React 프로젝트를 생성할 때 필요한 환경을 구축해주는 도구입니다.Create React App 공식문서장점별도의 설정 없이 바로 React 프로젝트를 생성할 수 있습니다.초기 개발 시간 단축, 개발 생산성 향상Babel, Webpack 같은 도구들을 별도로 설치할 필요가 없습니다.프로젝트에 필요한 설정이 미리 적용되어 있고 패키지가 설치되어 있습니다.단점빌드 설정을 커스터마이징하기 어려움리액트 앱 구조에 대해 이해하기 어려울 수 있음원..

리액트 홈1. React란?https://odada.me/250React는 페이스북에서 개발한 UI 라이브러리로, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.나무위치 보러가기: React2. React 특징- Virtual DOMReact는 Virtual DOM을 사용하여 빠른 렌더링을 구현합니다. Virtual DOM은 실제 DOM의 가벼운 복사본으로, React는 Virtual DOM을 사용하여 실제 DOM과 비교하여 변경된 부분만 업데이트합니다.이미지출처: 소플의 리액트- ComponentReact는 컴포넌트 기반으로 UI를 구성합니다. 컴포넌트는 재사용이 가능하며, 각 컴포넌트는 독립적으로 작동합니다.function App() { return Hello, World!;}..

클래스 (class)Class는 객체를 만들기 위한 템플릿이며, 프로토타입 기반 상속을 보다 명시적이고 간편하게 사용할 수 있도록 해줍니다.class를 사용하지 않으면, 객체를 생성하고 속성과 메서드를 추가하는 과정이 번거롭고, 중복된 코드가 많아질 수 있습니다.class를 통해 원하는 구조의 객체 틀을 만들고, 이를 통해 객체를 생성하고 속성과 메서드를 추가할 수 있습니다.클래스 = 붕어빵 틀 / 객체 = 붕어빵0. 클래스의 개념"커피숍"을 운영한다고 가정하고, 커피숍에서 판매하는 다양한 종류의 커피를 클래스를 사용하여 모델링해 보겠습니다.- 클래스를 사용하지 않은 경우// 생성자 함수를 사용하여 커피 객체를 생성function OrderCoffee(name, price, size) { // 커피..

node.jsnode.js 란?Chrome V8 Javascript 엔진으로 빌드된 JavaScript 런타임으로자바스크립트를 브라우저 밖에서도 사용할 수 있게 해주는 런타임 환경이다.Chrome V8 Javascript 엔진 : 자바스크립트의 문법을 해석하고 동작시켜줄 수 있는 엔진JavaScript 런타임 : 자바스크립트 언어가 동작하는 환경쉽게 말해 node.js를 사용해 브라우저 및 컴퓨터를 제어할 수 있다.- 프론트앤드가 node.js를 알아야 하는 이유컴퓨터에서 제어하기 위한 용도는 아니지만 웹페이지를 개발하기 위한 도움을 받는 용도로 사용한다.html, css, js 만으로 웹사이트 개발을 할 순 있지만 그 과정이 약간 비효율적이다.개발을 도와주는 여러가지 모듈들을 도움을 받으면 효율적으로 ..

함수(Function)1. 함수 선언하기함수 선언문과 표현식의 차이점함수 선언문은 호이스팅이 일어나지만, 함수 표현식은 호이스팅이 일어나지 않는다.// 함수 선언문 (Declaration)function helloA() {}// 함수 표현식 (Expression)const helloB = function () {};helloA(); // 함수 호출helloB(); // 함수 호출2. 호이스팅이란?함수 선언문이 코드의 최상단으로 끌어올려지는 것을 말한다.함수 선언문은 선언하기 전에 호출해도 정상적으로 실행된다.hello1();function hello1() { console.log('hello1'); // hello1}하지만, 함수 표현식은 호이스팅이 일어나지 않기 때문에, 함수 표현식을 선언하기 전..

구문(Statement)1. 구조 분해 할당 (Destructuring assignment)객체나 배열을 변수로 '분해'할 수 있게 하는 문법객체의 속성을 해체하여 그 값을 변수에 담을 수 있게 하는 표현식- 배열의 구조 분해const arr = [1, 2, 3];// const a = arr[0]// const b = arr[1]// const c = arr[2]const [a, b, c] = arr; // 구조 분해 할당// 배열 데이터를 만든 후 arr 변수에 할당console.log(a, b, c); // 1 2 31) 각각의 변수가 미리 할당되어 있을 경우let a = 0;let b = 0;let c = 0;const arr = [1, 2, 3];// 초기화 후 재할당 가능[a, b, c] = ..

home : https://splidejs.com/ option : https://splidejs.com/guides/options/#type 1. Getting Started CDN - html - scss .slide-intro { .splide { max-width: 800px; margin: 0 auto; position: relative; } .splide__track { overflow: visible; } .splide__slide img { width: 100%; height: auto; } } - js var splide = new Splide( '.splide', { type : 'slide', // perPage: 2, padding: '5rem', gap: '10px', start:..

연산자(Operator)1. 산술(Arithmetic) 연산자+, -, *, /, %// 덧셈 연산자console.log(1 + 2); // 3// 뺄셈 연산자console.log(5 - 7); // -2// 곱셈 연산자console.log(3 * 4); // 12// 나눗셈 연산자console.log(10 / 2); // 5// 나머지 연산자console.log(7 % 5); // 2function isEven(num) { return num % 2 === 0;}console.log(isEvent(3)); // falseconsole.log(isEvent(4)); // true2. 할당(Assignment) 연산자a = bconst a = 1;console.log(a); // 1let aa = 1..