전체 글

대략 코드작성 및 배포를 마치고, 제가 코드 작성 시 마주했던 문제점들에 대해 하나씩 정리해볼까 합니다.. 저는 이미지 미리보기를 구현해야했는데, type이 file인 input을 클릭 후 이미지를 올리면 이미지가 보이지 않는 문제를 마주했었습니다. 그래서 input을 통해 받아오는 이미지의 형태가 어떤건지 콘솔에 찍어보았더니, 파일형식으로 이미지를 받아오는 것을 확인할 수 있었습니다. 처음 접해보는 파일 형식.. 이게 무엇인가..? 이 객체 형태 그대로 img 태그의 src속성으로 직접적으로 주입하니 이미지가 보이지 않았습니다. 그래서 이게 왜그런가..? 그리고 대충인터넷을 뒤적거렸더니 base 64 로 변환해서 주입해야한다는 블로그 글을 보고 해결을 하긴 했지만, 어떻게 제가 해결했는지 이해가 되지 ..

오전9시부터-24시 회의하는.. 요즘.. 회의가 끝나면 늘 리액트 쿼리를 공부하고 있습니다.. 저는 정말 자고 싶었지만 지금 정리하지 않으면 하지 않을 것 같아 자리에 앉아 스타벅스 핑크 드링크를 쪽쪽마시며.. 게시글을 적어봅니다.. 먼저 메인프로젝트 기간 동안 캐러셀을 구현해야했던 저는.. 라이브러리를 선택하고야 말았읍니다. 시간이 너무 짧았기에 좋은 캐러셀 라이브러리를 찾다가 편리하고 유용하게 커스텀이 되는 Swiper 라이브러리를 활용하게 되었습니다. 지금은 가로로 넘어가는 캐러셀을 구현을 위해 사용했지만 추후에 세로로도 넘어가는 캐러셀을 구현해야했기때문에 쉽게 세로로도 커스텀이 가능한 Swiper 라이브러리를 선택하였습니다. ● 첫 번째 역경.. Swiper Swiper - The Most Mod..

프로젝트를 진행하다가, svg파일의 border와 색을 칠할 수 없을까? 그런 생각을 문득 했읍니다.. 위는 제가 활용하던 svg 파일인데요, import { ReactComponent as Close } from '../../../assets/button/close.svg'; 이런식으로 파일상단에서 불러올 svg파일을 컴포넌트로 불러와주었습니다. 저는 vite 환경에서 진행했으며, 'vite-plugin-svgr' 플러그인을 설치하고 svg파일을 컴포넌트로 불러와주었습니다. 이후, 코드에서 컴포넌트로 삽입후 어떻게 stroke와 fill값을 변경할 수 있을까 찾아보았는데, path 태그에 fill, stroke 프로퍼티를 추가해주면 되었습니다. 프로퍼티는 각각, fill, stroke로 주어야합니다. ..

내 질문 React 쿼리에서 staleTime이 3분이고 casheTime이 2분일 때, 한 번 API 요청을 하고 2분 30초에 동일한 API 요청을 하면, 2분의 casheTime이 지났기 때문에 다시 API 요청을 하나요? GPT답변 React Query에서 staleTime 및 cacheTime 옵션은 API 엔드포인트에서 데이터를 캐싱하고 다시 가져오는 동작을 제어합니다. 예에서 staleTime이 3분으로 설정되고 cacheTime이 2분으로 설정된 경우 캐싱 및 다시 가져오기가 작동하는 방식은 다음과 같습니다. 초기 API 요청: 첫 번째 API 요청을 하면 React Query가 API에서 데이터를 가져와서 캐시에 저장합니다. 2분 ~ 30초 ~ 3분 사이: 이 시간 프레임 내에 동일한 A..

드디어 프리프로젝트가 종료되었습니다..! 정말 다사다난했고.. 실제로 배포하는 과정까지 거치면서 너무 힘들었던.. 일주일이었습니다. 막상 처음에 기획을 하려니, 어떻게 해야할지 막막해서 이전 기수분들이 진행하셨던 리포지토리를 자주 방문하면서 봤던 것 같아요. 아래는 저희팀의 리포지토리입니다. GitHub - codestates-seb/seb44_pre_015 Contribute to codestates-seb/seb44_pre_015 development by creating an account on GitHub. github.com 프리프로젝트를 진행하면서 제일 크게 느낀 것은 두 가지 였습니다••• 1) 일은역시.. 커뮤니케이션이 전부다.. 2) 안되는 건 없다.. 프로젝트를 진행하면서 처음으로 백..

● Vite 환경에서 eslint, prettier 적용해보기 (airbnb 모드로 설정하기) 먼저 vite 프로젝트를 설치해주었습니다. npm create vite@latest ❍ eslint 적용하기 vite를 설치하고 나니까 기본적으로 eslint가 적용되어 있었는데요, eslint의 기본설정인 eslint:recommended와 react환경과 관련된 플러그인들이 extends에 설정되어있었습니다. eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh 대체 이 플러그인들이 무엇인가.. 현타가 왓읍니다.. eslint:recommended는 초기 설정입니다. eslint-plugin-react : eslint에 대한 리..