본문 바로가기

자바스크립트71

[TS] TS 연습하기2 //변수에 type 넣어서 사용하기 (type Alias) //PascalCase로 타입이름을 지정하는 게 국룰 type Animal = string|number|undefined type Animal2 = {name:string, age:number}; const 동물 : Animal = '스트링/넘버/언디' ; const 동물2 : Animal2 = {name:'강아지', age:2} //reference data type 락걸기 (ts파일 안에서만 그럼) type Gf = {readonly name:string, age:number} // type에 readonly라고 지정해주면, 내부 수정이 불가능하다. const 여친:Gf = {name : '경아', age:30}; // 여친.name = '누.. 2023. 4. 12.
[TS] TS 연습하기1 //Primitive Variable const 이름:string = 'Lee'; //Array let 어레이:string[] = ['어레이1', '어레이2'] //Object let 오브젝트:{name : string, name2 : number} = {name : 'Lee', name2 : 123}; // 중요한 것은 온 갖 곳에 다 ts 타입질을 안해도 된다. // 타입스크립트는 대부분 알아서 자동으로 해준다구요. let 테스트 = '테스트라구'; // 테스트 = 123; 이거 에러난다구요 ts가 자동으로 테스트:string 해주기 때문이다. // 연습 let project:{member : string[], days : number, started : boolean} = { member : ['k.. 2023. 4. 12.
[Algorithm] Greedy (그리디/탐욕) - 그리디 알고리즘은 최적화 문제에서 주로 사용된다. - 단계별로 가장 좋아 보이는 선택을 함으로써 전체적으로 최적의 해답을 찾으려고 시도한다. - 항상 최적의 해를 찾지는 못하지만, 많은 경우에 효율적인 근사치를 찾을 수 있다. Q) 거스름돈을 지불해야 하는 금액이 주어졌을 때, 동전의 개수를 최소로 하려면 어떤 동전을 사용해야 할까? - 동전의 종류가 [25, 10, 5, 1]로 주어진다고 가정한다. A1) 아이디어 - 주어진 금액에서 동전의 개수를 최소로 하려면 가장 금액이 큰 동전부터 차례대로 남은금액에 최대한 개수를 채우면 된다. - 상식적인 아이디어이다. - 이를 구현하면 다음과 같다. - 상식적으로 최적의 해인 것 같은데, 그리디 알고리즘이 항상 최적의 해를 찾지 못하는 이유는? A) 각 단.. 2023. 4. 10.
[Algorithm] 완전탐색 (JS) - 3 : 비트마스킹(Bitmasking) - 나올 수 있는 모든 경우의 수가 둘 중 하나로부터 나오는 경우 유용하게 사용할 수 있다 1. 비트마스킹이란 ? - 정수 값을 이진 비트로 표현하여 비트 단위 연산을 사용해 특정한 작업을 수행하는 기법 - 웹에서는 플래그, 설정, 퍼미션 등을 효율적으로 관리할 수 있다. - 일반적으로 비트 연산자(AND, OR, XOR, NOT, SHIFT)를 사용한다. - React에서 비트마스킹을 사용하여 여러 설정 옵션을 관리할 수 있다. - '&' 는 비트 AND 연산자로, 각 정수의 이진표현에서 같은 위치에 있는 비트를 비교하여 두 비트가 모두 1인 경우에만 결과의 해당 위치의 비트를 1로 설정한다. - 예를 들어, 5 & 4 는 0101 과 0100의 비트AND연산을 시행하면 0101 0100 0100 (답.. 2023. 4. 6.
React - 19장 : 코드 스플리팅(완) React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI React - 16장.. 2023. 3. 2.
React - 18장 : 리덕스 미들웨어를 통한 비동기 작업 관리 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI React - 16장.. 2023. 3. 1.
React - 16장 : 리덕스(Redux) 라이브러리의 이해 React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 React - 7장 : 컴포넌트의 LifeCycle React - 8장 : React Hooks 총정리 React - 9장 : 컴포넌트의 스타일링 React - 10장 : 빠르게 TODO앱 실습 React - 11장 : 컴포넌트 성능 최적화 React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기 React - 13장 : 리액트 라우터로 SPA 개발하기 React - 14장 : 뉴스 뷰어 예제프로젝트 React - 15장 : ContextAPI React - 16장.. 2023. 2. 28.
1장-디자인 패턴) MVC 패턴 1. MVC 패턴이란 ? - Model, View, Controller 로 이루어진 디자인패턴이다. - 앱의 구성요소를 세가지로 구분하여 개발 프로세스에서 각각의 구성요소에만 집중해서 개발할 수 있다. - 재사용성과 확장성이 용이하지만, 복잡할 수록 모델과 뷰의 관계가 복잡해지는 단점이 있다. 2. 모델 - model은 앱의 데이터인 DB, 상수, 변수 등을 뜻한다. - 박스모델에서 박스의 위치, 글자, 포맷, 모양 등에 관한 정보들을 가지고 있어야 한다. - 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신한다. 3. 뷰 - inputbox, checkbox, textarea 등 사용자인터페이스(UI)를 나타낸다. - 모델을 기반으로 사용자가 볼 수 있는 요소 및 화면을 뜻한다.. 2023. 2. 27.

티스토리툴바