• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

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

23.10.08 14:31 작성 조회수 306

1

안녕하세요! 저는 시나브로님의 강의를 듣고 있는 학생입니다! 다름이 아니라 이전에 강의를 들었을 때에는 다소 난이도가 있어 미뤄두고 이번에 들었는데 조금 나아진 것 같습니다. 사실 아직 배포를 해본 경험이 없어 제 이해가 맞는지 여쭤보고 싶습니다.

  1. 배포를 위해서는 netlify나 vercel과 같은 호스팅 서비스를 이용하면 간편하게 진행할 수 있습니다(주변 분들께 궁금해서 여쭤보니, aws를 통해 좀 더 근간적으로 빌드와 배포를 진행할 수 있다는데 이 부분을 지금 공부하는 것이 좋을까요?)

  2. 시나브로님께서 강의에서 parcel과 vite를 이용해 빌드 & 번들하는 것을 보여주셨습니다. 두 방식 모두 특정 디렉토리에 소스 파일들을 작성하고, build 명령어를 통해 dist 디렉터리에 배포될 파일들을 생성합니다. 후에 vercel 같은 호스팅 서비스에서는 해당 프로젝트가 어떤 번들 툴로 만들어졌는지를 파악하고 서비스를 도와줍니다.

  3. 제가 추가적으로 chatGPT를 통해 알아보니 vite는 esbuild라는 트랜스파일링 & 번들을 동시에 해주는 내장 프로그램을 사용합니다. 이는 GO 언어로 작성되었기에 속도가 굉장히 빠릅니다. 기존의 CRA 프로젝트 같은 경우에는 babel 컴파일러와 webpack 번들러를 이용하지만, 이보다는 속도가 느릴 수 있습니다.

  4. tailwindCSS 라이브러리를 이용하여 문서의 스타일링을 진행하면 parcel이나 vercel 같은 프로그램이 이를 CDN을 통하여 관리해줍니다(이 부분이 개념이 다소 헷갈리는 것 같습니다).

 

사실 아직 실제로 해본 것이 아니라 개념이 헷갈립니다. 그래도 일단 강의를 한번 차례로 들으면 이해가 더 나아질까요? 감사합니다☺️

답변 1

답변을 작성해보세요.

0

안녕하세요!

 

  1. 배포를 위해서는 netlify나 vercel과 같은 호스팅 서비스를 이용하면 간편하게 진행할 수 있습니다(주변 분들께 궁금해서 여쭤보니, aws를 통해 좀 더 근간적으로 빌드와 배포를 진행할 수 있다는데 이 부분을 지금 공부하는 것이 좋을까요?)

     

    -> 아직 Netlify 나 Vercel 을 사용해보시지 않았다면 AWS 는 급하게 만져보시지 않아도 좋을 거 같아요. Netlify 나 Vercel 은 주로 프론트엔드 프로젝트들에서 사용하는 호스팅 서비스여서 CDN 에 빌드된 static assets 을 배포해주면서 serverless function 정도를 덧붙여 주는 방식인데요. 아주 간단히 말하자면 AWS 는 자유도가 훨씬 높으면서 그만큼 난이도도 올라간다고 생각하시면 될 거 같습니다.

     

     

  2. 시나브로님께서 강의에서 parcel과 vite를 이용해 빌드 & 번들하는 것을 보여주셨습니다. 두 방식 모두 특정 디렉토리에 소스 파일들을 작성하고, build 명령어를 통해 dist 디렉터리에 배포될 파일들을 생성합니다. 후에 vercel 같은 호스팅 서비스에서는 해당 프로젝트가 어떤 번들 툴로 만들어졌는지를 파악하고 서비스를 도와줍니다.

-> 맞아요

 

  1. 제가 추가적으로 chatGPT를 통해 알아보니 vite는 esbuild라는 트랜스파일링 & 번들을 동시에 해주는 내장 프로그램을 사용합니다. 이는 GO 언어로 작성되었기에 속도가 굉장히 빠릅니다. 기존의 CRA 프로젝트 같은 경우에는 babel 컴파일러와 webpack 번들러를 이용하지만, 이보다는 속도가 느릴 수 있습니다.

-> 맞습니다. 만약에 더 자세히 알고 싶으시면 https://vitejs.dev/guide/why.html 이 문서에 좋은 설명이 있어요.

 

  1. tailwindCSS 라이브러리를 이용하여 문서의 스타일링을 진행하면 parcel이나 vercel 같은 프로그램이 이를 CDN을 통하여 관리해줍니다(이 부분이 개념이 다소 헷갈리는 것 같습니다).

-> TailwindCSS 의 문법으로 class name 을 작성하다보면 parcel build 이나 vite build 같은 명령어로 빌드 프로세스를 실행시켰을 때, 사용된 class names 만 추려서 style.css 같은 파일을 만들어주고 그 파일이 다른 HTML, JS 파일들과 함께 CDN 에 배포가 되는 방식이에요.

 

 


 

또 질문 있으시면 남겨주시구요. 제 생각에는 한번 React 나 Vue 등 사용해 보신 프론트엔드 프레임워크를 가지고 hello world 정도만 나오는 거 확인하신 후에, 그걸 Vercel 이나 Netlify 통해 배포해보시는 걸 경험해보시면 조금 더 이해도가 올라갈 거 같습니다!

김승완님의 프로필

김승완

질문자

2023.10.11

답변 감사합니다 :)

채널톡 아이콘