분류 전체보기416 [ React ] React Datepicker 원래 React Calendar을 사용하려 했는데 React Calendar는 달력이 바로 떠서 useState로 true일 때 보여주고 false일 때 닫히게 했다. 하지만 이때 문제가 내가 원하는 위치에 달력을 뜨게 하려니 fix를 사용하게 되는데 이렇게 했을 때 유저가 달력을 킨 상태에서 화면사이즈를 변경하니 달력이 잘렸다. 조금 더 검색하던 중 React Datepicker을 알게 되었다. React Calendar와 다르게 날짜 박스를 클릭하면 달력이 바로 아래에 생긴다. https://reactdatepicker.com/ React Datepicker 설치 npm install react-datepicker --save Import DatePicker Library import DatePick.. 2023. 2. 9. [ React ] React Calendar React Calendar 저번에는 직접 달력을 구현해 보았으니 이번에는 리액트에서 제공하는 달력을 사용해서 구현해 보았다. 훨씬... 간단하다🫠 그래도 그렇게 만들어본 덕분에 라이브러리에 더 감사해지는 것 같다. 설치 import Calendar from 'react-calendar'; 달력 선언 결과물 Calendar CSS 아래 한 줄 import 해 왔는데 저렇게 이쁘게 바뀌었다..! import 'react-calendar/dist/Calendar.css'; setSelectedDate(true)}/> 2023. 2. 8. [ React ] React.memo 카운터로 React.memo 연습하기. 리렌더링 발생 조건 컴포넌트에서 state가 바뀌었을 때 컴포넌트가 내려받은 props가 변경되었을 때 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두 리렌더링 된다. App.jsx import './App.css'; import { useState } from 'react'; import './App.css'; import Box1 from './components/Box1'; import Box2 from './components/Box2'; import Box3 from './components/Box3'; function App() { console.log('App 컴포넌트가 렌더링되었습니다.'); const [count, setCount] = us.. 2023. 2. 6. [ TypeScript ] js 파일 ts로 변환 using-ts.js 파일을 using-ts.ts 파일로 바꾸니 아래와 같이 VScode에서 빨간 줄이 생겼다. const button = document.querySelector("button"); const input1 = document.getElementById("num1"); const input2 = document.getElementById("num2"); function add(num1, num2) { return num1 + num2; } button.addEventListener("click", function() { console.log(add(input1.value, input2.value)); }); ! 와 HTMLInputElement 추가 const button = docume.. 2023. 2. 2. [ Next.js ] Data Fetching (CSR vs SSR vs SSG vs ISR) CSR vs SSR vs SSG vs ISR Client-Side Rendering (CSR) 브라우저에서 HTML file을 로드하면, Javascript를 이용하여 웹 브라우저에서 rendering 하는 방식이다. Ex. ReactDom.render 함수. Server-Side Rendering (SSR) 브라우저에서 해당하는 페이지를 접속하면, 그 순간 서버에서 html을 App server에서 렌더링 해서 전달해 주는 방식이다. ⛔️ 단점: 페이지를 요청할 때마다 렌더링 하기 때문에 오래 걸린다. Static-Site Generation (SSR) 페이지를 요청할 때마다 서버에서 렌더링 한다. 정적인 페이지를 제공하려고 할 때는 그럴 필요 없이 빌드할 때 렌더링하고 페이지를 요청할 때 이미 렌더링.. 2023. 2. 1. [ React ] Hooks의 useState 1. Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. 2. useState useState는 가장 기본적인 Hook이다. 함수형 컴포넌트에서도 상태를 가지고 있을 수 있게 해 준다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 useState를 사용하면 된다. 3. useState를 사용한 예제 버튼을 누르면 숫자가 바뀌는 컴포넌트를 만들며 useState를 익혀보았다. Counter.js import React, { useState } from 'react'; cons.. 2023. 1. 31. [ Next.js ] API Routes, Dynamic API Route API Routes Next.js 프로젝트에서 Node 서버 없이 api를 만들어 배포할 수 있도록 만들어주는 기능입니다. DB에 접근하거나, 시크릿 환경 변수에 접근하는 등에 사용할 수 있습니다. pages/api/*아래에 api를 만들 수 있습니다. // pages/api/hello.js export default function handler(req, res) { res.status(200).json({ name: 'John Doe' }) } Dynamic API Route Dynamic route도 지원합니다. // pages/api/test/[id].js export default function handler(req, res) { const { query } = req; const { id }.. 2023. 1. 31. [ Next.js ] Link, Dynamic Routes Next.js란 무엇이고, 왜 사용할까? 특징 개발 환경 설정이 쉽고 간단하다. SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다. 초기 로딩 속도 개선을 위한 자동 code splitting(코드 분할)을 지원한다. Next.js 프로젝트 시작하기 npx create-next-app 기본 구조 및 기능 개발 모드와 프로덕션 모드 // package.json ... "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, ... dev - next dev 개발 모드로 프로젝트를 실행 Hot reloading 등.. 2023. 1. 31. [ KTP ] CSS 프로젝트 회고 Clone-Coding Share Space 프로젝트 기간: 2022.1.6 - 2022.1.12 프로젝트 S.A. KEEP 1. 노션을 활용한 프로젝트 관리 프로젝트 일정, 기능 개발, 참고자료 등 꼼꼼한 문서화를 통해 현재 작업하고 있는 것, 상태 등을 바로바로 기록해서 누가 뭘 하고 있는 지 한 눈에 확인 할 수 있게 했던 것, 반복해서 하는 작업이나 공통 부분은 페이지 별로 정리해서 확인할 수 있게 했던 것 2. Git flow로 작업 진행 Main, dev, feature로 브랜치를 나누고 feature는 기능별로 브랜치를 계속 생성해서 dev에 병합하며 작업했는데 기능에 따라 브랜치를 나누니 한 눈에 파악하기도 쉬웠고 작업하기 훨씬 편리했다. 3. PR 시 화면 공유를 통해 기능 구현 한 것 .. 2023. 1. 30. 이전 1 ··· 6 7 8 9 10 11 12 ··· 47 다음 728x90
