🌳Frontend/etc

2023.10.14 - [🌳Frontend/etc] - Promise Async/Await 이전에 Promise Async/Await 에 대해서 정리한 게시글이 있지만, Promise에 대해 예제코드와 함께 좀 더 톺아보려고 해요. 🤔 Promise가 없다면? Promise에 대해 알아보기 이 전에, Promise를 사용하기 전의 상황을 살펴봅시다. 우선 자바스크립트는 싱글스레드 언어로 동기적으로 코드를 실행한다는 것은 알고있을거에요. 싱글스레드란 한번에 하나의 일만 실행하는 것을 의미해요. 상황을 가정해봅시다. 직장인 ㅁㅁ씨는 업무를 하고 점심을 먹으러 갈거에요. 그 업무를 다 처리하기 위해선 5초정도 걸린다고 생각해봅시다. (ㅁㅁ씨가 사는 세계는 5초가 5시간이라고 생각해봐요.) export cons..

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..