오늘의 CODE

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

프로젝트 진행 중 한번은 개발(이하 로컬)에서는 멀쩡히 가져오던 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..

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

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

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, ..

우선, 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-router가 v6로 업데이트 되어 생기는 에러가 대다수였다. 최신 뉴스는 아니었지만 그동안 React에 소홀했던 나에겐(반성반성😑 ) 당황스러웠다. 내용을 잊지 않기 위해 정리해본다. Migration 프로세스 1. React V16.8 이상으로 업그레이드 2. React Router V5.1 이상으로 업그레이드 내부의 모두 제거 커스텀 리팩토링 - components나 render 속성을 사용하는 대신 children 속성 사용 3. React Router V6으로 업그레이드 V6버전은 V5버전 대비 번들 사이즈가 많이 줄었다고 한다. (이전 ..

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();

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버전이길래 버..