전체 글 154

[codewars] Simple Pig Latin

Instruction. Move the first letter of each word to the end of it, then add 'ay' to the end of the word. Leave punctuation marks untouched. 각 단어의 첫번째 글자를 단어의 마지막으로 옮기고 그 뒤에 'ay'를 추가해라. 부호는 변경하지 마라. Example. pigIt('Pig latin is cool'); // igPay atinlay siay oolcay pigIt('Hello world !'); // elloHay orldway ! Solution. function pigIt(str){ let result = []; let arr = str.split(' '); for(let word of ..

실행 컨텍스트와 동기/비동기 처리 방식

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이 때 생성된 함수 실행 컨텍스트는 콜스택에 추가되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 함수 실행 컨텍스트는 콜스택에서 제거된다. 함수의 실행 순서는 실행 컨텍스트 스택으로 관리하며 이는 뒤이어 설명할 동기, 비동기와도 밀접하게 연관되어 있다. 실행 컨텍스트(execution context) 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보를 모아놓은 객체이다. 실행 컨텍스트가 활성화되는 시점에는 다음과 같은 현상이 발생한다. 호이스팅이 발생한다.(선언된 변수(var)를 위로 끌어올린다) 외부 환경 정보를 구성한다. this의 값을 설정한다. 실행 컨텍스트의 구성 실행 컨텍스트는 코드를 실행할 때 필요한 환경 정보를 ..

REST API(Representational State Transfer)

MDN의 공식문서에 따르면 REST는 효율적, 안정적이며 확장 가능한 분산 시스템을 구현하는 소프트웨어 아키텍처 설계 제약의 모음을 나타낸다고 하며, 그 제약들을 준수했을 때 그 시스템은 RESTful하다고 일컬어진다고 한다. REST에 대한 설명 글은 많이 있지만, 사실 딱하니 머리속에 박히지 않았다. 알것도 같고 모를 것도 같고... 그러다 찾은 설명으로 REST는 HTTP URI를 통해 자원(resource)를 명시하고 HTTP Method(POST, GET.. etc)를 통해 해당 자원에 대한 CRUD operation을 적용하는 것으로 REST의 중심에 자원(resource)이 있고 HTTP Method를 통해 자원을 처리하도록 설계된 아키텍처를 의미한다고 했다. 웹에 존재하는 모든 자원(이미지..

표준 빌트인 객체(standard built-in objects/native objects/global objects)

JavaScript 객체의 분류 1) 표준 빌트인 객체 (standard built-in objects/native objects/global objects) ECMAScript 사양에 정의된 객체로 전역의 공통 기능을 제공한다. 표준 빌트인 객체(표준 내장 객체)는 전역 객체의 프로퍼티로 제공되며 별도의 선언없이 전역 변수처럼 언제나 참조할 수 있다. 2) 호스트 객체 (host objects) 자바스크립트 환경(브라우저 or Node.js 환경)에서 추가로 제공하는 객체를 말한다. 브라우저 환경에서는 클라이언트 사이트 Web API를 호스트 객체로 제공한다. (Web API 예시 - DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SV..

rbenv - BUILD FAILED (macOS 12.5 using ruby-build 20220725)

github page를 만들기 위해 Ruby 버전을 확인한 후 Ruby의 패키지 매니저인 gem을 사용해 jekyll을 설치한다. # 버전 확인 ruby -v # ruby 2.6.8p205 (2021-07-07 revision 67951) [universal.x86_64-darwin21]와 같은 형태로 버전이 출력됨 # jekyll 설치 gem install jekyll bundler 🚨 Error 1. 에러가 발생했다. ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory. macOS는 기본적으로 system Ruby가..

SVG 기본 정의 및 네임 스페이스(name space)

◇ SVG란? SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어로 CSS, DOM, JavaScript 등 다른 웹 표준과도 잘 동작하도록 설계되었다. JEPG, PNG 등 고전적인 비트맵 이미지 형식과 비교했을 때 SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하며 그래픽 편집툴 없이도 파일 내의 텍스트를 수정해서 쉽게 수정할 수 있다. 참고. SVG 요소 referencce - https://developer.mozilla.org/ko/docs/Web/SVG/Element SVG Attribute reference - https://developer.mozilla.org/ko/docs/Web/SVG/Att..

part 2. Promise 사용법

Promise의 3가지 상태 (states) Pending(대기) - 비동기 처리 로직이 아직 완료되지 않은 상태 Fullfilled(이행) - 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) - 비동기 처리가 실패하거나 오류가 발생한 상태 대기(Pending) 중인 promise는 값과 함께 이행할 수도, 어떤 이유(error)로 인해 거부 될 수도 있다. 이런 경우, promise의 then 메서드에 의해 대기열(큐)에 연결된 관련 이벤트가 호출된다. 해당 핸들러가 연결될 때 promise가 이미 이행됬거나 거부된 경우, 핸들러가 호출되므로 비동기 작업 완료와 연결 중인 핸들러 사이에 경합 조건은 없다. Promise.prototype.then() 및 Promise...

Part 1. Promise란? (작동 방식)

*비동기 처리 - 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행함. Promise 객체는 ES6에 도입된 기능으로 비동기 작업에 대한 결과(실패, 성공)를 나타내는 객체이다. 기본적으로 Promise는 함수에 콜백을 전달하는 대신 콜백을 첨부하는 방식의 객체이다. const myPromise = new Promise((resolve, reject) => { // code here }) [예시1] 비동기로 음성파일을 생성해주는 createAudioAsync(음성 설정 정보, 음성파일 생성 시 콜백함수, 음성파일 생성 실패 시 콜백함수)라는 함수가 있다고 가정해보자. // createAudioAsync() - 비동기로 음성 파일을 생성해주는 함수 // audioSetting(음성 설..