성연커밋 : )

GraphQL 이란? Facebook에서 만든 Graph Query Language 어플리케이션 레이어 쿼리 언어 GQL(Graph Query Language)는 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것 즉, API를 위한 쿼리 언어! 선언형 데이터 fetching언어로, 개발자는 무슨 데이터가 필요한 지에 대해서만 요구사항을 작성하면 되고, REST API의 한계점?! 모든 Resource들을 하나의 Endpoint에 연결하고, Resource와 관련된 내용만 관리하게 하는것인데, 복잡한 서비스나 클라이언트의 요청사항에 따라 Over-Fetching과 Under-Fetching이 발생한다. REST API로 여러 환경에서 필요한 정보들을 Resource별로 Endpoint를 갖도록 구..

프로젝트를 진행하면서 netlify로 프론트를 배포하였다. 이후, 서비스를 실 운영을 해보기 위해 route53에서 도메인을 구입하였다. route53 - 호스팅영역 1. 호스팅영역 생성을 하여 구매한 도메인을 입력하고, 호스팅 영역을 생성해준다 2. 호스팅영역에 생성된 도메인을 눌러준다. 3. 생성된 도메인의 값에는 도메인의 네임서버가 뜬다. 이 네임서버는 건드리지 말것! 4. 호스팅 영역에서, 레코드를 생성해준다. 레코드는 www.pack.recipes 입력해주고, 유형은 NS(Name Server)로 해준다. 이 때, 값은 네트리파이에서 가지고와야한다. 네트리파이에서 해당 도메인의 네임서버를 확인해보자 netlify에 domain setting을 눌러, 구매한 도메인을 입력해주자. 이 때, www...

테스트를 할 때, unit 테스트를 작성하면서 서버가 필요했던 상황이 있었다. 해당 서버로 테스트를 할 경우, 서버에 문제 있으면 정상적으로 테스트가 어렵다. 그래서, 목업데이터를 이용해서 테스트를 하곤 한다. MSW (Mock Service Worker) 서비스 워커로, API 모킹 라이브러리로, 서버를 향한 네트워크 요청을 가로채서 모의 응답을 내려주는 역할을 한다. 사용자가 정의한 모킹 핸들러를 테스트를 위한 노드 환경, 개발과 디버깅을 위한 브라우저 환경에서 모두 사용할 수 있다. MSW가 작동하는 방식은? 브라우저에서 서비스 워커를 등록하여 fetch 이벤트를 사용해 외부로 나가는 네트워크 리퀘스트를 감지하고, 요청을 실제 서버 대신 MSW 클라이언트 사이드 라이브러리로 보낸 후, 등록된 핸들러..

Exclude Type에서 ExcludedUnion에 할당할 수 있는 모든 속성을 제외한 타입을 구성한다. type Exclude = T extends U ? never : T; 원형은 위 코드와 같으며, 예제 코드를 살펴보면서 이해해보자. type T0 = Exclude; // "b" | "c" type T1 = Exclude; // "c" type T2 = Exclude void), Function>; // string | number 즉, T0은 a, b, c를 할당할 수 있는데, a 프로퍼티를 제외한 b, c만 가능하다. Extract Type에서 Union에 할당할 수 있는 모든 속성을 추출하여 타입을 구성한다. type Extract = T extends U ? T : never; type T..

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

TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공한다. 유틸리티 타입을 이용하면 타입 변환을 더 쉽게 할 수 있다. Partial Type의 모든 속성을 선택적으로 사용할 수 있다. 주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환한다. type Partial = { [P in keyof T]?: T[P]; }; 원형은 다음과 같다. 코드를 통해 Partial에 대해 알아보자 type Person = { name: string; email: string; }; const App = () => { const name: Partial = { name: "seongyeon", }; const email: Partial = { email: "ysy2565@nave..

TDD가 무엇일까? Test Driven Development 테스트 주도 개발로, 테스트가 개발을 이끌어 나가는 것이다. 기존의 개발 프로세스와 다르게 테스트케이스를 먼저 작성 후, 실제 코드를 개발하여 리팩토링 하는 절차이다. 반복 테스트를 이용한 소프트웨어 방법론으로, 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현 짧은 개발 주기의 반복에 의존하는 개발 프로세스이며 애자일 방뻐론 중 하나인 eXtream Programming(XP)의 ‘Texst-First’ 개념에 기반을 둔 단순한 설계를 중요시한다. 테스트 종류 프론트엔드 테스트 종류는 Unit테스트, Integration 테스트, E2E테스트로 크게 3가지로 나뉜다고 생각한다. Unit 컴포넌트 별 기..

zustand는 무엇일까? Zustand는 독일어로 ‘상태’라는 뜻을 가진 라이브러리로 다음과 같은 특징을 가지고 있다. 특정 라이브러리에 엮이지 않는다. ( React와 함께 쓸 수 있는 API 제공) 한 개의 중앙에 집중된 형식의 스토어 구조를 활용하면서, 상태를 정의하고 사용하는 방법이 단순하다 Context API를 사용할 때와 달리 상태 변경 시 불필요한 리렌더링을 일으키지 않도록 제어하기 쉽다. React에 직접적으로 의존하지 않기 때문에 자주 바뀌는 상태를 직접 제어할 수 있는 방법을 제공한다. 동작을 이해하기 위해 알아야 하는 코드 양이 아주 적다. 다른 전역 상태관리가 있는데 zustand를 사용하는 이유는? 보일러 플레이트가 거의 없다 싶을 정도의 쉬운 로직 Redux Devtools를..

CSR과 SSR은 이전 블로그에서 정리를 하였다. 그래서, SSG에 대해서 개념과 SSR의 차이점 위주로 포스팅을 하려고 한다. SSG가 무엇일까? SSR처럼 서버로부터 완성된 HTML을 받아오지만, 다른 점은 HTML파일의 생성시점이 빌드타임이다. Static이라는 용어가 들어간 것은 HTML이 정적이지, 페이지가 정적은 아니다! SSR이 있는데 SSG를 사용하는 이유는 무엇일까? 생성이 완료된 HTML 문서를 재활용하기에 응답속도가 매우 빠르다 이미 생성된 HTML파일이기 때문에, SEO에 친화적이다. build 명령은 실제로 사이트를 방문하는 사람의 워크플로를 벗어나므로 시간이 좀 걸리더라도 문제되지 않는다. 단점은? 모든 URL에 대해서 개별 HTML 파일을 생성해야한다. URL을 미리 예측할 수..

클로저란? 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합이다. 클로저는 함수를 지칭! + 함수가 선언된 환경과의 개념의 합성어이다. 무슨 말인지 이해가 되지 않았다. 코드로 이해해보자! function outerFunc() { var x = 10; var innerFunc = function () { console.log(x); }; innerFunc(); } outerFunc(); // 10 함수 outerFunc 내에서 내부 함수인 innerFunc가 선언되고 호출되었다. 내부함수 innerFunc는 자신을 포함하는 외부함수인 outerFunc의 변수 x에 접근하여 x값이 10으로 출력이 되었다. 스코프는 함수를 호출할 때가 아닌, 함수를 어디에 선언하였는지에 따라 결정된다. 내부함수 inne..