Daily Front_Minhhk

GraphQL Graph + Query Language Query Language 중에서도 Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language를 뜻하며,API를 위한 쿼리 언어라고 할 수 있습니다. GraphQL은 트리 구조로 쿼리 결과를 받기 위해 그래프를 탐색하는 쿼리 언어라고 볼 수 있습니다. GraphQL의 특징 GraphQL은 HTTP를 통해 API 서버로 요청을 보내고 응답을 받습니다. 응답을 받을 시, 데이터 결과를 JSON 형식으로 받습니다. GraphQL은 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회할 수 있습니다. GraphQL은 GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사합니다. Gra..

🖥️ 컴퓨터 구조 입력 장치 입력장치는 컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치입니다. 출력 장치 출력장치는 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치를 의미합니다. 중앙처리장치 CPU의 내부 구성은 크게 산술/논리 연산 장치(ALU)와 제어 장치, 레지스터로 구성되어 있습니다. 저장 장치 저장장치는 데이터나 프로그램을 보관하기 위한 일차 기억 장치인 주 기억 장치(Memory)와 주 기억 장치를 보조하기 위한 보조 기억 장치가 존재하고 있습니다. CPU CPU의 구조 CPU 의 내부 구성은 크게 산술/논리 연산 장치(ALU), 제어 장치와 레지스터로 구성 산술/논리 연산장치 : 가산기, 보수기, 누산기, 기억 레지스터, 데이터 레지스터 등으로 ..

React.lazy() React는 React.lazy를 통해 컴포넌트를 동적으로 import를 할 수 있기 때문에 이를 사용하면 초기 렌더링 지연시간을 어느정도 줄일 수 있게 됩니다. import Component from './Component'; /* React.lazy로 dynamic import를 감쌉니다. */ const Component = React.lazy(() => import('./Component')); 이 React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수는 없고, React.suspense 컴포넌트의 하위에서 렌더링을 해야 합니다. React.Suspense Router로 분기가 나누어진 컴포넌트들을 위 코드처럼 lazy를 통해 import하면 해당 path로 이동할때 컴포넌..

개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있습니다. 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용합니다. 이를 이용하면 상태관리 로직의 재활용이 가능하고 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며 함수형으로 작성하기 때문에 보다 명료하다는 장점이 있습니다. 예시를 살펴보자!! //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트 function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffe..

👀 Hook 함수형 컴포넌트에서 state 값 및 다른 여러 기능을 사용하기 편하게 해주는 메소드로, function으로만 React를 사용할 수 있게 해주기 때문에 Class Component에서는 동작하지 않는다. ✔ Hook 사용 규칙 1. React 함수의 최상위에서만 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 실행 시, 동작하지 않는다. 2. React 함수 내에서만 사용되어야 한다. 리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 안에서 호출해서는 안 된다는 의미이다. useMemo란? useMemo는 특정 값(value)를 재사용하고자 할 때 사용하는 Hook입니다. import { useMemo } from "react"; function Ca..

번들링 현대 웹 개발에서, 프론트엔드 개발자에게 번들은 “사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음" 사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 프론트엔드 개발자가 번들링한 여러 파일을 받습니다. 이 파일을 브라우저가 실행하여 멋진 웹 애플리케이션을 사용자에게 제공하게 됩니다. Webpack Webpack이란 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미합니다. 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구입니다. 모듈 번들러(Module Bundler)의 등장 모던 웹으로 발전하면서 JavaScript 코드의 양이 절대적으로 많이 증가했고, 또 대규모의 의존성 트리를 ..