분류 전체보기

2023.10.21 - [🌳Frontend/etc] - Next.js환경에서 Cypress 시작하기 (Cypress 설치/실행) 지난 게시글에선 애플리케이션에 cypress를 설치하고 기본 설정 파일들을 알아보았습니다. 이상태에서 테스트코드를 작성하고 실행해도 되지만, 한가지 더 하고싶은 작업을 추가하려고 해요. 작업을 추가하기 전에, Cypress를 돌리기 위한 테스트코드를 작성해봅시다. cypress 폴더에 e2e폴더를 만들고, 테스트코드를 작성할 `index.cy.js` 파일을 추가합니다. cypress 테스트 코드는 `*.cy.js` 확장자를 따릅니다. describe('메인페이지 테스트', () => { it('index 페이지 접속시, 메인페이지가 그려지는지 테스트 합니다.', functio..

공식홈페이지 와 일부 Cypress 게시글을 보고 정리한 게시글 입니다 ~ ✨ 사내프로젝트 e2e 테스트 도구로 Cypress를 쓰고있어서 공부할겸 정리해보려고 합니다. ⚙️ Cypress 란? cypress는 e2e 테스트 프레임워크예요. e2e테스트란, 사용자가 사용하는 관점에서 테스트하는 방법이에요. 버튼 텍스트가 원하는대로 노출되는지, 버튼을 눌렀을 때 올바른 액션이 실행되는지와 같이 화면단에서 사용자가 겪을 모든 상황과 UI를 테스트해요. 자바스크립트 코드로 작성할 수 있어서, node기반 웹애플리케이션의 테스트가 필요할때 유용하게 쓰여요. 📌 시작하기전 작성자가 cypress를 설치하려고하는 애플리케이션의 환경은 아래와 같습니다. (환경이 다를 경우, 원활하게 진행되지 않을 수 있습니다.) N..

실전으로 비동기 코드를 작성할 수는 있지만, 누군가 내게 Promise가 뭔지 ,async/await는 뭔지 물어본다면 "어..그...비동기로 호출할때 쓰이는....." 나도 모르게 설명하다가 막혀버린다 😅 누군가에게 당당하게 설명을 해주기 위해, 자바스크립트에서의 비동기에 대해 정리해보고자 한다. 예제코드와 더 자세한 설명은 아래에서 참고해주세요. 토스페이먼츠의 Promise 실전에서 사용해보기 Promise 실전에서 사용해보기 오늘은 Promise가 무엇이고 어떻게 사용해야 되는지 토스페이먼츠 결제위젯 예제로 알아볼게요. Promise는 비동기 함수가 반환하는 객체에요. 함수의 성공 또는 실패 상태를 알려줘요. 콜백을 직접 blog.tossbusiness.com 토스페이먼츠의 예제로 이해하는 asyn..

2023.10.14 - [🌳Frontend/react] - Next.js 와 파이어베이스(Firebase) 연동하기 Next.js 와 파이어베이스(Firebase) 연동하기 서버를 직접 만들 필요가 없이 데이터베이스, 인증, 스토리지, 함수 및 호스팅과 같은 서비스를 제공하는 파이어베이스를 사용해보자. 파이어베이스는 백엔드 서버를 구현할 필요 없이 간단하 yzlosmik.tistory.com Next.js app과 파이어베이스 연동은 이전글을 참고해주세요. 🔥 파이어베이스 콘솔에서 Authentication 셋팅 추가 제공업체에 Goggle 을 클릭해주자. 프로젝트 지원 이메일은 본인 이메일로 셋팅하면 됩니다. 😎 소스코드 firestore은 이전글에서 셋팅한 firestore 설정파일 입니다. fire..