이 글은 2021년 2월 21일에 작성되었습니다. Git pull request를 사요면 자연스럽게 모든 팀원들이 한눈에 알아볼 수 있는 Commit의 형태는 무엇일지 고민하게 됩니다. 이번 글에서는 가독성 좋은 Commit의 가이드라인을 공유하고 Commit 템플릿을 어떻게 적용하는지 알아보겠습니다. 기본 Commit 구조 [optional scope]: [optional body] [optional footer(s)] type 종류 feat: 새로운 기능 추가 fix: 버그 수정 docs: 문서 수정 style: 코드 포맷팅 refactor: 코드 리팩토링 chore: 빌드 파일 수정, 패키지 파일 수정 revert: 커밋 되돌리기 description 작성법 글의 길이는 50글자를 넘지않습니다. 과..
이 글은 2021년 5월 1일에 작성되어 레거시 내용이 포함되어 있습니다. 최신 Next js Image 공식 문서를 확인 해주세요 서론 Next.js는 버전 10.0.0부터 이미지 태그를 자동으로 최적화는 next/image를 제공하고 있습니다. next/image의 는 HTML의 를 최신 웹 용으로 확장합니다. 를 사용하면 자동으로 크기를 최적화하는 WebP 같은 최신 형식의 이미지를 제공받을 수 있습니다. 이는 더 작은 장치의 화면에서 큰 이미지가 전송되는 것을 방지할 수 있습니다. 또한 Next.js가 향후 이미지 형식을 자동으로 채택하고 해당 형식을 지원하는 브라우저에 제공할 수 있습니다. 는 모든 이미지 소스에서 작동합니다. 이미지가 CMS와 같은 외부 데이터 소스에서 호스팅 되는 경우에도 여..
해당글은 2021년 5월 21일에 작성되어 레거시한 내용이 포함되어 있습니다. 설치 Apollo Client 및 GraphQL 종속성을 추가합니다. yarn add @apollo/client graphql subscriptions-transport-ws lib/apolloClient.js 파일 생성 Apollo 클라이언트 설정을 저장할 lib/apolloClient.js 파일을 생성합니다. import { ApolloClient, HttpLink, InMemoryCache, createHttpLink, split } from "@apollo/client"; import { concatPagination, getMainDefinition, offsetLimitPagination } from "@apollo..
Overview 해당 문서는 Bitbucket에서 관리하는 프로젝트를 Github로 이관하며 직면하는 배포 파이프라인 이전에 대한 해결 방법을 다루고 있습니다. 기존 Bitbucket 프로젝트 루트 경로의 bitbucket-pipelines.yml 파일의 내용이 Github Actions에서 요구되는 형태로 변환되고, ./github/workflows/github-actions.yml 로 이동되었으며, 그 외의 설정 파일(task-definition.json , task-definition-dev.json , Dockerfile)은 내용과 위치가 동일합니다. CI/CD Scenario Github의 master 또는 develop 브랜치에 코드가 push 됨 해당 프로젝트의 최신 상황에 대한 도커 이미지..
해당 글은 2021년 3월 13일에 작성된 글입니다 차트라이브러리 선택 종목 데이터를 매핑하기 위해 React 차트 라이브러리 탐색했습니다. 많은 라이브러리가 존재한다는 것을 알게 되었지만 어떤 것이 현 프로젝트에 맞는 것인지 판단하기 어려워 알맞은 차트 라이브러리가 무엇인지 조사하고 정리했습니다. 필요한 차트 유형 라이브러리 심사 조건 참고하기 쉬운 공식 문서 인기(github star, npm weekly Downloads) 다양한 차트 타입 의존성 여부(의존성이 작은 것을 선호) 필요한 차트 유형을 쉽게 만들 수 있는지 테스트 방식 현 프로젝트 개발에 사용 중인 주식 종목 데이터(stockHistories)를 불러와 lines, candles, box 차트를 구현해봅니다. 차트 라이브러리 react..
이 글은 2021년 5월 1일에 작성되었습니다. 최근 Canvas에 관심이 생겨 뭐라도 따라 해 봐야겠다는 생각을 했습니다. 그러던 중 캔버스의 좋은 예제를 찾게 되었고 해당코드를 react로 변경해 보면서 캔버스의 전체적인 틀을 이해해 보는 시간을 갖게 되었습니다. 코드를 공개해 준 김병찬 님께 감사의 인사를 드립니다. 공개된 코드를 기반으로 폭죽 배경을 Canvas로 그려봤습니다. 1. 선이미지와 텍스트 그리고 배경색은 Html과 CSS로 간단하게 만들고 해당 페이지의 canvas 태그를 쓰고 해당 캔버스를 useRef로 참조합니다. import React, { useEffect, useRef, useState } from "react"; import Firecracker from "../../com..
이글은 2021년 5월 6일에 작성된 오래된 글이며 그때 당시 저의 부족한 지식으로 작성된 글입니다. Apollo를 쓰면 복잡한 Redux처럼 상태관리 라이브러리가 필요없다! 라는 글들을 많이 봤을 것입니다. 저 또한 Apollo Client를 접하기 전까지는 전역 상태 관리를 위해 React에서는 Redux를 사용했고 Angular에서는 ngxs라는 상태 관리 라이브러리를 이용했습니다. 그런데 이런 상태 관리 라이브러리를 의존 한다는 거 자체가 코드가 복잡하고 양이 늘어나기 때문에 많은 개발자들이 상태 관리 관련 코드 리팩토링을 위해 많은 시간과 에너지를 쓰고있습니다. 특히 React + Redux사용시 action, reducer, type 코드들 때문에 머리가 어지러워지고 데이터 통신, 비동기 처리..
해당글은 2021년 7월 15일에 작성되었으며, 개인 프로젝트를 위한 React의 전반적인 구조에 대한 글입니다. 이거처럼 하지 마세요! 리액트 아키텍처를 생각해보면 폴더구조, API 통신, 페이지 라우터, redux와 redux 미들웨어등을 어떻게 해야될지 고민하게 됩니다. 이번 글은 프로젝트 폴더 구조를 중점으로 3개의 섹션을 나누어 조사한것을 공유 합니다. Section-1 프로젝트 환경 설정 다음 표는 제가 React를 개발하면서 이용한 개발 툴입니다. 개발툴 선택은 개인의 취향에 맞게 사용하면 되지만 React에서도 권장하는 사항이므로 추천합니다. Section-2 프로젝트 구조 /src/assets 정적 데이터 관리 폴더 /src/components 공용 또는 전체적으로 사용되는 컴포넌트는 이..
