성연커밋 : )

한 프로젝트에서 두가지의 프로젝트를 실행시키고 싶었다. 처음 구현한 방법은 다음과 같다. │ ├─ project-a │ ├─ src │ │ └─ ... │ └─ package.json │ ├─ project-b │ ├─ src │ │ └─ ... │ └─ package.json │ └─ package.json 즉, 최상단에 package.json을 이용하여, 각각의 프로젝트 디렉토리를 만들고, 해당 디렉토리를 실행시킬 수 있게 하였다. 하지만 이 부분은 yarn의 workspace로 해결이 가능하다! yarn workspace란? package.json에 workspace에 등록하게 되면 각각의 프로젝트를 로컬 패키지처럼 인식할 수 있다. 즉, 워크스페이스에 있는 프로젝트들은 서로 참조하는 연관 관계를 ..

프로젝트를 진행하면서, 다른 개발자가 함수 내에 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); } 위의 코드에서..

Item19: 추론 가능한 타입을 사용해 장황한 코드 방지하기 TS는 어느정도 타입추론이 되기때문에 TS의 많은 타입 구문은 사실 불필요함 타입 추론이 가능하더라도, 구현상의 오류가 함수를 호출한 곳 까지 영향을 미치지 않도록 하기 위해 함숭 타입 구문을 명시하는 것도 좋다 Item20: 다른 타입에는 다른 변수 사용하기 자바스크립트에서는 한 변수를 다른 목적을 가지는 다른 타입으로 재사용해도 된다. 하지만, 타입스크립트에서는 오류를 발생한다. 자바스크립트에서는 한 변수를 다른 타입으로 재사용해도 되지만, 타입스크립트에서는 오류를 발생한다. let id = "12-34-56"; fetchProdiuct(id); // string인 id id = 123456; fetchProductBySErialNumbe..

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..

Next 프로젝트를 작업하던 도중, 페이지를 이동할 때 보통 router.push를 쓰거나, next의 Link를 이용하곤 한다. 사람들이 모르고, 이용을 하는 경우가 있기 때문에 차이점을 알아보고자 한다. router.push import Router from 'next/router'; const RouterTest = () => { const router = Router; const onClick = () => { router.push('/page'); } return ( 버튼 ) } router.push의 경우 window.location과 비슷하게 동작한다. 태그가 아니기 때문에, SEO(검색엔진)에 불리하다. onClick과 같은 이벤트 핸들러와 함께 사용이 된다. Link import Link..

많은 데이터를 확인할 때, 보통 페이지네이션 또는 인피니트스크롤로 구현을 하곤 한다. 저번 프로젝트에서는 페이지네이션을 이용하였는데, 이번에는 인피니트 스크롤을 이용해보았다. 인피니트 스크롤이란? 사용자가 버튼을 누르거나, 특정 지점을 스크롤 할 때, 새로운 데이터를 가져오는 방법이다. reactQuery를 이용하여, 데이터를 패치하여 인피니트 스크롤을 구현해보겠다. reactQuery의 포스팅은 여기에서 했으니 궁금하면 먼저 보고오는 것도 좋다. useQuery useMutation 무한 사용을 위한 옵션쿼리는 다음을 추가한 useQuery hook과 동일하며 isRefetching에서 차이가 있다. useInfiniteQuery에 대해서 알아보자 data는 infinte query 데이터가 담겨있는 ..

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

CSS-In-JS 방식인 Styled-components로 스타일을 다 하였지만, 리렌더링이 될 시 스타일이 적용이 안되는 문제가 발생하였다. NextJS의 렌더링 및 스타일이 깨지는 이유를 알아보자 Next.js는 기본적으로 페이지를 ServerSide Rendering을 한다. 즉, pre-render을 한다는 것이다. Server Side에서 html파일을 구성하여 브라웆 측에 전달하여 렌더링한다. 이후, JavaScript 파일이 로드되어 자바스크립트 코드가 적용된다. 즉, HTML → JavaScript로 인해 스타일이 적용되지 않은 html코드가 먼저 렌더링이 된다! 해결법 renderPage 함수를 커스터마이징하자! Next.js 공식 홈페이지에서 CSS-In-JS 방식을 사용할 때만 수정하..