개발새발 로그

1. 서버에서 렌더링한 것과 클라이언트에서 렌더링한 결과가 다르다고?다크모드를 위해 다크모드 버튼을 만들면서 생긴 상황이다.기존에 리액트에서 구현해서 그대로 사용하면 되지않을까? 했다."use client";import { ComponentProps, useEffect, useState } from "react";import Icon from "../Icon";import { cn } from "@/utils/cn";interface ThemeButton extends ComponentProps {}const ThemeButton = ({ className }: ThemeButton) => { const isLocalStorageAvailable = typeof localStorage !== "undef..

1. Class형 컴포넌트를 함수형 컴포넌트로! 나는 Toast 컴포넌트를 만들면서 Class형 컴포넌트로 먼저 개발을 했다. creatToast를 저장할 때 편할 것 같아서 사용했는데 모든 컴포넌트가 함수형 컴포넌트를 쓰는데 갑자기 클래스형을 쓰는 것이 이상했고, 클래스형 컴포넌트가 메모리 자원을 함수형 컴포넌트보다 더 사용, 클래스형 컴포넌트는 빌드 후 파일 크기가 함수형 컴포넌트보다 더 큼 React 공식문서에서 함수형 컴포넌트를 권장 등의 이유로 리팩토링을 결정했다. 정확한 함수형 컴포넌트의 장점은 아래와 같다 리랜더링 될 때의 값을 유지합니다. 즉, immutable 하다는 것. (위의 예제참고) 함수형 컴포넌트는 props에 따른 랜더링 결과를 보장받습니다. immutable한 props를 받..

개발을 하다가 yarn berry를 사용하고나서 아래와 같은 오류가 떴다 node:internal/modules/cjs/loader:1080 throw err; ^ Error: Cannot find module 'C:\Users\?좎???Desktop\FE-HandsUp\node_modules\next\dist\bin\next' at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15) at Module._load (node:internal/modules/cjs/loader:922:27) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)..

1. Icon 컴포넌트 만들기 나는 아래와 같이 id만 적어서 재사용성 높은 Icon 컴포넌트를 만들려고했다. 원래 리액트에서는 그냥 아래처럼 경로 갖고와서 use로 사용하면 됐었다. 하지만 NextJS는 조금 다르게 해야했다 일단 검색하면 svgr 패키지를 설치해라 뭐다 하는데 이 방법은 내가 원하는 방법이 아니다. 1. 폴더 최상위 경로에 public 폴더생성 2. public/assets/icon-sprite.svg 생성 3. 아래와 같이 사용 그럼 내가 원하는 id값을 넣었을 때 원하는 icon을 사용할 수 있게된다. 괜히 svgr을 설치해서 해라 이런 것때메 시간이 걸렸다..ㅠㅠ 2. svg에서 fill과 stroke 색상을 같게하려면? svg의 색상이 다크모드일 때를 생각해야돼서 fill값과 ..

일단은 오늘 만들면서 생긴 문제점들을 적어보려고한다. 1. e.nativeEvent는 뭐야? 나는 MouseMove 이벤트에서 event 값을 이용해 현재 요소를 기준으로 마우스 좌표를 가져오려고 했다. 왜냐하면 그 마우스 좌표에 따라 카드가 기울어져야했기 때문이다. 근데 offsetX를 쓰려고 하니까 event.offsetX가 안됐다. 그래서 찾아보니 nativeEvent를 중간에 사용해야 한다고 나와있었다. nativeEvent가 뭐야..? nativeEvent는 브라우저에서 제공하는 원시 이벤트 객체에 직접 접근하기 위한 도구 왜 리액트에는 nativeEvent가 있는거야? React에서 이벤트 핸들러는 브라우저에서 직접 발생한 원시(native) 이벤트가 아닌, React가 생성한 Syntheti..

한 달동안 팀프로젝트를 하면서 정말 많은 것들을 배웠다. 배운 것들을 정리하고 느낀점을 써보려고 한다! 무엇을 배웠나? 1.TanStack Query v5 2. React 3. Tailwind CSS 4. Axios 5. axios 인스턴스와 인터셉터 6. git rebase 7. GitHub Flow 전략 8. 타입스크립트 팀 프로젝트를 진행하면서 사용하고 배운 것들이다. 처음 써보는 것들도 있었고, 이전에 써봤지만 사용하면서 많이 배운 것 같았다. 배우고 나서 부족하거나 보충이 필요하다고 생각하는 부분은? 1. 리액트 쿼리..좋으면서 어려운 녀석 리액트 쿼리를 처음 써보면서 정말 많은 것들을 경험했다. 솔직히 말해서 리액트 쿼리는 정말 좋은 라이브러리였다. 비동기 요청을 할 때 정말 간편하게 사용할 ..

벌써 3달이 지났다. 이번 한달은 정말 많은 것을 배우고 중요한 경험을 했었던 것 같다. 무엇을 배웠나? 세 달 동안 배운 것 또는 했던 것들을 간단하게 나열해 보았다. 1. Vue 2. 바닐라 JS(원시 값과 객체, 스코프, 전역변수의 문제점, let,const, 프로퍼티 어트리뷰트) 3. intersection Observer 4. Nertify와 vercel에 배포하는 방법 5. Webpack과 vite, Parcel 4. React, storybook, Emotion 5. NextJS 6. Strapi 7. GraphQL Vue를 배우면서 좋은 경험들을 많이했다. 강사님께서 아주 세세하게 알려주셔서 더 집중해서 들었던 것 같다. 이번 한달동안은 아예 TIL을 작성하지 못했다. 바쁜 이유도 있었지만..

1. 사이트 들어가기https://vercel.com/docs/projects/project-configuration Configuring Projects with vercel.jsonLearn how to use vercel.json to configure and override the default behavior of Vercel from within your project.vercel.com2. ctrl + f 로 fallback 검색3.Legacy SPA Fallback 찾기4. 위 파일 복사 후 내 프로젝트에 추가하기5. 그럼 npm run vercel로 로컬서버에서 실행했을 때 동작이 되지 않는다. - 새로운 문제vercel을 통해서 서버를 열었을 때와 vitejs 내부에서 동작하는 서버가 ..