{} 는 “코드 블록”return 없으면 무조건 undefined여러 줄 쓸 때 주로 사용그냥 {} 쓰면 블록으로 인식 → undefined객체를 반환하려면 반드시 ()로 감싸야 함❌ 잘못된 예시✅ 올바른 예시한 줄 계산식은 자동으로 반환(return 생략 가능)단순한

스타일 없이 엑셀 다운로드만 하려고 하면 간단히 구현 가능하다실제로 몇 분 안걸렸다!그때는 스타일 줄 생각을 안하고 있어서 xlsx로 진행했는데 xlsx-js-style이 xlsx 포크해서 개발된거라 api가 거의 동일하다이런 데이터를 엑셀로 추출하고 싶으면간단히는 이

node 18 버전에서는 File 타입을 사용할 경우 빌드 시 ReferenceError: File is not defined 오류가 발생한다.노드 버전을 20 이상으로 바꾸면 해결되긴 한다.근데 당장 바꿀 수 없어 다른 방식으로 해결해야 했다.zod 스키마에서 오류가

리스트 페이지에 두 가지 탭이 있는데탭은 헤더 아래에 sticky로 붙이고,스크롤 시 h1 태그 사라지고 모바일 헤더에 centerTitle 들어가게 하기safari에서 스크롤 했을 때 헤더 타이틀이 깜빡거리는 문제가 발생❌ 문제 코드 원인은 사파리 브라우저에서 스크롤

우선 갓 3개월 된 신입 개발자의 첫 에디터 사용이라 이상한 부분이 매우 많을 것 주의!

상품 상세 페이지를 작성하기 위한 에디터가 필요했고, 험난했던 과정에 대해 순차적으로 정리하고자 한다. React-Quill - 공식 문서 어떤 에디터를 사용할 지 찾아본 후 나름대로 React-Quill로 첫 선택을 했다. 그 이유는 장점 react와 호환성이 좋다. 이미지 사이즈 조절 가능 무료 라이브러리 단점 이미지 핸들러가 없다. 그 외에도 ...

Next.js 14버전에 toast-ui의 editor 3버전을 적용해보려고 한다. install 패키지 매니저는 yarn을 사용하고 있다 > node_modules에 추가됐는지 확인 사용하기 > WebEditor.tsx 작성하고 원하는 페이지에 impo

팀원이 추가되면서 협업을 위해 commit convention을 체크해주는 라이브러리를 사용했다.이에 대한 내용을 정리하고자 한다.패키지 매니저는 yarn을 사용했는데 공식문서에서 default로 제공하는 내용과 좀 차이가 있어 npm을 사용하는게 더 나을 것 같다.H

<Select> 태그를 이용하는데 옵션 선택 시 화면의 스크롤이 사라지면서화면이 깨지는 문제가 생겼었다검색 해도 다른 스크롤 이슈가 나오고 이 문제에 대한 글을 못찾겠어서클로드에 물어보니 바로 몇가지 해결방법을 알려줬다..그 중 간단하게 해결 가능한 방법은이렇게

자세히는 못파봤지만<TextField> 컴포넌트 input 어딘가에 opacity가 적용되어있어서\-webkit-text-fill-color를 설정해주니까 해결됐다.

정사각형 버튼을 만들고 싶은데 width 조절이 안돼서 찾아보니sx={{ minWidth: 'unset'} 을 사용하여 버튼의 기본 최소 너비를 제거했더니 해결됐다.

`` 컴포넌트 MUI에서 반응형 레이아웃을 제공하는 컴포넌트로 유연성이 높다. 레이아웃에는 container와 item 두 가지 유형이 있다. `가 최대 12까지 너비라고 생각하고 `의 너비를 정해주면 된다 breakpoint은 xs, sm, md, lg, xl 5가

spread 문법을 사용하면서 똑같은 배열을 왜 만들어서 활용하는지 궁금함이 생겼다React에서는 상태를 직접 변경하는 것이 아니라, 상태의 복사본을 만들어 수정한 후 그 복사본으로 상태를 업데이트하는 것이 중요한 원칙이라고 한다.성능 최적화: React는 상태가 변경

MUI에서는 Roboto 글꼴을 기본으로 제공한다Noto Sans KR 글꼴을 사용하기 위해 font face를 설정해줬다.기본적으로 layout.tsx 에서 전역으로 font 설정을 적용하고 있어서처음에는 MUI의 createTheme과 ThemeProvider를 l

next.js 14버전에서 font-family 적용하는 방법 정리app/layout.tsx

마케팅 정보 수신 동의를 위해 라디오 버튼을 생성해야했다.value가 true 일 때 체크표시로 나타내는 게 요구사항이라 이를 위해 커스텀 했다.

처음에 master 브랜치로 push 해버려서 bitbucket 저장소 삭제, .git 폴더 삭제 후 처음부터 다시 시작하려고 했다. > git pull 받았는데 해결되지 않았다. 두 저장소가 연결되지 않아서라고 > 입력했더니 해결됐다! 참고 자료 git pu

사용 배경 우리 팀은 상태관리 툴로 Zustand를 사용했다. 첫 리액트 프로젝트이다 보니 상태관리 툴을 왜 써야하는지가 와닿지 않아서 Redux 사용을 미루고 있었다. 근데 로그인 상태를 유지 시키기 위해서는 전역적으로 상태를 관리할 필요가 있다고 판단해 상태관리 툴

오픈API의 데이터를 두 개의 페이지에서 사용해야 하는 상황이었는데 axios 요청을 페이지 이동할 때 마다 보내는게 비효율적이라고 생각이 들어서 어떻게 이 문제를 해결할까 고민하다 loader라는 것을 알게되었다. react-router-dom 6.4v 부터 사용