전체 글409 [ Typescript ] 글로벌 모달 모달 틀 하나로 위치, 제품, 기타에 따른 모달 창을 띄우려고 한다. 버튼의 값을 넘겨주기는 하는데 문제는 위치를 눌러도, 제품, 기타가 다 반응하고 마지막에 기타가 뜬다... 현제 코드 useModal.tsx import { useState } from 'react'; const useModal = () => { const [isShowing, setIsShowing] = useState(false); const toggle = () => { setIsShowing(!isShowing); } const modalCategory = (category:string) => { console.log(category) return category; } return { isShowing, toggle, modal.. 2023. 2. 16. [ Project ] 프로젝트 피드백 보호되어 있는 글 입니다. 2023. 2. 10. [ 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. 이전 1 ··· 5 6 7 8 9 10 11 ··· 46 다음 728x90
