Next.js MetaData 심화

metadata 를 간단하게 사용하고 있다가 다양하게 사용할 수 있는 걸 알게 되어 정리해 보았습니다.  설명metadata 를 모른다면 개인적으로 조금 공부하고 오거나 제 블로그에 next.js 소개 part 부분을 읽어 보시면 좋습니다. 기본적인 metadata 활용은 아래처럼 사용 할 수 있습니다.export const metadata = { title: "next.js", description: "hello next.js"} 하지만 항상 페이지별로 metadata 를 적용하고 설명하고 추가하고 하는것은 귀찮을 수 있기 때문에 동적으로 만들 수도 있습니다.import { Metadata } from 'next';export const metadata:Metadata = { title: { t..

• format_list_bulleted Next
• · 2024. 7. 30.
• textsms

React 에서 files 다루기

React 를 통해 파일 업로드 기능을 구현하기 위해 우리는 미리 알아야할 지식이 있습니다.첫 번째는 이미지와 비디오, 오디오 파일과 같은 파일이 어떻게 이루어져 있는 지를 알아야 합니다.두 번째는 input 태그의 type 이 file 일 때 미리보기 기능의 경우 올린 파일의 URL 객체의 createObjectURL 메소드를 이용하는 것세 번째는 React 의 useRef Hook 을 사용해 직접적으로 HTML 요소의 reference 값에 접근하는 법 입니다. Blob 이란? 우리가 웹에서 객체를 다룰 때 흔히 json 이라는 형식의 key, value 쌍으로 이루어진 형식으로 다루게 됩니다.하지만 파일이나 영상 이미지와 같이 용량이 큰 파일은 어떯게 다루어야 할까요?? 우리는 웹에서 이렇게 멀티미..

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

Axios

Axios를 간단히 소개하자면 fetch() 함수처럼 request를 보내고 response를 받을 수 있는 라이브러리입니다. fetch() 함수랑 사용법은 비슷하지만 조금 더 편리하게 쓸 수 있는 라이브러리라고 생각하시면 됩니다. Axios를 설치하고 사용하는 방법에 대해 간략하게 정리한 글입니다.설치npm install axiosfetch vs axiosfetch 가 기존에 있지만 왜 axios 를 사용하는 것일까요?? 그 이유는 axios 가 더 직관적이고 생략할 수 있는 부분이 있으며 간단하게 사용할 수 있기 때문입니다.  fetchasync function getProducts() { const res = await fetch('https://www.naver.com/hello'); cons..

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

Day.js

항상 Moment.js 를 사용하다가 Day.js 를 사용해야지 라는 소리가 들려서 정리해 보았습니다. Moment.js 의 단점들Moment.js의 용량은 2.24.0버전 기준으로 235.4KB로, react-dom의 약 2.3배, vue의 3.6배만큼 크기 때문에 번들에서 Moment.js가 30%를 차지하지만 실제로 사용되는 부분도 30% 정도밖에 되지 않는 극단적인 예시 상황이 발생하기도 합니다. 그리고 Moment.js 공식문서에서도 이 라이브러리를 레거시하다고 정의하고, 더 이상의 신규 개발 없이 유지보수만 하는 상태로 전환하며 앞으로의 계획을 다음과 같이 밝혔습니다. 새로운 성능이나 기능을 추가하지 않을 예정이라는 거죠. Day.js Moment.js와 호환되는 API를 가진 경량 라이브러..

• format_list_bulleted 카테고리 없음
• · 2024. 7. 26.
• textsms

React hook form

React Hook Form은 React 애플리케이션에서 폼을 다루는 데 도움이 되는 라이브러리 중 하나입니다. 이를 통해 폼 컴포넌트의 개발과 유지 보수를 용이하게 할 수 있습니다.  React-hook-form 을 사용하면 form component 의 상태 및 유효성 검사를 관리하는데 필요한 코드 양을 대폭 줄일 수 있습니다. 저도 평소에 form 기능을 만들때 input 을 useState 로 관리하고 필요에 따라 명시적인 이벤트 핸들러를 작성하는데 React-hook-form 은 제공해주는 Hook 을 사용하여 관련 데이터를 추적하고 업데이트 할 수 있습니다. 장점간결한 API React Hook Form은 사용하기 쉽고 직관적인 API를 제공하여 복잡한 폼 로직을 단순화합니다. 기본적으로 제..

• format_list_bulleted 라이브러리
• · 2024. 7. 26.
• textsms

browser-image-compression

간단하게 이미지 압축을 위한 라이브러리 입니다.이 라이브러리를 사용하면 서버에 이미지를 업로드 하기 전에 해상도나 저장 용랼을 줄여 서버에 부담을 줄일 수 있습니다. browser-image-compression 은 이미지 압축을 위해 웹 브라우저에서 실행되는 javascript 모듈입니다.공식 홈페이지에서는 이미지를 서버에 업로드하기 전에 해상도나 혹은 크기를 줄여 jpeg, png, webp 및 bmp 이미지를압축하는 데 이 모듈을 사용할 수 있다고 설명하고 있습니다. 설치npm i browser-image-compressionimport imageCompression from "browser-image-compression"; 기본 옵션const options: Options = { maxSiz..

• format_list_bulleted 라이브러리
• · 2024. 7. 15.
• textsms

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