ChatGPT 선생님과 성장하는 독학 개발자의 기록

컴포넌트는 무엇일까? 쉽게 말하면, '구성 요소'이다. 레고 블록일 수도 있고, UI 단위일 수도 있다. 조금 어렵게 말하면, 여러 요소들을 모아 짜내어 이룬다고 말할 수 있다. 그렇다면, 웹에서는 무엇일까? 하나의 페이지가 될 수도 있고, 페이지 속 하나의 구성요소가 될 수 있다. 웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음이다. 웹 컴포넌트는 웹 페이지 및 웹 앱에서 커스텀, 재사용 가능한, 캡슐화 HTML 태그를 생성할 수 있는 API이다. 커스텀 컴포넌트 및 위젯은 웹 위젯은 웹 컴포넌트 요소 표준을 기반으로 최신 브라우저에서 작동하며 HTML과 함께 작동하는 컴포넌트는 무엇이 있을까? Co..

브라우저의 검색창에 '구글'을 검색하면 어떤 일이 일어날까? 첫 번째 단계 우선, '구글'을 브라우저 검색창에서 검색한다. 두 번째 단계 브라우저는 캐싱된 DNS 기록으로 IP를 체크한다. DNS은 URL들의 이름과 IP 주소를 저장하고 있는 데이터베이스인데, 인터넷에 있는 URL은 고유의 IP 주소를 가지고 있고 이 주소를 확인하기 위해 터미널에서 nslookup www.google.com 을 검색하면 해당 IP 주소를 확인할 수 있다. DNS의 가장 큰 목적은 URL 검색을 쉽게 하기 위한 것이며, 숫자로 검색할 수 있지만 번거롭기 때문에 문자로 쉽게 검색할 수 있도록 도와준다. 이처럼, DNS는 사람들이 웹에서 접속하기 쉽게 하는 맵핑하는 역할을 해준다. 그래서 검색을 하면 무슨 일이 일어날까? 1..

프론트엔드 개발을 할 때, 유저 인터페이스(UI)에 대해 잘 이해하고 숙지해야 한다. 디자이너와 소통하며 그들을 이해하고, 스스로 제품과 서비스의 사용성을 개선하기 위해 UI 요소들에 대해 배워야 한다. 32가지 유저 인터페이스 유저 인터페이스(UI)는 앱, 웹 사이트를 만들 때 사용하는 요소 중 하나이다. UI는 버튼, 스크롤바, 메뉴, 체크박스 등 맥락에 맞는 요소를 사용하여 사용자와 화면 간 상호작용을 더함으로써 사용자가 더 쉽고 직관적으로 인터페이스를 이용할 수 있도록 돕는다. UI 요소를 사용하여 제품의 시각적 일관성을 유지함으로써 유저가 고민하지 않고도 쉽게 제품을 사용할 수 있도록 돕는 유저-친화적인 인터페이스를 만들 수 있게 된다. 유저 인터페이스의 요소들 유저 인터페이스는 보통 네 가지 ..

자바스크립트에서 이벤트 처리를 하면서 "응? 왜 안 되지? 왜 다르지?"라는 생각을 갖게 되었다. 가장 기초적인 부분이지만 나는 이를 놓치고 "그냥 쓰라니까 써야지"하고 넘어갔던 부분이었다. USD 한국 미국 일본 document.querySelectorAll("#list a").forEach((menu) => menu.addEventListener("click", function() { document.getElementById("text-button").textContent = this.textContent; fromCurrency = this.textContent; }) ); document.querySelectorAll("#list a").forEach((menu) => menu.addEventL..

나는 개발을 하고 나서 깃허브의 Repository에 기록하는 것으로 마무리한다. 그런데 커밋을 하고 푸시를 하고 나서 해당 Repository에서 확인해보면 푸시가 되어 있지 않는 문제가 발생했다. 그리고 해당 Repository에 master had recent pushes less than a minute ago의 메세지가 뜨고 옆에 Compare & Pull request의 버튼이 생성이 되어 있다. 위의 메세지가 발생하고 실제로 푸시가 되지 않은 문제가 발생하였지만 이를 신경쓰지 않고 직접 업로드하면서 해당 상황을 넘겼다. 그러나 이제 이 문제를 해결하는 것이 낫다고 생각하여 구글 검색을 해 보았다. 해당 문제의 원인은 이전에는 커밋과 푸시를 할 때, ~ origin master라는 명령어를 사..

◆ Javascript Event Loop 자바스크립트가 동작하는 환경과 해석하고 실행시키는 엔진 자바스크립트를 해석하는 Javascript Engine과 웹 브라우저에 화면을 그리는 Rendering Engine은 다른 엔진이다. Rendering Engine은 HTML과 CSS로 작성된 마크업 코드를 콘텐츠로서 웹 페이지에 Rendering한다. Javascript Engine은 자바스크립트로 작성한 코드를 해석하고 실행하는 인터프리터다. 추가적으로 Event Loop가 존재하여 Task Queue에 들어가는 Task들을 관리한다. Call Stack 자바스크립트는 단 하나의 호출 스택을 사용한다. 그래서 자바스크립트의 함수가 실행되는 방식을 Run to Completion이라고 한다. 이는 하나의 ..

FrontEnd 브라우저의 동작 원리 HTML 마크업을 처리하고 DOM 트리를 빌드 ("무엇을" 그릴지 결정) CSS 마크업을 처리하고 CSSOM 트리를 빌드 ("어떻게" 그릴지 결정) DOM 및 CSSOM을 결합하여 렌더링 트리를 형성 ("화면에 그려질 것만" 결정) 렌더링 트리에서 레이 아웃을 실행하여 각 노드의 기하학적 형태를 계산 ("Box-Model"을 생성) 개별 노드를 화면에 페인트 혹은 래스터화 Document Object Model (DOM) 웹에서 수많은 이벤트(Event)가 발생하고 흐른다. 브라우저(User Agent)로부터 발생하는 이벤트 사용자의 행동(Interaction)에 의해 발생하는 이벤트 DOM의 '변화'로 인해 발생하는 이벤트 발생하는 이벤트는 단지 자바스크립트 객체일..

좋은 코드란 무엇인가? 읽기 쉬운 코드 중복이 없는 코드 테스트하기 용이한 코드 등등... 읽기 쉬운 코드? 읽기 쉬운 코드를 작성하려면 본인에게 익숙한 언어를 사용하면 된다. 주석을 사용하여 해당 코드를 이해할 수 있으나 실제 함수와 일치한다고 할 수 없다. 오히려 한 두가지의 주석이 잘못된 해석을 야기할 수 있다. 유의하도록 하자. 그러나 각자 개인마다 읽기 쉬운 코드란 다르다. 변수명을 짓는 것도 모호하고 각자의 배경 지식도 일치하지 않을 수 있다. 그래서 아무리 읽기 쉬운 코드로 작성했다고 하더라도 한계가 존재할 수 있다. 읽기 쉽다는 것은 이해하기 쉽다는 것이 포함되어 있다. 즉, 나무를 보지 말고 숲을 볼 때도 쉬워야 한다. 항상 "왜 쉬운 코드를 작성해야 하지?", "어떻게 쉬운 코드로 작성..