1. React 2. GraphQL- 페이스북에서 개발한 쿼리 언어 (SQL과 비슷한)- 각각의 엔드 포인트에서 고정된 데이터를 받을 수 있는 Rest API와 다르게단일 엔드포인트에서 원하는 데이터만을 받을 수 있다는 장점이 있음 - 쿼리를 작성해 데이터를 받아올 수 있으며,- 데이터 변경을 위한 Mutation- 실시간 기능을 위한 Subscription이 있음 query 기능 위주로 사용하기 때문에 query 작성 코드만 이해하면 됨

Gatsby가 무엇인지 알기 전에 먼저 JAM Stack이 무엇인지 알아야 한다 JAM Stack이란?더 빠르고 안전하고 확장하기 쉬운 웹페이지를 만들기 위해 디자인된 아키텍쳐 JavsScriptAPIMarkup의 약자로, 어떤 기술을 사용하는지 이름에서 명시되어 있다 기존 웹사이트의 방식은서버/데이터베이스에서 데이터를 가져와 프론트엔드에 뿌려주는 방식으로 절차가 길어 복잡 반면, JAM Stack을 이용한 방식은 절차가 매우 간단빠르게 만든 정적 웹사이트를 CDN을 통해 빠르게 구현JAM Stack의 장점1. 기존 방식에 비해 더 빠르게 웹 사이트 제공- pre-render 방식으로 시간 단축- CDN을 통한 제공=> 브라우저에서 첫 응답을 받기까지 걸리는 시간인 TTFB(Time to First By..

Gatsby 프레임워크를 사용하면 정적 페이지를 빠르고 간편하게 만들 수 있다고 들은 적이 있다. 나도 나만의 웹사이트를 쉽고 빠르게 만들어보자 인프런 강의 시작~

타겟 이미지 내 코드 아웃풋 결과 Score: 689.58 {157}, 100% match 정리 기본적인 것만 써도 157 byte인데, 1등은 54byte이다.. 가독성을 일체 배제하고 작성하여야 하는 듯 하다 주석도 코드 길이에 포함되기 때문에, 주석을 지우고 제출해야한다 이번 문제는 user agent를 제거해 주는 것을 확인하는 문제인듯 하다

https://cssbattle.dev/ CSSBattle CSS Code Golfing Game is here! cssbattle.dev CSS Battle 이란? - HTML/CSS로 주어진 이미지를 구현 - 가능한 최소한의 코드로 작성 - 코드를 작성하고 제출하면 순위를 확인할 수 있다 - JS로 작성하거나, 코드에 이미지를 포함하면 안된다 무료 버전으로는 서비스의 모든것을 이용할 수 없다. 우선 하나씩 시작해서 CSS를 재밌게 숙달해보자 #1 pilot battle 부터 시작~

객체 타입 TypeScript 에서 객체를 만들고 const person = { name: 'john', age: 30 } person에 커서를 올리면 아래처럼 TypeScript가 타입을 추론한 결과가 나온다 각 항목이 콤마가 아닌 세미콜론으로 구분됨에 주의한다 const person: { name: string; age: number; } 또한 객체에도 : object 또는 : {}를 붙여 타입을 확실하게 명시해줄 수도 있다 또는 아예 키 : 타입 쌍을 추가하여 정확하게 지정할 수도 있다 // app.ts const person: { name: string; age: number; } = { name: 'john', age: 30 } console.log(person.name); JavaScript에..