이번 글은 웹 프론트엔드 개발자에게 익숙한 DOM(document Object Model)에 대해서 알아보려고 합니다. DOM이란?DOM은 계층적 구조를 가진 노드 트리이며, 마크업 언어로 작성된 문서를 프로그래밍 언어가 조작할 수 있도록 하는 인터페이스입니다. 사진 예시로 확인해 보겠습니다.첫 번째 사진은 마크업 문서로 작성된 정적 문서입니다.이 문서는 HTML이나 XML 같은 마크업 언어로 작성된 것으로, 사용자가 페이지에 접속할 때 브라우저가 서버로부터 받아오는 데이터이며 구조와 내용을 정의합니다. 두 번째 사진은 HTML을 브라우저가 파싱하여 계층적 구조를 가진 노드 트리로 변환한 결과입니다.이를 활용하여 자바스크립트와 같은 프로그래밍 언어가 조작할 수 있도록 하는 인터페이스를 의미합니다. DO..

이번 글은 리액트에서 폼 관련 라이브러리 중 가장 많은 사랑을 받고 있는 React Hook Form의 동작 원리에 대해서 알아보려고 합니다. 우선 Form Tag Elements를 알아보면서, 신뢰 가능한 단일 출처에 대해 알아보고, 리액트에서 폼을 다루는 방법과 React Hook Form의 동작원리 및 제어 컴포넌트와 비제어 컴포넌트의 차이점을 알아보도록 하겠습니다.   Form Tag Elements대표적인 Form Tag Elements는 input, textarea, select 이렇게 3가지로 볼 수 있습니다.아래 예시를 확인해 보면 Form Tag에 submit 이벤트를 감지하여 각각의 tag의 value Attribute에 접근하고 있습니다. // 코드 예시 1const form = d..

요즘 채용 공고를 보면 쓰지 않는 곳을 찾기 힘들 정도로 Next.js에 대한 인기가 대단합니다.이번글은 왜 Next.js가 폴더 기반 라우팅을 선택한 이유를 파악해 보려고 합니다. 크게 세 가지 목차로 구성하여 살펴보겠습니다.라우팅이란? + 라우팅 등장 배경다양한 라우팅 방식과 그 활용법Next.js가 선택한 라우팅 방법과 선택의 이유 및 장점. 라우팅이란? + 라우팅 등장 배경라우팅은 사용자가 애플리케이션 내에서 특정 URL을 요청할 때, 그 요청에 대응하는 적절한 콘텐츠나 페이지를 제공하는 방식입니다. 네트워크나 애플리케이션에서 경로(path)를 결정하고, 해당 경로에 따라 요청을 적절한 리소스나 처리기로 전달하는데,여기서 주의 깊게 봐야하는 부분은 path를 결정하는 부분입니다. CSR 방식은 d..

개발자들은 일을 시작할 때 npm run start 등 비슷한 명령어로 Dev Server를 띄우면서 시작을 하게 됩니다. 이 과정 속에서 일어나는 일은 모듈 번들러의 역할 등을 알고 있으면 어렴풋이 알게 되지만,이번글은 조금 더 깊게 그 과정에서 일어나는 일을 자세히 알아 보려고 합니다. (이 글은 React CRA와 webpack을 기준으로 작성되었습니다.) 우선 npm 이란?npm은 Node Package Manager로 node로 실행할 수 있는 패키지들을 관리하는 도구이며, 개발자는 npm을 통해 다른 사람이 작성한 패키지를 다운로드하고, 업데이트하고, 삭제할 수 있습니다. 쉽게 생각해 보면 npm은 application을 설치 삭제 및 관리해 주는 앱스토어와 같은 역할을 하며,npm을 이용해서..

오랜만에 새로운 시리즈를 시작하게 되었습니다. 최근 면접을 보러 다니면서 인사이트를 얻고, 평소엔 생각하지 못했던 관점들을 보게 되었는데요. 이 과정에서 '스스로에게 질문을 잘하는 법'의 중요성을 알게 되었습니다. 그렇기에 그동안 개발을 하면서 너무 당연하게 넘겼던 부분들, 이유를 알지 못하고 사용했던 부분들,그리고 무심코 지나쳤던 부분들에 대해 다시 생각해 보고, 이를 글로 정리해 보려 합니다. 계속...

이번 글은 TypeScript 문법 중 유니온 타입과 인터섹션 타입, 타입 가드와 타입 단언에 대한 내용입니다.분명히 알고 있으면서 사용해 봤던 문법들이지만, 설명하려고 하면 애를 먹는 만큼 이번 기회에 한번 더 정리하려고 합니다. 유니온 타입이란?유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 'A' 이거나 'B'이다라는 의미의 타입입니다.function logText(text: string | number) { // ...} 위 함수의 파라미터 text에는 문자열 타입이나 숫자 타입이 모두 올 수 있습니다.이처럼 | 연산자를 이용하여 타입을 여러 개 연결하는 방식을 유니온 타입 정의 방식이라고 부릅니다. 유니온 타입의 장점유니온 타입의 장점은 아래 예시를 확인해 보면 ..

16장 - 프로퍼티 어트리뷰트프로퍼티와 어트리뷰트를 이해하기 위해 먼저 내부 슬롯(internal slot)과 내부 메서드(internal method)에 대해 알아보자. 16.1 내부 슬롯과 내부 메서드내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(pseudo property)와 의사 메서드(pseudo method)다. ECMAScript 사양에 등장하는 이중 대괄호([[...]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. 자바스크립트 엔진의 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 개발자가 직접 접근하거나 호출할 수 있는 방법을 제공하지 않는다. 단, 일부 내부 슬롯과 내부 메서드에 한..

문제https://www.acmicpc.net/problem/1261  문제 해석이 문제는 지금까지와는 다르게 우선순위가 있는 길 찾기이다.최대한 벽을 부수지 않고 이동해야하기 때문에 queue에 추가할 때 벽이 없는 길을 unshift를 이용해 queue 앞에 추가해 주고벽이 있는 경우에는 기존과 같이 push를 이용해 queue 뒤에 추가하면 된다. 풀이const filePath = process.platform === "linux" ? "dev/stdin" : "../test.txt";const input = require("fs").readFileSync(filePath).toString().trim().split("\n");const solution = (input) => { const [n,..