상태관리와 SPA

안녕하세요 🙂 우선, 강의에서 이렇게 바닐라 자바스크립트로 SPA를 제작할 때 사용한 코드 중 this. state를 사용해 상태를 저장하고, setState를 사용해 상태를 업데이트한다는 점은 리액트와 유사합니다. 또한 렌더링 로직이나 컴포넌트 기반 구조로 제작되었다는 점 또한 비슷하다고 할 수 있을 것 같습니다! 하지만, 리액트의 동작 방식을 구체적으로 살펴봤을 때에는 여러가지 차이점이 있습니다. 가장 큰 예시로는, 강의에서는 직접 dom을 조작해 ui를 업데이트하지만, 리액트는 virtual dom을 사용한다는 차이점이 있을 수 있겠네요!! 정리해보자면, 크게 바라봤을 때에는 리액트의 동작 원리와는 비슷하지만, 리액트와는 완전히 동일한 방식이라고는 보기 어려울 수 있을 것 같습니다. 감사합니다 😃

Live Server

안녕하세요 🙂 window.location.pathname은 자바스크립트에서 현재 웹 페이지의 경로를 나타내기 때문에, 현재 위치의 폴더 경로가 전부 찍히게 됩니다. 따라서 이를 해결하기 위해서는, 실습 코드가 있는 폴더를 VSCode에서 열고 실행하시면 될 것 같습니다. 예를들어, javascript/trip-wiki 에 실습 코드가 작성되어 있다면, VSCode에서는 javascript 폴더가 아닌, trip-wiki 폴더를 선택해 해당 폴더를 열어 LiveServer를 누르시면 오류 없이 실습을 하실 수 있습니다!!

package.json

안녕하세요 🙂 package.json에 특정 코드를 작성하지는 않았습니다! npm init -y 를 실행하면, package.json 파일이 자동으로 생성되며, 파일안에 필요한 정보들이 자동 생성됩니다!!

template 질문 있습니다.

안녕하세요 🙂 질문 남겨주셔서 감사합니다! 혹시 어떤 섹션의 몇 번째 강의인지 알 수 있을까요?

2-6 함수 강의

안녕하세요 🙂 확인해본 결과, 검은 화면은 나오지 않고 있습니다..ㅠㅜ 재접속 해보시거나, 인프런측에 문의해보시는 것을 추천드립니다! 감사합니다.

compare 함수 잘이해안가네요

안녕하세요 🙂 2- 15 강의에서 설명하고 있는 것과 같이, 매개변수 a는 배열의 다음 요소를, 그리고 b는 배열의 이전 요소를 의미합니다. 그리고 compare 함수의 내부에서는 배열의 다음 요소인 a가, 배열의 이전 요소인 b보다 크기가 클 경우에는 -1을 반환하고, a보다 b가 클 경우에는 숫자 1을 반환합니다. sort 메서드는 compare 함수가 -1을 반환하면, a 가 b보다 앞에 있어야 한다고 판단을 하고 숫자 1을 반환하면 b가 a보다 앞에 있어야 한다고 판단합니다. 그렇기 때문에 해당 코드든 purple, green, blue의 순서로 정렬이 되는 코드입니다. 감사합니다.

async 질문

안녕하세요 🙂 김효빈입니다. 네 맞습니다!! result 변수에는 workA의 결과, workB의 결과, 그리고 workC의 결과가 담긴 배열이 저장이 됩니다. 따라서, 그 이후에 result 변수에 forEach 메서드를 사용해서 배열의 요소를 순회하면서, 결괏값을 콘솔에 출력할 수 있습니다.

this.template 메소드

안녕하세요 🙂 createElement와 appendChild를 사용해 코드를 작성할 수도 있습니다. 하지만 innerHTML과는 다음과 같은 차이점이 있습니다. innerHTML innerHTML을 사용하면, 전체 HTML을 한 번에 정의할 수 있으므로 코드가 간단하고 읽기 쉽고, 작은 프로젝트나 변경이 자주 일어나지 않는 경우 innerHTML을 사용해 빠르게 결과를 얻을 수 있습니다. createElement, appendChild 조건문을 활용해 필요한 부분만 DOM에 반영할 수 있지만, 코드가 매우 복잡해지고 길어지며 직관적으로 코드를 작성하기 어렵습니다. 강의에서 개발하는 프로젝트는 크기가 작은 프로젝트이기 때문에, 보다 깔끔하고 직관적인 코드를 위해 innerHTML을 사용해 개발했습니다. 목적에 따라 알맞게 사용하시면 될 것 같습니다! 감사합니다.

App의 상태관리?

안녕하세요 🙂 좋은 질문 감사합니다. 질문들을 정리해서 답변을 해드리겠습니다. App 컴포넌트에서 왜 모든 컴포넌트들의 상태를 관리하는지? 각각의 컴포넌트들은 자신의 상태를 관리하고 있으나, App 컴포넌트에서도 모든 컴포넌트들의 상태를 관리하는 이유는, 상태의 일관성을 유지하며 컴포넌트간의 상태를 공유하기 위함입니다. 그러므로 하위 컴포넌트들에서 일어나는 상태 변화를 감지할 수 있게 되는 것입니다. App 컴포넌트에서 관리해야 할 상태들이 너무 많아지고 App 컴포넌트가 복잡해지는 거 아닌가요? 이렇게 App 컴포넌트에서 모든 상태를 관리하게 되면, App 컴포넌트가 복잡해질 수 있습니다. 만약 코드가 복잡해지게 되는 경우에는, App 컴포넌트를 여러 개의 작은 컴포넌트로 분리해, 각 컴포넌트가 특정 역할과 상태를 담당하도록 할 수 있습니다. 또는 바닐라 자바스크립트가 아닌 다른 라이브러리를 사용하는 경우에는 이를 해결하기 위해, Redux, Context API와 같은 상태 관리 라이브러리르 사용합니다. 감사합니다.

onClick 함수

안녕하세요 🙂 질문에 작성해주신 코드는 TabBar 인스턴스의 onClick 메서드를 사용하지 않은것이 맞습니다. $tabBar.forEach((elm) => { elm.addEventListener('click', () => { this.onClick(elm.id); }); }); 해당 컴포넌트에서 onClick 함수를 매개변수로 전달받았기 때문에 onClick으로 함수를 호출해도 오류가 발생하지 않고 있지만, 우리는 TabBar 인스턴스와 연결된 메서드를 호출하고 있음을 명확하게 나타낼 수 있도록, 그리고 나중에 TabBar의 내부에서 onClick 메서드에 추가적인 로직을 넣어야 할 경우를 대비해 위의 코드처럼 this.onClick 함수로 작성하는 것이 맞습니다! 해당 부분은 빠르게 수정해두도록 하겠습니다. 오류 제보 감사합니다 🙇🏻‍♀️