React

이전의 제로초 강의를 들으면서 만들었던 form 은 일일히 state 를 만들어 사용하거나 커스텀훅을 이용해 만들었는데, 이번엔 리액트의 react-hook-form 이라는 라이브러리를 이용해 폼을 다시 구현해보았다. state 를 만들 필요가 없고, 유효성 검사나 실

redux-toolkit: 리덕스 툴킷(redux toolkit) 은 리덕스를 불편한 점을 보완하기위해 나온 개발 도구이다. 리덕스는 복잡한 저장소 구성, 수많은 라이브러리에 대한 의존성, 그리고 하나의 작업마다 많아지는 코드양 등의 문제점이 있었다. 하지만 리덕스 툴

제로초의 NodeBird 강의 프로젝트를 직접 리뉴얼 하는중에 다음과 같은 버그를 발견했다.⇒ 게시물 작성 중 이미지를 업로드하는 기능은 type 이 file 인 input 에 onChange 이벤트를 걸고 업로드 리듀서가 디스패치되는 구조게시물을 작성하기 위해 “re

문제 상황: 관리자가 업무일지에 댓글을 등록하는 기능을 만드는 중 댓글이 등록되어 해당 댓글이 속한 리스트 데이터가 변경 되었는데, 변경된 데이터가 클라이언트 측으로 바로 갱신되지 않는 문제가 발생했다. 이 때문에 사용자가 댓글을 쓴 바로 직후 화면이 업데이트 되지 않

next 프로젝트에서 외부에서 가져오는 이미지를 업로드하는 작업 중 이미지가 안뜨는 현상이 발생했다.이미지 url 은 잘 가져와져 서버쪽 문제는 아닌것 같았고, src경로가 “/\_next/img~ 와 같이 정상적이지 않게 렌더링되어있었다.구글링 결과 그 원인은, N

텍스트를 복사하는 버튼 기능이 있어 리액트 환경 복사기능을 지원해주는 라이브러리를 활용해 아래와 같이 작업하였다.하지만 해당 버튼이 다른페이지에서도 중복 사용되어 컴포넌트로 다시 재구성하여 작업해보았다.복사가 되었다는 알림을 띄운 후 2초 뒤에

약관동의 페이지를 만들때, 아코디언 형태로 약관내용을 클릭하면 확인할 수 있도록 하고 체크박스와 제목은 보이는 구조를 만들고 싶었다.⇒ 이용약관에서 누를 수 있는 제목버튼과 체크박스는 그대로 둔 상태로, 컨텐츠만 열리고 닫히는 구조하나의 기능을 하는 컴포넌트 내 존재하

회원가입 탭에서 비밀번호를 입력 후 해당 비밀번호가 맞는지 한 번 더 확인하는 “비밀번호 확인” 인풋을 생성했다. react-hook-form 환경에서 useController 를 통해 Input 컴포넌트로 만든 상황이다.비밀번호가 맞지 않을 시 '비밀번호가 일치하지

인스타그램 클론 코딩 프로젝트 작업중, 더보기 버튼을 토글 클릭시 메뉴창이 뜨고 닫히도록 만들어놓은 상태이다. 여기서 나는 메뉴창 외의 영역에도 클릭할 시 메뉴창이 닫히도록 하고싶어했다. 찾던 내용중, 단순하게 전체영역을 태그로 감싼 후 해당 전역 태그의 onClick

개인프로젝트 중, 임의로 포커싱을 주는 작업이 필요했다. ⇒ 댓글 아이콘을 클릭하면 아래 댓글 폼이 포커싱 되도록작업은 간단했는데, useForm 의 setFocus 를 사용하면 될 일이었다. 하지만 어째서인지 포커싱이 되지 않았고, useRef 까지 사용했는데도 포커

인스타그램 클론 코딩을 하는 중, 알림 탭에서 오늘 날짜에 해당하는 컨텐츠를 필터링 해서 표시하는 작업을 하고 있었다. data 에 map 을 돌려 오늘 날짜에 해당되는 컨텐츠면 todayAlarm 이라는 state 배열에 담아지는 구조로 코드를 구현했는데, 오늘에 해

어드민 프로젝트에서 공지사항을 등록하는 페이지를 작업중이었다. 폼 작업 진행중 에디터도 구현해야했고, MUI 라이브러리에서는 따로 에디터 기능이 제공되지 않았다. 그래서 찾아보던 도중 ReactQuill 라는 툴을 알게되어 적용해보기로 했다.나는 현재 react-hoo

KCMF 의 관리자 페이지의 다운로드 기능에서 페이지에 대한 값인 파라미터(pageName)을 추가하는 작업을 진행했다. 각 페이지마다 첨부파일을 다운로드 받으면 그 이력이 남아 다운로드 이력 페이지 목록에 등록되는 과정이었는데, 백엔드 개발자분이 다운로드가 발생한게