본문 바로가기

FrontEnd84

[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.
[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.
내가 만든 컴포넌트가 어디에서 import 되고 있나? 컴포넌트가 다른 곳에서 import되고 있는지 확인하는 방법은 프로젝트의 규모와 개발 환경에 따라 다를 수 있습니다. 주로 사용하는 개발 도구에 따라 다양한 방법이 있지만, 일반적으로는 다음과 같은 방법들을 활용할 수 있습니다: IDE 또는 코드 편집기의 검색 기능: 대부분의 통합 개발 환경(IDE) 또는 코드 편집기는 "검색" 또는 "찾기" 기능을 제공합니다. 이를 활용하여 해당 컴포넌트의 이름으로 검색하면 해당 컴포넌트가 어디에서 import되었는지 쉽게 확인할 수 있습니다. 코드베이스 전체에서 특정 문자열 검색: 만약 IDE나 편집기에서 검색 기능이 제한적이거나 사용할 수 없는 경우, 전체 코드베이스에서 특정 문자열 검색을 수행하는 방법을 사용할 수 있습니다. 예를 들어, 프로젝트 디렉토리에서 터미.. 2023. 7. 24.
[TS] 타입스크립트 Utility types - Exclude, Omit Exclude, Omit - TS에서 제공하는 type 변형을 유연하게 도와주는 타입들 Exclude Exclude from T those types that are assignable to U. (typescript 2.8 릴리즈) Exclude => union type에서 제외된 타입들에 대한 새로운 타입을 정의함 type MyUnion = string | number | boolean; type ExcludeNumber = Exclude; const value: ExcludeNumber = 'hello'; // value can only be of type string or boolean Omit TypeScript 3.5 introduces the new Omit helper type, which.. 2023. 7. 17.
[Next.js] libs 폴더에는? libs 폴더는 Next.js 프로젝트에서 프론트엔드 개발자들이 사용하는 라이브러리 및 유틸리티 함수들을 모아놓는 공통 디렉토리 공통 함수 및 유틸리티: libs 폴더는 여러 컴포넌트나 페이지에서 공통으로 사용되는 함수나 유틸리티 기능들을 저장하는 곳입니다. 이러한 함수들은 중복 코드를 피하고 코드 재사용성을 높이는 데 도움을 줍니다. 외부 라이브러리 및 통합: libs 폴더는 프로젝트에서 사용하는 외부 라이브러리들을 관리하는 곳으로 활용될 수 있습니다. 예를 들어, Next.js에서는 libs 폴더에 외부 라이브러리들을 가져와 사용하는 코드를 작성할 수 있습니다. API 클라이언트: libs 폴더는 백엔드 API와 통신하는 클라이언트 코드를 작성하는 데 사용될 수 있습니다. 예를 들어, REST API.. 2023. 7. 15.

티스토리툴바