JavaScript/React11 [React] React query 사용해 보기 React query 리액트에서 상태 관리 라이브러리 중 하나로, 강력한 비동기 상태 관리를 지원한다. 리액트 쿼리의 기능은 다음과 같다. Backend agnostic: 백엔드에 종속되지 않음 Dedicated Devtools: 전용 개발 도구 Auto Caching: 자동 캐싱 Auto Refetching: 자동 재요청 Window Focus Refetching: 창 포커스 시 자동 재요청 Polling/Realtime Queries: 폴링/실시간 쿼리 Parallel Queries: 병렬 쿼리 Dependent Queries: 의존성 있는 쿼리 Mutations API: 뮤테이션 APIAutomatic Garbage Collection: 자동 쓰레기 수집 Paginated/Cursor Queries.. 2023. 5. 2. [React] React-router-dom이란 무엇인가? Rounting이란? : Rounting : 경로 선택, 경로 결정 : 해당하는 페이지로 이동하기 위해 새로운 URL로 서버에 요청을 하면 그 응답으로 data를 받아 새로운 페이지를 보여주는 것, 즉 해당 경로의 페이지로 이동하는 것을 의미한다. 1. 일반적인 Routing 서버에 URL로 새로운 페이지 전체(html, css, js, img 등)를 요청해서 응답 받은 새 페이지를 업데이트 한다. 2. React Router = CSR(Client Side Routing) 서버에 URL로 새로운 페이지를 요청하는 것이 아니라 페이지는 유지하되, Application에서 업데이트가 필요한 부분만, 경로에 해당하는 컴포넌트만 부분적으로 업데이트하고, 부분적으로 네트워크 통신(fetch 등)하여 JSON 형.. 2023. 4. 21. 리덕스(Redux)의 이해 및 활용해 보기 리덕스(Redux) ✅ 1. 리덕스란 무엇인가? = 전역 상태관리 패키지 라이브러리 '중앙 State 관리소'를 사용할 수 있게 도와주는 라이브러리다. - 리덕스가 필요한 이유 1) useState의 불편함 = props 드릴링 : 부모 -> 자식 컴포넌트로 props를 계속해서 내려주면, 불필요한 컴포넌트에도 전달되어야 하고, 부모 컴포넌트가 리렌더링 시 자식 컴포넌트도 리렌더링 된다. 어디서 props을 내려주는지, 디버깅이 힘들다 등의 단점이 있다. 2) useContext 등 context API의 위험성 : 전역 State의 provider가 한개라도 변경되면, props을 받는 모든 하위 컴포넌트 전체가 리렌더링 된다. => context API vs 리덕스 공부 3) 따라서 Global st.. 2023. 4. 19. [React] CRA에서 eject없이 SCSS사용하기 CRA에서 eject없이 SCSS사용하기 1. sass 설치 => scss를 css로 변환해 주는 라이브러리 yarn add node-sass 2. styles 폴더 생성, 내부에 scss폴더 생성 후 scss파일 생성 3.터미널 에서 사용시, package.json에서 script에 "sass"명령어를 추가해 주어야 한다. => 이 때는 map파일도 같이 생성되어 원하지 않을 경우 따로 map파일이 생성되지 않도록 설정할 필요가 있다. "sass": "sass --watch src/styles/scss:src/styles/css" yarn run sass => watch 시작 익스텐션 사용시 : liveSass 경로 설정 => /src/styles/css 폴더에 css파일이 생성되도록 설정 3. wat.. 2023. 4. 15. [SCSS] 온보딩 3주 3일차 - Swiper와 SCSS 사용해 보기 🦄 온보딩 3주 2일차 - SCSS 설치 및 사용해 보기 ✨03/22 : 목표 : SCSS 설치 및 기본 문법 익히기 Swiper를 이용해 슬라이드를 가져오고, SCSS로 커스터마이징 해보자. 01 Swiper 슬라이드 사용해 보기 1. Swiper홈페이지 => Demos => 목록 중에서 원하는 슬라이드 가져오기 2. Core(html,css,js), React, Vue 등 여러 종류로 코드를 볼 수 있다. 클릭하면 코드가 쭉 나오는데 이 코드를 개인 플젝에 첨부하면 된다. 주의할점은1. script를 올바르게 가져왔는지, 2.슬라이드는 position 설정이 중요한데, 코드에서는 보통 html이나 body에 relative가 걸려있기 때문에 원하는 요소에 옮겨서 잘 조정해 주어야 한다. HTML 이 .. 2023. 3. 23. [SCSS] 온보딩 3주 2일차 - SCSS 설치 및 사용해 보기 🦄 온보딩 3주 2일차 - SCSS 설치 및 사용해 보기 ✨03/21 : 목표 : SCSS 설치 및 기본 문법 익히기 온보딩 스터디 2일차, 제공된 CSS 강의가 아무런 의미가 없는 강의인 것 같아 원래 이번 주 목표였던 SCSS에 대해 공부하기로 했다. 오늘은 공식문서를 참고하여 설치 및 기본 문법을 좀 익혀보고 연습도 할겸 앞으로는 항상 SCSS를 사용해 프로젝트를 진행해 보려고 한다. 📒SCSS 설치 및 경험해 보기 00 SCSS란 무엇인가? 1. SASS : Syntactically Awesome Style Sheets - 문법적으로 어썸한 스타일시트 2. SCSS : Sassy CSS - 문법적으로 Sassy한 멋진(Sassy) CSS Sass는 CSS의 단점을 보정하기 위한 CSS의 확장으로 .. 2023. 3. 21. 이전 1 2 다음
