짧은코딩

TS 컴파일러 -TS 컴파일러의 역할 1. 최신 js/ts가 동작하게끔 구버전 js로 트랜스파일(translate+compile)한다. 2. 코드의 타입 오류를 체크해준다. 위 역할 두 가지는 독립적이다. 즉, ts가 js로 변환될 때 코드에 있는 타입에는 영향을 주지 않는다. 그리고 변환된 js 실행에서도 타입은 영향을 끼치지 않는다. 타입 오류가 있는 코드 let x = "abcd"; x = 1234; 컴파일과 타입 체크가 독립적이라서, 위 코드처럼 타임 오류가 있어도 컴파일이 가능하다. 코드에 오류가 있더라도 컴파일된 결과가 나오는 것이 도움이 된다. 웹을 만들 때, 오류가 해결되지 않아도 다른 부분을 테스트할 수 있다. 런타임과 타입 체크 ts에서 js로 컴파일되는 과정에서 interface, t..

대부분 개발을 하다보면 cors에러를 접해보게 될 것이다. 이 에러는 백엔드, 프론트엔드에서 모두 해결이 가능하다. 나는 프론트엔드에서 해결할 수 있는 방법을 소개하겠다. 하지만 이 방법은 proxy 방법이라 배포하면 백엔드쪽에서 cors에러를 잡아줘야 한다. proxy 브라우저에서 다른 도메인 서버로 요청을 보내면 cors 에러가 난다. 하지만 서버에서 서버로 보내면 cors 에러가 안난다. 이렇게 서버에서 서버로 보내는 것이 proxy이다. -경로 브라우저 -> 프론트 서버 -> 백엔드 서버 http-proxy-middleware 프론트엔드에서 cors 에러를 해결하기 위해서는 http-proxy-middleware 라이브러리를 사용하면 된다. 사용법 src 폴더에 setupProxy.js 파일을 만..

코드 function solution(arr) { let answer = 0; let dy = Array.from({ length: arr.length }, () => 0); dy[0] = 1; for (let i = 1; i = 0; j--) { if (arr[i] > arr[j]) max = Math.max(dy[j], max); } dy[i] = max + 1; } answer = Math.max(...dy); console.log(dy); return answer; } 해결 방법 맨 처음있는 5까지만 본다치면 최대 길이는 1이다. 두번째 3은 첫번째 5 다음으로 올 수 없어서 최대 길이는 1이다...

코드 function solution(n) { let answer = 0; let dy = Array.from({ length: n + 1 }, () => 0); dy[1] = 1; dy[2] = 2; for (let i = 3; i

TS와 JS TypeScript는 JavaScript의 상위 집합이다. 즉 JS로 작성된 코드는 TS가 되지만 그 반대는 성립하지 않는다. 그리고 TS에는 타입 체커가 있는데 이 타입 체커가 문제점을 찾아준다. 예시 let city = 'new york city' console.log(city.toUppercase()) 함수를 잘못 사용하고 있는 코드이다. 원래는 toUpperCase()인데 타입 체커는 이런 오타 같은 문제점을 찾아준다. interface State { name: string capital: string } const states: State[] = [ { name: 'Alabama', capitol: 'Montgomery' }, { name: 'Alaska', capitol: 'Jun..

CPU 스케줄러는 CPU 스케줄링 알고리즘으로 프로세스에게 일을 스레드 단위로 할당한다. 즉, 어떤 프로그램이 CPU 소유권을 가질 것인지 결정한다. CPU 스케줄링 알고리즘 방식으로는 크게 비선점형과 선점형 방식이 있다. -CPU 스케줄러의 목표 1. CPU 이용률을 최대치로 사용 2. 주어진 시간에 최대한 많은 일을 하도록 함 3. ready queue에 프로세스가 적도록 함 4. 응답 시간을 짧게 설정함 비선점형 방식(non-preemptive) 프로세스가 스스로 CPU 소유원을 포기할 수 있고 강제로 프로세스를 종료할 수 없다. 그렇기에 컨텍스트 스위칭으로 인한 부하가 적다. 비선점형 방식에는 FCFS, SJF, 우선순위가 있다. FCFS(First Come, First Served) 가장 먼저 ..

configureStore.js import { createWrapper } from "next-redux-wrapper"; import { applyMiddleware, compose, createStore } from "redux"; import { composeWithDevTools } from "redux-devtools-extension"; import createSagaMiddleware from "redux-saga"; import reducer from "../reducers"; import rootSaga from "../sagas"; const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { console.l..

인접행렬(비효율) 코드 function solution(n, arr) { let answer = 0; let ch = Array.from({ length: n + 1 }, () => 0); let dy = Array.from(Array(n + 1), () => Array(n + 1).fill(0)); for (let i = 0; i Array()); for (let [a, b] of arr) graph[a].pu..

코드 사이트 https://joshua1988.github.io/webpack-guide/getting-started.html#%EC%9B%B9%ED%8C%A9-%EB%A7%9B%EB%B3%B4%EA%B8%B0-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC 웹팩 맛보기 | 웹팩 핸드북 웹팩 맛보기 튜토리얼 그럼 이제 웹팩을 가볍게 맛볼수 있는 튜토리얼을 진행해보겠습니다. 이번 튜토리얼로 웹팩을 실행할 수 있는 개발 환경을 구성하고 빌드 과정을 경험해볼 수 있을 것입 joshua1988.github.io 이 사이트의 코드를 예제로 사용했다. 동작의 원리 package.json 및 dist webpack을 설치하고나서 package.json에 "scripts": { "test": "ech..

webpack(웹팩) 웹팩은 프론트엔드 프레임워크에서 사용하는 모듈 번들러(Module Bundler)이다. 모듈 번들러는 HTML, CSS, JS 등의 파일을 각각 모듈로 보고 모든 모듈을 조합해서 하나로 만드는 도구를 의미한다. 모듈 function sum(a, b) { return a + b; } export { sum } 모듈은 위 코드처럼 기능을 갖는 작은 단위의 코드이다. 웹팩에서는 HTML, CSS, JS, 이미지, 폰트 등이 각각 모듈이다. 모듈 번들링 모듈 번들링은 여러 자원들을 하나의 파일로 병합 및 압축해주는 동작을 의미한다. (빌드, 번들링, 변환은 모두 같은 의미이다.) -참고 페이지 https://joshua1988.github.io/webpack-guide/webpack/wha..