junior developer :)/JS_JavaScript19 생성자 함수_new (with.모던 자바스크립트 deep dive) 오늘은 모던 자바스크립트 deep dive 책에서 프로젝트 작업때보다 코딩테스트 당시 많이 썼던 생성자 함수 부분 중 일부를 읽고 정리해보려고 한다. 객체 리터럴 객체 리터럴에 의한 객체 생성 방식은 직관적이다. 하지만 객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성한다. 여러개를 생성하려면 같은 기능을 하는 코드를 여러번 작성해야해서 비효율적이다. //객체 리터럴에 의한 객체 생성방식 const circle1={ radius:5, getDiameter() { return 2*this.radius; } } console.log(circle1.getDiameter()); 만약 지름이 10인 circle 객체를 하나 더 만들고 싶다면 radius값만 바뀐 상태로 같은 코드가 작성된다. 즉, 객체.. 2023. 8. 3. 이벤트 버블링에 대해서 (이벤트 버블링, 이벤트 캡쳐링, 이벤트 위임) 오늘은 이벤트 버블링에 대해서 공부한 내용을 적어보려고 한다. 이벤트 캡처링 이벤트 캡처링은 버블링과 반대로 브라우저로부터 이벤트가 발생한 요소까지 이벤트를 전달한다. 처음 js를 학습할 때 addEventListener메소드와 를 접했던 적이 있다. 이 메소드는 이벤트 캡처링을 위한 메소드이다. 이벤트 버블링 이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. 버블링은 해당 타깃에서 최상위 객체를 만날 때까지 핸들러가 모두 호출되는데, 원하는 타깃에서만 이벤트를 발생시키고 싶을 수가 있다. 그때 event.stopPropagation 메소드를 이용하면 상위요소로 이벤트가 전파되는 것을 막을 수 있다. 하지만 추후에 문제가 발생할 수.. 2023. 7. 25. 객체 배열의 중복 제거 (filter, findLastIndex 메서드) 오늘은 객체 배열의 데이터에서 중복되는 객체의 값이 있을 때 원하는 조건으로 중복을 제거하는 방법에 대해 적어보려고 한다. 프로젝트를 진행할 때 OTT별 영화 데이터를 홈 화면에 보여줘야 했는데, 처음엔 영화 순위를 기준으로 화면에 렌더링 되도록 코드를 작성해 뒀다. 하지만 하루에 한번씩 크롤링을 통해 새로운 영화가 쌓이게 되고 나니 중복되는 순위의 영화는 중복으로 나타나게 되고 심지어 순서도 뒤죽박죽이 되는 점을 확인할 수 있었다. 현재 코드에서는 데이터를 받아오는 형태는 객체 배열이고, 정렬 조건은 먼저 OTT별 영화 순위, 중복되는 순위가 있다면 수정 시간이 최근인 데이터를 보여주도록 하는 과정이 필요했다. 검색해 보니 javascript에서 객체 배열 중복을 없애는 방법은 여러가지가 있었다. 1... 2023. 2. 17. JS_최적화(Optimization)/Lighthouse로 성능 분석해보기 코드를 구현할 때 어떻게 하면 더 적은 비용, 적은 시간을 들여 원하는 결과를 얻을 수 있을지 고민하는 코드 최적화 과정은 꼭 필요한 과정이라는 생각이 든다. 최적화의 필요성 및 효과 - 이탈율 감소 - 전환율 증가 웹 사이트를 방문한 사용자 중 회원가입, 상품 구매 등 다른 활동으로 연결된 방문자의 비율 - 수익 증대 - UX(사용자 경험)향상 최적화 기법 JS에서 최적화를 하기 위해서는 여러 방법이 있다 1. JavaScript 파일은 HTML의 body부분에서, css는 HTML의 header 부분에서 불러온다. 간략하게 정리하자면 CSS 파일이 header 부분에 들어가는 이유는 화면을 랜더링 할 때 필요한 CSSOM 트리를 가능한 빠르게 구성할 수 있도록 하기 위해서다. JS가 body 하단에 .. 2022. 12. 5. 이전 1 2 3 4 5 다음 728x90 반응형
