끄적이는 개발노트

기본적으로 Next.js에서는 next/font를 통해 기본 글꼴들을 제공해준다. 하지만 React-Native에서도 다뤘듯이 custom font를 적용하는 경우가 많기 때문에 방법을 정리한다. 1. font 파일 추가public/assets/fonts에 다운로드한 폰트를 추가한다. 2. layout 수정localfont를 사용하면 custom 폰트를 지정할 수 있다.// layout.tsximport type { Metadata } from "next";import localFont from "next/font/local";import "./globals.css";const gmarket = localFont({ src: [ { path: "../../public/assets/fo..

Next.js 에서 css를 다루는 방법에는 기본적인 built-in 방식과 Styled Component, TailwindCSS 방식이 대표적일 것이다.물론, Next.js에서는 기본적으로 create app을 할 때부터 TailwindCSS 적용 옵션을 설정하면 기본 세팅을 해줄 정도로 가장 편리하고 공식적으로 추천하는 방법이다. (본인 역시 TailwindCSS를 선호한다.) 하지만, Styled-Components 역시 아직까지 꽤나 사용되는 방법이기에 적용 방법을 정리해둔다. 1. 작동 방식Styled-Components는 css-in-js 방식으로 작동한다.CSS-in-JS?Javascript 코드 내에 css를 생성하는 로직이 담기는 방식이다.그렇기 때문에 변수에 접근이 가능하여 props와..

Node 버전을 업데이트 하는 방법은 매우 간단하다. 1. 버전 확인 node -v 2. npm 캐시 삭제 npm cache clean -f 3. Node 버전관리 플러그인 설치 npm install -g n 4. Node.js 설치 n lts n latest : 최신 n lts : lts n stable : 안정 * NPM 업데이트 추가로 npm 업데이트도 굉장히 간단한데, 마찬가지로 버전 확인 및 글로벌 설치를 진행하면 된다. npm -v npm i -g npm

보안을 위해 회원가입 시 비밀번호 암호화 작업은 필수다. 이 때, 가장 많이 사용하는 암호화 npm이 bcrypt 이다. bcrypt는 단방향 암호화로 복호화가 불가능하지만, 비교함수를 통해 검증이 가능하다. 1. 설치 yarn add bcrypt 2. 암호화 import * as bcrypt from 'bcrypt'; export const hash = async (plainText: string): Promise => { const saltOrRounds = 10; return await bcrypt.hash(plainText, saltOrRounds); }; bcrypt로 hash 되는 값은 매번 다른 값이 생성된다. saltOrRounds 는 2^10번 해싱을 반복한다는 뜻이다. 3. 비교 imp..

프로젝트를 하다보면 웹, 모바일 웹에 따라 서비스가 달라지는 경우가 있다. 예를 들어, 반응형보다는 모바일 웹에서는 컴포넌트 구성 자체가 달라지는 경우를 들 수 있다. 또한, 접속 기기에 따른 서비스 제공의 차이 혹은 정보들이 필요할 때 userAgent를 통해 접속 정보들을 확인할 수 있다. 이를 위한 방법으로, request-header 안에 담겨있는 userAgent를 통해 확인하거나, react-device-detect라는 npm을 사용하면 된다. 1. SSR (request-header) import { GetServerSideProps, GetServerSidePropsContext, NextPage } from "next"; const Home: NextPage = (props) => { c..

프론트엔드에서 쿠키를 사용하기 위해 라이브러리를 찾던 중 js-cookie를 사용했다. 일반적으로 Next.js 나 React.js에는 react-cookie를 많이들 사용하고 있었지만, 본인은 js-cookie를 선택했는데 이유는 다음과 같다. 본인에게 좀 더 사용법이 직관적 많은 사용률 지속적인 업데이트 1. 설치 yarn add js-cookie 2. 쿠키 생성 Cookies.set('name', 'value') Cookies.set('name', 'value', {expires: 7, path: '/'}) 3. 쿠키 가져오기 Cookies.get('name') 4. 쿠키 삭제 Cookies.remove('name')