Weeeeey Weeeeey

수학 함수인 calc(), min(), max(), clamp() 을 사용하면 덧셈, 뺄셈, 곱셈 및 나눗셈이 있는 수학 표현식을 구성 요소 값으로 사용할 수 있다. 1. min(), max() 값의 인수 목록을 제공하고 브라우저는 각각 가장 작은 값/큰 값을 결정 함. eg. min(1rem,50%,10vw)의 경우 브라우저는 상대 단위 중 가장 작은 단위를 계산하고 해당 값을 실제 값으로 사용. 2. clamp()를 사용하러면 (최솟값, 계산할 값, 최대값) 을 입력한다. font-size: max(0.5vw, 50%, 2rem)), calc()와 함께 사용하거나(i.e. font-size: max(calc(0.5vw - 1em), 2rem)), 구성하여 사용할 수 있습니다((i.e. font-siz..

문제 icpc 왕국에는 아주 못된 왕 유빈이가 있었다. 유빈이에게는 4×n 크키의 카펫이 하나 있었다. 유빈이는 신하들에게 이 카펫을 3×1 타일과 1×3 타일로 빈틈없이 메우라는 명령을 내렸다. 여러분이 신하들을 도와서 4×n 크기의 카펫을 3×1 타일과 1×3 타일로 메우는 방법의 수를 구하는 프로그램을 작성하시오. 입력 첫째 줄에는 테스트 케이스의 수 T가 주어진다. (1

테스트란? 내가 작성한 코드가 내가 의도한 대로 동작하는 지 검사 하는 것 종류 자동화 테스트 - 코드로 작성, 반복적 수동 테스트 - 브라우저에서 직접 접근 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의 빌드 시간에 정적으로 번들링되며, 클라이언트 측 코드에서 해당 변수를 사용할 수 있습니다. 서버 측 코드에서 사용되는 환경 변수는 민감한 정보를 포함..

프론트엔드 ➡ 백엔드 주문 정보 생성 요청 백엔드 ➡ 프론트엔드 주문 정보(주문 번호, 가격 등) 생성하고 반환 프론트엔드 ➡ 아임포트 생성된 주문 정보로 결제 요청 아임포트 ➡ PG 해당 PG 사에 결제 요청 사용자 ➡ PG 결제 정보 확인 및 카드사 선택 PG ➡ 카드사 해당 카드사에 결제 요청 사용자 ➡ 카드사 카드 정보 입력하고 결제 카드사 ➡ PG 결제 결과 반환 PG ➡ 아임포트 결제 결과 반환 아임포트 ➡ 프론트엔드 결제 결과 반환 프론트엔드 ➡ 백엔드 결제 정보와 주문 정보를 이용하여 검증 요청 백엔드 ➡ 프론트엔드 결제 정보와 주문 정보가 일치하는지 확인하여 검증하고 결과를 반환

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 에 따라 얼마나 많은 ..