TIL

☁️환경☁️Next.js(app router)tailwind css 현재 진행하고 있는 프로젝트에서  - 한글은 Pretendard- 영문, 숫자는 Roboto font  두가지 폰트를 사용한다. 굵기와 사이즈도 다양하게 사용된다. 이때 어떻게 최적화된 폰트를 사용할 수 있는지 정리해보려고 한다. 무엇이 정답인지 확신할 수 없기 때문에 최대한 공식문서에 맞게 진행해보자..  Pretendard 다운받기1. 아래 링크로 들어가 글꼴 다운받기 클릭 https://cactus.tistory.com/306 PretendardPretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한..

이번에 커피챗을 하기전 기업의 제품 일부분을 클론코딩 해보기로 했다.  나는 아직 실력은 부족하지만 나의 열정과 관심을 보여드리기 위한 하나의 방법이었따. 회사에서 사용하는 기술 스택에 맞춰서 조금 더 사용성이 좋도록 만든는 것이 목표!! 해당 사이트에서는 사이드 패널을 잘 사용하고 있는 것 같았다. 그래서 사이드 패널을 슬라이딩 형태로 보여주면 사용자가 봤을때 부자연스럽지 않고 자연스럽지 않을까 라고 생각했다. 당당하게 만들기 쉽지 하고 만들었는데 아래 영상처럼 띡 하고 나타났다..  원인이 뭘까 하고 css를 열심히 수정해 보았지만 개선되지 않았다.  코드는 아래와 같다. import { collapsibleStore } from "@/store/collapsibleStore";import { BsC..

☁️환경☁️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..