본문 바로가기

D.evelop/Next.js4

Input File에 Web API 적용하기 - 1. 드롭 앤 드랍 Input File에 Web API 적용하기 1. 드롭 앤 드랍 2. 선택한 파일 리스트에 추가하기 3. 선택한 파일 삭제하기 4. 첨부파일 갯수 제한하기 2024. 3. 18.
[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.
[Next.js] Next.js란? Next.js https://github.com/vercel/next.js React Framework Ziet에서 만든 React Framework Netflix, Github, Uber 등에서 사용 SSR(서버 사이트 렌더링) TypeScript, JavsScript 사용 특징 React를 통한 프론트엔드 개발에 필요한 유용한 기능을 기본으로 제공 ServerRendering Static Exporting CSS-in-JS Zero Setup Fully Extendsible Ready for Production 장점 빠른 렌더링 속도, 새로고침 시 화면 깜박임없음 SSR → SEO적용에 유리 파일 시스템 라우팅을 특별한 설정 없이(zero config) 기본 제공 → 개발 초기 세팅을 위한 시간적 비.. 2021. 12. 13.