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

Next.js - 경로

usePathnameusePathname 은 현재 URL 경로를 가져와 주는 기능 입니다.usePathname 을 사용하려면 클라이언트 컴포넌트 이기 때문에 "use client" 를 사용하셔야 합니다."use client"import React from 'react'import Link from 'next/link'import { usePathname } from 'next/navigation'import '@/styles/styles.css'const Navigater = () => { const path = usePathname(); return ( Home About )}export default Navigater // 똑같습니다. 원하는 형식에 맞춰서 사용하..

• format_list_bulleted Next
• · 2024. 5. 21.
• textsms

Next.js

Next.js는 React 기반의 웹 프레임워크로, 서버 사이드 렌더링과 정적 페이지 생성을 지원하여 성능을 향상시키고, 개발자들이 간편하게 웹 애플리케이션을 구축할 수 있도록 도와줍니다.시작하기npx create-next-app@latest 위에 명령어를 입력하면 이러한 문구가 보이실 것입니다. 이때 자기가 원하는 기능에 맞춰 No / Yes 를 누르시면 됩니다.파란색으로 칠한 건 제가 원하는 기능에 맞춰 고른 부분이라 신경쓰지 않으셔도 됩니다.What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwin..

• format_list_bulleted Next
• · 2024. 5. 21.
• textsms