분류 전체보기403 [ 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. [ React ] Json server을 사용한 Heroku & Vercel로 배포 배포 과정에서 많은 에러를 마주했다... 잊지 않기 위해 기록 남기기...ㅠㅠ Heroku에 db.json 배포하기 1. Heroku에 가입하고 새로운 프로젝트를 만든다. https://dashboard.heroku.com/ 2. src 제일 밖에 db.json으로 데이터를 저장한다. 원래 json 파일을 여러 개로 나눠놨었는데 여러 개일 경우를 하는 방법을 몰라 db.json파일에 하나로 묶어주었다. 3. server.ts scr 밖에 server.ts파일을 만들어준다. 여기서 중요한 건 db.json파일 경로와 json과 연결 외었던 포트넘버 (나는 3010)이다. const jsonServer = require('json-server'); const path = require('path'); con.. 2023. 2. 28. [ 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. 이전 1 ··· 4 5 6 7 8 9 10 ··· 45 다음 728x90
