타입스크립트에서의 타입은 자바스크립트의 타입과 무엇이 다를까? 이전에 배운 객체지향에서의 타입, 타입시스템이 반영되어 있는 걸까? 타입은 프로그래밍에서 어떤 의미인가 🤔 코드보다 이론 위주의 포스팅이 될 것이라 유의바람. 타입 Type 타입을 알기 위해선 추상화 Abstraction에 대한 이해가 선행되어야 한다. 추상화 抽象化 어떤 양상, 세부 사항, 구조를 명확하게 이해하기 위해 특정 절차나 물체를 의도적으로 생략하거나 감춤으로써 복잡도를 극복하는 방법. 복잡성을 다루기 위해 추상화는 두 차원에서 이루어진다. 1. 구체적인 사물들 간의 공통점만 취하고 차이점을 버리는 일반화를 통해 단순하게 만드는 것. 2. 중요한 부분을 강조하기 위해 불필요한 세부 사항을 제거함으로써 단순하게 만드는 것. ➡️ 이 ..

이전에 배운 preload, preconnect, prefetch로 리소스 우선순위를 변경하는 것을 배웠는데 next.js에서 이걸 어떻게 차용했고 어떤 효과를 이루어 냈는지를 알아볼 것이다. 우선 next.js에 대해서 먼저 알아보자. Next.js 란? The React Framework for the Web 빠른 웹 애플리케이션을 만들 수 있는 빌딩 블록을 제공하는 유연한 React 프레임워크이다. React 구성요소를 사용하여 UI를 구축하고 Next.js를 사용하여 추가 기능과 최적화를 수행한다. 내부적으로 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성하여 구성에 시간을 낭비하는 대신 애플리케이션 구축에 집중할 수 있게 해준다. 주요 특징 Next..

HTML 파일 아래 ✶ 스크립트를 비동기적으로 로드하도록 지정한다. ✶ 스크립트를 불러오는 과정에서 DOM 렌더를 차단하지 않도록 보장한다. ✶ 오직 파일을 불러오는 것만 병렬적으로 실행한다는 것이 중요. ✶ 실행되는 시점은 다운로드가 완료되는 순서에 따라 다를 수 있으므로 스크립트 간의 의존성이 있는 경우 조심해야 된다. ✶ 파일의 로딩을 마치게 되면 즉시 DOM 렌더를 멈추고 async 방식으로 불러온 스크립트 파일의 해석을 시작한다. ✶ 실행 순서가 보장되지 않음. ✶ 독립적으로 동작하는 스크립트 파일에 사용된다. ✶ DOMContentLoaded 이벤트 콜백으로 load를 보장할 수 없음. ⭕️ async 스크립트는 DOM에 직접 접근하지 않거나, 다른 스크립트에 의존적이지 않은 스크립트들을 독립..

테스트 코드, API를 사용하게 되면서 코드로 접한 비동기는 공부할 때의 비동기와는 또 달랐다. 익숙해지기 위해선 계속 공부하고 접해야 된다. 꼼꼼히 공부해보자. 비동기 Asynchronous 여기서 자바스크립트의 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 특성을 의미한다. 얼마전에 공부한 Web API의 setTimeout()도 비동기 처리 사례라고 볼 수 있다. // #1 console.log('Hello'); // #2 setTimeout(function() { console.log('Bye'); }, 3000); // #3 console.log('Hello, Again'); 위의 결과 값으로 Hello => Hello Again => (3초후) Bye..

이전에 배열을 공부하면서 구조 분해 할당을 배웠는데 실제로 적용해 보는 거랑은 또 다른 것 같다. 코드 구조를 보다가 가독성을 높일 수 있게 바꿀 수 있는 방법으로 쓸 수 있을 것 같아 리팩토링 해보았다. 먼저 구조 분해 할당에 대해 알아보고, 어떻게 적용했는지 말하겠다! 구조 분해 할당 Destructuring assignment 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 이를 통해 데이터 뭉치(그룹화)를 쉽게 만들 수 있다! 변수에 나머지 할당하기 구조 분해 할당의 구문은 할당문의 좌변 => 원래 변수로 어떤 값을 분해하여 할당할지 정의한다. const people = ["😎", "😡", "🥸", "🥶", "😳"];..

프로젝트에 innerText를 처음 써보았는데 자동완성으로 innerHTML이 먼저 뜨기도 했고, 둘의 차이점이 무엇인지 알고 싶어서 공부해봐야겠다고 느꼈다. HTMLElement.innerText HTMLElement 인터페이스의 innerText 속성은 요소와 그 자손의 렌더링된 텍스트 콘텐츠를 나타낸다. innerText는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공한다. ✔️ 참고: innerText는 Node.textContent와 혼동하기 쉬우나 중요한 차이점을 갖고 있다. 기본적으로 innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않다. CSS로 display:none의 속성이 적용..

기존 강의에서는 background를 img 파일에 적용했고, 그에 따라 배경으로 적용하기 위해선 CSS의 변경이 많을 수 밖에 없었다. background는 background로 적용시키는 것이 적절하다고 생각했고, 변경했다. 그 과정도 포스팅해보고 기존 강의에서 사용한 코드들도 전부 복습해보려 한다. Math Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이다. 함수 객체 아님. Number 자료형만 지원하고 BigInt와는 사용할 수 없다. 다른 전역 객체와 달리 Math는 생성자가 아니다. Math의 모든 속성과 메서드는 정적이다. 우리는 여기에서 Math.floor()와 Math.random()을 사용해볼 것이다. Math.floor() Math.floor() 함수는 주어..

시간은 쉬울 것 같다가도 막상 잡게 되면 어렵다. 특히 그냥 단순 현재 시간을 보여주면 되는 게 아니라 UI에 잘 맞게 구현해야하기 때문에 생각보단 까다롭다. 구현할 일이 많을 것 같으니 익혀두기 위해 기록하자! JavaScript Date() 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성한다. Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는 UNIX 타임스탬프를 담는다. Constructor Date() 함수로 호출할 경우 new Date().toString()과 동일하게 현재 날짜와 시간을 나타내는 문자열을 반환한다. new Date() 생성자로 호출할 경우 새로운 Date 객체를 반환한다. Static m..

강의를 들으며 사용한 코드에 대해 전부 알아보고 공부하기 위해 정리해보겠다! Submit event Submit 이벤트는 이 제출될 때 발생한다. 요소 자체에서 발생하며, 그 안에 있는 이나 에서는 발생하지 않는다. 하지만 SubmitEvent에는 제출 요청을 Trigger한 버튼인 Submitter 속성이 포함되어있다. 사용자가 Submit 버튼을 클릭하거나 양식(form)내의 필드를 편집하면 발생한다. addEventListener()와 같은 메서드에서 이벤트 이름을 사용하거나 이벤트 핸들러 속성을 설정한다. Test field: Submit form function logSubmit(event) { log.textContent = `Form Submitted! Timestamp: ${event.ti..

이번 프로젝트에서 처음으로 사용해본 로컬스토리지 🤔 네트워크 강의 때 공부 했었는데 막상 개발자분이 세션 스토리지와의 차이점을 여쭤봤는데 대답을 하지 못했음.. 반성하고 다시 공부해보자! `localStorage` 웹 애플리케이션에서 클라이언트 측에서 데이터를 저장하고 관리하는 데 사용하는 기능 중 하나. 사이트 및 앱이 만료날짜 없이 웹 브라우저에 키-값 쌍을 저장할 수 있도록 하는 속성(Property)이다. 사용자가 브라우저를 닫거나 컴퓨터를 다시 시작한 후에도 저장된 데이터는 유지된다. localStorage는 window 객체의 속성 중 하나로 브라우저 창과 상호작용하고 제어할 수 있는 전역 객체(Global object)로서 사용된다. 또한 window 속성과 메서드와 함께 사용할 수 있다. ..