NextAuth로는 다양한 소셜 로그인(OAuth) 및 커스텀 로그인을 구현할 수 있다. Credential Providers를 통해 커스텀 로그인을 구현해 보았다. NextAuth는 기본적으로 로그인 페이지를 제공해 준다. 하지만 그대로 사용하기엔 개발 중인 웹의 테마와 어울리지 않는다. 그래서 커스텀 로그인 페이지를 만들어서 적용해 주었다. 1. [...nextauth].ts 코드 수정 // pages/api/auth/[...nextauth].ts import { connectDB } from '@/util/database' import NextAuth from 'next-auth' import CredentialsProvider from 'next-auth/providers/credentials' ..
1. MongoDB Atlas에서 DB 셋팅하기 1) 프로젝트 생성 프로젝트 이름 입력 후 다음 클릭 프로젝트에 멤버를 추가할 수 있는데 현재 나는 혼자 진행 중이기에 패스하고 생성 버튼을 클릭했다! 2) Database 생성하기 Build a Database 클릭 무료로 사용하기 위해 마지막 옵션 선택 지역을 선택한다. 현재 내 위치에서 가장 가까운 곳으로 설정해야 한다고 한다! Cluster 이름까지 기입하면 끝! (나는 이름을 뭐라고 해야 할지 모르겠어서 기본값으로 설정해 둔다...) 3) Database Setting 빌드를 마친 후, 왼쪽 사이드바에서 Database Acess로 들어가 DB 사용자를 추가한다. 아이디와 비밀번호를 설정하고, Built-in-Role을 Atlas admin으로 설..
타입스크립트로 개발하던 중 마주한 오류... 이전에 다른 프로젝트를 개발할 때, currentTarget을 대신 사용했던 기억이 있어 currentTarget을 사용해 보았는데.. currentTarget이 null로 나왔다. 같은 부모 아래에서 다른 span 태그로 테스트했을 때는 알던 대로 currentTarget과 target이 동일하게 나온 것을 보니 정확한 이유는 모르겠지만 fetch의 then 안에서 사용해서 그런 것 같다. (scope의 문제 같은...) 정확한 이유와 여기서 currentTarget을 사용하는 방법을 아신다면 댓글로 알려주시면 감사하겠습니다..!! currentTarget을 사용할 수 없어 다른 방법으로 해결해 보기로 했다. currentTarget과 target의 차이가 ..
1. Prettier 설치 npm install --save-dev prettier 2. .prettierrc.js 파일 추가module.exports = { semi: false, singleQuote: true, trailingComma: 'all',}semi: 세미콜론(;) 추가 여부, Next.JS는 기본적으로 세미콜론을 사용하지 않는다.singleQuote: 작은 따옴표(') 사용 여부, Next.JS는 기본적으로 작은 따옴표를 사용한다.trailingComma: 변경 사항을 최소화를 위해, 콤마(,)를 추가할 수 있으면 마지막에 콤마를 추가 3. 스크립트 설정 (package.json) "scripts": { … "format": "prettier --check --igno..
개발 기간 2023/05/03 ~ 2023/06/07 개발한 트위터 웹 링크 https://imdaxsz.github.io/twitter 계기 React와 TypeScript 강의를 듣고 난 후, 작은 프로젝트를 만들어봐야겠다고 생각했다. 그런 생각을 하던 찰나 Nomad Corder(노마드 코더)에서 React + Firebase로 트위터를 클론 코딩하는 강좌를 발견하게 되었다. Firebase는 학부 시절에도 백엔드로 종종 사용했던 적이 있었고(거의 기억이 나지 않았지만), 아직은 프론트엔드에 좀 더 집중하고 싶었기 때문에 백엔드는 최대한 쉽고 가볍게 하고 싶다는 생각이 있었다. 그래서 이 강좌를 수강하며 Firebase를 React에서 사용하는 방법을 배우고, 아직은 익숙하지 않은 React도 온전..
memo 컴포넌트가 재렌더링되면 내부에 있는 자식 컴포넌트는 항상 함께 재렌더링된다. 컴포넌트가 props로 동일한 결과를 렌더링한다면, memo를 호출하고 결과를 메모이징(Memoizing) 하도록 래핑하여 경우에 따라 성능을 향상할 수 있다. memo를 사용하면 react가 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용한다. const MemoizedComponent = memo(SomeComponent, arePropsEqual?) import { memo } from 'react'; const Song = memo(function Song({ title, singer }) { return ( Song title: {title} Singer: {singer} ); }); export ..
lazy import 리액트로 만드는 Single Page Application의 특징은 빌드 시 html, js 파일이 하나만 생성된다. 그 안에 지금까지 만든 모든 내용이 들어있어 파일 사이즈가 약간 크다. 이런 이유에서 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있다. 이를 개선하기 위해 코드를 분할할 수 있다. import 할 컴포넌트가 바로 렌더링 되지 않을 때, 컴포넌트가 처음 렌더링 될 때(필요할 때)까지 import를 미루는 것이다. import MarkdownPreview from './MarkdownPreview.js'; 위 코드를 아래와 같이 바꿀 수 있다. import { lazy } from 'react' const MarkdownPreview = lazy(() => i..
localStorage 문법 1. 데이터 추가, 읽기, 삭제 localStorage.setItem('데이터이름', '데이터'); localStorage.getItem('데이터이름'); localStorage.removeItem('데이터이름') 2. array/object 자료 저장 localstorage는 문자만 저장할 수 있는 공간이라 array/object를 바로 저장할 수 없다. array/object -> JSON 이렇게 변환해서 저장해야 한다. (JSON -> 문자취급) 데이터 저장 (array/object -> JSON) localStorage.setItem('obj', JSON.stringify({name:'jane'}) ); 데이터 읽기 (JSON -> array/object) var a ..
1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } 자바스크립트 if문은 return () 안의 JSX 내에서는 사용할 수 없다. if (조건) {실행문} => (X) 그래서 보통 return + JSX 전체를 가지는 if문을 사용한다. + 주로 else 생략 function Component() { if ( true ) { return 참이면 보여줄 HTML; } return null; } 2. JSX안에서 쓰는 삼항연산자 (ternary operator) function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : nu..
구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 배열 및 객체 리터럴 표현식을 사용하면 즉석에서 쉽게 데이터 뭉치를 만들 수 있다. 구조 분해 할당 구문은 이와 비슷하지만, 대신 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다. 배열 구조 분해 var [a, b, c] = [1, 2, 3]; var d, e; [d, e] = [4, 5]; // 선언이 분리되어도 구조 분해 할당 가능 var [a, b, c] = [2, 3]; // c = undefined var [a, b, c = 5] = [2, 3]; // default 값 설정 가능, 분해한 값이 undefined일 때 대신 사용 var [a, b..
