react20 [02] JSON server로 Mock data서버 실행하여 React Query로 호출 JSON server 로 Mock data서버 실행하여 React Query로 호출하기 - 02 [01] JSON server 세팅 1. Mock 데이터 파일 생성 2. json-server 설치 3. 실행 script 추가 4. 서버 실행 [02] React Query를 사용하여 데이터 호출 5. axios 설치 6. React Query 설치 7. 추가 8. 데이터 호출 * 굳이 React Query로 호출 할 필요가 없으나, 라이브러리 세팅이 잘 되었는지 확인 겸. 겸사겸사 React Query로 데이터를 GET 해보았습니다. [02] React Query를 사용하여 데이터 호출 5. axios 설치 npm i axios https://www.npmjs.com/package/axios axios P.. 2024. 1. 17. [01] JSON server로 Mock data서버 실행하여 React Query로 호출 JSON server 로 Mock data서버 실행하여 React Query로 호출하기 - 01 [01] JSON server 세팅 1. Mock 데이터 파일 생성 2. json-server 설치 3. 실행 script 추가 4. 서버 실행 [02] React Query를 사용하여 데이터 호출 5. axios 설치 6. React Query 설치 7. 추가 8. 데이터 호출 [01] JSON server 세팅 1. Mock 데이터 파일 생성 /mockdata.json "memo": [ { "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\.. 2024. 1. 17. [NextJS]🕐카운트다운 구현하기(+TS, +chatGPT를 통한 코드리뷰) - NextJS (App Router) - Typescript 더보기 CodeSandbox를 사용해보고 있는데, 작업환경 대로 세팅하기가 쉽지 않았습니다. NextJS로 세팅을 하니, 타입스크립트가 자동으로 설정돼있었습니다. 설정을 바꾸는 법도 있다고 들었는데, 이 참에 공부해보자 싶어 도전했습니다. (간단한 자료형을 추가하는 것 정도.) 카운트다운 구현하기 ✅ [code 구현] https://codesandbox.io/p/sandbox/agitated-jackson-38lcv4 [ 최초 코드 ] └ /page.tsx "use client"; import { useEffect, useState, useRef } from "react"; export default function Home() { const.. 2023. 10. 17. [NextJS] input type="date"을 활용한 기간 선택 NextJS와 NextUI를 사용하여 구현한 프로젝트. 실질적으로는 React(JS), HTML가 뒤섞인 코드입니다. ❗날것의 코드 주의 📆구현 기능날짜선택을 통한 기간 지정 조회 옵션 : 최근 1개월, 최근 3개월, 최근 6개월 선택가능하게 🧶고려할 점. 1. 기본값 시작일은 프로젝트 생성한 1월 1일로 가정. 종료일은 오늘(가장 최근) 날짜. 그 이후 날짜는 disable. 2. 날짜 변경 시 - 시작일은 종료일보다 전이어야함 (시작일 { setDate({ startDate: '2023-01-01', endDate: today, }); }, []); const [limitDate, setLimitDate] = useState({ minStartDate: '2023-01-01', maxStartDate.. 2023. 4. 5. [React] 코드 분할 Code-Splitting (번들링) 공식문서 - https://ko.reactjs.org/docs/code-splitting.html 번들링이란? 앱이 커지면 번들도 커진다. 큰 규모의 서드 파티 라이브러리를 추가할 때 실수로 앱이 커져서 로드 시간이 길어지는 것도 주의해야하는 부분이다. 코드 분할 Code-Splitting 번들이 거대해지는 것을 방지하는 방법 런타임에 여러 번들을 동적으로 만들고 불러오는 것 Webpack, Rollup과 Browserify (factor-bundle) 같은 번들러가 지원하는 기능 코드 분할은 여러분의 앱을 “lazy-load” 하게 도와줌 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게함 앱의 초기화 로딩에 필요한 비용을 줄여줍니다. ✅ 동적 import()문법 // Befo.. 2021. 12. 15. [React] Hook이란? ✨❗️ 리액트 공식 문서 - Hook의 개요 Hook은 React 버전 16.8부터 새로 추가된 것으로 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 게하는 요소이다. ✅ Hook이 뭔가요? 👉 Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수입니다. - React 공식 문서 ✅ 왜 등장했을까? Class component - state, 라이프 사이클 때문에 사용 - 클래스로 부터 한번 인스턴스가 생성이 되고 나면 독립적으로 움직일 수 있음 - this.state가 참조하는 값은 항상 최신 ⇒ 결과를 보장하기 힘듬(버그 발생) - 반면 함수는 한번 .. 2021. 12. 15. [React] 리액트란? 사용하는 이유 Why React? Web-app (웹 앱) 앱과 같은 사용성을 제공하는 웹. 높은 수준의 UX제공 화면의 새로 고침없이 부드럽게 전환을 해주는 장점 (SNS 사이트에 주로 사용) 모바일 App으로 발행이 쉬움 요즘은 Web page(웹 페이지)라는 말보다 Web Application(웹 애플리케이션)이라는 말을 더 많이 사용한다. ... 애플리케이션의 규모가 커지지면서 다양한 기능을 구현이 요구되었고, 이전의 방법(DOM, jQuery 등)들로 개발+유지보수를 하는 것이 어려워졌다. 화면의 모든 DOM 요소들에 직접 접근해서 조작하고 관리하기란 쉽지 않다. (jQuery도 결국엔 쉽게 DOM에 접근해서 조작을 가능하게 하는 메소드의 모음) 시장에서 요구되는 웹 서비스의 규모가 커짐에 따라 복잡한 애플리케이션을 개발하며 생.. 2021. 12. 13. [React]CRA 세팅 Failed to compile 에러 (eslint, prettier) MEGAFOX 팀 프로젝트 - 초기세팅 을 참고하여 개인 포트폴리오를 위한 새로운 CRA 프로젝트를 생성했다. 그 짧은 시간동안 react-router의 업데이트(v5 → v6)가 있어서 이번 프로젝트에 적용해보기로 했다. 그렇게 세팅을 하고 npm start !! prettier 플러그인 로드에 실패했다. eslint-plugin-prettier 모듈을 찾을 수 없다구. .eslintrc에 사용하겠다고 적어두었는데 찾을 수가 없네? CRA에는 eslint가 내장 되어있지만, 추가설정을 위한 package는 따로 설치해야한다. npm install -D prettier eslint-config-prettier eslint-plugin-prettier 성공과 동시에 네! 다음 Error😃 Failed to.. 2021. 11. 17. 이전 1 2 3 다음
