[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 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 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 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 React
• · 2023. 8. 28.
• textsms

[jquery] 각종 함수들

들어가기에 앞서 라이브러리 의미 : 자주 사용되는 함수들의 모임(묶음) jquery 배경 : 1) 웹브라우저(익스플러워, 크롬, 사파리 등) 간에 js 문법잘 동작을 안했음 (크로스 브라우저 문제 => jquery 등장)현재는 바닐라 js 가능 2) 바닐라 js 보다 코딩이 짧고 사용이 쉬움 단점 : 용량이 크고 , 성능이 떨어짐 jquery : 함수를 이용해서 DOM 조작 $(function() {jquery실행문} : html 위쪽에 넣어도 실행된다. => html 태그 보다 뒤 늦게 실행을 시켜주는 구문 - jquery cdn : 인터넷 주소로 자동 다운로드 입력 필수 - 사용법 : $(function() { $(css선택자).함수("속성명", "값"); }); jq selecter html DOC..

• format_list_bulleted Jquery
• · 2023. 8. 27.
• textsms

[JavaScript] 팝업 창 열기, 닫기, 이동하기, 모니터 해상도, 웹 브라우저 크기, 스크롤 이동

window open html DOCTYPE html> 새창(새탭) 열기/닫기, 새창/새탭 금지(웹브라우저 설정) #container { width: 300px; margin: 20px auto; } button { border: 1px solid #222; padding: 15px; font-size: 0.8em; margin-right: 20px; } 팝업 창 열기 팝업 창 닫기 notice html DOCTYPE html> 공지사항 #content { border: 2px double skyblue; border-radius: 10px; padding: 10px; } ul { margin-left: 15px; list-style-type: none; } ul li { margin: 10px 5px;..

• format_list_bulleted JavaScript
• · 2023. 8. 26.
• textsms