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

useMemo

useMemo 에서 memo 는 memoization 을 뜻하는데 이는 그대로 해석하면 메모리에 넣기 라는 의미이며 컴퓨터 프로그래밍이동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여실행 속도를 빠르게 하는 기술입니다.memoization기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법 입니다. 만약 어떤 함수가 있을 때 해당 함수가 들어있는 컴포넌트가 리렌더링 된다면 모든 내부 변수가 초기화 되기 때문에 함수도 다시 만들어지게 됩니다. 하지만 useMemo 를 사용한 함수는 컴포넌트가 리렌더링 된다면 memorize 된 함수를 재사용하기 때문에 함수를 새로 만들지 않습니다.설명useMemo 는..

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

Package.json, Package-lock.json

package.json package.json 내에 기재되어 있는 것은 현재 사용하고 있는 모듈이나 라이브러리에 대한 정보가 적혀 있습니다.   Package.json 의 구조  name - 프로젝트의 이름을 정의합니다.version - 프로젝트의 버전을 정의합니다.description - 프로젝트에 대한 간단한 설명을 제공합니다.main - 프로젝트의 주 진입점 파일을 정의합니다.scripts - 프로젝트에서 사용할 수 있는 스크립트를 정의합닌다.repository - 프로젝트의 Git 저장소 정보를 정의합니다.keywords - 프로젝트와 관련된 키워드를 정의할 수 있습니다.author - 프로젝트의 작성자 정보를 정의합니다.license - 프로젝트의 라이선스를 정의합니다.bugs - 프로젝트의 버..

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

useEffect

React의 useEffect 훅은 함수 컴포넌트 내에서 부수 효과(side effects)를 처리하기 위해 사용됩니다. 리액트 공식 문서에서 보면 "리액트는 side effect라는 것을 처리하기 위해 useEffect를 사용합니다."라고 적혀 있습니다.side effect일반적으로 함수 또는 프로그램의 실행이 외부 환경에 영향을 미치는 것을 의미합니다. side effect 예시데이터 가져오기: API 호출, 데이터베이스 쿼리 등의 비동기 작업을 수행할 때 사용됩니다.상태 업데이트: 특정 상태 값이 변경될 때 다른 상태 값을 업데이트하는 작업에 활용됩니다.DOM 조작: 컴포넌트가 렌더링 된 후에 DOM 요소에 접근하고 조작하는 작업을 수행할 때 사용됩니다.이벤트 리스닝: 특정 이벤트(예: 클릭, 스크..

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

React-router-dom

라우팅은 웹 애플리케이션에서 사용자가 요청한 URL에 따라 적절한 컴포넌트나 페이지를 보여주는 것을 말합니다. 웹 애플리케이션은 일반적으로 여러 개의 페이지나 화면으로 구성되어 있습니다. 브라우저의 URL이 변경될 때마다, 해당 URL에 맞는 컴포넌트를 로드하고 보여주는 것이 라우팅의 역할입니다.  쉽게 이야기 하자면, 다양한 주소의 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜 주는 작업이라고 볼 수 있습니다.마치 우체국에서 편지를 집 주소에 맞게 배달하는 것처럼 말이죠. React router dom Tag 가 있는데 왜 굳이 react-router-dom 을 사용하는 것일까요??React 의 주요 장점 중 하나는 단일 페이지 애플리케이션(SPA) 입니다.SPA 는 한번에 하나의 HTML 페이지만 ..

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