본문 바로가기

분류 전체보기

(104)
[React Exam 22] bootstrap icon 사용하기 홈페이지 입니다.https://github.com/ismamz/react-bootstrap-icons GitHub - ismamz/react-bootstrap-icons: React component for Bootstrap IconsReact component for Bootstrap Icons. Contribute to ismamz/react-bootstrap-icons development by creating an account on GitHub.github.com 설치입니다.npm install react-bootstrap-icons 포함입니다.import { 아이콘 이름들.... } from 'react-bootstrap-icons'; import * as Icon from 'react-boo..
[React Exam 21] bootstrap 사용하기 홈페이지 입니다.https://react-bootstrap.netlify.app/ React Bootstrap | React BootstrapThe most popular front-end framework, rebuilt for Reactreact-bootstrap.netlify.app 설치하기npm install react-bootstrap bootstrap 포함하기import 'bootstrap/dist/css/bootstrap.min.css';import { 필요한것들..... } from 'react-bootstrap'; 1. create-react-app를 이용하여 app007 프로젝트를 만듭니다.1) 프로젝트 작성D:\React> npx create-react-app app0072) 폴더이동..
[React Exam 20] jQuery 사용하기 react에서는 DOM을 직접 처리하지 않기 때문에 Jquery를 사용하지 않습니다. 하지만 jquery를 사용하던 프로그래머들이 jquery를 쓰려면 어떻게 해야 하는지 알고싶어하기 떄문에 사용법을 알아보도록 하겠습니다.우선 jquery를 프로젝트에 추가해야 합니다.프롬프트> npm i jquery 그리고 jquery를 임포트하면 사용이 가능합니다.import $ from 'jquery'  1. create-react-app를 이용하여 app006 프로젝트를 만듭니다.1) 프로젝트 작성D:\React> npx create-react-app app0062) 폴더이동D:\React> cd app0063) jquery 설치D:\React\app006> npm i jquery4) visual code 실행D:..
[React Exam 19] 스타일 추가하기 앞서서 스타일을 지정하는 방법을 배웠습니다. 좀 더 자세히 알아보도록 하겠습니다. 스타일 값의 타입은 대부분 문자열입니다. 스타일 값이 숫자형인 경우에도, 단위를 지정할 수 있도록 문자열로 작성해야 합니다. 예를 들어 '450px' 또는 '20%'라고 씁니다. 만약 아래처럼 스타일 값으로 숫자형을 사용한다면, 자동으로 단위가 'px' 로 설정됩니다. 인라인 스타일인라인 스타일은 style 속성에 직접 입력하는것 입니다. style={{ 스타일 }} 형태로 입력합니다. 중괄호가 2개입니다. 주의 하시기 바랍니다. 그리고 자바스크립트 이기 때문에 연속된 단어일 경우 -(dash)를 생략하고 첫 글자를 대문자로 변경해서 붙여서 써야 합니다.스타일 값의 타입은 대부분 문자열입니다. 스타일 값이 숫자형인 경우에도..
[React Exam 18] 컴포넌트(Component)에 객체를 속성으로 전달하기 객체도 속성으로 전달이 가능합니다.    컴포넌트 호출      let users = [         {id:1, name:"한사람",age:18},         {id:2, name:"두사람",age:22},     ]      user={users[0]}/>      user={users[1]}/>      컴포넌트에 전달된 객체       {"user":{"id":1,"name":"한사람","age":18}}      {"user":{"id":2,"name":"두사람","age":22}} 1. create-react-app를 이용하여 app004 프로젝트를 만듭니다.1) 프로젝트 작성D:\React> npx create-react-app app0042) 폴더이동D:\React> cd app004..
[React Exam 17] 컴포넌트(Component)에 값을 속성으로 전달하기 작성한 컴포넌트에 속성값을 지정해서 전달이 가능합니다.함수형 컴포넌트에서는 props라는 매개변수를 사용함으로서 사용이 가능해 집니다.클래스형 컴포넌트에서는 this.props라는 변수를 사용함으로서 사용이 가능해 집니다.   전달된 속성은 객체로 전달이 됩니다.           컴포넌트 호출            name="한사람" age={21} gender={true}/>            name="두사람" age={18} gender={false}/>           컴포넌트에 전달된 객체           {"name":"한사람","age":21,"gender":true}           {"name":"두사람","age":18,"gender":false} 주의할 사항은 자료형을 유지..
[JavaScript] 순수 함수 & 비 순수 함수 & 고차함수 순수함수: 어떤 외부상태에 의존하지도 않고 변경하지도 않는, 부수효과가 없는 함수비순수함수: 외부상태에 의존하거나 외부상태를 변경하는, 부수효과가 있는 함수자바스크립트는 주로 객체지향 프로그래밍과 함수형 프로그래밍으로 나뉘는데 객체가 기본이 되는 프로그래밍을 객체지향 프로그래밍이라고 하고, 함수형 프로그래밍은 말 그대로 함수가 기본이 되는 프로그래밍을 의미합니다. 함수형 프로그래밍은 프로그래밍 패러다임 중 하나로, 순수 함수와 불변성을 강조하며, 프로그램의 상태 변경을 최소화하는 것을 목표로 합니다. 함수형 프로그래밍은 수학적 함수의 개념에 기반을 두고 있으며, 이를 통해 코드의 간결성, 모듈성 및 예측 가능성을 높일 수 있습니다.순수 함수는 어떤 외부 상태에 의존하지도 않고 변경하지도 않는, 즉 부수 ..
[JavaScript] 일급 객체 & 일급 함수 일급 객체(First Class Object) & 일급 함수(First Class Function)컴퓨터 프로그래밍 언어 디자인에서, 일급 객체(first-class object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다.https://ko.wikipedia.org/wiki/일급_객체 과연 어떠한 객체 혹은 함수에게 "일급"이라는 표현을 사용하는가? 다음의 특정 조건을 만족하는 객체들을 일급 객체라고 합니다. 일급 객체의 특성1. 무명의 리터럴로 표현이 가능해야 합니다.2. 변수나 자료 구조(객체, 배열 등)에 저장할 수 있어야 합니다.3. 함수의 매개변수에 전달할 수..