readonly 읽기 전용 : 값 수정 불가 예시) 튜플 (tuple) 정해진 자료형의 고정된 크기의 배열 예시 let 변수명 : [ 자료형1 , 자료형2 ...] = [ 값1, 값2 ... ] 1) 자료형의 순서가 맞지 않거나 2) 값이 고정된 크기를 벗어나면 에러
React
함수 const 함수명 = (매개변수 : 매개변수의 자료형) : 리턴자료형 => {} 예시 1번 문제) 이정도는 알것 같다 다만 2번 문제) 요런 얘들이 문제인데 이벤트는 자료형이 너무~ 많기 때문에 매번 함수를 정의 할때마다 바뀔 것 같다 ㅋㅋ.. 따라서 onChange에 마우스를 갖다 대어서 추천 자료형을 가져오면 좋다 다만 지금의 event의 자료형은 React.ChageEvent의 자료형 안에 있기 때문에 Handler를 빼야한다는 점을 유의하자 다른 부분보단 함수 부분이 조금 그런것 같다 ㅎㅎ...
유니온 여러 자료형을 참고하게 할수 있다. let 변수명 : 자료형(type) | 자료형2(type2) ... 예제) let num : number | string = 1 let num2 : number | string = "안녕"
배열 let 변수 : Array = [값] 객체 자료형 ★ 객체는 자료형을 개발자가 따로 정의해서 사용한다. 일반 let 변수명 : 객체 자료형(밑의 IObject) = { 속성 : 값 } useState 함수 let [변수명 , set변수명] = useState({속성 : 값} ) 객체 배열 일반 let 변수명 : Array = [{ 속성:값 },{ 속성:값 } ... ] usestate 함수 let [변수명 , set변수명] = useState>([ {속성 : 값} , {속성 : 값} ]) ★ 사용자 정의 객체 자료형 types 폴더 - IObject.ts 파일 export 관례 : types 폴더에 하나씩만 쓰도록! 왜냐면 가독서이 떨어진다 pages 폴더 - B..
기본 자료형 String : 문자열 number : 숫자 (정수,실수 모두 포함) boolean : 논리 (참/거짓) 일반 변수 정의 let 변수명 : 자료형 = 초기값 바인딩 변수 let [변수명 , set변수명] = useState(초기값)
자바스크립트의 특징 장점 코딩이 간략 / 코딩 생산성 증가 단점 js는 type(자료형)을 정의하지 않고 자유롭게 변수의 값을 넣어 코딩함 따라서 코딩시 에러를 잡지못하고 서비스때 심각한 에러가 발생함 TypeScript 자바스크립트에 자료형을 명시해서 코딩하게 해주는 js의 확장언어 회사 마이크로소프트(깃허브 , vscode , typescript , 윈도우 등) 프로젝트 생성 명령어 npx create-react-app 프로젝트명 --template typescript
DeptList.js ★ 중요 /url/변수값 (파라메터 방식) 데이터의 id 번호로 접속 url:포트번호/dept/data.id App.js ★ 중요 :id = id 값을 받겠다 servies 폴더 - DeptService.js 파일 1 ) 상세조회 요청 ★ 중요 axios.get(/url/속성명) 2) 수정 요청 ★ 중요 axios.put( /url/키값 , 수정될 객체) : 삭제 요청 3) 삭제요청 ★ 중요 axios.delete(/url/키값) : 삭제 요청 pages 폴더 - Dept.js 파일 상세 페이지(수정/삭제) 1) 상세 조회 요청 ★ 중요 ☆ useParams() : 전송된 값 받는 함수 : id값 ☆ useNavigate() : 페이지를 강제 이동시키는 함수 : 안해도됨 ㅋ... 2..
index js - BrowserRouter 대충 라우팅 , html을 했다 치고 index.html - bootstart 장착! 은 html 때문에 ;; json_Server(open source) 파일 오픈소스 다운 받아 줘야겠죠... db_json(데이터) 객체 배열을 만들어 준다 ★ 중요 utils 폴더 - http-common 기본 주소 설정 1) import axios (axios 라이브러리 있어야함) 2) export axios.create() 함수 (객체 보내기) 사용 baseURL : 기본주소 headers : 통신에 사용할 문서 종류 (우리는 json사용) ★ 중요 services 폴더 - DeptService.js 파일 url 설정 import : http-common ☆ 조회요청 :..
플래그멘테이션(flagmentation) 빈 꺽새들이다. 3항 연산자 등을 쓸때 div 태그를 쓰면 너무 많은 자식 div들이 생기기 때문에 쓴다. 예제) true ? div input 등 : 여러 태그들 사용
VScode , node.js 사용 json 서버 오픈 소스 다운 axios(통신) 라이브러리 설치 install axios json-server (가짜 백엔드서버) 설치 json-server 파일 따로 다운받아 있어야함 install i -g json-server 통신 라이브러리 추가 : import import axios from "axios" 기본 주소 설정 (객체 배열형태) export default axios.create({ baseURL: "url" headers :{"Content-Type" : "통신에 사용할 문서 종류"} }) 백엔드 기본 url 주소 설정 예시) json-server(가짜백엔드) : http://localhost:8000 자원 (resource) url 예시) /dept..
Routing 이란? 쉽게 말해 페이지 이동을 말한다. Routers Route 태그를 활용해서 컴포넌트와 메뉴 사이의 연결해보자 install # 리액트 라이브러리 추가 (Terminal) npm install 라이브러리이름 npm install react-router-dom 이 react-router-dom 라이브러리 안에 우리가 사용할 BrowserRouter , Routes , Route 등이 들어있다. index.js import {BrowserRouter} from '라이브러리이름' App.js 네이게이션 본문으로 와서 import { Routes , Route } from '라이브러리명'
논리 연산자 사용 예제) return( { true && 안녕 } ) 화면 출력 결과 : 안녕 한마디로 &&(논리연산자) 가 참이면 실행문을 실행 거짓이면 실행문을 실행시키지 않음
