virtual dom과 관련된 인식 피드백

안녕하세요.Virtual DOM 에 대해서 아주 간략히 말씀을 드려보자면, const elem = document.querySelector('....'); if (elem.classList.contains(...) { elem.classList.add(....) }이런 식으로 매번 element 에 직접 접근해서 업데이트를 하는 대신에현재 페이지의 모든 elements 의 hierarchy 와 상태를 구조 그대로 메모리에 변수에 들고 있고,업데이트 해야 할 때 그 변수들의 값을 확인해보고 실제로 어떤 element 을 찾아서 어떤 값을 업데이트 할 지 판단하는데 이용되는 하나의 레이어라고 보시면 됩니다. 잠깐 찾아보았는데, 이 두 영상이 VDOM 에 대해 적절하게 설명해주고 있는 것 같은데 도움이 되길 바랍니다! https://www.youtube.com/watch?v=61R7Py0szPshttps://www.youtube.com/watch?v=rysTbzKOEO0

getInitialHTML을 꼭 빌드된 dist 디렉토리 내 파일에서 import하는 이유가 있나요??

안녕하세요. 좋은 질문 감사합니다!일단 이 코드를import { getInitialHTML } from './dist/index.js';이렇게 바꾸고 실행해보시면import { getInitialHTML } from './main.js';이런 에러를 만나실 거에요.Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/eunjae/workspace/sinabro-js/ep07/src/router' imported from /Users/eunjae/workspace/sinabro-js/ep07/main.js Did you mean to import ../src/router.js? 저게 왜 그러냐면, main.js 에 import { start } from './src/router';이런 코드가 있는데, router.js 대신 그냥 router 라고만 썼더니, node.js 가 router 라는 걸 못 찾겠는데? 하면서 에러를 내는 거에요. 사실 원래는 확장자까지 정확히 써주는 게 ESM 스펙 상 맞아요. 그런데 우리는 그간 저렇게 잘 써왔잖아요? 이건 우리가 vite 이라는 번들러를 사용했더니 번들러가 처리를 해줬던 일 중 하나에요. 번들러가 편하고 좋긴 하지만, 원래 어디까지가 기본 표준이고, 어디부터가 번들러가 제공해주는 건지.. 경계를 명확히 이해하고 쓰기가 쉽지 않아서 이런 혼란도 겪게 되죠. 아무튼 저런 이슈가 있는데, 사실 이 예제 같은 경우에는 import 구문에 .js 를 다 붙여주기만 하면 잘 작동해요. 별 문제는 없습니다. ... 하지만, 확실히 번들러가 좋기는 좋은 게, 저렇게 빌드한 걸 import 하는 방식을 취하게 된다면 다음과 같은 이점은 있어요.서버에서 사용하려는 node.js 버전이 낮은 경우, 그에 맞게 transpile 된 코드를 사용할 수 있게 됩니다 (너무 최신 문법 대신 하위 호환 되는 버전으로 빌드 된다던지)프론트엔드 코드를 타입스크립트로 작성했다던가 하면 node.js 에서 직접적으로 import 를 할 수 없겠죠. (그래서 역시 js 로 transpile 된 버전이 필요합니다)일단 당장 생각나는 건 이 정도네요. 또 궁금한 게 있으시면 알려주세요!

번들러를 꼭 사용해야하나요?

안녕하세요 좋은 질문 감사합니다!1.여러 파일을 하나로 합쳐주는 번들링은 말씀하신대로 꼭 필요하진 않아요. 엔드 유저가 vite 같은 번들러를 이미 이용하고 있다면 굳이 라이브러리에서 미리 번들링할 필요가 없죠. 하지만, 유저가 번들러를 사용하고 있지 않다면? 그렇다면 waterfall 네트워크 요청이 발생하겠죠. 요즘 번들러 없이 개발하는 상황이 얼마나 있을진 모르겠지만 그 최종 환경을 컨트롤 할 수 없는 라이브러리 제작자 입장에서 번들링을 굳이 피할 필요는 없는 것이죠.2.그런데 번들링하는 과정에서 rollup 같은 툴이 해주는 작업 중 하나가 treeshake 인데요. 만드신 라이브러리의 main.js 에서 a.js 라는 파일을 import 하고 있다고 가정하고...// main.js import { message } from './a.' console.log(message) // a.js export const message = "Hello" export const ver = "0.0.1"이런 상황에서 ver 는 사실상 쓰이지 않고 있는데요. Rollup 같은 툴이 번들링 하는 과정에서 저렇게 쓰이지 않는 ver 를 bundle output 에서 제외 시켜주고 이를 treeshake 이라 부릅니다.번들러 없이 그냥 raw 하게 tsc 로만 transpile 된 파일들을 통째로 내보내게 되면, 이를 import 하는 유저에게도 같은 불필요한 비용이 전달되겠죠.3.그리고 어떤 라이브러리냐에 따라 다르지만 예를 들어 리액트 UI 컴포넌트 라이브러리를 만드시게 된다면 .jsx 나 .tsx 를 작성하시게 될테고 이를 .js 로 transpile 하는 과정이 필요한데요. 이 또한 직접 필요한 툴 + tsc 조합으로 하실 수 있지만, 아무래도 rollup 이나 그에 기반하는 vite 툴들에 플러그인이 잘 되어 있어 손쉽게 transpile 할 수 있어요.4.그래서 rollup 같은 툴을 쓰는 이유는 혹시 모를 상황을 위해 번들링을 해주는 것 뿐만 아니라 다양한 transpile 작업을 간편하게 설정하려는 의도도 큽니다. 게다가 라이브러리 개발하는 도중에 HMR 등 모던한 개발 환경을 구축하는데에도 도움이 되지요.또 이해 안가는 점 있으시면 질문 주세요. 디테일하고 예리한 질문 덕에 자세한 설명 적어볼 수 있었습니다 😊

시용하시는 툴 질문드립니다.

안녕하세요! 저건 맥용 브라우저인 Arc 라는 앱이에요. https://arc.net/

filter test 마지막 문제 결과값이 이상합니다.

안녕하세요! 네네 그런 이슈가 있어서 영상을 덧붙였던건데, 중간에 영상을 멈추고 디버깅을 하셨다면 모르셨겠네요 🥲 영상에 자막 같은 걸 좀 한 타이밍 일찍 넣거나 해보겠습니다. 피드백 감사해요!

reactivity.js 를 proxy로 수정 후 오류

안녕하세요! 답변이 늦어져 죄송합니다. 일단 영상에서 마무리되었던 버전 기준으로 두 가지 버그 수정을 한 후에 작동하는 걸 볼 수 있었는데요. 우선 돌아가는 코드는 다음과 같습니다:https://github.com/eunjae-lee/sinabro-js/pull/15 Proxy 의 set 함수에서 값을 설정하는데 성공했다면 true 를 리턴해야 해요. 영상에서는 그 부분이 없었습니다.1까지 했으면 상품을 + 눌렀을 때 우측 상단의 카트 수량은 업데이트 되는데, 해당 상품의 수량은 undefined 가 되는 상황을 보실 수 있을 거에요. 생각을 해보면, 카트 수량은 업데이트 된다.. 그러면 proxy 자체가 완전히 망가진 건 아닌 거겠죠? 그런데 해당 상품의 수량이 undefined 다.. 그러면 그 관련된 어딘가를 살펴봐야 할 거에요. 해당 상품의 수량을 업데이트 해주는 건, 이 버전에서는 proxy 의 set 함수 내에서 하도록 변경했잖아요? elements 를 forEach 돌면서. 거기를 들여다보니, 제가 이전 구현에서 복붙하면서 newValue[prop] 으로 가져왔었는데, 사실은 proxy 버전에서는 newValue 라고만 적었어야 했어요. 살펴보시고 이해 안가시는 부분 있으면 또 알려주세요 🙂

첫 강의 배포 & 번들러의 기초에 대한 제 이해가 맞는지 궁금합니다

안녕하세요! 배포를 위해서는 netlify나 vercel과 같은 호스팅 서비스를 이용하면 간편하게 진행할 수 있습니다(주변 분들께 궁금해서 여쭤보니, aws를 통해 좀 더 근간적으로 빌드와 배포를 진행할 수 있다는데 이 부분을 지금 공부하는 것이 좋을까요?) -> 아직 Netlify 나 Vercel 을 사용해보시지 않았다면 AWS 는 급하게 만져보시지 않아도 좋을 거 같아요. Netlify 나 Vercel 은 주로 프론트엔드 프로젝트들에서 사용하는 호스팅 서비스여서 CDN 에 빌드된 static assets 을 배포해주면서 serverless function 정도를 덧붙여 주는 방식인데요. 아주 간단히 말하자면 AWS 는 자유도가 훨씬 높으면서 그만큼 난이도도 올라간다고 생각하시면 될 거 같습니다. 시나브로님께서 강의에서 parcel과 vite를 이용해 빌드 & 번들하는 것을 보여주셨습니다. 두 방식 모두 특정 디렉토리에 소스 파일들을 작성하고, build 명령어를 통해 dist 디렉터리에 배포될 파일들을 생성합니다. 후에 vercel 같은 호스팅 서비스에서는 해당 프로젝트가 어떤 번들 툴로 만들어졌는지를 파악하고 서비스를 도와줍니다.-> 맞아요 제가 추가적으로 chatGPT를 통해 알아보니 vite는 esbuild라는 트랜스파일링 & 번들을 동시에 해주는 내장 프로그램을 사용합니다. 이는 GO 언어로 작성되었기에 속도가 굉장히 빠릅니다. 기존의 CRA 프로젝트 같은 경우에는 babel 컴파일러와 webpack 번들러를 이용하지만, 이보다는 속도가 느릴 수 있습니다.-> 맞습니다. 만약에 더 자세히 알고 싶으시면 https://vitejs.dev/guide/why.html 이 문서에 좋은 설명이 있어요. tailwindCSS 라이브러리를 이용하여 문서의 스타일링을 진행하면 parcel이나 vercel 같은 프로그램이 이를 CDN을 통하여 관리해줍니다(이 부분이 개념이 다소 헷갈리는 것 같습니다).-> TailwindCSS 의 문법으로 class name 을 작성하다보면 parcel build 이나 vite build 같은 명령어로 빌드 프로세스를 실행시켰을 때, 사용된 class names 만 추려서 style.css 같은 파일을 만들어주고 그 파일이 다른 HTML, JS 파일들과 함께 CDN 에 배포가 되는 방식이에요. 또 질문 있으시면 남겨주시구요. 제 생각에는 한번 React 나 Vue 등 사용해 보신 프론트엔드 프레임워크를 가지고 hello world 정도만 나오는 거 확인하신 후에, 그걸 Vercel 이나 Netlify 통해 배포해보시는 걸 경험해보시면 조금 더 이해도가 올라갈 거 같습니다!

디스코드 채널 문의

제가 지난번에 달았던 댓글이 잘못되어 다시 안내드립니다! https://learnwitheunjae.dev/community 위 링크 통해 들어오실 수 있어요 :)

yearn create 1분정도

디스코드 통해 답변 드렸지만, 다른 분들을 위해 여기도 남기자면, 맥에서 앱을 실행하기 위해 사용하는 https://www.raycast.com/ 라는 앱이었습니다.

yarn dev 안되요..

Discord 통해 답변을 드렸지만, 다른 분들을 위해 말씀드리자면 위 상황은 yarn 이 설치되어 있지 않아 생기는 것 같고 yarn 을 설치하시면 됩니다. 하지만, monorepo 를 다루는 몇 에피소드를 제외하고는 대부분 npm 으로 진행하셔도 무방합니다.