DDODI TIL 🚀

✅ SPA(Single Page Application) 이해하기 페이지 이동의 과정을 가장 단순하게 설명한다면 다음과 같습니다. 사용자가 새로운 url을 요청한다. (새로운 페이지로 이동하는 버튼을 클릭하거나, 뒤로가기 버튼을 누르는 등) 요청한 url에 맞는 리소스(html, css, js)를 화면에 렌더링한다. 간단하죠? MPA(Multiple Page Application), SPA(Single Page Application) 모두 페이지 이동의 골자는 동일합니다. 다만 리소스를 요청하는 방식에 따라 MPA와 SPA로 구분이 됩니다. MPA의 리소스 요청 방식 사용자가 새로운 url을 요청 해당 url에 대한 리소스를 서버에 요청 서버에서 받은 응답으로 화면을 렌더링 즉, 페이지를 이동할 때마다 서..

바닐라 자바스크립트로 쇼핑몰 SPA를 구현하기 위해, 가장 기본이 될 컴포넌트를 정의했다. 황준일님의 글을 참고해 초안을 짜고, 수정을 거쳤다. 기존 코드 constructor: 컴포넌트를 생성한다. 즉 초기 state/props를 설정하고, template 연산의 결과물인 마크업을 렌더링하고, 이벤트리스너를 등록한다. setup: 초기 state를 설정한다. mounted: 하위 컴포넌트들의 생성자 함수를 호출한다. template: 컴포넌트의 state를 반영한 마크업을 리턴한다. render: $target내에 마크업을 렌더링한다. 그 다음 mounted 함수를 호출한다. setState: 상태를 업데이트하고, render 함수를 호출한다. mounted 메서드를 좀 더 자세히 살펴보자. 예시로 황..

Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 위 글을 읽다가 한 가지 의문이 생겼다. 이제는 직접적으로 DOM을 다루는 행위가 급격하게 감소했고, 상태(State) 를 기준으로 DOM을 렌더링 하는 형태로 발전한 것이다. DOM이 변하는 경우가 State에 종속 되어버린 것이다. 반대로 말하면, State가 변하지 않을 경우 DOM이 변하면 안 되는 것이다. 이 글은 DOM 요소에 직접 접근하는 것과 state에 따라 DOM을 렌더링하는 것을 서로 대척점에 있는 반대 개념으로 소개하고 있다. 난 이 두 가지가 어째서 반대 개념이 되는 것인지 이해가 잘 되지 않았다. state에 따라 DOM을 렌더링하는 아래 코드에서도, innerHTML API를 사용해 DOM에 접근하지 않나..

객체의 프로퍼티 값에 접근하는 방법은 두 가지가 있다. 점(.) 연산자 사용 대괄호([]) 연산자 사용 두 방식은 다음과 같은 차이점을 가진다. 점 연산자를 사용한다면 오른쪽에는 프로퍼티 이름인 단순 식별자가 와야 한다. 반면 대괄호 연산자를 사용한다면 오른쪽에는 문자열로 평가되는 표현식이 와야 한다. let author = book.author; // 점 연산자 사용 let title = book["main title"]; // 대괄호 연산자 사용 두 방법의 용례 상의 차이는 접근하려는 프로퍼티 값을 동적으로 변경할 수 있는가 에 있다. 식별자의 경우 자바스크립트 데이터 타입이 아니기 때문에, 프로그램에서 조작할 수 없다. 반면 문자열은 데이터 타입이기에 프로그램이 실행되는 동안 새로 생성하고 조작할 ..