개발일기

React 프로젝트를 진행하다보면 public폴더 내 manifest.json파일을 흔히 볼 수 있다. 프로젝트를 진행하면서 manifest.json에 대해 자세히 파헤쳐본 적이 없었기 때문에 문득 이 파일이 무엇을 하는지 궁금해졌다. manifest.json 웹앱 manifest란 앱에 대한 정보를 담고 있는 json 파일이다. 배경색과, 앱의 이름, 홈스크릲 ㅘ면에 추가할 아이콘 등의 정보를 담는 것이다. 웹앱 매니패스트의 파일명은 manifest.json으로 많이 사용하곤 한다. { "short_name": "React App", "name": "Create React App Sample", "start_url": ".", "display": "standalone", "theme_color": "#..

React에서 Next로 프로젝트 마이그레이션을 하는 도중 className 관련 에러가 떴다. 해당 부분은 서버에서 렌더링 될때 className과 클라이언트에서 렌더링 된 className이 달라서 생기는 문제이다. 이 부분은 babel의 플러그인으로 관리할 수 있다. yarn add -D babel-plugin-styled-components CNA(create-next-app)으로 만든 프로젝트의 최상단에 .babelrc 를 추가하여 { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", { "ssr": true, // SSR을 위한 설정 "displayName": true, // 클래스명에 컴포넌트 이름을 붙임 ..

React를 이용하여 프로젝트를 진행하면서, 뒤로가기를 클릭하면 페이지를 뒤로가기 페이지가 아닌, 다른 페이지로 바꾸고싶었다. React-router-dom v6 이전까지는 history 내에서 이전 값을 확인할 수 있었지만, v6부터는 history가 사라졌다. navigate로 history를 대체하지만, 뒤로가기를 -1로 할 수 있을 뿐, 뒤로가기를 감지할 순 없었다. 그래서 방법을 찾아보았다. history라는 라이브러리 설치 history의 action이 ‘pop’일 때, 즉 브라우저의 앞, 뒤, 새로고침 버튼을 누를 때 발생하는 action이다. history가 pop일 때를 감지하여, 그 때 navigate를 하고싶었지만, 뒤로가기뿐만이 아닌, 모든 동작이 같이 발생하여 이것을 원하는게 아니..

Fetch waterfalls (패치 워터폴) 워터폴은 하나의 요청이 이루어지고, 이 요청이 완료될 때까지 다른 요청을 실행하지 않고 기다리는 상황을 나타낸다. 때때로, 첫 번째 요청이 두 번째 요청을 실행하는데 필요한 정보를 가지고 있는 경우, 이런 상황은 불가피하다. 이러한 상황은 종속쿼리라고 말한다. 대부분은 독립적인 데이터이므로 필요한 모든 데이터를 병렬로 패치할 수 있다. // 1. useQuery를 두 번 사용합니다 const issues = useQuery({ queryKey: ["issues"], queryFn: fetchIssues }); const labels = useQuery({ queryKey: ["labels"], queryFn: fetchLabels }); // 2. useQu..

프로젝트를 진행하면서, 다른 개발자가 함수 내에 setState하나를 작성할 때, prevState 이용하여 현재 상태와 반대되는 값으로 작성한 코드가 있었다. 해당 코드는 현재 상태와 반대되는 값으로 변경해주는 코드였다. 나는 prevState대신에, 현재 state와 반대되는 값으로 바로 !state를 해주면 되지않을까? 라는 생각이 들어 찾아보았다. setState부터 알아보자 state를 변경하는 함수로, 비동기적으로 동작한다. const [state, setState] = useState(0); function sumAll() { setState(state + 1); setState(state + 2); setState(state + 3); setState(state + 4); } 위의 코드에서..

GatsbyJS란 무엇일까? GatsbyJS는 React 기반의 정적 페이지 생성 프레임워크이다. 가공할 정보를 GraphQL에서 가져와서 빌드 시점에 정적페이지를 만들어내는 방식 JAM Stack을 활용한 정적 사이트 생성기 💡 JAM Stack은 JavaScript, API, MarkUp Stack의 약자로, JavaScript와 API, HTML이나 CSS등을 칭하는 MarkUp으로 이루어진 웹 구성 방법 NextJS가 아닌 Gatsby를 사용하는 이유는? NextJS는 정적 사이트 생성의 기능도 있지만, 주로 서버 사이드 렌더링을 위해 사용하는 프레임워크! 즉, 서버와 통신을 하며 요청을 받을 때마다 동적으로 웹 사이트를 생성하는 NextJS와 달리 Gatsby는 서버 없이, 오로지 정적 사이트 ..

Atomic Design이란? 웹 개발 프레임워크, 라이브러리는 컴포넌트 단위로 개발을 진행한다. 이러한 컴포넌트를 가장 작은 단위로 설정하고 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화 하는 방법론이다. 아토믹 디자인은 원자, 분자, 유기체, 템플릿, 페이지로 효과적인 인터페이스 시스템을 만든다. Atoms(원자) 가장 작은 단위의 컴포넌트 다양한 state 즉 상태, 색상, 폰트, 애니메이션과 같은 추상적인 요소가 포함될 수 있다. 대표적인 컴포넌트는 버튼, 텍스트, 아이콘 등이 있다. Molecules(분자) 2개 이상의 Atoms로 구성 하나의 단위로 함께 동작하는 UI컴포넌트들의 단순한 그룹 입력 폼, 내비게이션, 카드가 대표적인 컴포넌트 Organism(유기체) Molecules..

Design Pattern(디자인 패턴)이란? 디자인 패턴이란 기존 환경 내에서 반복적으로 일어나는 문제들을 어떻게 풀어나갈 것인가에 대한 일종의 솔루션 디자인 패턴의 종류는 다음과 같다. React의 디자인 패턴 등장 배경부터 알아보자 재사용 가능한 컴포넌트 사용이 간단한 컴포넌트 확장이 용이한 컴포넌트 위 세가지를 충족하는 컴포넌트를 디자인하기 위한 노력들이 리액트 패턴이 탄생했다. 1. Compound Components Pattern (합성 컴포넌트 패턴) 불필요한 props drilling없이 표현적이고 선언적인 컴포넌트 형태 더 나은 관심사의 분리와 이해가 쉬운 API 사용 컴포넌트 UI를 커스터마이징하기 좋게 만들 수 있다. 장점 API복잡도가낮다. 하나의 거대한 부모 컴포넌트에 모든 pro..

modal은 공통 컴포넌트로 많이 사용되곤한다. 여기서 portal은 무엇일까? Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법이다. 리액트 공식문서 컴포넌트 렌더링 메서드에서 엘리먼트를 반환할 때 그 엘리먼트는 부모 노드에서 가장 가까운 자식으로 DOM에 마운트된다. portal을 사용하는 이유는? 전역모달을 띄우는 범용적인 방법은 바로 하위에 Modal 컴포넌트를 만든 뒤 전역상태를 통해 show / hide를 관리하는 것이다. 상위단에 DOM노드를 생성했을뿐만 아니라, 단순한 알람모달의 경우에도 전역상태에 의존한다는 불합리함이 존재한다. 모달이 켜진 상태에서 업데이트 등으로 부모 엘리먼트가 리렌더링이 된다면, tree구조에 따라 자식 모달 역시 영향..

라이트하우스란? Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구이다. 어떤 웹 페이지든 사용가능하다. Lighthouse Chrome확장 프로그램에서 검색엔진 최적화 감사 라이트하우스로 확인가능한 지표? 링크에서 확인이 가능하다. Frist Contentful Paint 사용자가 웹 페이지로 이동했을 때, 첫번째 DOM의 콘텐츠를 렌더링 하는데 걸리는 시간 Speed Index 웹 페이지를 불러올 때, 콘텐츠가 시각적으로 표시되는 데까지 걸리는 시간 상호 작용까지의 시간 웹 페이지가 완전히 상호작용할 수 있는 상태가 될 때 까지의 거리는 시간 Max Potential First Input Delay 사용자가 웹 사이트와 처음 상호작용할 때부터 브라..