웹(web)136 크롬을 이용한 프론트엔드 디버깅 크롬 개발자도구- Sources-Open Files 순서로 누른다 그러면 다음처럼 검색 창이 뜨는데 js를 쳐서 아무거나 눌러보자 검색창 검색 결과에서 하나를 클릭하면 파일이 보이게 된다. 코드 라인별로 라인 넘버가 표기되는데 클릭해보면 파란색으로 색이 바뀐다. 파란색으로 바뀌면 이 코드에 breakpoint를 걸게 된 것이다. 새로 고침을 헀을 때 브레이크 포인트에 해당하는 코드가 실행된다면 다음처럼 브라우저가 동작을 멈추고 디버깅 화면을 보여준다. 1이 step over, 2가 resume script execution 이다. 1은 해당 라인을 실행하고 다음 라인으로 넘어가게 해준다. 쉽게 말해 한줄 한줄 실행하는 것을 눈으로 볼 수 있다. 2는 다음 브레이크 포인트까지 멈추지 않고 실행하게 해준다... 2022. 4. 22. 테스트 코드 참고 링크 https://kentcdodds.com/blog/testing-implementation-details 2022. 1. 6. 버전관리(SemVer)에서 틸드(~)와 캐럿(^) npm package.json 에서 패키지의 버전을 관리하다 보면 ~1.0.1 이나 ^12.1.2 과 같은 것을 볼 수 있다. 여기서 틸드(~)와 캐럿(^) 에 대해서 살펴보자. 틸드와 캐럿을 사용하기 전에 1.1.3 과 같이 썼을 때 각 자리가 어떤 것을 의미하는지 짚고 넘어가자. npm 에서는 버전관리시에 SemVer 방식을 사용한다. https://semver.org/ Semantic version이라고 불리는 버전 방식을 기준으로 다음과 같이 해석된다. MAJOR.MINOR.PATCH 이라면 MAJOR version when you make incompatible API changes, MINOR version when you add functionality in a backwards compat.. 2022. 1. 4. HTTP/2 프론트엔드 개발시 http2에 대해서 기본적으로 알아야할 부분들을 정리한 글입니다. rfc 7540과 http2 in action, google dev 에서 필요한 부분들을 참고하여 작성하였습니다. 글 후반부에는 프론트엔드 개발시 http2 환경에서 최적화에 대한 내용도 포함하였습니다. terms by rfc7540 (https://datatracker.ietf.org/doc/html/rfc7540#section-2.2) - client: The endpoint that initiates an HTTP/2 connection. Clients send HTTP requests and receive HTTP responses. - connection: A transport-layer connection be.. 2021. 10. 3. 이전 1 2 3 4 5 6 ··· 34 다음