JavaScript (14) 썸네일형 리스트형 2. React App Vite로 자동 구성한 React App 1. Vite- 기본 설정이 적용된 React App 생성 툴npm create vite@latest 2. 프레임워크 선택-react 3. 버전 선택-TypeScript, JavaScript 4. package.json의 라이브러리 설치-npm i 5. public 폴더-vite.svg (정적 파일 보관소) 6. src 폴더 (동적 파일 보관소)-.jsx (JS에 HTML 코드)-assets (정적 자원을 프로젝트 코드에서 동적으로 사용하는 곳) 더보기public 폴더와 assets 폴더의 차이는 다음과 같습니다:public 폴더: 앱 빌드 후 직접적으로 접근할 수 있는 정적 파일들을 저장하는 곳입니다. index.html, favicon, 이미지 등과 같은 파일.. 1. 리액트 기술적 특징 기술 특징컴포넌트 기반 UI 렌더링 (독립적인 컴포넌트로 구조화(모듈화) 가능)화면 업데이트 구현이 비교적 쉬움 (상태, 속성의 변경 감지시 재렌더링)선언형 프로그래밍 : 과정은 생략하고 목적만 간결히 명시하는 방법명령형 프로그래밍 : 절차 중심적으로, 프로세스를 상세히 정의하는 방법더보기React의 선언형 프로그래밍과 비교할 만한 반대 개념은 명령형 프로그래밍입니다. 두 프로그래밍 방식은 코드 작성 방식과 사고방식에서 차이가 있습니다. 아래에서 각각의 개념을 설명하고, React와 명령형 프로그래밍의 차이점을 비교해 보겠습니다.1. 선언형 프로그래밍 (Declarative Programming)특징:무엇(What)을 해야 하는지를 설명합니다.결과 중심적으로, 최종 상태나 목표를 명확히 기술하며, 그 목.. 리액트 공부하기 https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 | 이정환 Winterlood - 인프런이정환 Winterlood | 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, 리액트, 한 강의로www.inflearn.com 노드의 기능 REPL Read Eval Print Loop $node로 입력해서 >로 바뀌면 자바스크립트 입력 자바스크립트 코드 실행 $node [자바스크립트 파일 경로] 코드 -> 모듈화 (CommonJS 모듈,ECMAScript 모듈) 브라우저의 this와 다른 노드의 this 노드에서 최상위 스코프의 this는 module.exports를 가리킨다. 브라우저에서는 window 객체를 가리킨다. 노드에서 함수 선언문 내부의 this는 global 객체를 가리킨다. 브라우저에서는 window 객체를 가리킨다. 노드의 내장 객체 CommonJS 모듈 require로 모듈 불러오기 module.exports로 모듈 한번에 내보내기 exports 객체로 각각의 변수를 대입하기 exports객체와 module.export.. 타입스크립트 제네릭 (+상한 제한) //제네릭 //:클래스나 함수, 인터페이스를 다양한 타입으로 재사용 가능 // -> 실제로 사용할때 타입을 선택할 수 있다. //즉, 특정한 타입을 고정하지 않고 나중에 실제로 사용될 타입을 동적으로 지정 //function getSize(arr):number{ //에러 발생 : 타입을 명시하지 않았기 때문에 // function getSize(arr:number[]):number{ //-> 숫자배열이라고 타입 명시 -> 문자열로도 이 메서드를 쓰고 싶은데? //(1) 함수 오버로드 // 함수 오버로드 정의 function getSize(arr: string[]): number; function getSize(arr: number[]): number; function getSize(arr:number[].. 타입스크립트 클래스 // 클래스 // class Car{ // constructor(color){ // this.color = color; // } // start(){ // console.log("start"); // } // } // const bmw2 = new Car("red"); //자바스크립트에서의 클래스 class Car{ color:string; //1. 멤버변수는 미리 선언해줘야한다. constructor(color:string){ //2. 매개변수 타입 명시 this.color = color; } start(){ console.log("start"); } } const bmw2 = new Car("red"); //타입스크립트에서의 클래스. - 멤버변수 미리 선언하는 방식 class Car2{ constru.. 타입스크립트 리터럴, 유니온/교차타입 //리터럴, 유니온/교차타입 //JS 변수 선언 타입 //const : 상수 //let : 변수 const userName1 = "Bob"; //문자열 "Bob"이 타입 - 문자열 리터럴 타입 let userName2:string|number ="Tom"; //문자열이 타입 userName2=3; //숫자도 들어가게 하려면 선언시에 타입을 2개로 명시 //enum과 유사한 타입 type Job = "police" | "developer" | "teacher"; interface User6{ name : string; job : Job; } const user7:User6={ name :"Bob", job: "developer" }; //유니온 타입 interface HighSchoolStudent{ na.. 타입스크립트 함수 function add2(num1: number, num2: number):number { console.log(num1+num2); return num1+ num2; } function add3(num1: number, num2: number):void { console.log(num1+num2); } function isAdult2(key:number):boolean{ return age>19; } //인터페이스처럼 함수의 매개변수도 옵셔널로 지정 가능 (optional parameter; 선택적 매개변수) function hello(name?:string){ //function hello(name:string){ return `Hello, ${name||"world"}`; //name이 없으면 wo.. 이전 1 2 다음
