당연한 개발자가 되자

터미널에서 프로젝트 생성하기 https://ko.vitejs.dev/guide/ vite 프로젝트 생성 명령어 # npm npm create vite@latest # yarn yarn create vite # pnpm pnpm create vite react 프로젝트 생성하기 # create-vite에서 제공하는 템플릿들을 사용하면 쉽게 프로젝트를 생성할 수 있습니다. # react의 경우 react, react-ts, react-swc, react-swc-ts 등이 있습니다. # (vue의 경우에는 vue, vue-ts로 생성합니다.) # npm 6.x # npm create vite@latest [프로젝트명] --template [사용할 템플릿] npm create vite@latest my-reac..

먼저 React 를 셋팅하기전에 먼저 node.js 가 필요합니다. node.js 설치하기: https://www.notion.so/shin96bc/Mac-OS-f0217a5c0baa40bba370f0545932c905 명령어로 프로젝트 생성하기 임의의 폴더를 하나 만들고 터미널을 켜서 그 폴더의 경로로 이동합니다. 아래의 명령어를 입력합니다. npx create-react-app 프로젝트명 # ts를 사용하는 경우 npx create-react-app 프로젝트명 --template typescript IntelliJ 사용 File -> new -> project 아래의 사진처럼 세팅해줍니다. 생성할 프로젝트의 이름 리액트 프로젝트를 생성할 위치 웹이면 React, 앱이면 React Native node..

React란? React 공식홈페이지에서는 React를 사용자 ‘인터페이스 구축을 위한 JavaScript 라이브러리’라고 설명하고 있습니다. 즉, React는 Application이 아니라 그중에 일부인 UI만을 담당하고 있다는 사실을 알 수 있습니다. React는 철저하게 UI만을 다루기 때문에 React Application을 만들기 위해 필요한 나머지 부분들은 third-party library로 만들어졌고, React Application은 React와 함께 third-party library를 사용하여 구현합니다. Why React? Web 사이트를 인스타그램 등의 App처럼 새로고침없이(페이지를 이동할 때 화면이 깜빡이는 현상) 부드럽게 동작하는 Single Page Application 으..

(1) 생성기 함수( Generator Function ) Github: https://github.com/SHIN96BC/JavaScript-TypeScript-Concept-2022/tree/main/15_GeneratorFunction 1) 일반 함수와 생성기 함수의 공통점 코드의 묶음 이다. 인자를 받는다.( 받지 않을 수도 있다. ) 값을 반환한다.( 반환하지 않을 수도 있다. ) 2) 일반 함수와 생성기 함수의 차이점 일반 함수는 값을 반환하면 함수가 종료되는데, 생성기 함수는 값을 반환하고 나서 함수가 종료될 수도 있고, 종료되지 않을 수도 있다. ( 종료할지 말지 선택할 수 있다. ) 영원히 종료되지 않게 만들수도있고, 몇번의 반환을 거친 후에 종료될 수도 있고, 일반 함수처럼 바로 종료될..

(1) 비동기 함수( Async Function ) ( TypeScript ) Github: https://github.com/SHIN96BC/JavaScript-TypeScript-Concept-2022/tree/main/14_AsyncFunction 1) JavaScript 에서는 코드를 딜레이 시킬 수 있는 방법이 없다. 예를 들어 5번째 코드를 실행하고 3초 있다가 6번째 코드를 실행 하는 방법은 존재하지 않는다. 2) JavaScript 에서 이런 딜레이를 주려면 타이머를 이용해서 callback 함수를 제공한 다음에 특정시간 이후에 그 callback 함수가 호출되는 그런 패턴의 코드를 작성해야할 것이다. ( 즉, 일반적인 코드를 동기적으로 한줄 한줄 작성하면서 딜레이를 걸 수 있는 방법은 없..

(1) 일급 함수( First Class Function ) Github: https://github.com/SHIN96BC/JavaScript-TypeScript-Concept-2022/tree/main/13_FirstClassFunction 1) 일급 함수라고 하는 개념은 프로그래밍 언어에서 함수라고 하는 코드의 묶음을 일반적인 값처럼 취급하는 개념을 뜻한다. 2) 함수를 일반 값처럼 취급해서 변수에 넣을 수 있다. 3) 함수를 변수에 넣을 수 있다는 것은, 함수가 담긴 변수를 또 다른 함수의 인자값으로 줄수도 있고, 리턴되는 값이 일반적인 데이터가 아니라 함수가 리턴될 수도 있다는 것이다. 그래서 좀더 유연한 프로그래밍이 가능해진다. 4) 인자로 함수가 들어오는 경우( TypeScript ) ex)..

(1) 속성과 메소드( Attribute & Method ) ( TypeScript ) Github: https://github.com/SHIN96BC/JavaScript-TypeScript-Concept-2022/tree/main/12_Attribute%26Method 1) 속성과 메소드는 객체 안에 들어가 있는 2가지 종류의 데이터이다. 2) '속성'은 실제 순수한 데이터이다. ex) const obj = { name: 'B C', age: 27, }; 속성 자체에 속성을 객체 외부에서 내가 원하지 않는 값으로 바뀌는 것을 막을 방법은 없다. 속성을 내가 원하지 않는 값으로 바뀌는 것을 막으려면 setter 와 getter 를 만들어줘야 한다. ( setter 와 getter 는 클래스객체에서만 사용..

(1) 힘수 ( function ) Github: https://github.com/SHIN96BC/JavaScript-TypeScript-Concept-2022/tree/main/11_Function 1) 함수의 역할 코드를 묶는 것 어떤 목적의 계산을 수행하는 것 필요할 때 호출이라는 과정을 통해서 사용할 수 있다. ( 함수의 이름으로 호출한다. ) cf) 정리하면 함수란, 어떤 목적의 계산을 통해 결과를 얻을 수 있는 코드의 묶음이라고 할 수 있고, 그 계산을 필요할 때 호출이라고 하는 과정을 통해서 수행을 시켜 그 결과를 받아 볼 수 있는 문법 요소이다. 2) 함수의 기능 return 1> 계산된 결과값을 호출한 곳에 돌려줄 때 사용한다. 2> output 에 해당한다. 인자( 파라미터 ) 1> ..

(1) 인터페이스 와 타입 별칭 ( TypeScript ) Github: https://github.com/SHIN96BC/JavaScript-TypeScript-Concept-2022/tree/main/10_Interface 1) 인터페이스 ( interface ) 객체타입을 지정한다. ( 객체는 이런 규격이어야 한다고 지정 ) 1> interface IUser { readonly id : number; readonly name : Name; ( 여기에 타입은 아래에서 타입 알리아스로 만든 타입이다 ) email: string; receiveInfo: boolean; active : YesOrNo; address?: string; } 인터페이스는 타입알리아스와 섞어서 쓸수도 있다. readonly 란 ..

(1) 예외( Exception ) Github: https://github.com/SHIN96BC/JavaScript-TypeScript-Concept-2022/tree/main/09_Exception 1) throw new Error('오류 발생') ( 예외를 던지는 곳 ) 예외를 발생시키는 구문이다. throw 라고하는 즉, 예외가 발생하면 프로그램이 종료가 된다. 바로 종료되는 것은 아니고 어디에서도 이 throw 예외를 받아주지 않으면, 최종적으로 종료되는 것이다. 2) try 와 catch ( 예외를 받는 곳 ) 예외가 발생할지도 모르는 구문을 try 안에 적고 예외가 발생했을 때 실행할 구문을 catch 안에 적는다. 특징: 1> 예외가 함수 호출의 뎁스( 깊이 )에 상관없이 바깥쪽으로 예외..