본문 바로가기

전체 글234

[Next.js] 테스트 종류 테스트란? 내가 작성한 코드가 내가 의도한 대로 동작하는 지 검사 하는 것 종류 자동화 테스트 - 코드로 작성, 반복적 수동 테스트 - 브라우저에서 직접 접근 Static Test 테스트 도구 - Typescript, exlint 구문 오류와 타입 오류를 감지해 줘서 런타임 에러를 방지 할 수 있다. Unit Test 하나의 함수, 메소드, 클래스, 모듈 등이 의도한 대로 작동하는 지 테스트 input에 대한 올바른 output 테스트 도구 - jest, mocha, react-testing-library Intergration Test 여러 개의 모듈, 컴포넌트 등이 상호작용하며 잘 동작하는지 테스트 비지니스 로직과 연관 된 테스트 도구 - react-testing-library, Enzyme 등 E2.. 2023. 9. 12.
[Next.js] route 에서 CORS 대응하기 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.. 2023. 8. 26.
[Next.js] localstorage 에 데이터 저장할 때 나타나는 에러 ( server,client 불일치) -Zustand 참고 : 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.. 2023. 8. 24.
[Next.js] .env 파일에서의 NEXT_PUBLIC 키워드의 차이 `NEXT_PUBLIC` 키워드를 사용하는 변수는 Next.js 애플리케이션의 클라이언트 측 코드 내에서 접근할 수 있는 환경 변수입니다. 이와 달리, `NEXT_PUBLIC` 없이 정의된 변수는 서버 측 코드에서만 접근 가능한 환경 변수입니다. `NEXT_PUBLIC` 키워드를 붙인 변수는 브라우저에서 직접 접근할 수 있기 때문에, 클라이언트 측 코드에서 사용되는 환경 변수로 주로 사용됩니다. 예를 들어, 웹 페이지 내에서 API 키나 설정 값을 사용해야 하는 경우에 유용합니다. 이렇게 `NEXT_PUBLIC` 키워드로 선언된 환경 변수는 Next.js의 빌드 시간에 정적으로 번들링되며, 클라이언트 측 코드에서 해당 변수를 사용할 수 있습니다. 서버 측 코드에서 사용되는 환경 변수는 민감한 정보를 포함.. 2023. 8. 24.
아임포트 결제 로직 프론트엔드 ➡ 백엔드 주문 정보 생성 요청 백엔드 ➡ 프론트엔드 주문 정보(주문 번호, 가격 등) 생성하고 반환 프론트엔드 ➡ 아임포트 생성된 주문 정보로 결제 요청 아임포트 ➡ PG 해당 PG 사에 결제 요청 사용자 ➡ PG 결제 정보 확인 및 카드사 선택 PG ➡ 카드사 해당 카드사에 결제 요청 사용자 ➡ 카드사 카드 정보 입력하고 결제 카드사 ➡ PG 결제 결과 반환 PG ➡ 아임포트 결제 결과 반환 아임포트 ➡ 프론트엔드 결제 결과 반환 프론트엔드 ➡ 백엔드 결제 정보와 주문 정보를 이용하여 검증 요청 백엔드 ➡ 프론트엔드 결제 정보와 주문 정보가 일치하는지 확인하여 검증하고 결과를 반환 2023. 8. 23.
[Next.js] Next Image responsive size 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 에 따라 얼마나 많은 .. 2023. 8. 21.
[JS] url 다루기 url 관련 용어 정리 URL (Uniform Resource Locator): URL은 웹에서 특정 리소스의 위치를 가리키는 주소입니다. 주로 웹 브라우저를 통해 해당 리소스에 접근할 수 있도록 합니다. URL은 일반적으로 다음과 같은 형식을 가집니다: protocol://domain:port/path?query#fragment Protocol: 프로토콜은 클라이언트와 서버 간의 통신 방식을 지정하는 부분입니다. 대표적인 프로토콜로는 HTTP, HTTPS, FTP, SMTP 등이 있습니다. Domain: 도메인은 웹 사이트나 서버의 주소를 나타내는 부분입니다. 예를 들어, "www.example.com"이 도메인입니다. Port: 포트는 서버 내에서 특정 애플리케이션에 연결하기 위한 숫자입니다. 일반적.. 2023. 8. 19.
[prisma] vercel 배포시 에러 PrismaClientInitializationError: Prisma has detected that this project was built on Vercel, which caches dependencies. This leads to an outdated Prisma Client because Prisma's auto-generation isn't triggered. To fix this, make sure to run the `prisma generate` command during the build process. Within the scripts section of your project's package.json file, if there is not already a script named .. 2023. 8. 17.
[CSS] shadcn ui - 공유 UI 컴포넌트 공유 컴포넌트 3대장 MUI ( Matrerial UI) - 오픈 소스 React Component Library Ant Design React Bootstrap 개인적으로 위 3대장은 커스텀 하기가 어려워 요즘 뜨고 있는 shadncd ui를 사용해봄 shadcn ui는 Radix-ui를 기반으로 하고 있음 Radix ui 란 고품질의 액세스 가능한 디자인 시스템 및 웹 앱을 구축하기 위한 오픈 소스 UI 컴포넌트 라이브러리. 접근성, 사용자 정의, 개발자 경험에 초점을 맞춘 하위 수준의 UI컴포넌트 라이브러리 shadcn ui의 특징 Accessible : 컴포넌트는 가능한 경우 WAI-ARIA 설계 패턴을 준수합니다. aria 및 role 속성, 포커스 관리 및 키보드 탐색을 포함하여 접근성과 관련.. 2023. 8. 9.

티스토리툴바