칠구의 블로그

리액트 쿼리란 요즘 프론트엔드 개발을 하다 보면 리액트 쿼리(TanStack Qurry)를 많이 사용한다.사용하는 다양한 이유가 있지만 내가 느끼는 가장 큰 장점은 캐싱이다. 리액트 쿼리의 캐싱리액트 쿼리 캐싱은 데이터를 효율적으로 관리하여 사용자경험을 부드럽게 만드는 기능이다.즉 한번 불러온 데이터를 다시 불러오지 않고 바로 불러와 사용자경험을 향상하는 것!!주요 개념staleTime : 캐시가 신선한 상태로 유지되는 시간cacheTime : 캐시가 메모리에 남아있는 시간refetchInterval : 주기적으로 데이터 갱신실제로 사용자 경험을 향상시키는 지 확인하기육안으로 보기엔 큰 차이가 없어 보여 개발자 모드 - 네트워크를 통해 실제로캐싱이 데이터를 효율적으로 관리하는 지 살펴보았다. 리액트 쿼..

게시글 업로드 화면을 구현하던 중 인스타그램처럼 이미지를 선택하고선택한 이미지를 다른 페이지(글작성)로 전달할 때 순수 JS만 사용해서 구현해보았다.이미지를 선택하면 다른 페이지에서 선택한 이미지가 보여지는 것참고로 서버와 연동을 않고 진행했다.🤔1번째 시도 -URL 이용하기-원래 서버에 저장하여 불러오는 방법이 베스트겠지만서버와 연동을 하지 않은 작업이기 때문에 이미지 경로를 URL에 담아서화면에 보여지는 방법ex) http://~~~/write.html?imge=kakao.png  이미지 선택 페이지 (photo.html)const show_image = e => { const img_files = document.getElementById('photo-upload').files; if (img..

🔍검색 기능 리덕스 스토어에 저장되어 있는 state를Redux Toolkit를 사용해서 검색 기능을 구현해 보겠다나는 캐릭터와 무비 검색 기능을 구현했다Slice와 컴포먼트를 수정하면 된다 📁Slice 파일 수정이곳에서 검색을 할 수 있도록상태정의, 리듀서 정의 , 비동기 처리를 하면 된다// 상태 정의initialState: { movieList: [], filtermovieList: [], searchMovie: '', },여기서는 전체 데이터(movieList) + 검색 결과(filtermovieList) + 검색어(searchMovie)를 정의했다. // 리듀서reducers: { setMovieSearch: (state, action) => { state.s..

▪ Redux toolkit이란 Redux를 쉽고 편리하게 사용할 수 있도록 해주는 라이브러리다 기존 Redux를 사용할 때 설치해야 할 다양한 패키지(thunk, immer)를 설치할 필요가 없게 해 주고Action , Reducers 등등 작성해야 할 코드의 양을 줄일 수 있어 편리하게 사용할 수 있다. 「createSlice」 createSlice는 Redux toolkit의 주요 기능으로액션, 리듀서, 액션 생성기를 별도로 정의하던 것에서이 모든 것을 하나의 슬라이스로 통합해서 사용할 수 있게 해주는 함수이다  ▪ RTK를 이용한 ToDo 앱 할 일을 추가, 삭제할 수 있는 간단한 ToDo 앱을 만들어보며RTK 사용해 보기!!  기획 /todo-app├── /src│ ├── /component..

▪ Redux? 상태관리 라이브러리로웹 규모가 커지면서 관리해야 할 상태들이 많아졌고 어떤 컴포넌트에서 언제 , 어떻게 , 왜 상태를 변경했는지파악하기 위해 만들어졌다 ▪ Redux 장점 전역 상태관리를 통한 로직 간소화 Time Travel을 통한 시간 여행(쉬운 디버깅) 원본 데이터 무결성 유지 예측 가능성 ( 모든 상태 변화가 액션을 통해 이루어지기 때문)   ▪ 수많은 상태관리 라이브러리 중 Redux를 고른 이유❗❗ React와 궁합이 잘맞고가장 오래된 라이브러리로써 Redux를 잘 이해하고 다루면다른 라이브러리도 쉽게 사용할 수 있을 것이라고 생각했기 때문!! ▪ 구성 요소 Store : Redux State(데이터)들을 저장하기 위한 저장소State : Store에 저장되어 있는 데이터Act..

메서드 메서드는 특정 객체의 동작 (함수인 속성)이다 const person = { name: 'John', greet: function() { console.log('Hello, ' + this.name); }}; 이런 객체가 있을 때 메서드는 greet이다 this를 이용해서 person 객체의 name를 참조하고 콘솔에 출력하는 동작을 한다.이처럼 메서드는 특정 객체의 동작이다.   this의 특징 메서드는 this로 객체를 참조  위의 코드도 this가 name 속성에 접근하여 객체를 참조한 예시이다. 따라서 콘솔창엔 Hello, John이 출력된다  런타임에 결정되기 때문에 함수 호출 전까진 this에 값 할당 x 이런 특징 덕분에함수를 복사해 객체 간 전달할 수 있다function ..

지금까지 firebase , aws 배포를 해봤는데 그중 제일 간단하고 쉬운 깃허브 배포를 작성해 보겠다 1. npm i gh-pages 명령어  2. package.JSON 수정 3. npm run build 명령어  4. npm run deploy  5. 홈페이지 확인하기1. npm i gh-pages 명령어우선 vs 터미널에 npm i gh-pages 명령어를 입력한다 2. package.JSON package.JSON에 들어가서 "homepage" : "내 레포 주소"를 추가해 주면 된다다음 scripts안에 "deploy" : "gh-pages -d build" 추가 3. npm run build내 폴더 빌드하기!!build 폴더가 생성됐다면 성공적으로 끝난 것  4. npm run deplo..

인프런에서 NodeJS 강의를 들은 후 디렉토리 구조와 디비연동 같은 부분을 복습 겸 내것으로 만들고 싶어서 인스타그램 구현을 해보았다이름하여 노드js + 인스타그램인 노드스타그램 🤣🤣 [지금 무료] Node.js 노드 빠르게 훑어보기: 서버부터 DB까지 | 제주코딩베이스캠프 - 인프런제주코딩베이스캠프 | 웹 서버 개발을 경험해보고 싶으신가요? 비전공자, 프론트엔드 개발자 모두 서버 개발로 첫 걸음을 내딛을 수 있게 도와드리겠습니다. 익숙한 자바스크립트 문법으로 서www.inflearn.com내가 들었던 인프런 강의 ☝️☝️ 사용 기술 사용된 모듈"@socket.io/cluster-adapter": "^0.2.2",  "@types/node": "^20.11.24",  "bcrypt": "^5.1.1..

그리디 알고리즘 : 욕심내서 풀어보기 그리디는 욕심 ,탐욕이런 뜻으로 문제 해결에 있어 가장 좋아보이는 것을 선택하여 구하는 것이다. 결론적으로는 최적해는 아니고 근사해를 구하는 방법이다. 거스름돈 [문제] 음식점의 계산을 돕는 점원이 있다. 거슬러 주어야 할 돈이 1260원일 때 거슬러 주어야 할 동전의 최소 개수를 구하세요. [참고] 500원, 100원, 50원, 10원짜리 동전은 무한이 존재한다. 거슬러 주어야 할 동전의 최소 개수이니 가장 큰 돈인 500원부터 거슬러 주는 경우로 문제를 풀어보자 function soultion(n) { n = 1260; const coinTypes = [500, 100, 50, 10]; // 동전의 종류 let mincoin = 0; // 최소 동전의 개수 let..

1. split split은 "분열돼다"라는 뜻으로 문자열을 배열로 나누는 데 사용된다. // , 를 기준으로 분열 let num = "1,2,3"; let newnum = num.split(','); console.log(newnum); //[ '1', '2', '3' ] //공백을 기준으로 분열 let num = "1 2 3"; let newnum = num.split(' '); console.log(newnum); //[ '1', '2', '3' ] //5번째까지만 분열 let num = "123456789"; let newnum = num.split('',5); console.log(newnum); //[ '1', '2', '3', '4', '5' ] 2. filter filter는 "거르다" 라..