본문 바로가기
반응형

JavaScript4

프론트엔드 테스트는 어디서부터 어디까지, 어떻게, 꼭 해야할까? (+Jest, Puppeteer, Cypress) 들어가며 이 글에선 프론트엔드의 테스트 코드에는 어떤 것들이 있으며, 테스트 코드 작성법, 좋은 테스트란 어떤 것인지, 나아가 리액트에서는 어떻게 적용할 수 있는지를 설명할 것입니다. 저와 같은 문제를 겪은 분들께 도움이 되는 글이 될 것이라 생각합니다. 간결한 문장을 위해 평어체로 진행하겠습니다. 내가 겪은 문제 나는 테스트 코드를 작성하려고 할 때면, 어디까지 Mocking을 해야하는지, 파라미터 테스트 범위는 어느 정도가 적합한지, 테스트 단위를 얼마나 나눠야하는지 막막했다. 그리고 이렇게 짜는게 맞는건지, 생각할 수 있는 케이스는 다 해본 것 같은데도 불구하고 테스트 커버리지가 높지 않아 고민하기도 했다. 그러다 최근 우테코에 지원해 4주간의 프리코스를 진행 중인데, 여기서 또 테스트와 만나게 되.. 2023. 11. 2.
클로저란, javascript Closure? 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 이게 도대체 무슨 소리일까요? 한국말이 맞긴 한 걸까요? 자, 차분히 한 번 알아봅시다! 저 뜻을 이해하기 위해, 우선 렉시컬 환경이 무엇인지에 대해 알아보겠습니다. 렉시컬 환경은 상위 스코프를 의미하는 실행 컨텍스트의 렉시컬 환경을 뜻합니다. 자, 또 위기에 봉착했습니다! 포기하지 않고, 여기서 다시 한 번 저게 무슨 말인지 알아보겠습니다! 렉시컬(스코프) 환경은 함수를 "어디서 호출" 했는지가 아닌 "어디서 정의" 했는지에 따라 상위 스코프가 결정되는 것 입니다! 코드로 한 번 보시죠! 자 이게 바로 위에서 설명드린 렉시컬 스코프와 클로저의 예시인데요! 마지막에 innerFunc()가 리턴하는 값은 무엇이 될까요? 바로 1이 아닌 10입니다.. 2023. 6. 28.
$.ajax() response 200이지만 error로 처리되는 문제 나의 상황 API를 호출하고 200을 받았는데 SUCCESS가 아닌 ERROR로 분류되어 처리되는 현상 원인 $.ajax({ type: 'POST', url: 'Jqueryoperation.aspx?Operation=DeleteRow', contentType: 'application/json; charset=utf-8', data: json, dataType: 'json', success: AjaxSucceeded, error: AjaxFailed }); 여기서 오류가 발생했는데, dataType의 형식이 ‘json’으로 되어있기 때문이었다. contentType → request의 dataType dataType → response의 dataType 이 차이를 제대로 알지 못하고 써서 생긴 문제였다. .. 2022. 7. 1.
[javascript] 버튼을 누르면 사라지는 아주 간단한 js코드(+보이기, 요소 없애기) 오늘은 버튼을 눌렀을 때, 선택한 요소가 사라지는 효과를 보여주려한다! 간단하게 js로 css를 조작하는 식으로 함수를 만들고, 원하는 버튼을 onclick 했을 때, 그 함수가 실행되게 만들면 된다. 이게 html이고 밑에 "거절" 버튼에 onclick으로 실행될 함수 이름을 넣어준다! 그리고 css로 조작하고 싶은(없애고 싶은) 곳에 id값을 offDisplay로 줬다! 그리고 offDisplay라는 이름의 함수으로 이렇게 한 줄 만들어주면 완성! 나처럼 offDisplay말고 원하는 id이름을 👉 이렇게 getElementById("id이름")을 써도된다! 완성!! 보이기는 반대로 display ="block "; 부분만 바꾸어주면 된다. 물론 두 가지 기능을 모두 쓰고싶으면 함수를 하나 더 생성해.. 2021. 10. 15.
반응형