본문 바로가기

js58

[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.
[O'REILLY] Node & Express - 15장 : REST API와 JSON - 지금까지 여러 REST API의 예제를 보아왔지만, 지금껏 '서버에서 데이터를 처리하고 클라이언트에게 html을 전송한다는 예제' 가 주를 이뤘다. - 하지만 2023 현재 대세는 상당수가 HTML, CSS, JS 등의 렌더링 파일 자체는 정적으로 받아오고, 실제 데이터는 JSON으로 AJAX를 통해 받아서 HTML를 구성하는 SPA의 형태를 띄는 경우도 많다. 물론 SEO가 구려서 SSR이 다시 대두되고 있어서 프로젝트의 형태와 목적에 따라서 적절히 구성하는 것이 현명하다. - 어쨌든 SSR 방식이더라도, 서버의 API는 매우 중요하며, API엔드포인트를 제공하는 방법을 알아야한다. - 웹 서비스는 HTTP로 접근할 수 있는 어플리케이션 프로그래밍 인터페이스 (Application Programmi.. 2023. 4. 11.
[TS] MERN에서 TS 사용하기 1. CRA 세팅하기 (npx) npx create-react-app your-app-name --template typescript 2. Express에서 세팅하기 - 설치하기 npm init -y npm install typescript express ts-node @types/node @types/express --save - 세팅하기 npx tsc --init //tsconfig.json 생성 - tsconfig.json 설정하기 { "compilerOptions": { "module": "commonjs", "esModuleInterop": true, "target": "es6", "moduleResolution": "node", "sourceMap": true, "outDir": "dist",.. 2023. 4. 10.
[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.