TIL

☁️환경☁️Next.js(page router)typeScriptreact-query ❓SSRServer Side Rendring 의 약자로 ssr이라고 한다.  실행될 때 가장먼저 ssr컴포넌트가 실행되고, 이후에 실행되는게 _app.tsx 부분이다.  ssr 컴포넌트에서는 console.log("getServerSideProps")_app.tsx 에서는 console.log("_app")으로 확인해보면 아래와 같이 순서가 찍혀서 나온다. 위 순서를 기억하고 아래 내용을 읽으면 조금 더 이해가 쉽다. 1. query-key 만들어주기import { getCards } from '@/remote/card'import { useQuery } from 'react-query'export default fun..

테스트로 구현체를 만들고 실제 프로젝트에 가져오니 아래와같은 에러가 생겼다. 코드를 살펴보았을 때 new 로 새로운 객체를 만들어 주고 있는데 왜 문제가 생기는지 이해하지 못했다.  그러다 컴포넌트를 import 하는 page에서 확인해 보니, 에러가 발생하고 있었다.  알고보니 Map이라고 하더라고 map 함수와 혼돈이 있어 발생되는 문제가 발생할 수 있는 것이였다. 그래서 이름을 바꾸어주니 문제없이 잘 된다.  별거 없는 나의 에러TIL

☁️개발환경☁️● Next.js 13 (page router) 강의를 보는데 dynamic을 이용해 import를 하면서 " 코드를 분리하면된다. " 라고 말을 하셨다.  도대체 그게 무슨말이지? dynamic은 뭔데? 라는 생각이 들었다. 그래서 길지 짧을지 모르는 til을 작성하게 되었다.  ❓ next/dynamic공식문서에서 dynamic을 검색하니 `react.lazy` 이라고 title에 작성되어있다.그럼 먼저 Lazy Loading이 뭔지 간단하게 살펴보자.next.js에서 lazy loading은 경로 렌더링에 필요한 javaScript의 양을 줄여서 앱의 초기 로딩 성능을 개선하는데 도움이 된다.클라이언트 컴포넌트와 가져온 라이브러리의 로딩을 지연시키고 클라이언트 측에서 실행되도록 번들 ..

☁️환경☁️- Yarn- Next.js (13version)- TypeScript 1. 설치yarn add @emotion/react @emotion/styled  2. bael 설정하기 emotion.jsx를 사용하기 위해서는 babel 설정이 필요하다.- 가장 최상위에서 `.babelrc` 파일 생성하기- 파일에 아래 코드 작성해 주기{ "presets": [ [ //기본적으로 next가 가지고 있는 babel "next/babel", { //대신 emotion.jsx 사용 설정 "preset-react": { "runtime": "automatic", "importSource": "@emotion/react" ..

다른 사람의 컴퓨터로 코드를 작성하고 git push가 필요할 때 아래 과정이 반드시 필요! 이번에 인턴을 위해 동생의 노트북을 빌리게 되었는데, 동생도 개발자라 GitHub를 사용하고 있었다. 동생의 노트북으로 코드를 작성하고 git에 push를 하였더나 왠걸  이미지에 보이는 것처럼 동생의 아이디로 commit이 올라가 있었다.  먼저 commit을 하지 않은 상태라면아래 과정을 거친 후 commit을 해주자.  commit을 하지 않은 경우1. 현재 git config 이름과 이메일 주소 확인 (본인의 것이 맞다면 push까지 진행해도 문제없다.)git config user.namegit config user.email    2. 나의 이름과 이메일 주소가 아닌 경우 변경하기git config us..

☁️환경 ☁️Next.jsTypeScriptEslint(prettier)yarn berry(pnp)emotion  ❓ yarn berryyarn 패키지 매니저의 새로운 버전으로 이전버전과는 구조적으로 변화와 새로운 기능을 도입. TypeScript로 작성되어 타입 체크가 되어있다.Table 구조로 되어있을 뿐 아니라 json 데이터 타입을 사용하기 때문에 메모리 내의 연산이 이러어저 좋은 성능을 보여준다.Plug n Play : 기존의 로컬 node_module 폴더 대신 패키지를 캐시 폴더에 저장하고, .pnp.cjs파일에 의존성을 찾을 수 있는 정보가 기록된다.  1. 설치하기설치 명령어yarn set version berry​ 2. .yarnrc.yml 설정하기아래 코드 추가하기nodeLinker:..

✅필요한 파일 다운받기 1. 아래 링크에 들어가 아래 순서대로 진행하면 된다.https://www.geoservice.co.kr/ GEOSERVICE-WEB www.geoservice.co.kr위 링크 회원가입 시 초기 50,000코인을 지급해준다. 다운로드 받을 때마다 10,000코인 씩 차감 되니 이점을 유의하여 필요한 파일을 다운받으면 된다.  2. nav바에 아카이브 선택 3. 필요한 파일 다운받기- 최신구역행정도 선택- 가장 최신 날짜 선택(글을 보고 계신 날짜 기준으로 최신 날짜 선택하시면 됩니다.)- 필요한 파일을 다운받으면 된다.   ✅json 파일로 변환하기 1. 마찬가지로 아래 링크에 들어가 순서대로 진행하면 된다.https://mapshaper.org/ mapshaperDrop, pa..

이제 실제로 migration을 만들기 전에 Prisma에 대해 조금은 알아보고 시작해보자. ❓PrismaNode.js 기반의 ORM(Object-Relational-Mapping) 도구데이터베스와 상호작용을 단순화 하고 개발 생산성을 높이는 도구SQL 쿼리를 직접 작성하지 않고 javaScript 코드로 쿼리를 작성할 수 있게 해주는 도구타입 세이프한 쿼리 작성을 통해 런타임 에러를 방지타 ORM과는 달리, 자체적인 스키마 문법을 제공해 직접 DB마이그레이션, 클라이언트 코드 생성 작업 가능 개념` Prisma Client `Node.js & TypeScript용 쿼리 작성 클라이언트 ` Prisma Migrate `마이그레이션 시스템 ` Prisma Studio `데이터베이스의 데이터를 보고 편집하는..

환경next.jstypeScriptyarnvisual studio code  1. project 만들기Supabase처음 메인에 진입시 메인에 Start Your project 를 클릭하면 아래와 같은 화면이 나온다.여기서 New project를 클릭 후 처음 회원가입한 경우 아래의 단계를 순서대로 이미 계정이 있는 경우는 두번째 이미지부터 보면 된다.  첫번째 단계: organization 만들기Name, Type of organization, pricing Plan을 모두 작성 및 선택 후 Create organization 클릭 두번째 단계: project 만들기 - 첫번째 단계에서 작성했던 Name이 Organization에 보여짐. - Database Password는 Generate a pas..

환경next.jstypeScriptyarn❓ESLint: 자바스크립트 코드 문법 오류 및 코드 스타일 가이드를 제공하기 위한 정적 코드 분석 틀이다. 자바스크립트와 JSX코드를 위한 오픈소스 린팅 유틸리티로,프로그램을 작성할 때 발생할 수 있는 오류, 버그, 스타일 오류 그리고 일관성 없는 코드 패턴을 식별해준다.코드를 분석해 잠지적인 문제를 지적해 주기 때문에 효율적이고 일관성있는 깨끗한 코드를 작성할 수 있도록 도와준다. 커스텀도 가능하다. 팀단위로 프로젝트를 진행하래 코딩 규약에 맞춰 검사 규칙을 조정할 수 있다. 예를 들면 특정 코딩 스타일을 강제하거나, 사용하지 않는 변수, 미사용 표현식 등을 경고하도록 설정할 수 있다.플러그 인을 통해 기능을 확장할 수도 있기 때문에 React 같은 기술스택에..