개발 일지111 [ React ] 북마크 필터 에러 Map을 돌리면서 유저가 북마크한 경우 북마크에 불이 들어와야하는데 북마크를 했음에도 불이들어오지 않았다. 확인을 하니 map은 모든 리스트를 돌기 때문에 불이 들어왔다가도 나머지 리스트를 돌면서 조건에 맞지 않기 때문에 불이 들어오지 않았다. map에서는 중간에 멈출수가 없어 for문으로 유저가 북마크했을 경우 break를 걸어주었다. // 페이지 렌딩시 유저의 북마크 유무 확인 // 카카오로 로그인 시에도 북마크 추가 잘됨 const fetchBookmarks = async () => { const { data } = await axios.get(`${JSON_API}/BookMarkList`); // 북마크 리스트 for (let i = 0; i < data.length; i++) { if ( da.. 2023. 3. 8. [ 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. [ 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. [ 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. 이전 1 2 3 4 ··· 13 다음 728x90
