목록전체 글 (132)
fffo
이벤트 드리븐 프로그래밍 이벤트 : 무언가 일어났다는 신호 이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 함수 이벤트 핸들러 등록 : 브라우저에게 이벤트 핸들러의 호출을 위임 브라우저가 행동을 감지해 이벤트를 발생 시킴 이벤트 드리븐 프로그래밍 : 이벤트 중심으로 프로그램의 흐름을 제어하는 프로그래밍 방식 이벤트 타입 이벤트 타입 : 이벤트의 종류를 나타내는 문자열 이벤트 핸들러 등록 이벤트 핸들러 어트리뷰트 방식 HTML 요소의 이벤트 핸들러 어트리뷰트에 값으로 문(statement)을 할당 각 어트리뷰트 이름은 'on + 이벤트 타입' Click me 이벤트 핸들러 어트리뷰트 값은 암묵적으로 생성될 이벤트 핸들러의 몸체를 의미함 위 예에서 onclick="sayHi('dlwlrma')" 어트리뷰트는..
정확한 태그 사용은 접근성 향상에 큰 도움을 줍니다. article과 section태그의 정확한 사용법을 알아보겠습니다. article article 태크는 하나의 독립적인 컨텐츠를 다룰 때 사용합니다. 독립적 컨텐츠는 뉴스 사이트에서 하나의 기사에 해당되고 쇼핑몰에서 하나의 상품, 동영상 스트리밍 사이트에서는 하나의 영상이 해당될 수 있습니다. section section은 하나의 컨텐츠 내부에서 구획을 짓기 위한 요소입니다. 예를 들어 하나의 기사에서 간단 요약 부분이 나오고 다음 문단부터 본문이 나오는 경우를 보겠습니다. 간단 요약 문단을 section 태그 안에 넣고 accessible name으로 '간단 요약'을 표기한다면 스크린 리더 사용자는 해당 section에 들어가게 되면 간단 요약 영역..
싱글 스레드 방식 자바스크립트는 한 번에 하나씩 일을 처리하는 싱글 스레드 방식으로 작동합니다. 코드 한 줄을 실행할 때 다음 줄의 코드는 이전 코드가 끝날 때까지 대기하게 됩니다. 만약 코드상에서 무거운 작업이 있다면 그 이후 작업들은 먼저 있는 무거운 작업이 끝날 때까지 대기할 수 밖에 없습니다. 자바스크립트를 비동기적으로 처리하려면 싱글 스레드 방식의 자바스크립트 엔진만으로는 불가능 합니다. 이를 해결하기 위해 자바스크립트 엔진은 콜백 패턴을 사용합니다. 콜백 패턴 콜백 또는 콜백함수란 매개변수로 전달되는 함수를 의미합니다. 자바스크립트는 비동기 처리를 하기 위해 비동기로 처리 하고자 하는 함수를 매개변수에 담아서 자바스크립트 엔진 외부로 전달합니다. 이 때 엔진 외부는 호스트 환경에 따라 달라질 ..
this 키워드 this 키워드는 자기 자신이 속한 객체나 속할 객체를 가리키기 위한 자기 참조 변수입니다. 메서드에서 자신이 속한 객체의 프로퍼티를 참조하기 위해 자신이 속한 객체를 가리키거나 생성자 함수에서 자신이 만들 인스턴스를 가리키는 식별자를 참조하기 위해 사용합니다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되어 함수 호출 방식에 의해 동적으로 바인딩 됩니다. 크게 네 가지로 나누어 볼 수 있습니다. 일반 함수 호출, 메서드 호출, 생성자 함수 호출, 그리고 간접 호출 이렇게 네 가지로 각각의 호출 방식에 의해 this가 가리키는 값은 동적으로 바인딩 됩니다. 메서드 호출 시 this 메서드란 보통 객체에 묶여있는 함수를 말하는데 여기서 말하는 메서드는 조금 더 구체적인 범위를 가지고..
문제 문제 설명 건설회사의 설계사인 죠르디는 고객사로부터 자동차 경주로 건설에 필요한 견적을 의뢰받았습니다. 제공된 경주로 설계 도면에 따르면 경주로 부지는 N x N 크기의 정사각형 격자 형태이며 각 격자는 1 x 1 크기입니다. 설계 도면에는 각 격자의 칸은 0 또는 1 로 채워져 있으며, 0은 칸이 비어 있음을 1은 해당 칸이 벽으로 채워져 있음을 나타냅니다. 경주로의 출발점은 (0, 0) 칸(좌측 상단)이며, 도착점은 (N-1, N-1) 칸(우측 하단)입니다. 죠르디는 출발점인 (0, 0) 칸에서 출발한 자동차가 도착점인 (N-1, N-1) 칸까지 무사히 도달할 수 있게 중간에 끊기지 않도록 경주로를 건설해야 합니다. 경주로는 상, 하, 좌, 우로 인접한 두 빈 칸을 연결하여 건설할 수 있으며, ..
브라우저 저장소는 크게 두 가지가 있습니다. 하나는 쿠키(cookie)이고 다른 하나는 웹 스토리지(web storage)입니다. 둘 모두 브라우저에 데이터를 저장하는 컨테이너라고 볼 수 있지만 몇 가지 다른 점이 있습니다. 우선 쿠키는 매 요청(request)마다 서버로 전송이 되는 반면 웹 스토리지는 요청 시에도 서버로 전송되지 않습니다. 그렇기 때문에 일반적으로 웹스토리지가 쿠키보다 더 많은 데이터를 보관할 수 있습니다. 개발자는 브라우저 내의 웹 스토리지 구성 방식을 설정할 수 있습니다. 그런데 서버는 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없습니다. 웹 스토리지 객체의 조작은 모두 자바스크립트 내에서 수행됩니다. 웹스토리지 객체는 URL의 scheme(프로토콜) + host(도메인) +..
문제 문제 설명 [본 문제는 정확성과 효율성 테스트 각각 점수가 있는 문제입니다.] 업무용 소프트웨어를 개발하는 니니즈웍스의 인턴인 앙몬드는 명령어 기반으로 표의 행을 선택, 삭제, 복구하는 프로그램을 작성하는 과제를 맡았습니다. 세부 요구 사항은 다음과 같습니다 위 그림에서 파란색으로 칠해진 칸은 현재 선택된 행을 나타냅니다. 단, 한 번에 한 행만 선택할 수 있으며, 표의 범위(0행 ~ 마지막 행)를 벗어날 수 없습니다. 이때, 다음과 같은 명령어를 이용하여 표를 편집합니다. "U X": 현재 선택된 행에서 X칸 위에 있는 행을 선택합니다. "D X": 현재 선택된 행에서 X칸 아래에 있는 행을 선택합니다. "C" : 현재 선택된 행을 삭제한 후, 바로 아래 행을 선택합니다. 단, 삭제된 행이 가장 ..
문제 문제 설명 카카오TV에서 유명한 크리에이터로 활동 중인 죠르디는 환경 단체로부터 자신의 가장 인기있는 동영상에 지구온난화의 심각성을 알리기 위한 공익광고를 넣어 달라는 요청을 받았습니다. 평소에 환경 문제에 관심을 가지고 있던 "죠르디"는 요청을 받아들였고 광고효과를 높이기 위해 시청자들이 가장 많이 보는 구간에 공익광고를 넣으려고 합니다. "죠르디"는 시청자들이 해당 동영상의 어떤 구간을 재생했는 지 알 수 있는 재생구간 기록을 구했고, 해당 기록을 바탕으로 공익광고가 삽입될 최적의 위치를 고를 수 있었습니다. 참고로 광고는 재생 중인 동영상의 오른쪽 아래에서 원래 영상과 동시에 재생되는 PIP(Picture in Picture) 형태로 제공됩니다. 다음은 "죠르디"가 공익광고가 삽입될 최적의 위..