분류 전체보기

[DP] 문제 풀이 팁

다이나믹 프로그래밍 큰 문제를 작게 나누고 같은 문제라면 한 번씩만 풀어 문제를 효율적으로 해결하려는 알고리즘 기법 다이나믹 프로그래밍을 사용할 수 있는 경우 1. 최적 부분 구조(큰 문제를 작은 문제로 나눌 수 있다) 2. 중복되는 부분 문제(동일한 작은 문제를 반복적으로 해결 (최적화)) 두가지 조건을 만족하면 다이나믹 프로그래밍 방식을 사용할 수 있다 하향식 (탑다운) 메모이제이션 기법사용 : 한번 계산한 결과를 메모리 공간에 메모하는 기법 재귀 사용 탑다운 방식 시간복잡도 O(N) # 한 번 계산된 결과를 메모이제이션하기 위한 리스트 초기화 d = [0] * 100 # 피보나치 함수를 재귀함수로 구현 (탑다운 DP) def fibo(x): # 종료 조건 (1 또는 2일때 1반환) if x == 1..

[React기반 Gatsby로 블로그 개발하기] EmotionJS

EmotionsJS란 Sass, Css같은 경우 스타일 파일을 따로 만들고, 이를 컴포넌트 파일에서 불러와 적용하는 방식 EmotionJS 라이브러리는 `CSS-in-JS` 라이브러리로, 자바스크립트 파일 내에서 스타일을 지정할 수 있는 라이브러리다 왜 EmotionJS인가? 다운로드 횟수를 보면 ㄷ부분 사용자가 `styled-components 라이브러리` 또는 `EmotionJS 라이브러리`를 사용하는데, EmotionJS 라이브러리가 월등히 높다 styled-components `장점` 템플릿 리터럴 또는 객체를 통해 손쉽게 스타일을 적용한 컴포넌트를 만들 수 있고 손쉽게 적용할 수 있다 Sass 문법을 지원하기 때문에 더 간결한 코드 작성이 가능하고, 서버사이드렌더링을 지원해주기 때문에 이를 위해..

[React기반 Gatsby로 블로그 개발하기] Gatsby Link API

Gatsby 페이지 이동 Link API를 통한 페이지 이동 를 통해서도 링크이동이 가능하지만, 새로고침이 일어남 Gatsby에서는 기본적으로 페이지 이동을 위한 APi 제공하고 있음 => Link API import React, { FunctionComponent } from 'react' import Text from 'components/Text' import { Link } from 'gatsby' const IndexPage: FunctionComponent = function () { return ( To info ) } export default IndexPage Gatsby Link API의 이점 Gatsby는 `Prefetch`를 통해 페이지에서 사용할 리소스의 로딩 속도를 높인다 그럼 ..

[React기반 Gatsby로 블로그 개발하기] GraphQL 사용

GraphQL에서의 Query 사용법 GraphQL은 필요한 데이터만 받아올 수 있다는 점에서 매력을 가진다 [입력값] query getPeopleList { allPeople { edges { node { id name } } } } [결과 반환값] "data": { "allPeople": { "edges": [ { "node": { "id": "cGVvcGxlOjE=", "name": "Luke Skywalker" } }, { "node": { "id": "cGVvcGxlOjQ=", "name": "Darth Vader" } }, ] } } } 이처럼 원하는 데이터만 가져올 수 있다 GraphiQL : 강력한 기능 Gatsby에서는 홈페이지의 메타데이터, 마크다운 관련 데이터, 이미지 데이터 등을 Q..

[React기반 Gatsby로 블로그 개발하기] Typescript 적용하기

Typescript 타입스크립트 : 자바스크립트의 동적 타입으로 인해 야기될 수 있는 문제를 해결할 수 있음 const str: string = "This is String" // Good const num: number = "This is String" // error TS2322: Type 'string' is not assignable to type 'number'. React 컴포넌트 작성할 때 타입 표시해줄 수 있는 것은 컴포넌트를 저장한 변수 뿐 리액트에서는 기본적으로 함수형 컴포넌트를 위한 타입 제공해줌 import React, { FunctionComponent } from 'react' import Text from 'components/Text' const IndexPage: Funct..

[React기반 Gatsby로 블로그 개발하기] Gatsby & GraphQL

왜 Gatsby React기반 프레임워크, Next.js가 1위, Gatsby가 2위 왜 1위인 Next.js안쓰고 Gatsby를 쓰는가? Next.js는 정적 사이트 생성기능도 있지만 주로 서버 사이드 렌더링을 위해 사용하는 프레임워크, 즉 서버와 통신을 해 요청을 받을때마다 동적으로 웹사이트를 생성 Gatsby는 서버없이 오로지 정적 사이트 생성을 위해 사용하는 프레임워크 => 블로그, 소개페이지, 포트폴리오 등에 많이 사용됨 블로그 개발이 목적이어서 Gatsby 사용 Gatsby & GraphQL Gatsby Gatsby는 React를 사용하는 `JAM Stack 기반 프레임워크` GraphQL 페이스북에서 개발한 쿼리 언어 각각의 엔드 포인트에서 고정된 데이터를 받을 수 있는 Rest API 그와..