오늘의 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..

긴 설명은 필요 없다.:empty 가상 클래스는 자식이 전혀 없는 요소에 적용하는 선택자이다. 요소 안에 주석이 있어도 가능하다.하지만, 공백이 있으면 적용되지 않으므로 주의해야 한다. p:empty { color: red; }

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) 함께 사용할 것을 권장하고 있다. [함수형 컴포넌트를 선호하는 이유] 클래스형 컴포넌트는 로직과 상태를..

자바스크립트의 비동기 처리는 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드 먼저 실행하는 자바스크립트의 특성을 의미한다. 비동기 처리 사례 1. Ajax Web API 요청 : 서버쪽에서 데이터를 받아와야 하는 경우 function getData() { var tableData; $.get('https://domain.com/products/1', function(response) { tableData = response; }) return tableData; } console.log(getData()); // undefined $.get()은 jquery의 ajax 통신 부분으로 url로 HTTP GET 요청을 날려 1번에 대한 정보를 요청하는 코드이다. 이렇게 서버에서 받아온 ..

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

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이 때 생성된 함수 실행 컨텍스트는 콜스택에 추가되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 함수 실행 컨텍스트는 콜스택에서 제거된다. 함수의 실행 순서는 실행 컨텍스트 스택으로 관리하며 이는 뒤이어 설명할 동기, 비동기와도 밀접하게 연관되어 있다. 실행 컨텍스트(execution context) 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보를 모아놓은 객체이다. 실행 컨텍스트가 활성화되는 시점에는 다음과 같은 현상이 발생한다. 호이스팅이 발생한다.(선언된 변수(var)를 위로 끌어올린다) 외부 환경 정보를 구성한다. this의 값을 설정한다. 실행 컨텍스트의 구성 실행 컨텍스트는 코드를 실행할 때 필요한 환경 정보를 ..

MDN의 공식문서에 따르면 REST는 효율적, 안정적이며 확장 가능한 분산 시스템을 구현하는 소프트웨어 아키텍처 설계 제약의 모음을 나타낸다고 하며, 그 제약들을 준수했을 때 그 시스템은 RESTful하다고 일컬어진다고 한다. REST에 대한 설명 글은 많이 있지만, 사실 딱하니 머리속에 박히지 않았다. 알것도 같고 모를 것도 같고... 그러다 찾은 설명으로 REST는 HTTP URI를 통해 자원(resource)를 명시하고 HTTP Method(POST, GET.. etc)를 통해 해당 자원에 대한 CRUD operation을 적용하는 것으로 REST의 중심에 자원(resource)이 있고 HTTP Method를 통해 자원을 처리하도록 설계된 아키텍처를 의미한다고 했다. 웹에 존재하는 모든 자원(이미지..

JavaScript 객체의 분류 1) 표준 빌트인 객체 (standard built-in objects/native objects/global objects) ECMAScript 사양에 정의된 객체로 전역의 공통 기능을 제공한다. 표준 빌트인 객체(표준 내장 객체)는 전역 객체의 프로퍼티로 제공되며 별도의 선언없이 전역 변수처럼 언제나 참조할 수 있다. 2) 호스트 객체 (host objects) 자바스크립트 환경(브라우저 or Node.js 환경)에서 추가로 제공하는 객체를 말한다. 브라우저 환경에서는 클라이언트 사이트 Web API를 호스트 객체로 제공한다. (Web API 예시 - DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SV..