Next.js 13버전부터는 App Router와 Pages Router로 분리되어있다. Pages Router의 구조상의 문제로 할 수 없었던것을 App Router로 구조적인 문제점을 해결하여 만들었다. 앞으로는 App Router 사용하는걸 추천 App Router 버그 및 실험적 기능이 약간 존재함. 공통적인 layout기능이 생김, 페이지 권한문제 완화. React18버전 사용, React18버전부터는 server component가 들어옴 server component를 활용해서 next 서버에서 react를 미리 렌더링하여 client로 보내줄 때 완성된 html을 미리 보내준다. 장점 : html 로딩시간 감소, 완성된html을 받아서 js같은 용량이 감소 단점 : next서버에서 모든걸 ..

이번 프로젝트를 진행함에 있어서 프로젝트기간중에 아쉬웠던점을 적어보려고 합니다. react 숙련도 프로젝트를 시작하기 이전에 조금 공부한것과 실전에 뛰어들어서 그때그때 내가원하는것을 찾아가면서 적용을 하다보니 초반에 적은 코드와 마지막에 적은코드에서 숙련도의 차이가 났다... 주제 선정 주제선정에 있어서 비동기처리로 페이지를 구성하는데 메리트가 없는 주제였다고 생각한다. 해당 프로젝트를 진행하면서 비동기처리를통해 모든페이지를 SPA로 구현하였지만 주제에 비해 overstack의 결과물이지 않았나 라는생각이든다.. ( Back DB도 마찬가지긴 하지만) 시간적인 어려움 Back-end 포지션이 세명이고 Front-end가 혼자였기 때문에 기능구현이 되기전에 더미데이터로 해당 코드를 작성해서 기다리는 경우가..

댓글을 조회하고 삭제하려고 하는데 문제가 발생하였다. 등록및 조회는 정상적으로 진행되는데 백엔드에서 제공한 엔드포인트로 연결을 진행하는데 400에러가 발생하였다. // 댓글 삭제하기 const deleteComment = async (cmtIdx) => { try { // DELETE 요청으로 삭제 const deleteResponse = await axios.delete(`/api/comment/delete/${cmtIdx}`,{ userEmail: userEmailData, // cmtIdx: cmtIdx }); console.log('댓글 삭제 완료:', deleteResponse.data); // 댓글 목록 다시 가져오기 fetchCommentData(); } catch (error) { cons..

게시판 글 작성및 조회수 증가시 페이지 reload 없이 데이터를 갱신해줘야 했다. 해당 기능을 제공하기 위해서 context로 선언한 데이터에서 useEffect()에 데이터가 변경되었을시 ==> export const BoardProvider = ({ children }) => { const [boardData, setBoardData] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { const aixosData = async () => { try { const response = await axios.get('/api/board/list'); setBoardData(response.data); consol..

캐러셀을 통해서 뉴스데이터를 카드형태로 보여줘야하는데 반응형으로 잡기를 원했다. 그래서 해당 기능을 구현하기위해 구글링을 진행하여 블로그의 글을 참고해서 작성하게 되었다. 해당 캐러셀의 함수내에서 const [numOfCards, setNumOfCards] = useState(4); const resize = () => { // window 사이즈 변경되었을 때 실행되는 함수 const width = window.innerWidth; if (width { window.removeEventListener('resize', resize); }; }, []); useEffect로 변경해주었다. 회원가입시에 페이지 이동을 위해서 import { useHistory } from 'react-router-dom';..

이전에 트위터 클론에 사용한 Vite + TypeScript + React + Firebase 환경으로 진행하였다. Firebase를 사용하는 과정에서 await auth.authStateReady(); 이 부분에서 Property 'authStateReady' does not exist on type 'Auth'. 에러가 발생했다. 해결한 방법은 Firebase가 버전이 낮아서 지원하지 않았던 문제였다. https://firebase.google.com/support/release-notes/js Firebase JavaScript SDK Release Notes Send feedback Firebase JavaScript SDK Release Notes Stay organized with collec..