React hook form

React Hook Form은 React 애플리케이션에서 폼을 다루는 데 도움이 되는 라이브러리 중 하나입니다. 이를 통해 폼 컴포넌트의 개발과 유지 보수를 용이하게 할 수 있습니다.  React-hook-form 을 사용하면 form component 의 상태 및 유효성 검사를 관리하는데 필요한 코드 양을 대폭 줄일 수 있습니다. 저도 평소에 form 기능을 만들때 input 을 useState 로 관리하고 필요에 따라 명시적인 이벤트 핸들러를 작성하는데 React-hook-form 은 제공해주는 Hook 을 사용하여 관련 데이터를 추적하고 업데이트 할 수 있습니다. 장점간결한 API React Hook Form은 사용하기 쉽고 직관적인 API를 제공하여 복잡한 폼 로직을 단순화합니다. 기본적으로 제..

• format_list_bulleted 라이브러리
• · 2024. 7. 26.
• textsms

browser-image-compression

간단하게 이미지 압축을 위한 라이브러리 입니다.이 라이브러리를 사용하면 서버에 이미지를 업로드 하기 전에 해상도나 저장 용랼을 줄여 서버에 부담을 줄일 수 있습니다. browser-image-compression 은 이미지 압축을 위해 웹 브라우저에서 실행되는 javascript 모듈입니다.공식 홈페이지에서는 이미지를 서버에 업로드하기 전에 해상도나 혹은 크기를 줄여 jpeg, png, webp 및 bmp 이미지를압축하는 데 이 모듈을 사용할 수 있다고 설명하고 있습니다. 설치npm i browser-image-compressionimport imageCompression from "browser-image-compression"; 기본 옵션const options: Options = { maxSiz..

• format_list_bulleted 라이브러리
• · 2024. 7. 15.
• textsms

React Redux

저는 주로 전역 상태관리를 recoil 로작업하고 있었습니다. 그러다 문득 redux 기능에 대해서 궁금해졌고정리해 보았습니다.사용하는 이유state 종속성 탈피우리는 useState 를 사용 할 경우 컴포넌트 내부에 state 를 만들고, 함수로 state 를 바꿉니다.그렇기 때문에 state 는 컴포넌트에 종속되는 것은 당연한 결과 입니다. redux 는 컴포넌트에 종속되지 않고, 상태관리를 컴포넌트 바깥에서 합니다.프로젝트 루트레벨에서 store 라는 곳에 state 를 저장하고, 모든 컴포넌트는 store 에 구독을 하면서 state 와 그 state 를 바꾸는 함수를 전달 받게 되죠.함수를 바꿈으로 state 가 변경되면 해당 state 를 바라보고 있는 컴포넌트는 모두 리렌더링 됩니다. 기본 ..

• format_list_bulleted React
• · 2024. 7. 10.
• textsms

React 에서 emtion 사용하기

Emotion 은 스타일링을 도와주는아주 편리한 도구 입니다. emtionEmotion은 React 애플리케이션에서 스타일링을 더욱 쉽고 유연하게 할 수 있도록 도와주는 CSS-in-JS 라이브러리입니다.Emotion은 스타일드 컴포넌트와 CSS를 JavaScript 객체로 작성하여 컴포넌트에 직접 스타일을 적용할 수 있게 해줍니다.이는 모듈화된 스타일링과 동적인 스타일링을 가능하게 해주며, CSS를 JavaScript 코드와 동일한 파일에서 관리할 수 있게 합니다 사용법npm install --save @emotion/react/** @jsxImportSource @emotion/react */import { css } from '@emotion/react';const App = () => ( ..

• format_list_bulleted 라이브러리
• · 2024. 7. 9.
• textsms

React 에서 gsap 사용하기

gsap 만으로 모든 애니메이션 기능을 만들수 있는 유용한 라이브러리 입니다. 설치npm install @gsap/react gsap 기본 사용법import gsap from 'gsap';import { ScrollTrigger } from 'gsap/ScrollTrigger';// GSAP 플러그인 등록gsap.registerPlugin(ScrollTrigger); const About = () => { useGSAP(() => {  gsap.to(".a", {   x: 400,   rotate: 360,   repeat: -1,     // 무한히 반복   yoyo: true,    // 앞뒤로 애니메이션 반복   duration: 3   // 애니메이션 시간 설정  }) })  return (  ..

• format_list_bulleted 라이브러리
• · 2024. 7. 3.
• textsms

운영체제 기본에 대해서

운영체제를 공부하다가 정리해 보았습니다.차근차근 읽어보시면 전체적인 운영체제에 대해서 너무 쉽게 이해할 수 있다고 생각합니다.운영체제 운영체제(operating system, os) 은 컴퓨터를 사용할 때 우리가 눈에 보이지 않는 곳에서 일을 처리해주는 매우 중요한 소프트웨어 입니다. 쉽게 말해, 컴퓨터의 '두뇌' 같은 역할을 합니다. 우리가 컴퓨터를 켜고 프로그램을 실행하거나 파일을 저장할 때, 이 모든 과정을 운영체제가 도와줍니다. 이렇게 말하면 음.. 운영체제가 그냥 그런 일을 하는구나 할 수 있겠지만 저는 좀 더 상세하게 들어가고 싶었습니다. 운영체제의 역할첫번 째로 운영체제는 사용자에게 컴퓨터 시스템을 편리하게 사용할 수 있는 인터페이스를 제공합니다.대표적으로 밑에 사진처럼 GUI, CLI 가 ..

• format_list_bulleted CS
• · 2024. 6. 28.
• textsms

React-native 에서 firebase 적용하기

생각보다 옛날 버전의 react-native 에서 firebase 를 적용하는 방법이 많아직접 해보고 정리해 보았습니다. https://rnfirebase.io/#3-ios-setup React Native Firebase | React Native FirebaseWelcome to React Native Firebase! To get started, you must first setup a Firebase project and install the "app" module. React Native Firebase is the officially recommended collection of packages that brings React Native support for all Firebase servi..

• format_list_bulleted React-native
• · 2024. 6. 21.
• textsms

React-native - Animation

React-native 에서 어떻게 animation 을 사용하는지알아보도록 하겠습니다. Animated핸드폰 어플을 실행하면 해당 어플이 정적인 어플보다는 동적인 어플일 가능성이 높습니다.이러한 동적인 어플들은 animation 기능을 추가했기 때문에 자유롭게 움직일 수 있고, 가시성도 좋습니다.React-native 에서 어떻게 animation 을 사용하는지 제가 공부한 내용을 정리해 보도록 하겠습니다.import { Animated } from "react-native"; react-native 에서는 자체적으로 animation 을 지원해 주는 Animated 기능이 있습니다. react-native 에서 제공하는 Animated 기능은 지켜줘야 할 규칙이 몇가지 있습니다.animation 의 ..

• format_list_bulleted React-native
• · 2024. 6. 13.
• textsms