Daily Front_Minhhk

🖥️ 컴퓨터 구조 입력 장치 입력장치는 컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치입니다. 출력 장치 출력장치는 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치를 의미합니다. 중앙처리장치 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 코드의 양이 절대적으로 많이 증가했고, 또 대규모의 의존성 트리를 ..

반응형 웹이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미 즉, 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론, 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정되는 것 장점, 효율적인 유지보수 검색엔진(SEO) 최적화 유리 단점, 사이트의 속도 저하 웹브라우저 호환성 문제 head에 link태그 head에 style 태그 CSS 파일이나 태그 안에서 미디어 쿼리 작성 @media 미디어 타입 (조건(너비 및 높이)) { (CSS 입력하는 부분) } --예제 @media screen (max-width: 400px) { bo..