본문 바로가기

Personal Posting

React Hook 정리 - useContext 사용배경 React의 Component Tree 간 props를 통해 값을 전달할 때 발생할 수 있는 복잡도를 줄이고자 제공된 기능 (Prop Drilling) Context를 통해 App 안에서 전역적으로 사용되는 데이터를 여러 컴퍼넌트끼리 공유할 수 있는 방법을 제공 다만, Context를 사용한 코드는 컴포넌트를 재사용하기에 좋지 않아 필요한 경우에만 사용한다. (공식문서: 단순히 Prop Drilling 을 피하기 위해서라면 Component Composition 사용을 제안하고 있다.) 예) 다크모드 테마의 경우 전역적으로 사용되는 상태값이나 굳이 모든 컴퍼넌트에서 props를 통해 받을 필요는 없는 것으로 가정 // ThemeContext.js import { createContext } fr.. 더보기
React Hook 정리 - useRef 함수형 컴퍼넌트에서 useRef를 사용하면 ref 오브젝트를 반환한다. const ref = useRef(value); // ref : { current : value } 반환된 ref는 컴퍼넌트 전 생애주기를 통해 유지가 된다. 👉🏻 계속 렌더링 되어도 unmount가 되지 않는 이상 계속 유지가 된다. 📌사용 목적 1. 값을 저장해 두는 저장공간으로 사용 : useState와 달리 렌더링을 원하지 않을 때 사용한다. 2. DOM 요소에 접근할 때 사용 DOM요소에 접근하는 방법 // 렌더링 후 input 박스로 자동으로 focus 되게 처리 import React, { useRef, useEffect } from 'react'; const App = () => { const inputRef = use.. 더보기
React Hook 정리 - useEffect useEffect를 이해하기 위해서는 우선 아래의 케이스를 알아야 한다. Mount : 화면에 첫 렌더링 Update : 재렌더링 Unmount : 화면에 사라질 때 useEffect는 위 3가지 상황에 특정 코드를 실행하고 싶을 때 사용된다. 기본적으로 인자를 콜백함수를 받는다. 따라서 우리가 원하는 작업은 콜백함수 내에 작성한다. 보통 아래 두 가지 케이스로 사용된다. useEffect(() => { // TODO implement }); 위 케이스는 아규먼트로 콜백함수만 받는 경우, useEffect(() => { // TODO implement }, [value]); 두번째 케이스는 아규먼트로 콜백함수와 배열을 받는 형태이다. (Feat. Dependency Array) 1번 케이스는 페이지가 렌.. 더보기
React Hook 정리 - useState import { useState } from 'react'; const [state, setState] = useState('초기값'); setState를 사용하여 state를 변경하면 화면은 재렌더링됨. 초기값은 무엇이든지 올 수 있음 (오브젝트 등도 가능) 예제) 배열을 상태로 했을때 배열 업데이트 const [color, setColors] = useState(['Red', 'Green']); const [input, setInput] = useState(''); // color를 추가하기 위해 input에 입력 const handleInputChange = (e) => { setInput(e.target.value); }; // 입력 후 추가를 했을 때 동작 const handleAdd = () .. 더보기
SDV (Software Defined Vehicle) SDV에 대한 위키백과에서 정의한 용어는 아래와 같다. 추가로 SDV 및 Apex에 대해 조사한 내용을 정리해본다. SDV는 차량 제어 시스템에 대한 컨트롤을 높이고, 기존 차량과 차별화된 서비스 및 경험을 제공하는 것을 목표로 한다. SDV의 기술적 요소는 다양한 센서와 액추에이터, 자율주행 및 연결 기술, 고성능 컴퓨팅, 소프트웨어 시스템 등을 포함하며, 이러한 요소들을 결합하여 고도로 자동화된 차량 시스템을 구축하고, 보다 안전하고 효율적인 운전을 가능하게 한다. 또한 SDV는 차량과 운전자 간의 상호작용과 통신을 강화하는 것을 목표로 하고 이를 위해, 인공지능과 머신러닝, 자연어 처리 등의 기술을 활용하여 운전자와 차량 간의 상호작용을 개선하고, 인텔리전트 서비스를 제공한다. SDV는 현재 자동차.. 더보기
클라우드 컴퓨팅 용어 정리 IaaS, PaaS, SaaS, DaaS IaaS(Infrastructure as a Service) 가상 서버, 스토리지, 네트워크 등의 인프라를 클라우드에서 제공하는 서비스입니다. 개발자는 IaaS를 이용하여 서버나 스토리지를 프로비저닝하고, 이를 사용하여 애플리케이션을 만들고 배포할 수 있습니다. 이 모델에서는 사용자가 자유롭게 인프라를 제어할 수 있으며, 유연성과 확장성이 높습니다. 예를 들어, Amazon Web Services (AWS)와 Microsoft Azure와 같은 서비스가 IaaS의 예입니다. IaaS에서는 클라우드 호스팅 IT 인프라스트럭처를 온디맨드 방식으로 액세스합니다. 여기에는 서버, 네트워킹 리소스, 스토리지 용량, 시각화 기능 등이 포함됩니다. 고객은 온프레미스 하드웨어와 비슷한 방식으로 IT 인프라스트럭처를 프.. 더보기
Dart for Flutter - 시작 생각만하고 실행은 하지 못했던 Flutter 공부를 시작했다. 모바일 또는 임베디드 개발에도 도움이 될 Flutter는 현재 옮긴 팀의 업무에도 도움이 될 것이라 판단이 되며, 추후 Flutter를 팀원들이 숙달할 수 있게 서포팅을 할 수 있게 스터디 및 내용 정리를 하기로 했다. 우선 Flutter를 하기 위해 기본적으로 숙지해야할 Dart 언어에 대해 정리해본다. Dart 언어의 특징 우선 두개의 컴파일러를 가지고 있다. Dart web : 프로그래밍한 Dart 코드를 JS로 변환. JS로 변환한다는 것은 곧 Web Framework에서 실행할 수 있다는 의미이다. Dart Native : 여러 CPU 아키텍처에 맞게 변환 (ARM32, ARM64, X86 64... 즉, 대부분의 플랫폼에 맞는 결과.. 더보기
CSS 레이아웃 (Display, Position) 헷갈렷던 용어 개인정리 position static : 기본적인 옵션. relative : 부모태그 위치를 기준으로 움직임 absolute : 하단 태그에 영향을 미치지 않음. 자신의 content 크기만 차지. 값을 주는 순간 부모의 위치를 기준으로 움직임 부모의 포지션이 static이 아닐때만 적용됨. 즉, static이면 그 위의 부모를 기준으로 움직이게 됨. fixed : 하단 태그에 영향을 미치지 않음. 자신의 content 크기만 차지. 항상 최상위 태그를 기준으로 움직임. 스크롤을 무시함 sticky : 스크롤을 무시함 display 예를 들어 div는 블록개념인데, span은 인라인개념이므로 내용이 채워지면 그만큼 확장이 된다. (컨텐츠 자체만을 꾸밈) 하지만 이를 display 옵션을 통해 block, 또는 i.. 더보기

티스토리툴바