프로그래밍
-
[CSS] 미디어 쿼리와 문제점프로그래밍/CSS 2024. 6. 8. 13:25
개요1. 미디어 쿼리2. 다양한 CSS 기술3. 컨테이너 쿼리 최근 몇년간 출시된 많은 CSS의 기능들은 특정 조건에서 적용되도록하는 모습을 보이고 있으며 이러한 상당수는 반응형 디자인과 직접적인 관계가 많은 것들이 있다. 이러한 부분에서 미디어 쿼리는 반응형 레이아웃에서 중요하게 여겨지지만 이러한 새롭게 출시된 CSS와 함께 사용함으로써 더욱 효과적으로 반응형 디자인을 할 수 있다고 한다. ✅ 미디어 쿼리 (Media Query) 📦 미디어 쿼리(Media Query)란?CSS의 일부 기능으로 미디어 유형 혹은 특정 장치의 특성에 따라 스타일을 조건부로 적용하는 기능을 뜻한다. 이를통해 다양한 미디어 유형과 다양한 장치에 맞춤으로 스타일과 레이아웃을 조정할 수 있고 이러한 반응형 디자인은 더 나은 ..
-
[React-Hook-Form] FormData 관리하기프로그래밍/React 2024. 5. 29. 23:45
개요1. 왜 사용해야하는가?2. 주요 함수 간단 정리3. React-Hook-Form 사용법? ✅ Why? 📦 제어 vs 비제어 컴포넌트→ 제어 컴포넌트React에 의해 값이 제어되는 입력 폼 엘리먼트를 뜻하며, 일반적으로 state를 통해서 input값을 받아올 때의 상태를 말한다.실시간으로 값이 동기화되므로 값의 변화에 따라서 리랜더링이발생한다.사용자의 입력 폼이 늘어날수록 랜더링되는 요소가 늘어나 불필요한 연산이 발생한다.유지보수에 힘들고 유효성 검사까지 진행한다면 코드가 매우 길어져 가독성이 나빠진다.const [value, setValue] = useState(""); setValue(e.target.value)}/> → 비제어 컴포넌트React에 의해 값이 제어되지 않는 엘리먼트를 뜻하며,..
-
[React] ErrorBuondary의 사용방법프로그래밍/React 2024. 5. 21. 23:23
개요1. Error Boundary란? ✅ Error Boundary란? 📦 Error BoundaryReact는 어플리케이션 렌더링 과정에서 에러가 발생하면 화면에서 해당 UI를 제거하게 되어 전체 앱이 중단되는 현상이 발생하게 된다. 이러한 현상을 막기위해 새롭게 React 16에서 도입된 기능이 Errorbuondary이다. Errorboundary는 하위요소의 렌더링 중에 throw된 error를 catch하도록 동작하며 오류가 발생한 요소 대신 대체 UI를 표시하게끔 해준다. 하지만 포착하지 못하는 오류도 있어 기본적으로 널리 사용되지는 않는다.포착하지 않는 오류: 이벤트 핸들러, 비동기 코드, 서버 측 렌더링, Errorboundary 자체에서 발생하는 오류(자식요소 X)Life cycle..
-
[Docker] Docker의 개념 및 활용프로그래밍 2024. 5. 15. 17:15
개요1. 가상화 기술의 변화2. Docker란?3. Docker 활용 ✅ 가상화 기술 가상화 기술이 등장하기 전까지는 하나의 컴퓨터에서 하나의 OS만이 사용가능했다. 이러한 특징은 해당 OS가 컴퓨터의 모든 리소스를 항상 Full로 사용하기 어려워 CPU 및 리소스의 낭비가 있으며, 서버 자원의 사용량을 예측하기 힘들고 물리적 확장에 한계가 있다는 단점이 있었다. 이에 서버를 쉽게 확장하기 위해 등장한 개념이 하이퍼바이저 가상화 기술이다.📦 하이퍼바이저 가상화하나의 컴퓨터에서 다수의 독립적인 OS를 동시에 실행하기 위한 소프트웨어로 기존 환경인 Host OS에서 각각의 분할된 환경인 Geust OS를 나누는 역할 및 시스템 자원을 할당하는 역할을 한다. 가상 머신으로 무언가를 실행할 때 하이퍼바이저..