🌳Frontend

https://careerly.co.kr/qnas/5100 주니어 프론트 개발자인데 매일 자괴감을 느낍니다 저는 2년차 프론트엔드 개발자로, 스타트업에서 일하고 있는데요. 기능 개발 일정을 맞추느라 더 좋은 코드를 고민하거나 적용하지 못하고, 당장 돌아가는 코드를 짜기... careerly.co.kr 지금 내 상황과 너무나도 유사한 고민이었다. 그 중, 가장 와닿은 답변은 인기답변으로 채택된 답변인데, 되새김질을 하기 위해 정리를 해보고자 한다. 😥 나 자신이 코드기계처럼 느껴져요 개발일정을 맞추느라 더 좋은 소스를 고민하는 것 보다, 당장 돌아가느 코드를 짜기에 급한 상황. 꼼꼼하게 짜지 못하다 보니, 버그도 많이 나오는 상황. 어떻게 해야 더 좋은 코드를 짜고 건강을 지킬 수 있을까? 이는 개발자로 ..

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