행복을 담는 블로그

supabase를 이용해서 로그인 기능을 구현했는데, 로그인할 때 등록한 user의 email, nickname, profileImage 를 다른 팀원분들도 사용할 수 있게 전역상태로 관리하기로 했다. 전역 상태 관리로 zustand를 사용하였다. zustand 공식문서 확인 https://zustand-demo.pmnd.rs/ 1. store를 생성하여 전역으로 관리할 데이터를 설정해준다. /* app > _store > authStore.tsx */ export const useUserInfoStore = create()((set) => ({ email: null, nickname: null, profileImage: null, setUser: (userInfo) => set(userInfo), })..

새로운 방법도 시도해보자! yarn berry : yarn의 업그레이드 버전 pnpm : npm의 업그레이드 버전 import alias (@/) : customizing 할거냐 물어보는 것! next.js 프레임워크 설치 시, supabase를 함께 설치하기 yarn create-next-app -e with supabase redirect : useRoute 에서 사용가능 / id가 아닌 다른 값을 넣었을 때 home으로 가는 기능 가능 🚨Supabase Error 429 : Too Many Request supabase로 로그인/회원가입 기능을 구현하다가 이메일을 사용하는데 계속해서 429 error가 났다. firebase 처럼 할당량이 있어서 api key 문제인가 싶었는데, 처음에는 내가 계속..

4. Rendering v12 v.s. v13 차이? Next.js 왜 쓰셨어요? : 렌더링 패턴으로 대답하자. CSR, SSR, ISR, SSG next.js 12버전 : 렌더링 방식이 page 단위로 렌더링 방식 규정함 next.js 13버전 : react 18버전에서 제시한 서버컴포넌트/ 클라이언트컴포넌트 를 적용하여 component 단위 렌더링 방식을 규정 기본적으로 app 폴터 하위 모든 컴포넌트는 서버컴포넌트이다 (그냥 외우자) "use client" 표시가 없다면 모두 서버 컴포넌트다. 내가 쓰는 터미널 = 웹 서버 = 소소코드가 돌아가는 환경이 서버컴포넌트 = runtime environment : node.js 환경 브라우저에서 콘솔 안 떠 -> "use client"를 쓰는 순간 브라..

3. Routing Next.js 프로젝트 시작하기 1) Next.js 프레임워크 설치하기 npx create-next-app@latest yarn create-next-app@latest ▶️ 프레임워크답게 필요한 라이브러리를 한 번에 설치 할 수 있다! 2) 폴더 구조 살펴보기 : .eslintrc.json, next.config.mjs,package.json, tailwind.config.ts, tsconfig.json 등 필요한 파일일 모두 생성된 것을 확인 할 수 있다. ▶️ src 폴더 > app 폴더 안에 layout.tsx, page.tsx 파일이 존재한다. ✅ layout.tsx 파일 : Metadata를 가지고 있는 파일로, title을 변경할 수 있으며, RootLayout을 가지고 ..

1. Next.js란? : React.js를 기반으로 만들어진 프레임워크이다. 풀스택이 가능하다. 백엔드 기능까지 가능 by Route Handler (1) Next.js는 React.js를 기반으로 만들어진 프레임워크이다. 프레임워크 : 모든게 세팅된 상태로 사용가능 라이브러리 : 내가 직접 다 세팅해야함 Next.js는 웹에 대한 리액트 프레임워크이다. 풀스택 웹 어플리케이션을 만들 수 있는 역할을 한다. 📌 프레임워크(Framework) v.s. 라이브러리(Library) (면접 단골 질문) ✅ 프레임워크(Framework) : 개발자가 기능 구현에만 "딱" 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 기술의 조합 ex) Spring Framework : Java 기반 웹(백엔트) 프..

5. Passing Props 예시 1) props로 {count}를 넘겨줄 때, type을 함께 지정해준다. {count} : {count : string} import { useState } from "react"; function Parent() { const [count, setCount] = useState(""); return ; } function Child({ count }: {count: string) { return {count}; } export default Parent; 예시 2) import { useState } from "react"; function Parent(){...} type Props = { count: string; }; function Child({ count ..

React + TS 1. 함수에서 TS 사용하기 방법 1) function sum(a: number, b: number): number { return a + b; } ▶️ 매개변수 각각의 type을 지정해주고, return문의 type을 지정 방법 2) function objSum({ a, b }: { a: number; b: number }): string { return `${a + b}`; } ▶️ object를 인자로 받을 경우, { a, b }: { a: number; b: number } 각각의 type을 지정. 2. 비동기 함수에서 TS 사용하기 1️⃣ Person의 타입을 지정해준다. type Person = { id: number; age: number; height: number };..

enum v.s. object literal 비교해보기 enum : 열거형 데이터 타입으로, 상수의 그룹화를 할 수 있는 아주 좋은 타입이다. ✅ enum의 장점 코드의 가독성을 높이고, 명확한 상수 값을 정의할 수 있다. 컴파일 시, 자동의 숫자 값이 할당되므로 따로 값을 할당할 필요가 없다! enum UserRole { ADMIN = "ADMIN", EDITOR = "EDITOR", USER = "USER", } enum UserLevel { NOT_OPERATOR, // 0 OPERATOR // 1 } function checkPermission(userRole: UserRole, userLevel: UserLevel): void { if (userLevel === UserLevel.NOT_OPER..