오늘의 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; }

** 번역에 의역과 오역이 충분히 있을 수 있으므로, 가능하신 분들은 그냥 아래의 링크로 가셔서 원문을 읽어보시길 추천합니다~ https://css-tricks.com/strategies-for-cache-busting-css/ Strategies for Cache-Busting CSS | CSS-Tricks Major performance gains are to be had from browser caching CSS. You ensure your server is set up to send headers that tell the browser to hang onto the CSS css-tricks.com CSS 브라우저 캐싱에서 주요 성능을 향상 시킬 수 있다. 주어진 시간동안 CSS 파일을 파악하..

알고리즘? 컴퓨터에게 내리는 지시사항을 나열한 것 시간 복잡도? 시간 복잡도는 n개의 입력 데이터에 대해 알고리즘이 문제를 해결하는데에 얼만큼의 시간(걸리는 절차 수)이 걸리는지를 나타내는 것을 말한다. 일반적으로 시간 복잡도를 나타내기 위해 점근적 표기법(asymptotic notation)을 사용한다. 점근적 표기법 - 중요하지 않은 상수와 계수들을 제거해 알고리즘의 실행 시간에서 중요한 성장률에 집중하는 방법을 의미함 점근적이라는 의미는 가장 큰 영향을 주는 요소만 계산한다는 의미 점근적 표기법에는 다음과 같은 세가지가 존재한다. 오메가 표기법(Big-Ω notation) 세타 포기법(Big-θ notation) 빅오 표기법(Big-O notation) 효율적인 방법을 고민한다는 것은 시간 복잡도를..

위와 같은 에러가 떴을 경우, 힌트로 제공된 세가지 옵션 중 하나로 상황을 해결한 적이 있을 것이다. 종종 마주치게 되는 에러인데 이번 기회에 정확히 알고 넘어가야겠다! 우선 먼저 위의 상황은 local과 remote의 싱크가 맞지 않아 브랜치가 갈라졌다는 것이다. 1. git config pull.rebase false #merge (the default strategy) 기존의 git pull 방식과 동일하다. pull을 받으면 불필요한 merge commit 이 생성된다. 3-way merge로 새로운 커밋을 만들어낸다. 2. git pull.rebase true # rebase * rebase란? 로컬에서 변경된 사항을 patch로 만들고 이를 다시 remote에 적용시키는 것을 말한다. reba..

동시에 2개의 프로젝트를 두개의 계정으로 따로 사용해야 하는 경우가 있다.회사 계정과 개인 계정을 사용해야 할때도 그렇고 프로젝트 각각 사용해야 하는 계정이 정해진 경우도 그렇다. ** tip2020년 7월 모든 Git 작업에 대해 토큰 기반 인증을 사용해야 한다고 발표했다. 2021년 8월 13일부터는 github.com에서 더이상 계정 비밀번호로 git 작업에 대한 권한을 가질 수 없었다. user.name과 user.email을 global로 하지말고 프로젝트 별로 설정해서 사용하는 방법도 괜찮다는 것을 뒤늦게 알았다....그래서 덕분에 SSH를 사용하기 위해 엄청난 시간과 공을 들여 내용을 확인하고 또 확인하고...자주 사용하던 게 아니기에 자꾸 까먹고... 계정은 또 늘어나고... 그래서 이번 ..

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

web3.eth(web3-eth package) - 이더리움 블록체인과 스마트 컨트랙트와 상호작용할 수 있다. web3.shh(web3-shh package) - broadcast를 위한 whisper 프로토콜과 상호작용할 수 있다. web3.bzz(web3-bzz package) - swarm과 상호작용하면서 파일 저장을 탈중앙화할 수 있도록 한다. web3.utils(web3-utils package) - Dapp 개발자에게 도움되는 함수를 포함하고 있다. 1. web3 provider web3 provider는 스마트 컨트랙트의 내용을 호출하거나 입력하기위해 어떤 노드와 통신해야 하는지 설정해 줘야 한다. http에서 동작하는 node를 연결하기 위해 httpProvider를 사용해 web3 객체를..

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