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

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

소플이라는 서비스에서 패널회원에 가입하는 루트를 작업하고 있었다. 패널회원에 가입하기 위해서는 로그인, 본인인증 두 가지 루트를 거쳐야 한다. 로그인이 안된 경우 로그인 페이지로 잘 리다이렉트 되는데, 본인인증의 경우 인증 후 패널 가입 페이지가 아닌

selectbox 에 스타일을 주고싶은데 Selectbox 의 경우 selectbox 태그를 사용하면 스타일을 커스텀 하는데 한계가 있기 때문에 ul, li 태그를 사용하여 option 을 구현하는등 따로 selectbox 전체를 직접 커스텀해서 구현해주어야 한다.이때

검색 AI 기능쪽에서 현재 AI 답변 결과는 컨텐츠에 따라 문단으로 분류되어 데이터가 내려오는데, 그 컨텐츠의 title 값을 한글 제목으로 치환해야 했다. 그래서 redux 의 state 값을 활용하던 중 아래와 같은 useSelector 를 사용한 쪽에서 에러가 발

검색 페이지에서 탭을 누를때마다 그에 해당하는 뉴스 목록이 나오도록 구현중이었다. 근데 여기서 하나의 문제가 발생했는데…“정책뉴스” 라는 탭의 목록 api 요청 시간이 다른 탭보다 오래걸려 요청중 다른 탭을 누르면, 다른 탭의 목록 데이터가 뿌려진 그 이후에 한 번 더

검색 AI 기능쪽에서 현재 AI 답변 결과는 컨텐츠에 따라 문단으로 분류되어 데이터가 내려오는데, 그 컨텐츠의 title 값을 한글 제목으로 치환해야 했다. 그래서 redux 의 state 값을 활용하던 중 아래와 같은 useSelector 를 사용한 쪽에서 에러가 발