FrontEnd/HTML5 & CSS & JavaScript29 [JavaScript] .map(), .filter(), .reduce() API 비교 JavaScript의 함수형 프로그래밍은 코드 가독성, 유지 관리 및 테스트에 이점이 있다. 함수형 프로그래밍 사고 방식에 도움이 되는 것 중 하나는 배열 처리 스타일 프로그래밍이다. 배열 처리 스타일 프로그래밍은 배열을 기본 데이터 구조로 사용하며, 배열의 요소에 대한 일련의 작업이 가능하다. forEach : 배열의 항목에 접근 for 루프는 배열의 모든 항목을 접근, 반복하는데 사용된다. forEach 역시 같은 역할을 하지만, for문 보다 더 간단하게 접근이 가능하다. const strings = ['arielle', 'are', 'you', 'there']; const capitalizedStrings = []; for (let i = 0; i < strings.length; i += 1) {.. 2022. 1. 18. 웹 접근성과 시맨틱 마크업 시맨틱 마크업 시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다. 작성 방법 시멘틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다. 즉, 다음과 같은 것들을 말한다. 헤더/푸터에 와 사용 메인 컨텐츠에 과 사용 독립적인 컨텐츠에 사용 최상위 제목으로 사용 순서가 없는 목록으로 과 사용 내비게이션에 사용 이런 식의 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일.. 2022. 1. 17. [JavaScript] 자바스크립트 비동기 처리 비동기 프로그래밍의 개념 비동기적 일반적으로 주어진 프로그램의 코드는 한 번에 한 가지만 발생하면서 곧바로 실행된다. 함수가 다른 함수의 결과에 의존하는 경우 다른 함수가 완료되고 반환될 때까지 기다려야하므로, 전체 프로그램이 중지된다. (동기적) Blocking Code 비동기 기술은 특히 웹 프로그래밍에서 매우 유용하다. 웹 앱이 브라우저에서 실행되고 브라우저에서 제어를 반환하지 않고 큰 크기의 코드를 실행하면 브라우저가 정지된 것처럼 보일 수 있다. 이것을 Blocking이라고 한다. 브라우저는 웹 앱이 프로세서의 제어를 반환할 때까지 계속해서 사용자 입력을 처리하고 다른 작업을 수행하지 못하도록 차단된다. 스레드 스레드는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 하나의 과정으로, 각.. 2022. 1. 5. [JavaScript] 이벤트 버블링과 캡처링, 그리고 이벤트 위임 버블링(Bubbling) 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. FORM DIV P 가장 안쪽의 를 클릭하면 p -> div -> form 순서로 alert창이 뜬다. 이런 흐름을 "이벤트 버블링"이라고 부른다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문이다. 거의 모든 이벤트는 버블링된다. focus 이벤트와 같이 버블링 되지 않는 이벤트도 있다. 버블링 되지 않는 이벤트의 종류에 대해서는 아래에서 설명한다. 몇몇 이벤트를 제외하곤 대부분의 이벤.. 2022. 1. 4. [JavaScript] 4가지의 바인딩과 화살표 함수 JavaScript에서의 this JavaScript에서 this는 자기 자신을 가리키지 않는다. JavaScript에서 함수는 모두 객체이기 때문에 내장된 프로퍼티, 메서드를 가질 수 있다. 따라서 특정 상태값을 유지/접근하기 위해 함수 내부에서 this를 사용할 것이다. 이러한 방법도 가능하지만, this를 이해하지 못하고 사용하면 잘못된 결과를 얻을 수 있다. 아래 예시를 참고하자. function foo(num) { console.log("foo: " + num); this.count++; } foo.count = 0; for(let i = 0; i < 10; i++) { if(i < 5) { foo(i); } } console.log(foo.count); console.log(count); //.. 2022. 1. 4. 쿠키 vs 세션 vs 웹 스토리지(로컬 스토리지, 세션 스토리지) HTTP 프로토콜의 한계를 보안하기 위해 쿠키 또는 세션을 사용한다. 기본적으로 HTTP 프로토콜 환경은 비연결지향(connectionless), 무상태(stateless)한 특성을 가지기 때문에 요청만으로 서버는 클라이언트를 구별할 수 없다. 비연결성지향(connectionless) HTTP는 먼저 클라이언트가 요청을 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 응답을 보내고 TCP/IP 연결을 끊는 특성이다. HTTP 1.1에서는 헤더에 keep-alive라는 값을 줘서 커넥션을 재활용한다. 무상태(stateless) 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는 특성이다. 쿠키(Cookie) 클라이언트(브라우저)에 저장되는 키와 같이 들어있는 작은 파일이다. 클.. 2022. 1. 2. 이전 1 2 3 4 5 다음
