Open
Description
프런트엔드 번들링(빌드) 펀더멘털 피드백
문서 피드백
/bundling/overview
- 제목은 번들링보다 빌드가 더 매력적이고 담고 싶은 컨텐츠를 잘 표현하는 것 같아요. 번들링보다는 빌드가 더 포괄적인 개념이고 번들링도 빌드의 한 프로세스이기 때문에 프런트엔드 빌드 펀더멘털로 추천합니다. 또한 빌드로 하게 되면 서비스 빌드 뿐만 아니라 오픈소스 라이브러리 패키징이나 모노리포 등의 개념도 넣을 수 있어 이점이 많을 것으로 보입니다.
- TypeScript, JavaScript, React 등의 대중적인 언어는 모두 타입스크립트, 자바스크립트, 리액트로 풀어서 쓰는게 더 글이 잘 읽힐 것 같아요.
- "번들링 과정"의 예시에서 배럴로 적용했는데 이것보다는 더 입문자 관점의 기본적인 export 예시가 들어가는게 좋겠어요. 입문자가 보기에는 배럴 구문이 모듈 익스포트, 임포트의 기본 모습으로 착각할 수 있겠습니다.
- "번들링 과정" 예시에서 입문자를 배려해서 "간단한 자바스크립트 파일 몇개가 하나로 병합되는게 번들링입니다."라는 접근 방식은 좋습니다. 하지만, 요건 번들링에 대한 이해도가 없는 개발자들은 자바스크립트 import, export만 있으면 번들링이 되나보다 오해할 수 있을 것 같아요. 그 관점에서 아래와 같은 구조도와 가장 기초적인 수준의 번들링 설정 파일도 같이 들어가면 더 좋을 것 같아요.
- "번들링 과정"의 아래 영역에서 번들러의 추가적인 개념인 트리 쉐이킹이 포함된 것 같은데요. 하나로 합친다는 것에 집중해서 풀어내고 트리쉐이킹이라는 개념은 여기서 다루지 않는게 좋을 것 같아요.
- 아래 부분에서는 타입스크립트의 빌드(tsc)가 트랜스파일이라고 소개된 것 같은데요. 틀린 표현은 아니지만 정확한 설명도 아니라고 생각해요. 오히려 트랜스파일을 얘기할 거면 타입스크립트의 빌드 예시와 JSX의 트랜스파일 예시를 구분해서 따로 소개하는 게 좋을 것 같아요. 타입스크립트의 빌드는 트랜스파일이다라고 오해할 수 있을 것 같습니다. 그리고, "트랜스파일러는 TypeScript 코드를 브라우저가 이해할 수 있는 일반 JavaScript로 바꿔줘요"는 최소한 "타입스크립트 컴파일러는 브라우저가 이해할 수 있는 일반 JavaScript로 바꿔줘요"라고 표현이 되어야 할 것 같아용!
- 아래 부분에서 의도적으로 두개의 문단을 구분하신거 같은데 1,2번만 놓고 보면 문단의 위계가 맞지 않는 것 같아요. 그리고, 코드 최적화의 경우에는 트리쉐이킹을 먼저 앞세우기보다 compression, minified가 먼저 설명된 후 트리쉐이킹이라는 고급 용어가 뒤에 배치되는 게 좀 더 이해하기 수월할 것 같습니다.
- 아래 부분에서 타입스크립트가 특수 문법으로 소개되는데 이것보다는 다음과 같이 표현되는 게 좋을 것 같아요 "번들링과 같은 프런트엔드 빌드 작업을 하게 되면 TypeScript, JSX와 같은 언어나 특수 문법들을 브라우저가 이해할 수 있게 돼요. 브라우저에서 인식할 수 있는 코드로 바꿔주기 때문이죠". 타입스크립트 → 자바스크립트 변환 과정은 번들링보다는 빌드의 개념을 쓰는게 좋겠어요. 아니면 명칭은 적어도 컴파일링(타입스크립트 컴파일러를 통한 변환)으로 정리되어야 할 것 같습니다.
튜토리얼 관련 피드백
/bundling/tutorial/basic
- "번들링이란" 페이지의 예시 코드를 그대로 튜토리얼에도 쓰셨네요. 여러 파일을 하나로 합치는데 의의를 두는 목적이라면 앞서 말씀 드린 배럴 문법은 배제하고, 더 예시 코드를 단순화 할 필요가 있을 것 같아요. 파일, 폴더 구조도 훨씬 더 심플하게 정리될 수 있을 것 같습니다.
/bundling/tutorial/typescript
- 타입스크립트 코드를 번들링한다는 건 잘못된 표현인거 같아요. 앞에서 드린 피드백을 참고해서 전체적으로 다시 써보시면 좋겠습니다
/bundling/library
- 라이브러리 번들링은 웹팩으로 하면 할 수 있겠지만, 롤업으로 하는게 여러모로 더 장점이 많은 것 같아서 웹팩 보다는 다른 빌드 도구로 풀어내면 좋을 것 같아요.
/bundling/setting-template
- 상황별 설정 템플릿을 보여주는 건 좋지만, 전반적으로 각 설정에 대해 좀 더 자세하게 설명이 들어가면 좋을 것 같습니다. 단순 나열식으로 보여서 실질적인 효과가 있을까는 잘 모르겠어요.
그외 심화 학습 섹션
위쪽에 드린 피드백을 바탕으로 전반적으로 설명 및 예시, 목차 정리가 되고 나면 "심화 학습" 섹션에도 정리가 필요할 것 같습니다. 현재 시점에서 심화 학습 부분까지 다 보고 피드백을 드리는 건 크게 의미가 없을 것 같아서 이후에 다시 검토해 볼게요.
문서 수정 사항
소소한 표현 및 문법 다듬었습니다.
사이트 개선 사항 피드백
- 아래 화면에서 1번은 클릭 가능한 영역인데 2번은 텍스트라 페이지 이동이 안되네요. 사용성이 달라 메뉴 이동이 어려운 것 같아요.
Metadata
Metadata
Assignees
Labels
No labels