인프런 커뮤니티 질문&답변

안녕하세요!

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

    

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

    

    

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

-> 맞아요

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

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

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

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

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