odada

표준 내장 객체 - 문자열(string) string(문자열) const str = 'hello world'; length 문자의 길이를 반환한다. console.log(str.length); // 11 .includes() 문자열에 특정 문자열이 포함되어 있는지 확인한다. console.log(str.includes('hello')); // true console.log(str.includes('Hello')); // false (대소문자 구분) console.log(str.includes('hello', 1)); // false (1번째 인덱스부터 시작) .indexOf() 문자열에 특정 문자열이 포함되어 있는지 확인한다. 포함되어 있으면 해당 문자열의 인덱스를 반환한다. 없으면 -1을 반환한다. c..

React Table Data 아래 이미지와 같은 테이블을 만들어보자. table의 데이터는 배열로 만들어서 map()을 사용 map()을 사용할 때는 key값을 넣어줘야 한다. map()을 사용할 때는 () => ()를 사용한다. 1. Table Data 만들기 import { Card, CardHeader, Heading, CardBody, Table, TableCaption, Thead, Tbody, Tr, Th, Td, TableContainer, Image, } from '@chakra-ui/react'; import apple from '../../assets/img/apple.png'; import android from '../../assets/img/a..

React Router를 이용한 프로젝트 시작하기 https://github.com/oddoddo/-react-js-layout React Router란? https://github.com/remix-run/react-router React Router는 React에서 라우팅 처리를 도와주는 라이브러리이다. 장점 쉬운 설치와 사용 : npm 또는 yarn을 이용하여 쉽게 설치할 수 있다. 컴포넌트 기반 라우팅 : 라우팅을 위한 컴포넌트를 만들어 사용할 수 있다. 코드의 가독성 및 유지보수 : 코드의 가독성이 높아져 유지보수가 쉽다. 다양한 기능 : 링크, 중첩된 라우팅, 동적 라우팅 등 다양한 기능을 제공한다. - 프로젝트에 라우터 설치하기 라우터를 적용하기 위해서는 react-router-dom 라이브..

React를 이용한 layout 컴포넌트, React Router(리액트 라우터) 페이지 이동 구현하기 Chakra-ui를 사용해서 DashBoard의 Layout을 만들어보려고 합니다. 아래 url의 디자인을 참고해 만들었습니다. github url Horizon Free Dashboard Figma 1. Chakra UI 란? Chakra UI는 React용 디자인 시스템을 제공하는 라이브러리입니다. Chakra UI는 컴포넌트 기반의 스타일링을 제공하며, 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다. Chakra UI의 주요 특징은 다음과 같습니다: 컴포넌트 기반 스타일링: Chakra UI는 다양한 컴포넌트를 제공하며, 이를 사용해 스타일을 적용할 수 있습니다. 테마 설정: Chakra U..

컴포넌트(Components), Props - react 배우기 1. 리액트 컴포넌트(React Components)란? 컴포넌트란 재사용 가능한 UI 조각을 의미한다. 컴포넌트를 이용하면 더 쉽게 UI를 재사용할 수 있고, 유지보수도 쉬워진다. 컴포넌트는 독립적이고 재사용 가능하며, 여러 컴포넌트를 조합하여 화면을 구성할 수 있다. 컴포넌트는 트리 형태로 구성되어 있으며, 최상위 컴포넌트는 하나만 있어야 한다. - 컴포넌트의 규칙 컴포넌트는 함수 또는 클래스로 정의할 수 있음 컴포넌트 이름은 대문자로 시작해야 함 소문자로 시작할 경우 컴포넌트를 DOM 태그로 인식하게 됨 컴포넌트로부터 엘리먼트를 생성하여 이를 리액트 DOM에 랜더링에 전달할 수 있음 // html div 태그로 인식 const elem..

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란 무엇인가? React (ReactJS)는 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리 원저자 : Jordan Walke 개발자 : 페이스북 및 공동체 저장소 : https://github.com/facebook/react 프로그래밍 언어 : javascript 종류 : 자바스크립트 라이브러리 웹사이트 : https://react.dev/ 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 자주 사용되는 기능을 정리해 모아 놓은 것 UI 라이브러리 웹사이트를 만들기 위해서는 HTML, CSS, JS를 모두 잘 다뤄야 하는데, 이러한 복잡한 사이트를 쉽고 빠르게 만들고 관리하기 위해 만들어진 것이 리액트이다. 2. React의 장점 빠른 업데이트와 렌더링 속도 컴..

나만의 도메인을 붙여주면 더 멋진 포폴이 될 수 있습니다. 가비아에서 구매한 도메인을 github에 붙여보도록 할께요. 도메인 연결하기 github의 블로그에 저의 https://oddodd.io/ 도메인을 연결하려고 합니다. 도메인 연결 전 가비아 등 도메인 구매 업체에서 DNS 설정 변경해야 합니다. DNS 관리 https://dns.gabia.com/ [홈 > DNS 관리 > DNS 설정 > 레코드 수정 > 레코드 추가] CNAME의 값/위치를 입력할 때는 마직막에 .(점)을 입력한다. 타입 호스트 값/위 TTL CNAME @ 깃헙아이디.github.io. 600 CNAME www 깃헙아이디.github.io. 600 도메인 연결 .github.io > Settings > Pages > Custom..