본문 바로가기

🌳Frontend74

Next.js환경에서 Cypress시작하기 (Cypress 설치/실행) 공식홈페이지 와 일부 Cypress 게시글을 보고 정리한 게시글 입니다 ~ ✨ 사내프로젝트 e2e 테스트 도구로 Cypress를 쓰고있어서 공부할겸 정리해보려고 합니다. ⚙️ Cypress 란? cypress는 e2e 테스트 프레임워크예요. e2e테스트란, 사용자가 사용하는 관점에서 테스트하는 방법이에요. 버튼 텍스트가 원하는대로 노출되는지, 버튼을 눌렀을 때 올바른 액션이 실행되는지와 같이 화면단에서 사용자가 겪을 모든 상황과 UI를 테스트해요. 자바스크립트 코드로 작성할 수 있어서, node기반 웹애플리케이션의 테스트가 필요할때 유용하게 쓰여요. 📌 시작하기전 작성자가 cypress를 설치하려고하는 애플리케이션의 환경은 아래와 같습니다. (환경이 다를 경우, 원활하게 진행되지 않을 수 있습니다.) N.. 2023. 10. 21.
Promise Async/Await 실전으로 비동기 코드를 작성할 수는 있지만, 누군가 내게 Promise가 뭔지 ,async/await는 뭔지 물어본다면 "어..그...비동기로 호출할때 쓰이는....." 나도 모르게 설명하다가 막혀버린다 😅 누군가에게 당당하게 설명을 해주기 위해, 자바스크립트에서의 비동기에 대해 정리해보고자 한다. 예제코드와 더 자세한 설명은 아래에서 참고해주세요. 토스페이먼츠의 Promise 실전에서 사용해보기 Promise 실전에서 사용해보기 오늘은 Promise가 무엇이고 어떻게 사용해야 되는지 토스페이먼츠 결제위젯 예제로 알아볼게요. Promise는 비동기 함수가 반환하는 객체에요. 함수의 성공 또는 실패 상태를 알려줘요. 콜백을 직접 blog.tossbusiness.com 토스페이먼츠의 예제로 이해하는 asyn.. 2023. 10. 14.
Next.js에서 Firebase 파이어베이스로 구글 로그인 기능 구현 2023.10.14 - [🌳Frontend/react] - Next.js 와 파이어베이스(Firebase) 연동하기 Next.js 와 파이어베이스(Firebase) 연동하기 서버를 직접 만들 필요가 없이 데이터베이스, 인증, 스토리지, 함수 및 호스팅과 같은 서비스를 제공하는 파이어베이스를 사용해보자. 파이어베이스는 백엔드 서버를 구현할 필요 없이 간단하 yzlosmik.tistory.com Next.js app과 파이어베이스 연동은 이전글을 참고해주세요. 🔥 파이어베이스 콘솔에서 Authentication 셋팅 추가 제공업체에 Goggle 을 클릭해주자. 프로젝트 지원 이메일은 본인 이메일로 셋팅하면 됩니다. 😎 소스코드 firestore은 이전글에서 셋팅한 firestore 설정파일 입니다. fire.. 2023. 10. 14.
Next.js 와 파이어베이스(Firebase) 연동하기 서버를 직접 만들 필요가 없이 데이터베이스, 인증, 스토리지, 함수 및 호스팅과 같은 서비스를 제공하는 파이어베이스를 사용해보자. 파이어베이스는 백엔드 서버를 구현할 필요 없이 간단하게 서버를 구성하고 싶을 때 이용하기 좋다. 🔥 파이어베이스 시작하기 1.1 파이어베이스 프로젝트 시작하기 파이어베이스 콘솔 로 들어가 프로젝트를 만들어줍시다. 1.2 앱 만들기 앱을 만들면 파이어베이스 SDK 가 나오는데 그 값을 저장해둡시다. 🌩 Next.js 프로젝트에 파이어베이스 세팅 1. firebasedb.ts 파일 생성 파일 키들은 노출되면 안되므로, 환경변수로 보호해줍니다. Next.js 에서의 환경변수는 프로젝트 root에 .env.local 이름으로 파일을 생성하고, NEXT_PUBLIC_키이름 = valu.. 2023. 10. 14.
728x90
반응형

티스토리툴바