⚡능지이슈가 온 부분 리트코드 문제를 풀던 중 능지 이슈가 발생했습니다. 문제는 간단한데 두 문자열의 구조가 일치하면 true 다르면 false를 뱉는 함수를 만드는 것입니다. 전 maker함수를 하나 만들어두고 maker함수는 배열을 반환하도록 코드를 작성했습니다. 그런 뒤 maker함수에 각 문자열을 넣고 결과값을 콘솔로 찍어보면 [0,1,1] == [0,1,1]을 비교하는데도 false가 반환되는 것입니다. 엄격한 비교를 했을때 false라면 이해가 되지만 느슨한 비교를 했는데도 false? 뭔가...이상한데..? 싶어서 찾아본 결과 자바스크립트에서 배열 끼리의 비교(==,===)는 객체를 비교할때처럼 요소의 값이 아닌 주소값(reference)를 기준으로 비교합니다. 즉 각 배열의 길이와 각 요소..
🙄모듈 모듈은 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말합니다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리하는데 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야합니다. 또한 모듈은 모듈의 모든 자산을 캡슐화하며 애플리케이션과 분리되어 존재합니다. 하지만 모듈이 완전히 개별적으로 존재하면 재사용이 불가능하니까 의미가 없음 따라서 모듈은 공개가 필요한 부분을 선정해서 선택적으로 공개하며 이것을 export라고 합니다. export된 모듈의 자산은 다른 모듈에서 재사용할 수 있고 모듈 사용자는 모듈이 공개한 자산 중 일부 or 전체를 선택해 자신의 스코프 내로 불러 들여서 재사용합니다. 이것은 import라고 합니다. 모듈은 개별적으로 존재하다..
🙄async/await 문법 제너레이터보다 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 구현할 수 있는 문법입니다. async/await를 이용하면 프로미스를 기반으로 동작하지만 프로미스 후속 메서드 없이도 마치 동기 처리처럼 프로미스를 사용할 수 있습니다. async 함수는 항상 프로미스를 반환합니다. await 키워드는 항상 async 함수 내부에서 사용해야하며 async함수는 대충 이렇게 사용합니다. async function fetchTodo() { const response = await fetch(url) } function 앞에 async를 쓰는걸로 할 수 있네요 // async 함수 선언문 async function foo(n) {return n;} foo(1).then(v => c..
🙄제너레이터란 제너레이터란 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수입니다. ES6에 도입되었으며 일반함수와의 차이점이 약간 있습니다. 1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있습니다. 일반 함수는 호출하면 제어권이 함수에게 넘어갑니다. 즉 함수 호출자는 함수를 호출한 이후 함수 실행을 제어할 수가 없습니다. 하지만 제너레이터 함수는 함수 실행을 호출자가 제어할 수 있습니다. 이것은 함수의 제어권을 함수가 독점하는게 아니라 함수 호출자에게 양도할 수 있다는 뜻입니다. 2. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고 받을 수 있습니다. 일반 함수는 호출하면 매개변수를 통해 함수 외부에서 값을 주입 받고 함수 코드를 실행하여 결과값..
🙄REST가 뭐에요 REST(REpresentational State Transfer)는 HTTP의 장점을 최대한 활용할 수 있는 아키텍처라고 합니다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful하다라고 표현한다고 하네요 REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이며 REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미합니다. REST의 3요소 구성요소 내용 표현방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드 이렇듯 REST는 자체 표현 구조로 구성되어 있어서 REST API만으로도 HTTP 요청 내용을 이해할 수 있습니다. REST API..
🙄Ajax가 뭐에요? Ajax(Asynchronous Javascript and XML)은 비동기 프로그래밍 방식 중 하나입니다. 자바스크립트를 이용해 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 형태로 이루어집니다. 이런 Ajax는 브라우저에서 제공하는 WEB API인 XMLHttpRequest 객체를 기반으로 동작합니다. XML객체는 HTTP 비동기 통신을 위한 다양한 프로퍼티와 메서드를 제공해요 이전의 웹페이지는 화면이 바뀌면 변경할 필요가 없는 부분까지 전부 포함된 HTML을 전송받고 새로 페이지를 그려나가기 때문에 비효율적이었습니다. 또한 동기 방식으로 동작했기 때문에 서버의 응답이 오기 전까지 블로킹이 발생하는 문제가 있었습..
🙄 자바스크립트는 싱글스레드? 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가집니다. 즉 동시에 두개 이상의 함수를 동시에 실행할 수 없습니다. 따라서 실행중인 실행 컨텍스트를 제외하면 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크라는 뜻입니다. 자바스크립트 엔진은 싱글 스레드 방식으로 동작하는데 그래서 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹이 발생합니다. 🙄동기처리? 비동기처리? 동기 처리는 실행 중인 태스크가 종료할 때 까지 대기하는 방식을 뜻합니다. 반면 비동기처리는 현재 실행 중인 태스크가 종료되지 않은 상태여도 다음 태스크를 곧바로 실행하는 방식을 말합니다. 동기처리는 실행 순서가 보장된다는 장점이 있지만 모든 태스크가 블로킹된다는 문제가 있고 비동기처리는 블로킹이 발생하..
🙄DOM 이 뭔가요? DOM이란 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API 즉 프로퍼티와 메서드를 제공하는 트리 자료구조입니다. 🙄HTML 요소의 구조 hello Hello 시작태그 어트리뷰트이름 어트리뷰트값 콘텐츠 종료태그 요소 노드로 변환 어트리뷰트 노드로변환 어트리뷰트 노드로변환 텍스트 노드로 변환 HTML 요소는 위와 같은 구조로 이루어져 있습니다. 이러한 HTML 요소는 렌더링 엔진에 의해 파싱되어서 DOM을 구성하는 요소 노드 객체로 변환됩니다. 🙄노드는 여러 종류인가요? 네 문서노드 문서 노드는 DOM트리의 최상위에 존재하는 루트노드이며 document 객체를 가리킵니다. 요소노드 요소노드는 html 요소를 가리키는 객체입니다. 요소노드는 문서의 구조를 표현합..
