타겟 이미지 개별 요소를 골라 스타일 하기 vs grid 방식으로 6개 만들고 color on/off 하기? 방법이 떠올랐다. 내 코드 border-radius는 4가지를 사용할 경우 왼쪽 위 모서리부터 시계방향으로 적용됨 아웃풋 결과 Score: 602.26 {543}, 100% match 정리 다음에는 grid를 써서 6개의 아이템을 만들고 그 안에서 세분화해봐야겠다

2장 간단하게 페이지 띄워보기2-1. TypeScript로 컴포넌트 작성하기2-2. GraphQL Query 알아보기 1) GraphQL에서의 Query는 어떻게 사용할까?GraphQL : 필요한 데이터만 받아올 수 있음 (REST API와 다르게) 예시) 모든 유저들의 id과 name을 조회하는 getPeopleList 쿼리query getPeopleList { allPeople { edges { node { id name } } }} 반환값 { "data": { "allPeople": { "edges": [ { "node": { "id": "cGVvcGxlOjE=", ..

타겟 이미지 z-index를 써서 해결하면 되지 않을까..? 내 코드 아웃풋 결과 Score: 600.21 {792}, 100% match 정리 1등은 무려 108byte.. 반복 등장하는 속성을 단축하는 방법이 있는 듯하다. byte를 최대한 줄이기 위해 all 이라는 클래스를 만들어 position을 넣어봤다. z-index를 사용해서 element들을 겹쳐서 완성했다. z-index를 사용하기 위해서는 position 프로퍼티를 반드시 사용해야 한다는 점을 복습했다.

2장 간단하게 페이지 띄워보기2-1. TypeScript로 컴포넌트 작성하기 1) TypeScript의 핵심 기능, Types리액트에서는 함수형 컴포넌트를 위해 FunctionComponent 타입을 제공한다 // index.tsximport React, { FunctionComponent } from 'react'import Text from 'components/Text'const IndexPage: FunctionComponent = function () { return }export default IndexPage   2) React에서 Types를 잘 활용할 수 있게 해주는 GenericGeneric : 어떤 클래스나 함수에서 사용할 타입을 사용할 장소에서 결정할 수 있게 해주는 기능 예시) ..

carrom이라는 단어가 궁금해서 찾아보니 아래와 같은 서양식 오목?같은 보드판을 말하는 것 같다 그래서 타겟 이미지도 비슷한 보드 모양이다 타겟 이미지 내 코드 아웃풋 결과 Score: 602.44 {535}, 100% match 정리 1등은 무려 68byte.. 어떻게 줄일 수 있을까?? 일단은 byte보다 연습하는 느낌으로 하루에 한 개씩 편안하게 접근해야겠다. inline-block을 활용해서 풀었고, body 에서 font-size: 0 을 주어 div간의 기본 margin을 제거했다 float를 써서 풀 수도 있을것 같은데 다음에 시도해봐야겠다

1. TypeScript 설치하기프로젝트에서 TypeScript를 사용하기 위해 설치 진행 npm i -D typescript 또한 Gatsby에서 타입스크립트 사용을 위한 플러그인 설치 npm i gatsby-plugin-typescript 설치후 gatsby-config.js 파일에서 타입스크립트 플러그인 추가, contents 파일 디렉토리 탐색하도록 옵션 변경 그리고 tsconfig.json 설정을 위해 루트디렉토리에서 아래 코드 실행 tsc --init paths 옵션을 위주로 수정 (paths : 절대경로를 사용하기 위해 경로를 매핑해주는 옵션)- baseUrl : "./src" 매핑 경로 사용을 위해 gatsby-node.js 파일에서 Webpack Config 추가 gatsby-node.j..

1. Gatsby 프로젝트 생성 npx gatsby-cli new '[프로젝트명]' 이후 생성된 폴더로 이동해 gatsby develop 명령어 실행 gatsby develop 로컬 서버 동작 확인 후 디렉토리 세팅 2. 디렉토리 세팅Rootㄴcontent : 블로그 포스트 관련 파일 저장ㄴ src    ㄴ components : React 컴포넌트 저장    ㄴ hooks : 커스텀 Hooks 저장    ㄴ pages : 페이지 컴포넌트 저장 -> 브라우저에서 pages 디렉토리의 파일들에 접근하기 때문에다른 컴포넌트 배치하면 절대 안됨    ㄴ templates : 게시글 페이지같이 페이지의 역할을 하면서 같은 형식의 여러 컨텐츠를 보여주는 컴포넌트를 저장Gatsby에서 제공하는 API를 통해 이 디..

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