뚝딱뚝딱 코딩 기록_

[React_ useLayoutEffect] useEffect와 useLayoutEffect의 차이를 알아보자. 이전 회사에 재직하면서 useLayoutEffect라는 React Hook을 처음 접하게 되었다. 사실 잊고 살다가 얼마 전 면접에서 useEffect와 useLayoutEffect의 차이와 useLayoutEffect를 사용해 본 적 있냐는 질문에 다시 떠올랐다. 사용해 본 적도 없고 개념도 잘 몰라서 솔직하게 모른다고 대답하긴 했지만, 이번 기회에 공부해보는 것도 좋을 것 같아서 정리해 보려고 한다. ❓ useEffect, useLayoutEffect React Component의 Side Effect를 관리하는데 사용되는 Hooks 1️⃣ useEffect(setup, dependenci..

[Flutter_ FutureBuilder] StatefulWidget을 사용하지 않고 api를 호출하여 데이터 패칭하는 방법을 알아보자. 플러터로 앱개발을 시작한 후 StatefulWidget으로 state를 정의하고 initState에서 데이터를 불러왔다.. (리액트의 useEffect와 유사하게 사용하고 있었다.) 그런데 플러터에서는 state를 잘 사용하지 않는다고 한다. 확실히 initState를 이용하는 경우 해당 데이터의 state를 모두 생성해 주어야하고, 데이터 패칭 함수를 호출한 뒤 state를 변경해야하기 때문에 상당히 번거롭다는 생각이 들긴했다. ((추가로 함수만 다르고 동일한 패턴의 코드가 screen마다 계속 발생하는 부분이 마음에 안들기도 했다(?)ㅋㅋ)) 그런데 FutureB..

[Next13_middleware] 인증 여부에 따른 페이지 리다이렉트를 구현하고싶다@! 로그인이 되어있지 않은 유저가 접속할 때 로그인 페이지로 이동하는 과정에서 새로고침을 하는 경우에 메인 페이지가 보였다가 로그인 페이지로 이동하는 깜빡임 현상이 발생했다. 이 문제를 해결하기 위해 많은 고민을 했는데, 결론부터 이야기 하자면 cookie + Next.js의 middleware를 사용하여 해결하였다. 그래서 그동안 시도했던 방법들을 소개하려고 한다. 👉 cookie + middleware 바로 보기👈 1️⃣ localStorage 로그인 했을 때 localStorage에 로그인 정보를 저장하여 로그인 여부를 판별하는 방법이다. import {useRoute} from 'next/navigation'; ..

[Next.js_pre-rendering] Next.js의 서버 사이드 렌더링(사전 렌더링)을 통해 client로 데이터를 전달하는 과정에서 Serializing Error가 발생했다. 무슨 오류인지 찾아보니 데이터를 JSON으로 변환하는 과정에서 발생하는 오류라고 한다. 1️⃣ 원인 Next.js의 사전 렌더링 함수를 이용하여 데이터를 props로 보내는 경우 JSON 형태로 전달된다. Json은 데이터 교한을 목적으로 만들어져 특정 언어에 종속되지 않는다는 특징이 있는데, 때문에 특정 언어에 종속되는 객체는 JSON으로 변환(Serializing, 직렬화)할 수 없다고 한다. 전달하는 데이터 중 Timestamp 데이터가 존재했는데 Timestamp는 Javascript에서 Date 객체로 취급된다...

[Next_ Notion API] Next.js로 블로그를 만들던 중 어차피 노션에 프로젝트를 정리해 놓으니 게시글을 노션의 데이터베이스와 연결해서 가져오면 좋을 것 같다는 생각을 하게 되었다! 그래서 발견한 것이 바로 Notion API였는데 막상 시작해보니 생각보다 많이 복잡했다.. 방법도 여러가지가 있었는데 역시나 한번에 성공하는 법은 없었고..! 이런 저런 방법을 시도해 본 결과 드디어..! 성공했다 ㅠㅠ 막상 성공하니까 어려운 것도 아니었는데 처음 시도해본 일이어서 헤맸던 것 같다..ㅎㅎ ※ 설치할 라이브러리 - @notionhq/client를 이용하여 notion과 연결할 예정!! npm install @notionhq/client 1️⃣ 노션 API 통합 만들기 연동할 노션 워크스페이스의 통..

[React_ 절대 경로 설정하기] 지금까지는 절대 경로의 필요성을 많이 느끼지 못했는데 최근에 상대 경로로 import된 '../../../...' 이러한 것들이 신경쓰여 절대 경로를 설정하기 시작했다. - tsconfig.json // tsconfig.json { ... "compilerOptions": { ... "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } React 프로젝트를 Typescript로 세팅하고 절대경로 설정을 위해 tsconfig.json 파일에 baseUrl과 paths를 넣어주었다. Javascript로 실행할 때에는 jsconfig.json 파일만 수정하면 간단하게 해결 되었는데 Typescript에서는 경로가 없다면서 오류가 계속 발..

[React_ react-router] 리액트 프로젝트를 진행하면서 react-router v6을 사용하게 되었다. 헤더, 푸터 등 공통적으로 사용되는 컴포넌트의 중복을 줄이기 위해 createBrowserRouter와 Outlet을 사용하였다. ❔ index.tsx, router.tsx, App.tsx 파일 - router 설정 // index.tsx import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "./App"; const root = ReactDOM.createRoot( document.getElementByI..

[Next_ next dev] 드디어 Next js 공부를 시작했는데 npm run dev (next dev)를 실행하니 브라우저가 자동으로 열리지 않았다. 그래서 package.json을 위 사진처럼 수정했는데도 안열렸다. ❗ 해결 open-browser (start http://localhost:3000)를 따로 만들고 dev에서 실행되도록 하면 자동으로 브라우저가 열리는 것을 알 수 있다! 🔆내가 보려고 정리하는 Next.js🔆 👉ez1n github 구경하기👈 ez1n - Overview Front-End Developer. ez1n has 16 repositories available. Follow their code on GitHub. github.com

[Recoil] ❓ Recoil : 리액트 상태 관리 라이브러리 1. recoil 설치하기 npm install recoil or yarn add recoil 2. RecoilRoot로 컴포넌트 감싸기 - : 상태를 관리하고 사용할 상위 컴포넌트 3. Atom 생성하기 - src 디렉토리에 recoil을 생성한 뒤 state를 정의할 파일(ts / js 모두 가능)을 만든다. - 파일 이름은 임의로 정하면 된다. - key : state를 식별할 id (유일해야 함) - default : 초기 값 ❗ 각 컴포넌트에서 state를 읽고 업데이트 하는 것이 가능하다. ❗ 상태 값을 읽는 컴포넌트들은 해당 atom에 subscribe(구독) 되기 때문에 업데이트 될때마다 리렌더링이 발생한다. 3. 컴포넌트에서..

[React_ axios] 유튜브 클론 프로젝트에서 axios로 통신을 하던 중 baseURL과 api_key가 반복적으로 사용되고 있었다. 반복되는 코드를 줄이기 위해서 axios.create를 통해 instance를 생성하여 사용하기로 했다. 1. 인스턴스 생성 후 export (내보내기) - 폴더 / 파일 이름을 임의로 정하고 axios를 import한다. - axios.create({}) 안에 기본 세팅 값들을 넣어준다. ❕ baseURL : request url (요청 보낼 url) ❕ params : 기본 query params → {key: value} 형태로 넣어준다. 2. 외부에서 import 하여 사용하기 - 기존 axios를 사용하는 것과 동일하게 사용 가능하다. axios.creat..