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

React-native - 기술

React-native 를 본격적으로 배우면서 만들어본 MovieApp 의 다양한 기능들을 정리했습니다. 시작하기에 앞서 모든 파일을 typescript 로 변경하고 싶다면 이 사이트에 들어가서 Adding TypeScript to an Existing Project 챕터의 4번째 part 까지 똑같이 따라 하시면 타입스크립트 적용 ( https://reactnative.dev/docs/typescript ) Using TypeScript · React NativeTypeScript is a language which extends JavaScript by adding type definitions. New React Native projects target TypeScript by default, bu..

• format_list_bulleted React-native
• · 2024. 5. 26.
• textsms

React-native

React-native 를 공부하면서 배웠던 지식들을 정리해 보았습니다. 실행할 때 npm start -> npm run ios 따로따로 터미널에서 실행해 주어야 합니다.이유는 나중에 어플리케이션을 re-build 할 때 npm start 해준 터미널에서 r 만 눌러줘도 re - build 가 됩니다. splash-screen애플리케이션이나 웹사이트가 로드될 때 사용자에게 일시적으로 표시되는 화면을 말합니다. 일반적으로 앱이나 웹사이트가 완전히 로드되기 전에 나타나며, 사용자가 로딩 시간을 덜 느끼게 하고, 동시에 브랜드 이미지나 로고를 효과적으로 노출할 수 있는 기회를 제공합니다. 스플래시 화면모바일 앱이나 웹 애플리케이션이 시작될 때 앱이 로딩되는 동안 사용자에게 보이는 화면입니다.주로 앱의 로고, ..

• format_list_bulleted React-native
• · 2024. 5. 23.
• textsms