분류 전체보기 (80) 썸네일형 리스트형 [React] useState 사용법1 #1. state 기본 사용법 1. import {useState } from 'react' - 최 상단에서 useState import를 해줘야함. 2. useState(보관할자료) - 하단과 같은 형태로 보관할 자료를 저장한다. useState('안녕'); 3. let [작명, set작명] - JSX에서 사용하고 싶다면, 정의된 useState에 변수를 붙여줘야함 let hi = useState('안녕'); 4. 변수명 가져와서 사용하기 {hi} 형태로 가져와서 사용하면 된다. - state기본 사용된 예시 [React] React에서 마크업을 편하게 해주는 JSX 사용법 #0. JSX? - 리액트 환경에서 html형태로 마크업 할 수 있도록 도와주는 언어 JSX - 리액트 프로젝트를 시작하면 app.js와 같이 js 파일에 HTML형태로 마크업을 한다. - js 에 작성을 하면, 해당 플젝 미리보기시, html 에 작성한것과 같이 표현이 되는데, - 여기 app.js의 return안의 코드들은 JSX다. 걍 HTML 처럼 쓸수있도록 도와주는 녀석들이군 생각하면 된다. - 그런데 HTML 과 몇가지 차이점이 있으니 기억할것. #1. class 넣을땐 className + css 파일 쓰려면 상단에서 import 'css파일경로' #2. 변수 넣을땐 (데이터 바인딩은) {중괄호} 모양으로 - let post를 JSX에 넣고싶으면, - 넣고자하는 영역에서 {post}형태로 넣.. [React] React 프로젝트 시작하기 (create react app 사용) 1. node.js 설치 https://nodejs.org/ko 2. 프로젝트 폴더 생성 3. 생성된 폴더 우클릭후, 터미널로 열기 - 아래 명령어를 써서 리액트 프로젝트 만들기 npx create-react-app 프로젝트명 - 아래 사진과 같이 뜨면 잘 설치된것! 4. 에디터에서 만들어진 프로젝트 폴더 열기 - 다음과 같이 파일들이 생성되어 있을거임 1) node_modules : 라이브러리 코드 보관함 - 건들필요 없음 2) public : static 파일 모아놓는곳 - 아직 건들필요 없음 3) src : 나의 소스코드 보관함이라 생각하면됨 (중요 파일) - app.js : 메인페이지 - index.js : app.js에 html짜면 index.html에 넣어줘.. 명령 넣는 - pakage.js.. [TypeScript] Type alias 타입 변수같이 저장하고 사용할수 있음 #0. Type alias - 타입이 너무 길거나 복잡한 경우에, 타입을 변수마냥 저장하고, 꺼내 쓸수도 있다. #1. 사용법 1.기본사용법 - 다음과 같은 형태로 정의하고, type 타입변수명 = 타입 - 다음과 같은 형태로 사용하면 된다. let 변수명:타입변수명 = 값; - 사용 예시 type PersonNameType = string; let personName: PersonNameType = '김태희'; // union 타입도 가능 type PersonNameType2 = string | number; let personName2: PersonNameType2 = 123; 2. array - 타입명[] 형태로 짜주면 된다. type ArrayType = string[]; let arr:Array.. [TypeScript] 기본타입 지정하기 #1. 타입 지정하기 1. 일반적으로 let 문자 :string = '문자'; let 숫자 :number = 123; let 불리언 :boolean = false; let 널 :null = null; let 언디파인드 :undefined = undefined; // 여러개의 타입이 들어간다면 | 사용 - Union Type let 문자또는숫자 :string|number = '문자또는숫자' let 문자또는숫자 :(string|number) = '문자또는숫자' 2. array 일때 :어레이안의타입[] let 문자로구성된어레이 :string[] = ['문자1','문자2']; let 숫자로구성된어레이 :number[] = ['문자1','문자2']; // 불리언이나, 널, 언디파인드도 같음. // 여러개의 타입이.. [TypeScript] TS 시작하기 #0. TypeScript란? - 자바스크립트에 타입이 추가된 언어 - 자바스크립트에 명시적으로 타입을 선언해주는 언어다. 1) 자바스크립트 쓰지 왜 굳이 타입스크립트 씀? - 자바스크립트의 유연한 타입 변환이 버그를 일으키는 경우가 종종 있어서 씀 - 자바스크립트는 Dynamic Typing를 제공한다. 그렇다보니, 다음과 같은 상황이 js 에서는 연산이된다. 5는 number type이고, 3은 string type 이지만, 자바스크립트의 Dynamic Typing에 의해 타입 변환이 일어나, 숫자로 연산이 되는거다. console.log(5 - '3') // 실행결과 >> 2 - 추가적으로 자바스크립트는 실행되는 시점(런타임)에 오류를 확인 할수있다 .(내가 다 만들고 런타임되는 시점에!) 그런데 .. [JavaScript] Set : Array 중복 값 제거 하기 좋은 신문법 #0. Set - ES6에서 추가된 자료형 - 중복값을 허용하지 않는다. - array 자료형과 비슷한 모양이지만, 약간은 다른 모양이다. 1) {}로 데이터를 감싼다. 2) 중복값을 허용하지 않는다. - 중복값을 허용하지 않는단 점에서 아주 요긴하게 사용할 수 있다. -> array에 있는 중복값을 제거하고 싶을때 set 사용하면 왕간단, 신세계 - 자료형이니까 보통 자료형처럼 아래와 같은 형식으로 쓴다. #1. set 사용법 - 기본형식 - 다음과 같은 형식으로 사용하고, var 변수명 = new Set(어레이); - 적용예시 - 이제 어떻게 array에 적용해 중복값을 제거할지 감이 오시져? var student = new Set(['김','이','박','박','창','구','구']); // 실행결.. [JavaScript] import/ export : js파일 모듈식으로 가져오고(import), 내보내기(export) import/ export - ES6에서 도입된 js 파일 가져오고(import) 내보내는(export) 방식 - js파일 전체를 가져오는게 아니라, 사용할 변수를 선택해서 export, import하는 방식이다.(모듈 형식으로 import, export) - vue나 react에서 이런 방식으로 많이 사용한다. - 그런데 고전적인 가 호환성은 더 좋긴함. #1. 기본사용법 1. 가져올 js 파일 만들기 - 마지막에 내보내고 싶은 데이터는 하단의 방법으로 내보내준다. 변수1 = 10; export default 변수1 2. js 파일 가져오기 - 아래의 방식으로 가져온다. - script type은 꼭 module로! // script type은 module!! import 가져올거 form '경로' 3.. 이전 1 2 3 4 5 ··· 10 다음
