허도경, limewhale

안드로이드(Android)와 IOS는 태어난 환경이 서로 다르기 때문에 같은 코드와 CSS 속성이 브라우저 엔진에서 다르게 랜더링 되어 화면에 우리가 예측한 값과 다르게 도출되는 경우가 발생합니다. 이 경우 사용자의 유저가 접속한 디바이스가 무엇인지 구분하여 안드로이드 유저에게는 안드로이드 화면이 노출되고 아이폰 유저에게는 아이폰 화면이 노출된다면 우리가 원하는 최적의 결과를 얻을 수 있습니다. 이 방법을 적용하기 위해선 사용자가 접속한 OS가 무엇인지 확인을 해야 합니다. 아래 스크립트를 적용하면 사용자가 접속한 OS에 따라 안드로이드, IOS, 그 외 세가지로 구분하여 body 태그에 해당 Class를 붙여주는 코드입니다. 감사합니다. function deviceModel(){ let currentO..

많은 사용자들이 스크립트를 작성할 때 가장 많이 사용하는 것 중 한 가지를 고르라면 jQuery가 아닐까 생각됩니다. jQuery가 많은 사랑을 받게 된 이유는 처음 입문하기가 쉽다는 것과 높은 가독성, 편리한 사용성이 아닐까 생각됩니다. 하지만 Vue와 React와 같은 라이브러리와 프레임웍이 나타나고 많은 프로젝트에서 Vue와 React를 사용하기 시작하면서부터 프로젝트 작업을 할 때 jQuery를 사용해서 작업하기가 꺼려지는 측면이 있습니다. 물론 Vue와 React에서도 NPM을 이용하여 jQuery를 사용할 순 있지만 Vue와 React 모두 가상 DOM을 활용하고 가상의 DOM을 추상화하여 사용하기 때문에 jQuery와 같은 DOM을 순차적으로 읽으며 스크립트를 동작시키는 것은 스크립트 충돌을..

우리가 스크립트를 작성하다 보면 아주 어려운 코드를 제외하곤 대부분은 특정한 이벤트가 발생했을 때 그 값이 참(True), 거짓(False)인지 구분하여 그 값에 맞게 화면을 처리하는 스크립트가 대부분이라고 생각합니다. 그런데 이와 같은 분기 조건절 스크립트를 이벤트마다 적어서 작성하면 그 코드는 중복 코드와 함께 비 효율적으로 코드가 동작하게 됩니다. 물론 각 이벤트마다 중복 코드를 작성하는 게 틀렸다는 건 절대 아닙니다. 일단 무리 없이 코드가 동작하면 그 코드는 이상이 없다는 코드라는 말과 같습니다. 다만 우리가 최적화의 방법을 모를 때는 어쩔 수 없지만 코드의 가독성과 유지 보수를 위해서 중복된 코드를 제거하는 건 좋은 코드를 만드는 첫 번째 방법이라고 생각합니다. 저와 같이 이번에 중복 코드 제..

일반적으로 스크립트를 작성하다 보면 공통적으로 상용되는 스크립트는 별도의 공통 함수로 빼서 작업을 하는 게 일반적입니다. 그래야 관리 이슈도 적고 해당 함수를 호출하게 될 때에도 쉽게 파악하여 스크립트를 사용할 수 있습니다. 이 방식은 정의되어 있는 스크립트를 화면에서 호출할 때에는 아무런 문제가 발생하지 않습니다. 그렇다면 공통 함수를 별도의 다른 스크립트에서 사용해야만 하는 상황이 발생하게 된다면 어떻게 될까요? 위의 상황을 조금 더 쉽게 예시를 들어서 이야기 해 보겠습니다. 우리는 공통 스크립트 "common.js"라는 파일을 만들었습니다. 그리고 특수한 페이지에서만 사용하는 "others.js" 스크립트도 만들어서 사용하고 있습니다. 그런데 작업을 진행하다 보니 별도의 함수에서만 사용하는 스크립트..

우리는 데이터의 값을 출력할 때 최초의 값에서 값이 추가되거나 삭제, 수정이 발생하는 경우가 생기게 됩니다. 이럴 경우 원본 데이터의 값에 바로 접근하여 사용하는 방법도 있지만 이와 같은 방법은 추후에 원본 데이터가 변경되었기 때문에 다양한 오류를 발생시킬 가능성이 있습니다. 그래서 효과적인 방법은 원본 데이터의 값을 복사하여 가공하거나 수정하는 방법을 사용하는 것이 좋습니다. 이런 경우에 사용하는 것이 바로 얕은 복사(shallow copy)와 깊은 복사(deep copy) 입니다. 자바스크립트에서 원시 타입(primitive type)의 값은 새로운 메모리 공간에 독립적인 값을 저장하기 때문에 깊은 복사가 되고 참조 타입(reference type)값은 얕은 복사가 됩니다. 잠깐..... 아직 얕은 ..

인터섹션 옵저버(Intersection Observer)에 관해서 이전에 한번 정리했던 적이 있습니다. IntersectionObserver(인터섹션 옵저버) const io = new IntersectionObserver(callback, options) // 관찰자 초기화 io.observe(element) // 관찰할 대상(요소) 등록 Intersection observer는 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Elem.. whales.tistory.com 우리말로 하면 "교차 관찰자" 정도로 정의될 거 같습니다. 인터섹션 옵저버가 무엇인지 모르거나 해당 요소를 좀 더 자세히 이해하고 싶으시면 이전 글을 한번 읽어보시고 다시 여기로 돌아와 공부를 하셔도 좋을 것 같습니다. 그..

const io = new IntersectionObserver(callback, options) // 관찰자 초기화 io.observe(element) // 관찰할 대상(요소) 등록 Intersection observer는 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공합니다. 조금 더 쉽게 이해하면 특정 영역이 현재 유저가 바라보는 브라우저 화면에서 보이는 영역인지 아닌지를 구별할 수 있습니다. 이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 성능 이슈 없이 사용할 수 있다는 장점이 있..

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. filter() 메서드를 사용하면 filter() 메서드의 조건에 맞는 요소로 이루어진 새로운 배열을 반환합니다. 어떤 요소도 조건을 만족하지 못했다면 빈 배열을 반환합니다. 즉 filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성합니다. callback은 할당된 값이 있는 배열의 인덱스에 대해서만 호출됩니다. 삭제됐거나 값이 할당된 적이 없는 인덱스에 대해서는 호출되지 않습니다. callback의 조건을 만족하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않습니다. f..

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. const array1 = [1, 4, 9, 16]; const map1 = array1.map(x => x * 2); console.log(map1); // 결과: Array [2, 8, 18, 32] 위의 코드를 한번 보면 배열에 들어있는 값을 화살표 함수를 이용하여 배열의 값을 매개변수로 받아서 각 배열의 값을 반복문을 돌며 값을 출력하는 코드입니다. map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환 값으로 새로운 배열을 만듭니다. callback 함수는 (undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이..

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 아직은 구조 분해 할당이라는 말이 쉽게 이해되지 않으실 거예요. 그럼 예시를 한번 들어볼게요. 가령 배열에 1,2의 값이 있고 이 값을 변수 a, b에 각각 넣으려고 한다면 어떻게 하면 될까요? const array = [1,2]; const one = array[0]; const two = array[1]; console.log(one) //결과:1 console.log(two) //결과:2 위의 코드처럼 각 변수에 인덱스 값으로 접근해서 하나씩 값을 넣으면 변수에 값을 각각 넣을 수 있습니다. 하지만 위의 예제처럼 값이 2개가 아닌 수백 개, 수천 개의 배열이라면 저런 방..