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에 접근하지 않나..

프로그래머스 블로그에 있는 해설 글을 참고해 리팩토링한 내용 상태에 따라 바뀌어야 하는 영역이 크게 두 가지다. Nodes와 Breadcrumb! 리팩토링 전 App 컴포넌트 내에서 renderNodesSection 와 renderBreadcrumbSection 함수를 작성했다. 각 함수 내에서, 상태를 기반으로 마크업을 렌더링한다. 상태가 변경되면 해당 함수들을 호출해 업데이트된 상태로 화면을 렌더링한다. 구현 조건 및 프로그래머스 블로그에서 제시한 바람직한 방향은 다음과 같았다. 컴포넌트 형태로 추상화 DOM 접근을 최소화 명령형 프로그래밍보다는 선언적 프로그래밍 컴포넌트 형태로 추상화하기 '컴포넌트 형태로 추상화 하라'는 게 어떤 의미인지 잘 와닿지 않았다. 검색해 본 결과 추상화란 복잡한 자료, ..

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

function App() { this.contents = []; } App(); App 함수를 선언하고 this.contents로 contents라는 상태를 관리 하고자 했는데, 아래와 같은 에러가 발생했다. this키워드를 이해하지 못해 발생한 에러였다. this 키워드의 의미 this는 기본적으로 자신이 속해 있는 객체를 지칭한다. const person = { sayHi() { console.log(this); // person 객체를 가르킨다. } } 따라서 전역함수에서의 this는 window 객체를 의미한다. 전역 scope에서 함수를 선언하면 window 객체에 추가되기 때문이다. 다만 strict mode일 때 전역함수에서 this를 사용하면 undefined가 출력된다. 위 에러가 발생..

문벅스 강의의 요구사항을 직접 구현 해보며 느낀 내 코드의 전반적인 문제점 요구 사항 // TODO: localStorage에 저장 // - [] localStroage에 메뉴 데이터를 저장한다. // - [] 새로고침을 하면 localStorage에 저장되어 있던 메뉴 데이터를 불러온다. // TODO: 품절 표시 기능 // - [] 메뉴의 품절 버튼 클릭 이벤트를 받고, 이벤트 발생 시 품절 상태를 변경한다.(toggle) 내 코드 const toggleSoldOutMenu = (e) => { const $menuElement = e.target.closest("li"); const menuId = parseInt($menuElement.dataset.menuId, 10); const $menuNam..

함수의 용도는 기본적으로 반복되는 코드를 줄이는 것이다. FE 개발에 있어 함수의 리턴 값에는 크게 두 종류가 있다. 연산의 결과 UI 요소 이 중 오늘은 두번째 경우에 대해 이야기를 해보려고 한다. 첫번째 패턴의 경우 의식하지 않아도 곧잘 사용한다. 그러나 두번째 패턴의 경우 우리에게 익숙한 수학적 함수의 개념과 다소 차이가 있기 때문에, 사고방식을 의식적으로 확장하지 않으면 활용하기 어렵다. 함수가 값을 리턴하는 것은 단순히 연산의 결과값을 도출하는 게 아니다. 함수의 호출 부분이 리턴 값으로 대체된다는 것을 의미한다. 즉, 특정 UI 요소가 반복된다면 우리는 이를 여러 번 작성하는 대신 UI를 리턴하는 함수를 활용할 수 있다. 함수를 호출한 부분에 우리가 원하는 UI가 들어올 것이다. ❗️유사한 코..