akjfal

RTK Query를 왜 나왔냐? 💡 결론 : 데이터 fetching과 caching 로직을 줄이기 위해서! 데이터를 가져오는데는 해줘야 할 일이 많습니다. 가져오는동안 로딩창 중복데이터 호출도 고려 최적화 캐쉬도 관리 기존엔 상태 관리와 엮어서 해결하려던 부분을 별도의 작업이라고 생각하기 시작했습니다. RTK Query는 createSlice랑 craeteAsyncThunk로 만들어진 리덕스 라이브러리입니다.. 그리고 Query를 통해서 데이터 로딩 등 컴포넌트를 만들고 화면을 구성하는데 필요한 값들을 제공해줍니다. 초기 세팅 App.tsx // 기존 Redux가 있으면 사용하면 안됩니다! function App(props) { ... return ( // ({ // 선언해두면 발동 getApi: bui..

더보기 💡 아래 내용들에 대한 Vue와 ts를 사용한 예시 코드입니다. WorkSpace와 연결하기 workspace에 접속을 한 뒤 해당 워크스페이스와 Integrations를 연결해줘야 합니다. 우측 상단 … 버튼을 눌러주도록 합니다. 연결에서 연결 추가를 클릭 한 뒤 기존에 만들었던 Integrations를 검색해서 추가해주도록 합니다. 연결 완료 시 아래 이미지와 같이 연결에 항목이 추가됩니다. Table을 통해서 Database 만들기 노션에서 테이블 생성을 할 시 아래와 같이 데이터베이스를 만들 수 있습니다. 해당 테이블은 index를 추가하거나 삭제할수도 있으며 추후 API를 통해 검색이 가능합니다. API 호출 하기 Notion API는 다양한 영역으로 나눠서 Notion의 정보를 가져오도..

개요 노션은 다양한 기능과 마크 다운 지원 언어로 편리하게 문서 작업이 가능합니다. 또한 윈도우와 맥, 안드로이드와 IOS, 크롬, 사파리, 파이어폭스 익스텐션까지 지원하고 있어 어디서든 문서 작업을 편리하게 가능해 많은 개인과 기업들이 이용하고 있습니다. 이러한 노션에서 API를 제공하기 시작했습니다. Notion Integrations는 Notion으로 할 수 있는 작업을 넓혀줍니다. Notion Integrations를 통해 프로그래밍 방식으로 Notion 데이터와 상호 작용할 수 있으므로 해당 데이터를 다른 도구에 연결하거나 Notion 내에서 워크플로를 자동화할 수 있습니다. Intergration 종류 Internal Notion Integrations 하나의 특정 작업 공간에 연결되어 워크스..

배경 프로젝트에 투입되기 1달 전 타 팀 개발자 분들이 신규 프로젝트의 에디터를 개발하면서 기술 스택과 환경들을 구축해놓은 상태였습니다. React, React Query, Sass등 대부분의 기술 스택은 사용해본 경험이 있었지만, Next13은 처음해보는 버전이 였습니다. React17에서 18로 올라가듯이 일부 기능들이 추가되는 정도라면 문제가 없지만, getStaticProps와 getServerProps가 사라지고, ‘use client’와 app Directory가 추가되는 등 완전히 다루는 방식이 달라졌기 때문에 기대 반 걱정 반 마음으로 프로젝트에 투입되었습니다. 정적과 동적 Next12에서 정적 파일의 경우 getStaticProps, 동적 파일의 경우 getServerProps를 통해서 ..

작년에 신규 프로젝트를 하면서 Nextjs를 사용하던 중 Next 13이 출시되었었습니다. 이때 당시엔 정신이 없어서 살펴보지 못했는데 옆 팀 프로젝트 마감 기한이 너무 빡빡하게 잡혀서 2달 정도 도와주게 된 프로젝트에서 Next 13을 사용하고 있다고 합니다. 이번 기회에 공식 문서를 토대로 기존 방식과 달라진 점을 살펴보려고 합니다. Next 13 New App Directory(Beta) app directory는 현재 베타 버전이고, PR에는 추천하지 않습니다. 그리고 아직 pages directory는 next/image와 next/link 등 기존의 안정된 기능들과 함께 사용할 수 있습니다. app directory는 아래 기능들은 지원합니다. Layouts : state를 유지하고 리렌더링을..

next13에서 head에 title을 변경하려고하니 방법이 많이 바뀌었습니다. 그리고 SSR, CSR에 title을 변경해주는 방식들이 다양해서 관련한 방법들을 정리해보았습니다. 해당 글에서는 title만을 설정해주고 있으나, 기타 head에 들어가는 값들은 필요한 값을 넣어주면 됩니다. github code SSR에서 head 변경 여러 페이지에 고정값 일괄 설정하기 Next13으로 넘어오면서 기존에 사용하던 방식이 아닌 Medata를 export하는 방식으로 title을 설정해줍니다. import Head from 'next/head'; /** * title이 변하지 않습니다. * @returns */ export default function Page() { return ( default page..

next.js github discussion에 질문을 올린 내용입니다. https://github.com/vercel/next.js/discussions/49433 notFound()를 사용하면서 이슈를 해결하기 위해 테스트하다보니 여러 케이스를 발견하게 되었습니다. 상세한 로직은 해당 github를 참조하시기 바랍니다. https://github.com/osydoo/next13-not-found Summary ‘use client’의 useEffect의 동작이 의존성에 따라서 다르게 동작하는 이유가 뭔가요? axios.interceptors를 동기적으로 실행했을 때는 notFound()가 에러를 뱉고, 비동기로 했을때는 동작이 무시되는 이유가 뭔가요? 클릭이벤트에선 왜 에러를 뱉나요? Case In ..

이슈 원인 Date를 통해서 오늘 날짜를 가져와 값을 비교하는 로직이 필요했습니다. 그런데 문득 new Date()와 Date()의 차이가 무엇인지 궁금해졌습니다. 동작 확인 new ***Date***(date) vs ***Date***() console.log(new Date('2023-03-27T15:40:11'), Date()); // Mon Mar 27 2023 15:40:11 GMT+0900 (한국 표준시) Fri Apr 14 2023 11:29:49 GMT+0900 (한국 표준시) console.log(Date('2023-03-27T15:40:11'), Date()); // Fri Apr 14 2023 11:30:11 GMT+0900 (한국 표준시) Fri Apr 14 2023 11:30:11..