코드로 대화하기

npm install --save-dev --save-exact prettier 안녕하세요! 오늘은 ESLint, Prettier에 대해 알아보겠습니다. "어떻게"보다 "왜"에 집중해보겠습니다. 왜 ESLint, Prettier를 써야 하는 걸까요? 프로젝트를 하다 보면 팀 단위로 진행을 할 때가 많습니다. 그럴 때 깔끔하고 통일된 코드를 위해 규칙을 정합니다. 코드 컨벤션을 만드는 것이죠. ESLint는 코드 퀄리티를 보장하며, Prettier는 코드 스타일을 보장합니다. ESLint? 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 품질로 작성하도록 도와줍니다. 외부에 공개되어 많은 개발자가 사용 중인 Airbnb Style Guide, Google Style Guide 가 그 대표적인 예입니다. ..

안녕하세요. 오늘은 개발을 하면서 빼놓을 수 없는 비동기에 대해서 알아보겠습니다. Event Loop에 대한 지식이 있다면 이해하기 더 쉬우실 겁니다. 동기? 비동기? Javascript에서의 비동기를 알아보기 전에 동기와 비동기의 차이점을 아시나요? 동기 서버에 요청을 보냈을 때 응답이 돌아와야만 다음 동작을 실행합니다. 한 번에 한 가지씩 진행되는 것이죠. 비동기 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것입니다. Javascript 비동기 자바스크립트에서 비동기가 필요한 이유는 서버로 데이터를 요청했을 때 모든 코드를 한줄한줄 기다렸다가 실행을 할 수 없기 때문입니다. 자바스크립트에서 비동기를 처리하는 방법 세 가지를 소개해드리겠습니다. 1. Callback 콜백..

안녕하세요! 오늘은 React 생명주기와 Hook에 대해 알아보겠습니다. React Lifecycle 보통 리액트에서 라이프사이클은 class 컴포넌트 기반의 리액트를 말하고는 합니다. 함수형 컴포넌트는 Hook을 사용합니다. class형을 모르시더라도 쉽게 이해할 수 있게끔 설명드리겠습니다. 참고로 저도 hook만 계속 사용해 봤지만 이해하는 데는 크게 어려움 없었습니다. "생성(mounting) -> 업데이트(updating) -> 삭제(unmounting)" 이러한 생명주기를 갖습니다. 그리고 각각이 "생명주기 메서드"라고 불립니다. 아래 메서드들을 꼭 외우지는 않으셔도 괜찮고 이해하는 식으로 넘어가도 괜찮다고 저는 생각합니다. 1. 생성(mounting) 더보기 1. constructor 컴포넌트..

안녕하세요 오늘은 javascript의 동작 원리, 이벤트 루프에 대해서 알아보겠습니다. 너무 어렵게 생각하지 않으시면 좋겠습니다. 단일 스레드 자바스크립트는 "단일 스레드"입니다. 처음 들으시는 분들은 어려운 단어입니다. 스레드가 하나라는 말은 동시에 하나의 작업만 처리할 수 있다는 뜻입니다. 하지만 자바스크립트로 개발해 보신 분은 아시겠지만 동시에 작업이 처리되는 것을 느끼셨을 겁니다. 이벤트가 일어날 때 다른 작업도 진행하고, 한 번에 여러 개의 HTTP 요청을 처리하기도 합니다. 어떻게 단일 스레드인데 이런 일이 가능할까요? 어떻게 동시에 여러 작업을 처리할 수 있는 걸까요? 바로 "이벤트 루프" 덕분입니다. 자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원합니다. 아래 그림을 ..

안녕하세요! 지난 시간에 클로저(Closure)에 대해서 알아보았습니다. React hook에서도 클로저라는 개념이 사용되는데요. 먼저 클로저에 대한 개념을 간단하게 알아보겠습니다. Closure 클로저란 함수가 속한 렉시컬 스코프를 기억하여 렉시컬 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기능입니다. 쉽게 말해 함수가 생성될 당시의 외부 변수를 기억하여 생성 이후에도 계속 접근 가능한 것이 클로저입니다. function outer() { var name = "song"; function inner() { alert(name); } return inner; } var myFunc = outer(); myFunc(); 예를 들어 myFunc은 outer에서 inner 함수를 반환받습니..

안녕하세요 오늘은 웹사이트 성능을 올리기 위한 몇 가지 방법을 소개해드리겠습니다. Lazy loading 화면에 보이는 이미지들만 다운로드하고 화면 밖에 있는 이미지들은 다운로드를 지연시킵니다. 스크롤을 감지하여 이미지들이 화면 안으로 들어오면 그때 다운로드합니다. 태그에 loading="lazy" 속성을 주거나, 이전 글에서 소개해드린 Intersection Observer API를 사용하시면 구현하실 수 있습니다. Sprite sheet 스프라이트 시트는 여러 개의 이미지들을 하나의 시트에 모은 것을 의미합니다. 하나씩 이미지를 다운로드하는 것보다 HTTP 요청 수가 줄기 때문에 메모리와 네트워크 사용량 측면에서 효율적입니다. css의 background, background-position 속성으로..

안녕하세요. 여러분은 무한 스크롤을 지금까지 어떤 식으로 구현하셨나요? 자바스크립트로는 다양한 방법으로 구현할 수 있습니다. 직접 구현하는 사람도 있고 라이브러리를 사용하는 사람도 있습니다. 실제로 npm에 infinite-scroll을 검색하면 굉장히 많은 라이브러리들이 있습니다. 처음 제작하신다면 라이브러리보다는 직접 구현하는 방법을 추천드립니다. 이번 글에는 세 가지 무한 스크롤을 구현하는 방법이 나와있습니다. 1. 익숙한 방법 2. debouncing, throttling 3. Intersection Observer API 1. 익숙한 방법 지금까지 저는 아래 코드와 같이 구현했었습니다. window.addEventListener("scroll", infiniteScroll); let isUpda..

... 웹 개발을 할 때 태그 제일 끝에 large.js는 5초, small.js는 1초의 다운로드 시간이 걸린다고 가정해봅시다. small이 먼저 다운로드 되어도 실행은 large이후에 실행됩니다. 3. 외부 스크립트에만 유효합니다. src속성이 없으면 defer 속성은 무시됩니다. async defer와 마찬가지고 백그라운드에서 다운로드됩니다. async가 다운받을 동안은 html 파싱이 계속되지만 async 실행중에는 html 파싱을 멈춥니다. * "DOMContentLoaded"/ 다른 스크립트들과 async는 서로를 기다려주지 않습니다. 먼저 다운로드가 끝나는 순서대로 실행합니다. 따라서 async속성의 스크립트가 여러 개 있는 경우, 실행 순서는 제각각입니다. * 동적 스크립트 let scri..

안녕하세요 오늘은 Closure에 대해 알아보겠습니다. 이전 var, let, const 차이점 글을 먼저 보시면 클로저를 이해하는데 도움이 되실 겁니다. 이번 글은 예시가 많습니다. MDN에는 클로저를 다음과 같이 정의하였습니다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. Lexical scoping "lexical"이란, 변수가 소스 코드 내 어디에서 선언되었는지 고려한다는 의미입니다. "scope"는 유효 범위입니다. 즉 렉시컬 스코핑은 어떻게 변수의 유효 범위를 지정하는가입니다. function outer() { var name = "song"; function ..

안녕하세요 오늘은 Virtual Dom을 알아보겠습니다. DOM ( Document Object Model ) 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. MDN에는 DOM을 위와 같이 정의하고있습니다. 웹 페이지는 일종의 문서(document)입니다. DOM은 프로그래밍 언어가 이 문서에 쉽게 접근할 수 있도록 문서의 구성요소들을 구조화하여 표현한 객체입니다. 즉 웹 페이지의 객체 지향 표현..