doeunn.log

▶랩퍼(Wrapper) 객체 랩퍼 객체를 살펴보기 전에 간단한 예제 코드를 보겠습니다. const arr = 'javascript'; console.log(str.length); // 10 str 변수는 문자열 원시 타입인데도 마치 객체처럼 length 프로퍼티에 접근합니다. 문자열은 객체가 아닌 원시 타입인데 어떻게 프로퍼티를 가질까요? 자바스크립트는 문자열의 프로퍼티에 접근할 때 내부적으로 문자열 값을 가지고 임시 객체로 변환합니다. 그리고 프로퍼티 접근이 종료되면 생성된 객체는 메모리에서 제거됩니다. 자바스크립트에서 이런 과정을 박싱(Boxing)이라고 부릅니다. 숫자와 불리언 타입 역시 프로퍼티에 접근할 때 동일한 과정을 실행합니다. 박싱 과정에서 생성되는 임시 객체를 랩퍼 객체라고 합니다. 랩퍼..

▶배열 자바스크립트의 배열은 개체의 특별한 형태로 순서가 있는 데이터의 집합입니다. 배열 안의 값은 원소라고 하며, 배열의 위치를 가리키는 인덱스로 각 원소에 접근합니다. 인덱스는 0부터 시작하는 정수이며, 배열 값은 어떤 타입의 데이터든 사용할 수 있습니다. 즉 배열은 객체이지만 정수 타입인 인덱스를 프로퍼티로 갖는 특별한 데이터입니다. 1) 배열의 생성 ▷Array() 생성자 사용 객체와 마찬가지로 배열도 자바스크립트에 내장된 생성자 함수 Array()가 있으며, 이를 사용해 새로운 배열을 생성할 수 있습니다. const arr = new Array(1, '1', true); console.log(arr) // [1, '2', true] Array() 생성자 함수는 새로운 배열을 생성하고 인자로 받은..

▶자바스크립트 소개 자바스크립트는 1995년 넷스케이프 커뮤니케이션즈의 개발자인 브렌던 아이크(Brendan Eich)가 개발한 프로그래밍 언어입니다. 최초에는 모카(Mocha)라는 이름이었다가, 잠시 라이브 스크립트라는 이름도 가졌습니다. 이후 자바의인기에 편승하려는 의도로 자바스크립트라는 이름으로 변경해 현재까지 사용하고 있습니다. 1996년 넷스케이프는 자바스크립트의 구격을 ECMA International에 제출했습니다. ECMA International은 ECMA-262라는 명세를 만들었고, 이것이 표준화된 자바스크립의 출발점입니다. 현재 ECMA-262의 명세 관리는 ECMASript international의 TC39에서 담당하고 있습니다. 자바스크립트는 ECMAScript의 명세 구현을 목..

▶접근성 웹 접근성은 모든 신체적 한계, 환경적 한계를 고려해 개발하는 것을 의미합니다. 우리나라의 장애인 차별 금지법에도 웹 접근성과 관련된 내용이 작성되었기 때문에 의무적으로 지켜야 하는 사항입니다. 웹 접근성을 따르는 개발은 장애가 있거나 노령으로 인한 신체 변화, 여러 기기 환경을 사용하는 모든 사람이 웹 사이트와 도구 등을 사용할 수 있도록 개발하는 것을 의미합니다. 그렇다면 프런트엔드 개발자는 어떻게 웹 접근성 지침을 준수할 수 있을까요? ▷웹 접근성 지침 웹 접근성 지침은 W3C에서 설립한 WAI(Web Accessibility Initiative)에서 전문적으로 연구하며 가이드라인을 제공합니다. 웹 콘텐츠에 관한 내용부터, 사용자들이 사용하는 도구 개발에서 지켜야 할 점, 브라우저나 확장 ..

▶반응형 웹을 위한 미디어 쿼리 미디어 쿼리를 사용하면 콘텐츠 자체를 변경하지 않고 장치의 해상도, 뷰포트의 너비, 미디어의 유형 같은 조건에 따라 스타일을 지정할 수 있습니다. 데스크톱과 모바일, 태블릿 등 화면의 크기에 따라 다른 스타일을 지정하거나 인쇄, 음성 장치 등의 조건에 따라 다른 스타일을 적용할 수 있습니다. 미디어 쿼리 작성은 크게 CSS 파일 내부에 작성하거나 나 미디어 쿼리는 미디어 타입과 미디어 기능을 기준으로 동작합니다. 두 조건이 모두 일치할 때 해당 코드가 동작합니다. 미디어 타입에는 모든 장치(all), 인쇄미디어(print), 화면(screen) 등이 존재합니다. /* 미디어 타입이 screen일 때 적용됩니다. */ @media screen { /*...*/ } 미디어 기..

▶flex를 이용한 레이아웃 만들어 보기 레이아웃을 잡는 방법은 과거부터 다양하게 존재했습니다. 을 이용하는 방법부터 아직도 많이 사용되는 float 프로퍼티와 position 등을 이용하는 방법이 존재합니다. 모던 웹 브라우저에서는 보다 유연한 레이아웃 방식이 필요했고, CSS3가 등장하며 이에 맞는 flex와 grid 레이아웃 방식이 등장했습니다. 현재는 대부분의 모던 브라우저에서 flex나 grid 프로퍼티를 지원하기 때문에 레이아웃을 배치하기 위해 이 두 가지 방법을 가장 많이 사용합니다. 이번 글에서는 두 방법 중 flex에 대해 알아보고 flex를 상요해 레이아웃을 작성해 보겠습니다. ▷기본 개념 살펴보기 flex는 디바이스나 디스플레이의 크기에 다라 컨테이너에 들어 있는 콘텐츠의 너비, 높이..