JavaScript/React 썸네일형 리스트형 [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.. 더보기 [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 형.. 더보기 리덕스(Redux)의 이해 및 활용해 보기 리덕스(Redux) ✅ 1. 리덕스란 무엇인가? = 전역 상태관리 패키지 라이브러리 '중앙 State 관리소'를 사용할 수 있게 도와주는 라이브러리다. - 리덕스가 필요한 이유 1) useState의 불편함 = props 드릴링 : 부모 -> 자식 컴포넌트로 props를 계속해서 내려주면, 불필요한 컴포넌트에도 전달되어야 하고, 부모 컴포넌트가 리렌더링 시 자식 컴포넌트도 리렌더링 된다. 어디서 props을 내려주는지, 디버깅이 힘들다 등의 단점이 있다. 2) useContext 등 context API의 위험성 : 전역 State의 provider가 한개라도 변경되면, props을 받는 모든 하위 컴포넌트 전체가 리렌더링 된다. => context API vs 리덕스 공부 3) 따라서 Global st.. 더보기 [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.. 더보기 [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 이 .. 더보기 [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의 확장으로 .. 더보기 [React] 리액트 라우터(react-router-dom) 중첩 라우팅으로 하위페이지 연결하기 - nested routing, outlet 협업 프로젝트를 진행하면서 다른 개발자 분이 새로운 환경으로 마이그레이션 해주시면서, 리팩토링을 도와주셨다. 그 중 페이지 설계의 중요한 부분인 중첩 라우팅과 관련하여 포스팅 해보려고 한다. 중첩 라우팅이 필요했던 페이지는 LoginPage와 SignupPage였다. 둘 다 비슷한 디자인 content-box 안에서 form 부분만 변경 되고, 각각 로그인 또는 회원가입을 클릭했을 시 해당 Link로 이동하는데, 이 비슷한 content-box를 컴포넌트화 하여 재사용하고 싶었고 이 컴포넌트 안에서 Login, SIgnup의 form 부분만 변경하고 싶었으나 컴포넌트 내에서 이 두 페이지를 연결하는 방법을 몰랐다. 처음에는 중첩 라우팅에 대해서 몰랐기 때문에 같은 디자인까지 포함하여 일일히 LoginPa.. 더보기 [React] 웹팩(Webpack)에 대한 이해 ✨웹팩(Webpack)이란 무엇인가? 웹팩(Webpack)이란 "JavaScript를 위한 정적 모듈 번들러" 이다. 그렇다면 모듈은 무엇이고, 번들러는 또 무엇일까? 이 둘의 개념부터 알아보자. 모듈(module)이란 ? 자바스크립트에서 모듈은, 어떤 특정 기능과 관련된 JavaScript 코드들(함수)로 이루어진 있는 하나의 파일을 말한다. 자바스크립트의 크기가 점차 커지고 기능도 복잡해지자 자바스크립트 커뮤니티는 특별한 라이브러리를 만들어 필요한 모듈을 언제든지 불러올 수 있게 해준다거나 코드를 모듈 단위로 구성해 주는 방법을 만드는 등 파일을 여러개로 분리하여 모듈화 하는 등의 다양한 시도를 하게 되었고, 대표적으로 AMD, CommonJs(Node.js에서 사용 - requre(), module.. 더보기 이전 1 2 다음
