우선 갓 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 부터 사용

로그인 한 번 하고나니까 그래도 좀 수월했는데 input 코드가 너무 반복되어서 컴포넌트로 빼서 했더니 하나가 동작하면 다른게 안되고 그거 고치면 또 다른 문제가 생기고 너무 복잡해져서 그냥 로그인과 비슷하게 구현하려고 수정했다. Ver1 > pages/Signup

npm install react-router-dom 모듈 설치드릅게 어려워 죽겄네...

처음에 서버측 url로 axios 요청 보내기 위해 .env.development와 같은 파일 생성해야한다는 것을 깜빡하고 왜 안되지 하면서 몇시간을 날렸다위의 코드로 파일 생성한 후 process.env로 접근하려고 하니까 빨간 밑줄이 생기면서 오류가 발생했다 후..

`` IconProps 오류 fontawesome 사용을 위해 아래의 모듈을 설치했다 > 눈 모양 아이콘을 사용하기 위해 아래의 코드를 작성했는데 원하는 옵션의 아이콘이 나오지 않았다. > 그래서 옵션이 적힌 버전의 코드(``)를 넣었더니 아래의 오류가 나타났다

fontawesome 사용을 위해 아래의 모듈을 설치했다눈 모양 아이콘을 사용하기 위해 아래의 코드를 작성했는데 원하는 옵션의 아이콘이 나오지 않았다.그래서 옵션이 적힌 버전의 코드(<FontAwesomeIcon icon="fa-thin fa-eye" />)를 넣