jhhan의 블로그

이번 포스트에서는 shadow DOM과 template에 대해서 알아보겠습니다. 지난 포스트와 이어지는 내용이 있으니 참고하셔도 좋습니다. https://jhhan009.tistory.com/130 Web Components 이번 시간에는 Web Components에 대해서 알아보겠습니다. html 코드를 작성하다 보면, 혹은 살펴본다면 div 태그들을 많이 쓰는 것을 볼 수 있습니다. 근데 실제로 이 div 태그들을 계속해서 쓰는 것이 jhhan009.tistory.com 1. 화면 상에서는 나름 복잡하게 보이는데 코드 상으로는 간단한 그런 것들이 있습니다. input 이 아마도 그런 예시가 될 것 같습니다. 코드 한 줄로 표현이 되지만, 과연 코드 한 줄로 저런 화면이 나오는 것이 되는 걸까요... ..

이번 시간에는 Web Components에 대해서 알아보겠습니다. html 코드를 작성하다 보면, 혹은 살펴본다면 div 태그들을 많이 쓰는 것을 볼 수 있습니다. 근데 실제로 이 div 태그들을 계속해서 쓰는 것이 귀찮을 수 있습니다. 그런 것들을 모아서 하나의 새로운 태그로 만드는 것도 괜찮지 않을까요? 바로 Web Components라는 문법을 사용하면 가능하다고 합니다. 참고로 이것은 브라우저에서 지원해주는 기능입니다. 그리고 js 문법으로 구현할 수 있어서 js를 사용해서 진행합니다. 1. 커스텀 태그 만들어보기 만들어보고자 하는 커스텀 태그가 없다면 다음의 커스텀 태그 예시를 살펴보겠습니다. label 과 input 태그가 같이 나오는 그런 태그를 만들어보겠습니다. class LabelAndI..

이번 포스트에서는 웹브라우저 동작 원리에 대해 간단하게 알아보려고 합니다. 요즘은 node.js가 나왔기 때문에 js 구동을 어디서든지 할 수 있지만, node.js가 나오기 전에는 js 구동이 제한적인 걸로 알고 있습니다. 그리고 그 제한적인 곳 중 하나가 브라우저 입니다. js 코드를 열심히 작성하고 나서 js가 잘 실행되는지 확인하는 곳이 브라우저라는 것은 js 개발을 한 번이라도 해봤으면 아실 것입니다. 그렇기 때문에 브라우저에서 js가 어떤 식으로 동작하는지 안다면 js 개발을 좀 더 효율적으로 할 수 있지 않을까요 ㅎ 1. 브라우저 브라우저는 c++로 구현되어 있다고 합니다.(확인 필요) 그리고 브라우저는 stack과 queue라는 공간을 가지고 있다고 합니다. 여기서 stack은 코드를 실행..

이번 포스트에서는 async와 await에 대해서 적어보려 합니다. 이전 글에서 Promise 디자인 패턴에 대해서 알아봤습니다. (필요하시다면 참고하시면 되겠습니다.) https://jhhan009.tistory.com/126 Promise는 디자인 패턴으로 사용하기 어렵다고 생각하는 사람이 있을 수도 있습니다. 그럴 때는 ES8에서 등장한 async & await을 사용하는 것을 고려해 볼 수 있습니다. async 와 await을 쓰는 것은 Promise보다 코드 상으로는 더 간편할 수 있습니다. async function f1() { return 1+1; } 위의 코드처럼 function에 async를 붙이면 됩니다. 그리고 난 후 async function f1() { return 1+1; } f..

이번 포스트에서는 Promise에 대해서 알아보겠습니다. 이번 글은 아래의 글과 연관되는 부분이 있습니다. https://jhhan009.tistory.com/125 동기, 비동기 처리 & 콜백함수 이번 포스트에서는 동기, 비동기 처리 & 콜백함수 에 대해서 작성해보겠습니다. javascript는 동기식 처리의 특징을 가지는 언어입니다. 동기식 처리는 한 번에 한 줄 씩 처리하는 것을 의미합니다. jhhan009.tistory.com Promise는 디자인 패턴으로 callback 함수를 사용하는데 있어 불편함을 느낀다면 사용할 수 있는 대체제 입니다. 먼저 Promise의 간략한 사용법을 알아보죠 let pm1 = new Promise(); pm1.then(function() { }).catch(fun..

이번 포스트에서는 동기, 비동기 처리 & 콜백함수 에 대해서 작성해보겠습니다. javascript는 동기식 처리의 특징을 가지는 언어입니다. 동기식 처리는 한 번에 한 줄 씩 처리하는 것을 의미합니다. 코드 예시를 보겠습니다. console.log(1); console.log(2); console.log(3); 만약 이런 코드가 있다면 실행결과는 어떨까요? 결과값은 1 2 3 으로 나오게 됩니다. 동기식 처리를 진행하기 때문에 한 줄 씩 처리해서 코드가 적힌 순서대로 출력됩니다. 이는 javascript를 실행하는 웹브라우저의 stack이라는 공간에서 코드를 한줄 한줄 실행하게 하기 때문입니다. 근데 대부분의 프로그래밍 언어들은 동기식 처리로 진행합니다. 하지만 javascript 코딩을 하다보면 비동기..

이번 포스트에서는 getter 와 setter에 대해서 알아보겠습니다. 아래의 글과 연관이 될 것 같은 포스트여서 링크를 남겨두겠습니다. https://jhhan009.tistory.com/123#comment11331584 extends & super 이번 포스트에서는 extends 와 super에 대해 알아보겠습니다. https://jhhan009.tistory.com/122 Constructor & Prototype 이번 포스트에서는 Constructor에 대해서 알아보겠습니다. 개발언어로 javascript를 처음 써본 사 jhhan009.tistory.com 1. getter & setter getter와 setter 역시 다른 언어를 배우고 왔다면 쉽게 아는 개념입니다. getter : 데이터..

이번 글에서는 Spread Operator에 대해서 알아보겠습니다. 아마 spread operator라는 단어를 모를 수도 있습니다. 하지만 js 코드를 보다보면 "...list " 라는 형식으로 쓰여진 변수들을 간혹 찾아볼 수 있습니다. 이렇게 ... 이 붙어있는 것을 spread operator 라는 문법으로 불린다고 합니다. 쉽게 설명하면 '괄호제거 연산자'라고 볼 수 있습니다. 예시를 한번 보시죠 let arr = ['a', 'b', 'c']; console.log(arr); console.log(...arr); js 코드를 위와 같이 작성한 후 실행을 한다면 라는 결과를 얻을 수 있습니다. console.log(arr); : 배열 형태로 출력합니다. console.log(...arr); : []..