짧은코딩

-문제 사이트 https://school.programmers.co.kr/learn/courses/30/lessons/72413 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(n, s, a, b, fares) { let answer = Infinity; const INF = Infinity; const graph = Array(n) .fill() .map(() => Array(n).fill(INF)); for (let [a, b, c] of fares) { graph[a - 1][b - 1] = c; graph[b -..

타입 반복 개발자라면 코드의 반복을 줄이려고 노력한 적이 분명 있을 것이다. 이런 것을 DRY(don't repeat yourself)라고 한다. 이것을 타입에도 적용하여 타입 반복 또한 줄여야 한다. 이 글은 두고두고 많이 봐야 한다고 생각한다. 왜냐하면 평소에 코드 중복을 굉장히 많이 하여 개발했기 때문이다. 그렇기에 개발을 할 때마다 이 글은 자주 챙겨보면서 타입 중복을 피하여 코딩해야겠다. 타입 반복 예시 -문제 코드 interface Person { firstName: string lastName: string } interface PersonWithBirthDate { firstName: string lastName: string birth: Date } 나도 평소에 이렇게 타입이 겹치는 것이..

-문제 사이트 https://school.programmers.co.kr/learn/courses/30/lessons/72412 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function getCombination(arr, score, map, start) { let key = arr.join(""); Array.isArray(map[key]) ? map[key].push(score) : (map[key] = [score]); for (let i = start; i < arr.length; i++) { let temp = [...arr]; tem..

-문제 사이트 https://school.programmers.co.kr/learn/courses/30/lessons/72411 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(orders, course) { let answer = []; course.map((num) => { const map = new Map(); orders.map((order) => { const all = getCombination(order.split("").sort(), num); all.map((cons) => { const con = c..

다이나믹 라우팅 sns에서 게시글의 아이디를 활용하여 게시글을 불러오는 페이지를 만들려고 하면 next.js에서는 다이나믹 라우팅을 사용할 수 있다. 파일 구조 파일 구조는 이렇게 post 폴더 안에 [id].js를 하면된다. 코드 const router = useRouter(); const { id } = router.query; useRouter를 이용하면 url에 뜨는 게시글의 id를 받아올 수 있다. getServerSideProps에서 id 찾기 context.store.dispatch({ type: LOAD_POST_REQUEST, // context.params.id 혹은 context.query.id라고 하면 useRouter에 똑같이 접근할 수 있다. data: context.params..

타입스크립트에서 명명된 타입(named type)을 정의하는 방법은 type과 interface 2가지가 있다. 대부분의 경우 type과 interface 둘 중 아무거나 사용해도 문제가 없다. 하지만 둘 중 하나로 통일해야 하는 상황이 있다. 이 글에서는 type과 interface의 공통점과 차이점에 대해서 알아보도록 하자. 그 전에 이 글에서 interface는 IState, type는 TState로 표기하는 일이 있을텐데 이 방법은 좋은 방법은 아니라서 지양하는 것이 좋다. 예시 코드에는 저 방식을 사용하여서 불가피하게 저 방식을 예시로 사용하겠다. type과 interface의 공통점 1. 인덱스 시그니처와 함수 타입 인덱스 시그니처와 함수 타입은 type과 interface에서 모두 사용된다...

객체 래퍼 타입 객체 래퍼 타입은 원시 타입의 값을 감싸는 형태의 객체이다. 예를 들어 string -> String, number -> Number 이런 식으로 사용한다. 기본 원시 타입들은 불변이며 메서드를 가지지 않는 점이 객체와 구분된다. "apple".charAt(2); // "p" 하지만 이 코드를 보면 기본 원시 타입도 메서드를 가진 것처럼 보인다. 사실 charAt는 string의 메서드가 아니고 자바스크립트 내부에서 string을 String으로 바꿔서 사용하기 때문에 charAt 같은 메서드를 사용할 수 있다. 즉, 기본형(원시 타입)과 객체 타입을 서로 자유롭게 변환 가능하다. 따라서 이 과정에서 string을 String 객체로 래핑(wrap)하고 이후 마지막으로 래핑한 객체를 버린..

CSR과 SSR CSR CSR은 데이터를 얻기 위해서 요청이 2번 간다. 사용자가 새로고침을 하면 프론트 서버에서 HTML과 JS를 브라우저에 주고 그 이후에 또 요청을 하여 추가적으로 데이터를 불러온다. SSR SSR은 데이터를 얻기 위해 요청이 1번 간다. 서버에서 즉시 렌더링 가능한 html 파일이 만들어져 있기 때문에 바로 렌더링이 된다. 이로 인해 초기 로딩 속도가 빨라진다. 즉, 사용자는 콘텐츠가 빠르게 보이는 느낌을 줄 수 있다. SSR 적용 방법 index.js useEffect(() => { dispatch({ type: LOAD_MY_INFO_REQUEST, }); dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); 처음 시작이 되는 페이지인 inde..

결론부터 말하면 단언문보다 선언문을 사용하는 것이 좋다. 선언문 interface Person { name: string } const alice: Person = { name: 'Alice' } // Type is Person 타입 선언문은 선언된 타입임을 명시하여 타입을 선언한다. 단언문 interface Person { name: string } const bob = { name: 'Bob' } as Person // Type is Person 단언문은 "as"를 사용한다. 이러면 타입스크립트가 추론한 타입이 있어도 강제로 "as" 뒤에 쓴 타입으로 간주한다. 선언문을 사용해야 하는 이유 interface Person { name: string } const alice: Person = {} // ..

Symbol interface Cylinder { radius: number height: number } const Cylinder = (radius: number, height: number) => ({ radius, height }) Symbol은 이름이 같더라도 속하는 공간에 따라 다른 것을 나타낸다. 일반적으로 type이나 interface 다음에 나오는 심벌은 타입, const이나 let 선언에 쓰이는 것은 값이다. 또는 타입선언(:)이나 단언문(as) 다음에 오는 심벌은 타입, "=" 다음에 오는 모든 것은 값이다. typeof interface Person { first: string last: string } const p: Person = { first: 'Jane', last: 'Ja..