Yung_Developer

안녕하세요 :) 이번에는 querySelectorAll나 getElementsByClassName과 같이 여러 개의 요소 노드 객체를 반환할 때 사용되는 객체인 HTMLCollection과 NodeList의 차이에 대해 알아보도록 하겠습니다. 먼저, HTMLCollection과 NodeList는 모두 유사 배열 객체이면서 이터러블입니다. 따라서 둘 다 length 프로퍼티를 가지므로 객체를 배열처럼 접근할 수 있고 반복문을 돌 수 있습니다. 그러나 유사 배열 객체이기 때문에 자바스크립트에서 제공하는 배열 객체의 메소드는 사용할 수 없습니다. (ex. map, forEach, reduce 등등) 다음으로는 HTMLCollection과 NodeList에 대해 하나씩 살펴보도록 하겠습니다. HTMLCollec..

ESLint는 틀린 문법을 자동으로 찾아주어 휴먼에러를 사전에 차단하는 도구입니다. Prettier는 코드 저장 시 코드를 정해진 규칙에 맞춰 포맷팅하여 주는 도구입니다. 특히, 협업을 하는 경우에 팀원 간의 코딩 컨벤션을 위해 자주 사용합니다. 둘 다, 사람이 매번 하기 번거로운 일들을 대신해주는 훌륭한 도구입니다. 따라서, 보통 ESLint와 Prettier 모두 사용하는 경우가 많습니다. 그런데 ESLint와 Prettier를 정상적으로 사용하기 위해서는 추가적인 설정이 필요합니다. 그 이유는 ESLint에서도 포맷팅 기능을 제공하기 때문에 Prettier와 충돌이 발새할 수 있습니다. 따라서, ESLint는 포맷팅 기능 끄고 문법 기능만 켜야합니다. 이를 위해서는 다음과 같은 패키지를 설치해야 합..

이번 주제는 우리가 작성한 코드 혹은 서버에 요청한 코드가 어떻게 화면에 표시되는지에 대해 알아보겠습니다. 사용자가 볼 수 있는 화면을 구성하기 위해 브라우저는 HTML, CSS, Javascript로 작성된 텍스트 문서를 파싱하여 브라우저에 렌더링을 합니다. 벌써부터 낯선 단어가 두 개나 등장했습니다. 하나씩 차근차근 알아보도록 할게요. 먼저, 파싱(구문 분석)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료 구조인 파스 트리를 생성하는 일련의 과정을 말합니다. 여기서 토큰은 문법적인 의미를 가지며, 문법적으로 나눌 수 없는 코드의 기본 요소를 의미합니다. 쉽게 설명해서 파싱은..

1. DOM은 왜 필요할까? 웹 사이트는 크게 세가지의 요소로 구성됩니다. 먼저, HTML은 웹 페이지의 제목, 이미지, 표 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 전체적인 구조를 담당하고 있습니다. 두번째로, CSS는 HTML이 실제 표시되는 방법 (색상, 레이아웃, 크기, 폰트 등)을 지정하여 콘텐츠를 꾸미는 정적 언어이며 웹의 시각적인 표현을 담당합니다. 마지막으로 Javascript는 HTML의 정적이고 단조로운 한계를 극복하기 위해 만들어진 언어로 웹 문서를 더욱 동적으로 처리할 수 있도록 도와줍니다. 여기까지는 웹을 조금이라도 공부하셨던 분이라면 대부분 알고 있는 내용이라고 생각됩니다. 그러나 혹시 이런 생각을 해보신 적 있나요? 자바스크립트에서 어떻게 확장자가 다른 HTM..

우아한 테크 코스에는 크루들이 하나의 주제를 선정해 다른 크루들에게 내용을 전달하는 '테코톡'을 매주 진행한다. 학창시절부터 꽤 많은 발표를 해봤지만 나보다 더 실력있고 잘 아는 사람들 앞에서 발표를 진행해야한다는 점은 부담스럽게 느껴졌다. 특히, 테코톡 발표가 녹화되어 유튜브에 업로드 된다는 사실도 하나의 부담으로 다가왔다. 테코톡 한 주 전부터 주제와 관련된 책을 읽고 검색을 했다. 또 나보다 더 잘 아는 분들이 계시기에 신빙성이 있는 자료를 찾기 위해 노력했다. 프론트엔드의 첫 발표를 맡게 된 필자의 테코톡 주제는 DOM과 BOM 이었다. 처음에는 DOM과 BOM이라는 주제가 백엔드 크루들에게는 다소 흥미가 떨어지는 주제라고 생각했다. 그래서 발표 자료의 많은 부분에 사용자가 보는 화면을 웹 브라우..

* jQuery 스타일 적용 // util.js export const $ = selector => document.querySelector(selector); export const $$ = selector => document.querySelectorAll(selector); // app.js const $carNameInput = $('#car-name-input'); document.querySelector로 DOM을 조작하는 코드를 작성하는 것보다 jQuery 스타일로 코드를 작성하는 편이 훨씬 보기에 깔끔하고 명확했다. 위 코드는 Jbee가 다른 크루들에게 리뷰해준 내용을 참고했다. * 게임 종료 후 승자를 찾는 알고리즘 getWinners() { let maxDistance = -1; for..

이번 lv.1 첫번째 미션은 바닐라 자바스크립트로 간단한 계산기 만들기와 자동차 경주게임 만들기였다. 프리코스 때와 비슷한 난이도의 미션들이라 크게 부담스럽지는 않았지만 새로운 도전요소가 있었다. 바로, 페어프로그래밍과 TDD였다. 이전까지 독자적으로 개발을 진행해온 터라 협업에 대한 경험이 전무하던 나에게는 꽤나 큰 도전이었다. 우테코의 페어프로그래밍 방식은 두 명의 개발자는 코드를 작성하는 드라이버와 전체적인 방향을 설정하고 오류를 잡아주는 네비게이터 역할을 번갈아가며 수행하게 된다. 처음 만나는 개발자와 서로의 실력을 모른채로 개발을 시작해야한다는 사실이 조금은 부담스럽게 느껴졌지만 페어프로그래밍을 진행하면서 페어프로그래밍의 긍정적인 측면을 많이 알게 되었다. 우선, 평소에 혼자서 하던 개발을 둘이..

프리코스가 끝나고 최종 합격 발표가 나온 뒤로부터 약 한달이 지나 드디어 우아한테크코스의 막이 올랐다. 첫날은 모두 처음 만나는 자리였기에 서로 친해지는 아이스브레이킹 타임, 간단한 코스 소개 그리고 포비의 인생 조언으로 구성되었다. 처음은 우아한 테크코스를 진행하시는 운영진 분들의 소개로 시작되었다. 다들 개발자이심에도 불구하고 말씀들을 너무 잘하셔서 조금 놀랐었다. 또, 서로 닉네임을 부르는 문화여서인지 최고참인 포비와 로이드부터 막내인 제이슨까지 서로 존중하면서 대화하는 것이 느껴져 인상적이였다. '실행은 수직적, 문화는 수평적'이라는 우아한 형제들의 모토에 맞는 분위기였다! 다음은 간단한 아이스브레이킹 시간이였다. 코로나로 인해 오프라인이 아닌 온라인으로 첫 만남을 가졌다는 사실은 너무나 아쉽지만..