Weeeeey Weeeeey

import 'react-quill/dist/quill.snow.css'; import { EditorProvideProps } from '../new/new-types'; // 중간 생략 ReactQuill에 입력한 데이터 value는 html 요소를 string 형태로 받아와짐 (++참고) next.js에서 ReactQuill 컴포넌트를 사용할려면 dynamic으로 import 해야함. (window로 정의 되어 있는데 next는 서버 측에서 작동하니 아래처럼 dynamic으로 받아오면서 ssr:false 넣어주기. + useMemo를 하지 않으면 렌더링 될 때마다 변경되어보림) const ReactQuill = useMemo( () => dynamic(() => import('react-quill'..

페이지 이동시 태그를 사용하는 것은 SPA 페이지인 Next.js 에서 효율적이지 못함. a 태그로 이동 시 새로고침을 하기 때문에 그 과정에서 빈 화면이 보일 수도 있고 통신을 새롭게 하다 보니 성능 및 사용자 경험 측면에서 떨어질 수 밖에 없다. 새로고침 없이 페이지 이동을 위한 (SPA에 위배되지 않기 위해) 라우팅 방식에는 와 Router 가 있음 1. Link Link 태그에는 href 속성을 추가하여 가고자 하는 주소(페이지)를 넣는다 새로고침 없이 페이지 전환이 됨. Client-side navigation 방식으로 , JS로 페이지 전환이 이뤄짐 is a React component that extends the HTML element to provide prefetching and cli..

테스트란? 내가 작성한 코드가 내가 의도한 대로 동작하는 지 검사 하는 것 종류 자동화 테스트 - 코드로 작성, 반복적 수동 테스트 - 브라우저에서 직접 접근 Static Test 테스트 도구 - Typescript, exlint 구문 오류와 타입 오류를 감지해 줘서 런타임 에러를 방지 할 수 있다. Unit Test 하나의 함수, 메소드, 클래스, 모듈 등이 의도한 대로 작동하는 지 테스트 input에 대한 올바른 output 테스트 도구 - jest, mocha, react-testing-library Intergration Test 여러 개의 모듈, 컴포넌트 등이 상호작용하며 잘 동작하는지 테스트 비지니스 로직과 연관 된 테스트 도구 - react-testing-library, Enzyme 등 E2..

const corsHeaders = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET, POST,PATCH, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type, Authorization', }; export async function OPTIONS() { return NextResponse.json({}, { headers: corsHeaders }); } export async function PATCH( req: Request, { params }: { params: { } } ) { try { //... return NextResponse.js..

참고 : https://velog.io/@shyuuuuni/Next.jszustand-SSR-Hydration-%EC%97%90%EB%9F%AC-Text-content-does-not-match-server-rendered-HTML, https://github.com/pmndrs/zustand/issues/1145, 내가 어떤 데이터가 새로고침 되더라도 초기화 되지 않게 하기 위해 그것을 로컬 스토리지에 저장했음. 그래서 새로고침을 하더라도 데이터는 쭉 유지 되는데 콘솔 창 에러로 아래 같이 나옴. warning: Text content did not match. Server: "0" Client: "2" app-index.js:31 Warning: An error occurred during hydra..

`NEXT_PUBLIC` 키워드를 사용하는 변수는 Next.js 애플리케이션의 클라이언트 측 코드 내에서 접근할 수 있는 환경 변수입니다. 이와 달리, `NEXT_PUBLIC` 없이 정의된 변수는 서버 측 코드에서만 접근 가능한 환경 변수입니다. `NEXT_PUBLIC` 키워드를 붙인 변수는 브라우저에서 직접 접근할 수 있기 때문에, 클라이언트 측 코드에서 사용되는 환경 변수로 주로 사용됩니다. 예를 들어, 웹 페이지 내에서 API 키나 설정 값을 사용해야 하는 경우에 유용합니다. 이렇게 `NEXT_PUBLIC` 키워드로 선언된 환경 변수는 Next.js의 빌드 시간에 정적으로 번들링되며, 클라이언트 측 코드에서 해당 변수를 사용할 수 있습니다. 서버 측 코드에서 사용되는 환경 변수는 민감한 정보를 포함..

https://mycodings.fly.dev/blog/2022-09-08-all-about-nextjs-image-component#%EC%9D%B4%EA%B2%83%EB%A7%8C%EC%9D%80-%EA%BC%AD Next.js Image 컴포넌트 완벽 가이드 Next.js Image 컴포넌트 모든 속성 파헤치기 mycodings.fly.dev width/height은 직접적으로 정적값을 부여할 수 있음. 이 때, layout 속성의 값에 따라 특성이 변함. layout = "intrinsic" | "fixed" | "responsive"| "fill" intrinsic(디폴트 값), fixed는 width/height 속성 값이 그대로 픽셀에 적용 ( intinsic은 w/h 에 따라 얼마나 많은 ..

컴포넌트가 다른 곳에서 import되고 있는지 확인하는 방법은 프로젝트의 규모와 개발 환경에 따라 다를 수 있습니다. 주로 사용하는 개발 도구에 따라 다양한 방법이 있지만, 일반적으로는 다음과 같은 방법들을 활용할 수 있습니다: IDE 또는 코드 편집기의 검색 기능: 대부분의 통합 개발 환경(IDE) 또는 코드 편집기는 "검색" 또는 "찾기" 기능을 제공합니다. 이를 활용하여 해당 컴포넌트의 이름으로 검색하면 해당 컴포넌트가 어디에서 import되었는지 쉽게 확인할 수 있습니다. 코드베이스 전체에서 특정 문자열 검색: 만약 IDE나 편집기에서 검색 기능이 제한적이거나 사용할 수 없는 경우, 전체 코드베이스에서 특정 문자열 검색을 수행하는 방법을 사용할 수 있습니다. 예를 들어, 프로젝트 디렉토리에서 터미..