React 9

[인증 Framework] NextAuth야 너 뭐니?

2FA 도입 배경과 NextAuth 선정최초 계획은 이러했다.소셜 로그인 구현2FA 보안 강화이에 Next.js와의 통합성과 세션 관리 기능, 커스텀 인증 플로우 지원 등의 이유로 기능 구현에 있어 NextAuth를 선택(당)했다. NextAuth는 로그인 인증 및 세션 관리에 중점을 둔 인증 프레임워크로, 2FA와 같은 특정 인증 방식을 직접 제공하지는 않지만, 이를 기반으로 커스텀 구현이 가능하여 프로젝트 요구사항에 잘 부합한다고 보였다. 이미 구현을 위한 모든 준비를 끝냈을 때!! 소셜 로그인 기능을 제외시키고 이메일 로그인을 사용하기로 변경(당)했다. 2FA 구현 방법OTP(One-Time Password)시간 기반 일회용 비밀번호(TOTP)를 사용하여 사용자에게 동적 비밀번호를 제공.Google..

React 2024.12.19

[Next.js] 로컬은 폰트 로드되는데 프로덕션은 로드 안됨(Development VS Production 간단 설명)

프로젝트 진행 중 한번은 개발(이하 로컬)에서는 멀쩡히 가져오던 font 소스가 Production(이하 프로덕션)에서는 제대로 가져오지도 적용하지도 못한 이슈를 확인해 본 적이 있다. 프로젝트 구성Next.js 14React 18(page router)font: Pretendard, Montserrat 신규 배포가 아니라 이미 3개월 동안은 font가 제대로 사용되고 있었던 지라 당최 이유가 뭔지 알 수 없었다.적용 코드.font를 global.scss 파일에서 cdn import 함. 로컬에서 실행 시에는 network를 통해 font 다운로드가 확인됨.사용 CDNhttps://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pre..

React 2024.10.14

web3-react 기본 개념 정리(+web3.js)

web3.js 란? 자바스크립트 기반으로 이더리움 Dapp이나 서비스를 구현할 때 사용되고 통신을 위하여 JSON-RPC API를 호출한다. 구조도는 아래 이미지 참고 기능 web3.js는 내부적으로 HTTP나 IPC를 통해 JSON RPC API를 호출하도록 되어 있다. 이더리움 네트워크는 노드로 구성되어 있고, 각 노드는 블록체인의 복사본으로 가지고 있다. 만약, 스마트 컨트랙트의 함수를 실행하고자 한다면 노드에 질의를 보내 아래의 세가지 정보를 전달해야 한다. 스마트 컨트랙트 주소 실행할 함수 함수에 전달할 변수들 이더리움의 노드들은 JSON-RPC로만 소통할 수 있고, 이는 개발자에게 불편한 일이기 때문에 web3.js는 개발자들이 쉽고 편리하게 자바스크립트 인터페이스로 상호작용할 수 있도록 해준..

React 2022.09.01

[React.js] Function Component vs Class Component

React 컴포넌트를 선언하는 방식은 두가지가 있다. 함수형(Function)과 클래스형(Class)이 있는데 이 두가지의 차이점을 비교해보며 내가 구현하고자 하는 목적에 적합한 방식으로 컴포넌트를 선언해 사용하길 바란다. 기본적으로 함수형과 클래스형의 동작은 동일하다. 하지만 클래스형 컴포넌트가 함수형보다 더 많은 기능을 제공해주는 것이 가장 큰 차이점이다. 클래스형은 state를 이용한 상태를 나타내거나 라이프사이클(LifeCycle)에 정의된 메서드를 이용해 원하는 순서에 특정한 동작도 할 수 있어 과거에는 클래스형을 많이 사용했지만 2019년 v16.8부터 함수형 컴포넌트에 리액트 훅(hook) 함께 사용할 것을 권장하고 있다. [함수형 컴포넌트를 선호하는 이유] 클래스형 컴포넌트는 로직과 상태를..

React 2022.08.30

import 중괄호 {}의 의미

import React, { render } from 'react'; 차이점은 보내주는 export 방식의 차이라고 한다. 모듈을 불러올 때 import를 해주는 것처럼 해당 모듈을 다른 파일에 보내려면 export라고 명시적으로 써줘야 한다. export 시 default를 붙인 경우 중괄호 없이 import가 가능하지만, default 없이 export한 경우, 중괄호 안에 담아 import를 해주면 된다. 만약, default 없이 export한 경우, 중괄호를 빼먹을 경우 에러가 발생한다. 예시. // App.js const react = 1; const vue = 2; export { react }; export const angular = 3; export default vue; react, ..

React 2022.08.25

React + Typescript

우선, typescript를 global로 설치한다. yarn global add typescript npm install -g typescript 설치 후 아래의 명령어를 입력하면 tsconfig.json 파일이 자동 생성된다. npx tsc --init tsconfig란? Typescript로 작성된 코드는 Javascript로 변환해줄 트랜스파일러(컴파일러)가 필요하며 이런 컴파일 과정에서 사용자가 필요한 여러 옵션을 설정한 파일이 tsconfig.json 파일이다. tsconfig.json 컴파일 옵션 정리 { "compilerOptions": { /* 기본 옵션 */ "target": "es5", /* 사용할 특정 ECMAScript 버전 설정 (예시, es5 지정 시 화살표 함수는 일반 fun..

React 2022.05.10

React-Router V6로 업데이트 하면서 달라진 점

클론 코딩 책을 보고 따라하던 중 기재된 내용과는 다르게 자꾸 에러가 나는 상황이 발생했다. 아무래도 책이다보니 출판 후 업데이트 되기가... ㅎㅎ React-router가 v6로 업데이트 되어 생기는 에러가 대다수였다. 최신 뉴스는 아니었지만 그동안 React에 소홀했던 나에겐(반성반성😑 ) 당황스러웠다. 내용을 잊지 않기 위해 정리해본다. Migration 프로세스 1. React V16.8 이상으로 업그레이드 2. React Router V5.1 이상으로 업그레이드 내부의 모두 제거 커스텀 리팩토링 - components나 render 속성을 사용하는 대신 children 속성 사용 3. React Router V6으로 업그레이드 V6버전은 V5버전 대비 번들 사이즈가 많이 줄었다고 한다. (이전 ..

React 2022.04.29

[Error] ... is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

React-router-dom이 v6.0.2로 업데이트 됨에 따라 문법을 사용할 수 없게 되고 제목처럼 에러가 발생하게 된다. 업데이트 전 코드 const App = () => { return ( ) } 업데이트 후 코드 const App = () => { return ( ) } useHistory 또한 오류가 나는데 useNavigate로 변경해서 사용하면 된다~ 업데이트 전 코드 import { useHistory } from "react-router-dom"; const history = useHistory(); 업데이트 후 코드 import { useNavigate } from "react-router-dom"; const history = useNavigate();

React 2022.02.22

[error] firebase 오류 - firebase import가 안됨

firebase에 프로젝트를 등록하고, 진행중인 React 프로젝트에 등록한 후 npm run start 실행했더니 index.js에서 error가 떴다 검색해봤더니 firebase 버전에 따라 import를 달리 써주더라 firebase 8버전 이하 import firebase from 'firebase/app'; import 'firebase/auth'; import 'firebase/firestore'; firebase 9버전 이상 import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; package.json 파일에서 확인한 firebase가 9버전이길래 버..

React 2022.02.21