프로그래밍 공부하기

1. 정의 Attribute: HTML 요소의 추가적인 정보. HTML에서 정의된다. ex. Property: DOM Tree 내의 Attribute. DOM에서 정의된다. ex. const $div = document.querySelector(".root"); console.log(div.className); // root 웹페이지 개발을 하다보면 Attribute와 Property라는 단어를 접하게 된다. 두 단어는 어떤 차이가 있을까? 먼저 Attribute는 HTML 요소의 추가적인 정보를 정의하기 위한 것으로 HTML에서 정의된다. 반면 Property는 DOM Tree 내에서의 Attribute를 가리키므로 DOM 내에서 정의된다. *DOM: HTML 페이지를 객체로 구조화한 것. 프로그래밍 ..

1. Lang This paragraph is defined as British English. Ce paragraphe est défini en français. 이 단락은 한국어로 정의됩니다. lang은 모든 HTML 요소에 사용될 수 있는 전역특성(Global Attribute)이다. 위와 같이 HTML요소의 컨텐츠가 어떤 언어로 쓰여졌는지 표시하는 것이다. lang 특성의 값이 빈 문자열이거나 특성자체가 없는 경우 기본값인 '알 수 없음(Unknown)'이 된다. 2. Use lang 태그를 사용해야할까? 한국형 웹 콘텐츠 접근성 지침(관련페이지, 관련문서)에는 웹 서비스는 서비스에서 주로 사용되는 언어를 사용해야한다고 명시되어있다. 이는 소스코드 최상단에 위치하는 html 태그에 lang 속성을..

Observer란 관측자를 뜻한다. 특정 대상을 항상 지켜보고 있는 존재이다. 브라우저에는 Intersection Observer 라는 API가 존재한다. Intersection Observer는 root와 하나 이상의 Element가 교차하는 시점을 관측하고 있다. root는 지정하지 않는다면 뷰포트를 의미한다. 즉, Intersection Observer는 관찰 대상이 뷰포트 내에 들어오는지 비동기적으로 관찰하는 요소로 활용할 수 있다. Intersection Observer는 대표적으로 무한스크롤, 컨텐츠 Lazy Load의 구현에 사용된다. 1. Infinity Scroll 무한 스크롤이란 페이지의 세로 끝에 도달했을 때 새로운 컨텐츠를 불러오는 기능이다. 무한 스크롤을 구현하는 방식 중 하나는 ..

블로깅을 시작하고 100개가 넘는 포스팅을 했지만 JavaScript의 기본인 실행 컨텍스트에 대한 포스팅을 한 적이 없다. 왜냐하면 내 스스로 실행 컨텍스트에 대한 이해가 부족하다고 생각하고 정리하기 어려운 개념이기 때문이다. 하지만 이를 계속 회피할 수는 없기 때문에 내가 생각하는 실행 컨텍스트에 대해 정리해보고자 한다. 이 글의 내용은 특히 필자의 주관적인 의견이 담겨있을 수도 있고, 정확한 정보가 아닐 수도 있다. 혹시 읽는 사람이 있다면 이러한 점을 고려해주었으면 좋겠다,, 1. Context 문맥(Context)이란 말을 코드 이외의 곳에서 들어본 적이 있는가? 나는 학창시절 국어시험에서 본 경험이 있다. 국어 시험에선 지문의 '배' 와 같은 단어에 밑줄을 쳐놓고 '문맥'상 어떤 의미인지 고르..

1. Props Drilling React에서 props로 컴포넌트간 데이터를 전달할 때 해당 데이터가 필요없는 컴포넌트에도 어쩔 수 없이 데이터가 전달해주어야 할 때가 있다. 위 그림에서 컴포넌트 A의 데이터를 컴포넌트 C로 전달하기 위해선 사이에 있는 컴포넌트 B를 거쳐야하는 것처럼 말이다. 이것이 Props Drilling(혹은 Threading)이다. Props Drilling은 데이터 전달을 구현하는 가장 단순한 방법이지만 코드를 이해하기 어렵게 만든다. 그림을 다시 보자. 데이터 전달을 위해 컴포넌트 B는 필요하지 않은 데이터를 갖게되다. 또한 컴포넌트 A에서 B로 전달될 때와 B에서 C로 전달될 때 Property 이름이 변경된다면 어떨까? C에서 문제가 생겼을 때 해당 프라퍼티가 어디서 온..

프로그래밍이란 문제를 정의하고 해결해나가는 과정이다. 만약 문제가 너무 복잡하고 큰 문제라면 어떻게 해야할까? 일반적으로 문제를 작은 부분으로 쪼개어 하나씩 풀어나갈 것이다. 이 때 문제를 작은 부분으로 쪼개나가는 것을 모듈화라고 한다. 모듈은 프로그램의 일부로, 독립적인 기능을 갖는 단위이다. 따라서 독립적으로 컴파일 가능한 프로그램 혹은 하나의 함수도 모듈이 될 수 있다. 일반적으로 모듈의 독립성이 높을수록 좋은 모듈이라고 한다. 일반적으로 독립성이 높은 모듈이 재사용성이 높고 코드의 이해/수정이 용이하기 때문이다. 이 때 모듈의 독립성은 결합도와 응집도로 측정한다. 응집도는 한 모듈 내의 구성요소들 간의 연관 정도를 의미하고, 결합도는 모듈과 모듈 간의 의존 정도를 의미한다. 응집도는 강할수록, 결..

(function () { console.log('Hello!!') })(); // Hello!! JS 코드를 보다보면 위와 같은 형식의 코드를 볼 수 있다. 위와 같은 문법은 IIFE(Immediately Invoked Function Expression)이라고 하며, 괄호로 둘러싸인 익명함수와 함수를 실행하는 괄호를 연결하여 함수가 정의되자마자 실행되게 한다. 즉시 실행 함수 표현이라고도 한다. 일단 함수 선언식과 표현식에 대해 알아보자. 1. 함수 선언문과 표현식 //함수 선언문 function fn1() { console.log("Hello!"); } //함수 표현식 - 익명 const fn2 = function() { console.log("Hello!"); } //함수 표현식 - 기명 cons..

재선언 재할당 Scope var 가능 가능 Function let 불가능 가능 Block const 불가능 불가능 Block JS를 사용할 때 var, let, const의 차이를 구분하여 사용하고 있는가? 막연하게 var는 예전 방식이니까 쓰지 말아야지 라는 생각을 갖고있진 않는가? 오늘은 var, let, const의 차이에 대한 이야기를 해보겠다. 이 포스팅을 요약하면 위의 표와 같다. 1. 선언과 할당 var a = 'str'; var a = 0; //OK let b = 'str'; let b = 0 //Error! 재선언이라는 것은 변수를 다시 선언한다는 의미이다. 위 코드처럼 var는 같은 이름의 변수를 여러번 선언할 수 있다. 그러나 let, const는 단 한번만 선언 가능하며 재 선언시 ..

블로킹과 논블로킹, 동기와 비동기 각각에 대해서 무엇인지는 설명할 수 있어도 블록킹과 동기가 무엇이 다른지에 대해 설명하기는 상당히 어렵다. 이들에 대해 정리해보고 차이점이 무엇인지 찾아보자. 1. Block / Non-Block const B = () => { console.log("나는 B야"); } const A = () => { B(); console.log("나는 A야"); } 2개 이상의 작업이 있을 때 한 작업이 다른 작업이 종료될 때까지 본인의 작업을 진행할 수 있는가에 대한 개념이다. 보통 직접 제어할 수 없는 I/O, 멀티스레드 동기화 등에 적용되는 개념이다. Block/Non-Block은 제어권의 이동이라는 개념으로 설명하기도 한다. 제어권이라는 것은 함수를 실행할 수 있는지를 의미한..

1. 함수형 프로그래밍 함수형 프로그래밍은 순수함수의 조합으로 프로그램을 작성하는 방식이다. 함수형 프로그래밍을 이해하기 위해서는 불변데이터, 순수함수, 1급객체라는 개념에 대한 이해가 필요하다. 1-1. 불변성(Immutable) 한 번 정해진 값은 바뀌지 않는다는 의미로, 객체 데이터를 다룰 경우 원본 데이터를 변경하지 않고 데이터의 복사본을 만들어 데이터를 처리하는 방식이다. 1-2. 순수함수 let cnt = 0; const pureFn = (a, b) => { //순수함수 return a + b; } const notPureFn = (a, b) => { //순수함수가 아님 return a + b + cnt; } 동일한 인자를 주면 동일한 결과를 리턴하며, 외부의 상태에 영향을 미치지 않는 함수이..