인스타그램 클론 프로젝트 J-Stagram 의 피드 형식 게시글 기능을 만드는 과정에서, 게시글 리스트를 불러오는 것까지 완성 후 해당 게시글의 작성자를 불러오는 작업을 진행중이었다. 이를 Supabase 의 Admin API 인 listUsers() 를 통해 현재 가

Next.js 환경에서 Supabase 의 스토리지를 연결하여 파일업로드를 하는 작업을 진행하고 있었다. 하지만 계속 400 BadRequest 가 떠서 Supabase 공식문서 및 여러 곳에서 검색을 해보았지만 명확한 원인을 찾지 못했다…🙁파일을 선택한 후 “파일업

슬라이드 배너를 만들 때, 각 요소 썸네일 이미지의 색을 추출해 배경색을 깔아달라는 디자인의 요청이 있었다. 그래서 발견한 것이 ColorThief 라는 라이브러리..!ColorThief 는 Javascript만 사용하여 이미지에서 색상 팔레트를 가져오는 라이브러리라고

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

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

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

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

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

관리자 페이지에서 공통으로 쓰이는 키워드를 관리하는 페이지를 작업했다. 주제, 장르, 오디오로 나뉘고 해당 분류에 따라 쓰이는 키워드를 추가하거나 삭제할 수 있는 기능이며, 해당 키워드들은 전역적으로 다른 페이지에도 적용이 된다.기존 데이터로 받은

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

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

단순한 퍼블리싱 업무를 맡게 되어 작업중, 기획자분께서 자신의 자리에서 로컬화면을 보고싶다 하셨다. 이제까지 리액트나 뷰 환경에서 작업을 하다가, 일반 HTML/CSS/JavaScript 같이 정적파일로만 구성된 상태에서 로컬 화면을 공유드리는 것은 처음이었다.ip 주

현재 리액트 환경에서 인스타그램 클론코딩 중이다. 인스타그램 메인 게시글의 “더보기” 버튼을 누르면 팝업이 나오는데, 거기서 “게시글로 이동” 을 누를 시 상세페이지로 이동하는데, 이 부분을 구현하려했다.하지만 게시글 상세는 두 가지의 형태를 띈다. 클라이언트 환경에서

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

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

next 프로젝트를 시작하려 초기 세팅중, 다음과 같은 eslint 에러 문구가 떴다.초기 eslintrc.json 는 다음과 같이 자동으로 설정되어있던 상황이다.next.js 초기 세팅(eslint, prettier) 관련 글을 서치하였는데, 위의 부분만으론 완벽하게

스크롤 기능을 막아야하는 상황에서 대부분은 body 에 overflow-y: hidden 을 주는 방법이 제시되지만, 그렇지 않은 경우 자바스크립트로 이를 처리해야한다.처음엔 아래와 같이 이벤트를 주었지만 작동하지 않았다 ㅠ두번째 시도로 아래와 같이 다른 이벤트에도 적

사용자 입력폼을 여러 단계로 작성할 수 있는 부분을 레이어 팝업식으로 띄어지는것이 아닌, 브라우저 상에서도 뒤로가기, 앞으로 가기가 가능한 랜딩페이지 형식으로 만들고 싶었다. 아래와 같은 사항때문이었다.4개의 페이지로 분리하면 페이지 이동 시 이전에 입력한 사용자의 입

이미 풀페이지 스크롤이 구현되어있는 상태특정 페이지내에서 슬라이드가 세로로 스크롤되는 구조로 만들어야 하는데, 풀페이지 스크롤 기능과 겹쳐 스크롤 이벤트를 구현하는데 쉽지 않았다..해당 페이지에 도달하면 body 의 스크롤을 막은 후 슬라이드를 실행하게 하고, 슬라이드

select 박스에서 품목의 종류 개수를 입력하면, 개수에 따라 input 칸이 추가되는 기능을 구현해보았다. (품목은 4개까지 입력 가능)개수를 변경시, 개수가 적어지면 적어진 개수만큼 뒤에서부터 input 삭제, 입력값이 같이 제출될 수 있으므로 그에 따른 valu