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

안녕하세요 좋은 질문 감사합니다!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 으로 진행하셔도 무방합니다.

클로저에 대해서 제가 아는 부분을 공유합니다!

공유 감사합니다 devWithkey 님! 😊

콘솔창 $0과 this에 대해

this 는 function 내에서 현재 함수가 바인딩 되어 있는 객체를 가리킵니다.그와 달리 $0 는 브라우저 개발자 도구의 element inspector 에서 선택되어 있는 element 하나를 $0 라는 임시 변수에 브라우저가 저절로 assign 해주는 용도입니다.