Dug_House

1. rewrite정의: URL을 내부적으로 변경하여 다른 리소스에 요청을 전달합니다. 사용자에게는 변경된 URL이 보이지 않습니다.용도: SEO 최적화, URL 구조 개선 등을 위해 사용됩니다.예시:요청 URL: /old-page내부적으로: /new-page사용자에게는 여전히 /old-page로 보입니다.2. redirect정의: 클라이언트에게 새로운 URL로 이동하라는 응답을 보냅니다. 이 경우, 브라우저의 주소창도 변경됩니다.용도: 페이지 이동, 사이트 구조 변경 시 사용자 안내 등을 위해 사용됩니다.예시:요청 URL: /old-page응답: 301 Moved Permanently → /new-page브라우저 주소창이 /new-page로 변경됩니다.요약Rewrite는 내부 리소스 변경, 사용자에게 ..

글을 작성하게 된 이유현재 하고 있는 프로젝트는 Next.js와 TypeScript를 사용한 프로젝트다. 그러던 와중에 SSR의 개념에 대해서 얘기가 나왔다.팀원 의견 : getserversideprops 를 사용해야 SSR이다. 내 의견 : Next.js 자체로 SSR이 지원되니까 SSR을 하고 있는 것이다.CSR vs SSRCSR과 SSR에 대해서는 해당 POST에 정리해두었다.  넥스트 공식 홈페이지에서 설명https://nextjs.org/docs/basic-features/pagesNext.js는 기본으로는 정적 페이지를 생성해주는 프레임워크이다.SSR은 개발자의 선택사항으로 정하면 된다.hydrationPre-Rendering된 웹 페이지를 클라이언트에게 먼저 보내고, 번들링 된 자바스크립트 ..

문제 상황 Warning: Prop `style` did not match. Server: "null" Client: "min-width:;height:" 원인 Next.js는 SSR을 하기에 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라지게 된다. 게다가 Fullcalendar라이브러리는 SSR을 지원하지 않는다. 해결법 그렇기에 클라이언트에서만 렌더링을 해야한다. Next.js에서 제공하는 dynamic import를 사용한다. export const CalendarPage = () => { const Calendars = dynamic(() => import('./components/Calendar'), { ssr: false, }); return ( );..

사진을 업로드하는데 계속 버그가 뜬다...! 여기서 키워드는 No 'Access-Control-Allow-Origin' header is present on the requested resource. 즉, CORS 차단되었다는 것이다 그래서 S3 콘솔로가서 CORS를 변경해주었다. [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "HEAD", "GET", "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [ "ETag", "x-amz-meta-custom-header" ] } 그러고 다시 사진을 업로드 해보니 아직 안됨... 그래서 s3 400을 구글링 해보았다. https://velo..

고려해야할 점1. Next는 SSR이라서 클라이언트에서만 ToastUi-Editor를 dynamic import를 해와야함 2. Next에서의 환경변수는 .env.local파일안에서 클라이언트에서만 사용할 것은 밑에 처럼 NEXT_PUBLIC_ 키워드가 앞     에 붙어야한다3. dynamic import를 사용했기에 ref를 제대로 가져오지 못한다 그래서 React.fowardRef()를 사용해서 ref를 가져와야함  dynamic import  React.fowardRef()참고자료https://myeongjae.kim/blog/2020/04/05/tui-editor-with-nextjshttps://velog.io/@broccoliindb/Next.js-Editor-SSR-REF-이슈https:/..