사실 별거 아닌 트러블 슈팅이지만 차후 참고사항으로 쓸 수 있을 것 같아서 작성해본다.. index로 계속 문제를 겪고 있었다. 당연히 css로 해결해야하는 것 이라고 생각하고 다양한 방법으로 css를 주고 있었다. boolean 값으로도 해보고 아는 선에서 다 시도해 보았지만 index가 주어지지 않았다. const [userDotKey, setUserDotKey] = useState(() => `userDot-${Date.now()}`);결국 key값을 주고 강제로 렌더링을 할 수 있도록 해보았다. 이렇게 강제로 렌더링을 시켜 `dom`에 그려지는 순서를 조작했지만 문제는 동일한 닷 컴포넌트를 그리는 커스텀오버레이에서 hover가 되었을때와 되지 않았을때를 나누는 에서는 index를 줄 수 ..
☁️환경☁️Next.jsTypeScriptreact-kakao-map-sdk이번 쳅터에서는 코드 작성에대한 글을 작성해 보고자 한다. 멍청한 나는 kakao-map 공식문서만보고 javaScript로 필요한 기능을 모두 완성을 했는데 버그가 너무 많았다..이벤트가 제대로 작동하지 않았던.. 그러다 ` react-kakao-map-sdk ` 가 있다는 것을 알게 되었고 다시 리펙토링 하느라 고생했다^^.. 🤬🤬🤬 컴포넌트 별로 분리해서 TIL을 작성할 예정입니다. 너무 길어지기도 하고 나중에 제가 다시 보려면 그 편이 더 좋을것 같아서.. ㅎ 이쁜 코드도 아니고 실수도 많은 코드일 것 같으니 참고만 해주시면 감사하겠습니다. 파일 구조📦components ┗ 📂map ┃ ┣ 📂funtion ┃ ..
Script를 사용해 스크립트 동적 로드를 위해서 카카오맵의 load 매서드를 사용하려고 한다.또한 지도 스크립트의 로딩 및 초기화를 페이지의 상호 작용 가능한 상태와 동기화하고,페이지 성능을 최적화하기 위해 Next.js Script의 afterInteractive strategy 와 onRoad를 사용해 볼 것이다.사용 전에 Script가 무엇인지 알아보자❓Next.js Script란서버 및 클라이언트 모두에서 JavaScript 코드를 실행하고 데이터를 초기화하는데 사용되는 컴포넌트(SSR,CSR)서버에서 데이터를 미리 가져와 클라이언트로 전달하거나, 클라이언트 측에서 라우팅 또는 페이지 진입 시 특정 작업 수행 가능서버 사이드 데이터 로딩( 페이지가 서버에서 처음 렌더링 될 때 데이터 초기화하는데..
☁️환경☁️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" ..
- Total
- Today
- Yesterday
- git cache
- styled component 사용방법
- Warning: A component is changing an uncontrolled input to be controlled.
- 유효성검사
- readme 작성 방법
- 영화 별점
- readme 역할
- 에러모음집
- 별점 색채우기
- styled component 조건부 사용방법
- readme 이미지 추가 방법
- 유효성검사 css
- axios 설치하기
- readme작성해보기
- Fetch와 Axios 의 장단점
- styled component 설치방법
- axios 사용하기
- 영화별점만들기
- axios instance 작성하기
- Warning: Each child in a list should have a unique "key" prop.
- nextjs 토큰 만료처리하기
- axiosinstance 사용 시 토큰 사용 법
- axios CRUD
- Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>
- styled component GlobalStyle 사용방법
- readme 작성해야 하는 이유
- 별점만들기
- simple Icon 사용방법
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |