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

React 에서 AOS 사용하는 방법

AOS는 애니메이션을 쉽게 적용해 주는 라이브러리 중 하나입니다. 기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우,AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있습니다.AOS 라이브러리는 자바스크립트를 쓰지 않고도 쉽게 사용하고 적용할 수 있는 장점이 있습니다. 근데 문득 그런 의문이 들 수도 있습니다.' 나는 motion 라이브러리를 사용하고 있는데 굳이 AOS 라이브러리를 사용해야해??' 간단하게 설명하자면 페이지가 스크롤 될 때 간단한 애니메이션을 추가하고자 할 때 유용합니다.motion 라이브러리는 고급 애니메이션 기능을 제공하기 때문에 파일 크기가 aos 라이브러리 보다 크다는 단점도 있죠.따라서 간단한 스크롤 애니메이션을 구현하게 된다면 aos 라이브러리를 사용..

• format_list_bulleted 라이브러리
• · 2024. 5. 18.
• textsms

Cookie vs Session vs JWT

보통 서버가 클라이언트 인증을 확인하는 방법은 대표적으로Cookie, Session, JWT 3가지 방법이 있습니다.Cookie , Session, JWT의 작동 방식과 단점들을 살펴보고 요즘 트렌드인 JWT 가 어떤 부분이 좋은지 알아봅시다. Cookie쿠키는 웹 브라우저에 저장되는 작은 데이터 조각으로, 클라이언트와 서버 간의 상태를 유지하거나 정보를 저장하는 데 사용합니다.쿠니는 주로 사용자 인증, 세션 관리, 사용자 환경설정 등 다양한 부분에서 활용됩니다. 쿠키의 작동 방식브라우저(클라이언트) 가 서버에 요청(접속)을 보냅니다.서버는 클라이언트의 요청에 대한 응답을 작성할 때, 클라이언트 측에 저장하고 싶은 정보를 응답 헤더의 set-cookie에 담습니다.이후 해당 클라이언트는 요청을 보낼 때마..

• format_list_bulleted CS
• · 2024. 5. 15.
• textsms

Virtual DOM 을 왜 쓰나요?

React 를 완벽하게 이해한다고 생각했지만 Virtual DOM 을 왜 쓰는건지? 자세하게는 알지 못한다고 생각해서 간단하게 정리해 봤습니다. DOMvirtual DOM 을 이해하기 전에 간단하게 DOM 이 무엇인지 짚고 넘어가겠습니다.   DOM은 Document Object Model의 약자입니다.웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미합니다. 간단히 말해, 웹 페이지의 모든 요소들을 객체로 표현하고, 이들 객체 간의 관계를 정의합니다. virtual DOM vs DOM 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업이 무겁습니다.그래서 React에서는 실제 DOM의 변경 사항을 빠르..

• format_list_bulleted CS
• · 2024. 5. 11.
• textsms

useCallback

특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다. useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면,useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다. 함수 메모이제이션useCallback 은 함수를 memoization 하기 위해서 사용되는 Hooks 함수 입니다.첫번째로 인자로 넘어온 함수를, 두번째 인자로 배열을 받습니다.이 배열은 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줍니다.const memoizedCallback = useCallback(()=>{}, []); 예를 들어, 어떤 React Component 안에 함수가 선언이 되어 있다면 이 함수는 해당 Component 가 리렌더링 될 때마다 새로운 함수를 생성하게..

• format_list_bulleted React
• · 2024. 5. 3.
• textsms