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

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

Styled-components

React 애플리케이션에서 사용되는 CSS-in-JS 라이브러리입니다. 이 라이브러리를 사용하면 JavaScript 파일 안에서 CSS를 작성할 수 있습니다. 이러한 방식은 컴포넌트 지향 아키텍처와 잘 어울리며, CSS를 컴포넌트와 함께 유지 및 관리할 수 있도록 도와줍니다.styled-component 는 제가 제일 좋아하는 CSS-in-JS 라이브러리 입니다.  그리고 제가 가장 많이 쓰는 css 스타일 방법 중에 하나입니다. 하지만 문득 내가 진짜 styled-component 를 재대로 사용하고 있는 것이 맞을까?? 라는 의문이 생겼습니다. 그래서 좀더 자세히 공부를 하다 보니 제가 모르는 부분이 많다는 것을 느껴 제대로 styled-component 를 정리할 겸 이러한 정보들을 공유하기 위해 ..

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

useState

React 에서 상태를 관리할 때 가장 기본적인 useState 를 정리해봅니다. useState 는 가장 기본적인 상태 관리 함수로써 사용됩니다.사용법도 아주 간단하지만 세부적으로 들어가면 모르는 부분이 있을 수 있다고 생각하기 때문에 실수할 수 있는 부분을 줄이면 좋겠다 싶어 정리해 보았습니다.useStateimport { useState } from 'react';const [data, setData] = useState('initialState'); useState 를 배우면서 알아야 할 가장 중요한 부분을 미리 정리합니다. 1. useState 를 사용할 때 배열 구조 분해를 사용하여 변수의 이름을 짓는 것이 규칙입니다.2. useState() 안에 매개변수로 들어가는 것은 초기 상태로서 이 매..

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