D.evelop/React, Next.js21 Input File에 Web API 적용하기 - 1. 드롭 앤 드랍 Input File에 Web API 적용하기 1. 드롭 앤 드랍2. 선택한 파일 리스트에 추가하기3. 선택한 파일 삭제하기4. 첨부파일 갯수 제한하기 https://codesandbox.io/p/devbox/nextjs-ui-inputfile-w2wgqp?embed=1&file=%2Fapp%2Fpage.tsx 2024. 3. 18. [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. React 18 + tailwindcss 세팅 (eslint, prettierrc) 라이브러리 설치 CRA, react-dom설치 # CRA + typescript npx create-react-app inflinker-v3-front --template typescript # react-dom 추가 npm i --save react react-dom typescript Tailwind 설치 #Tailwind CSS 설치, 세팅파일 npm install -D postcss autoprefixer npx tailwindcss init npm install -D postcss-import npm install postcss-nesting --save-dev 컴포넌트 라이브러리 등등 설치 # React-Select 설치 # npm i --save react-select eslint, pret.. 2024. 1. 15. [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. ESLint와 Prettier ✅ ESLint란? ESLint는 보다 좋은 품질의 자바스크립트 코드를 작성하기 위한 일종의 코드 스타일 가이드다. Getting Started with ESLint Getting Started with ESLint ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptio eslint.org JavaScript, JSX의 정적 분석 도구로 오픈 소스 프로젝트.. 2021. 12. 22. [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. 이전 1 2 3 다음
