[React] Typescript

Typescript 사용법 # 리액트 + 타입스크립트 프로젝트 생성 명령어 npx create-react-app 프로젝트명 --template typescript 예) npx create-react-app frontend-react --template typescript # 타입스크립트 : 마이크로소프트(깃허브, vscode, typescript, 윈도우 등) # why? 1) 단점 : js 는 type(자료형)을 정의하지 않고 자유롭게 변수의 값을 넣어 코딩함 # (코딩이 간략/코딩 생산성 증가, 코딩시 에러를 잡지못하고 서비스때 심각한 에러가 발생함) # 타입스크립트 : js 에 자료형을 명시해서 코딩하게 해주는 js 확장 언어 .tsx로 생성됨 React Typescript폴더 만들고 통합터미널 열..

• format_list_bulleted HTML/React
• · 2023. 9. 6.
• textsms

[React] json 서버 사용법

json server 사용법 (01_react_200에서 통합 터미널 열고) npx create-react-app 008 (008폴더 만들기) cd 008 npm start 01_axios 파일 생성 (008파일 다 넣기) 02_json 파일 다운로드 (가짜 백엔드서버) 파일로 압축 파일 풀기 008 파일에 axios 설치 (01_axios에서 통합 터미널 열고) npm install axios 설치 확인 : package.json / dependencies 안에 axios 확인 index.html에 bootstrap css cdn 넣기 02_json_server에 jsonserver 설치 ( -g 글로벌 설치 : 1번만 설치하면 됨 ) (02_json_server에서 통합 터미널 열고) npm i -g..

• format_list_bulleted HTML/React
• · 2023. 9. 4.
• textsms

[React]

리액트 명령어 # (최초1번) npm install -g create-react-app # react 프로젝트 만들기 : npx create-react-app 프로젝트명 # react 프로젝트 실행하기 : cd 프로젝트명 (프로젝트명 폴더로 들어가기) npm start (react 서버 가동 명령어)) # react 프로젝트 중단하기 : vscode 터미널 창에서 : ctrl + c (2번이상 타이핑하고 엔터) 리액트 특징 # React(페이스북, 점유율1위) / Vue(개인, 구글퇴사) / Angular js(구글 x) # React / Vue : SPA(Single Page Application) 개발 # (html 1장으로 개발 : 메뉴: 홈/로그인/회원가입 페이지 등) # (각 페이지가 js 코딩..

• format_list_bulleted HTML/React
• · 2023. 9. 4.
• textsms

[React]backtick, nullish, dataset, encode, decode, formData, function, structure, promise then, catch, boot strap, layout

backtick html DOCTYPE html> Document js // 백틱(backtick) // 모던자바스크립트 === 이크마(ECMA Script) 자바스크립트 // 메타버스 === 가상환경 // 예제 : 아래와 같이 문자열과 변수를 같이 써서 출력하세요 // 출력 : num = 10 // num2 = 20 // num3 = 30 // let num = 10; // let num2 = 20; // let num3 = 30; // console.log("num = " + num + "\n" // + "num2 = " + num2 + "\n" // + "num3 = " + num3 // ) // ``(백틱) : 키보드 왼쪽 위에 1 숫자 옆에 자판(홑따옴표 아님) // 문자열을 표현하는 새로운 방..

• format_list_bulleted HTML/React
• · 2023. 8. 28.
• textsms

[React] 노드 설치법 , 화살표 함수, 내장함수(spread, foreach, map, filter)

노드 노드 : js 를 웹브라우저 없이 실행하게 만들어주는 프로그램 장점 : 비동기 기반(성능 빠름) 예) 백엔드, 프론트엔드 모두 개발할 수 있게됨 노드 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 18.17.1 LTS 다운 아무것도 체크 안하고 설치 통합 터미널에서 열기 버전 확인 node -v 노드 실행 object array (객체 배열) DOCTYPE html> 객체 배열 : 배열 안에 객체가 들어가 있는 형태 let data = [ { name: "혼자 공부하는 자바", price: 18000, publisher: "한빛미디어", ..

• format_list_bulleted HTML/React
• · 2023. 8. 28.
• textsms