feat: 241124_react_cant_change_jsx_to_string_윤예진 #112
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| --- | ||
| layout: post | ||
| title: React로 파일을 문자열로 변환할 수 없는 이유 | ||
| author: 윤예진 | ||
| categories: 프론트엔드 기술블로그 | ||
| banner: | ||
| image: assets/images/post/2023-11-05.webp | ||
| background: "#000" | ||
| height: "100vh" | ||
| min_height: "38vh" | ||
| heading_style: "font-size: 4.25em; font-weight: bold; text-decoration: underline" | ||
| tags: [JavaScript, module_bundler, webpack, vite] | ||
| --- | ||
|
|
||
| [오픈소스 프로젝트](https://shadcn-dialog-snippet.vercel.app/) 첫 배포가 이번주에 완료되었습니다! 🎉 이 프로젝트는 shadcn/ui 라이브러리의 dialog 컴포넌트를 활용해 개발자분들이 자주 마주치시는 여러 가지 dialog 상황들을 위한 코드 스니펫을 모아두었습니다. | ||
|
|
||
| 첫 배포를 위해 우리 팀이 구현한 기능은 크게 세 가지입니다. | ||
|
|
||
| 1. 사용자들이 실제 구현된 모습을 직접 볼 수 있는 dialog 미리보기 화면 구현 | ||
|
|
||
| 2. 원하는 코드를 바로 프로젝트에 적용할 수 있는 코드 복사 기능 | ||
|
|
||
| 3. 코드의 가독성을 높이기 위한 코드 에디터 스타일 구현 | ||
|
|
||
| 이 중에서 저는 두 번째와 세 번째 기능의 개발을 맡았습니다. 코드 복사 기능은 웹 브라우저의 표준 API인 Clipboard API의 writeText 메서드를 활용했고, 코드 에디터와 유사한 시각적 효과를 위해 shiki 라이브러리를 적용했습니다. | ||
|
|
||
| 이 두 가지 주요 기능을 구현하면서 공통적으로 부딪힌 문제는 미리 작성해둔 dialog 시나리오 코드들을 문자열 형태로 변환해야 한다는 점이었습니다. React 컴포넌트 파일의 전체 내용을 import 구문부터 export 구문까지 모두 문자열 값으로 바꿔야 했습니다. 단순히 파일을 문자열로 변환하는 방식은 코드 중복을 야기하고 향후 유지보수를 어렵게 만들 수 있는 위험이 있었습니다. | ||
|
|
||
| 저는 파일 자체를 직접 문자열로 변환하고 싶었지만, React에서는 이 작업을 수행할 수 없었습니다. 저는 이 작업이 왜 불가능한지 이해가 되지 않았습니다. React로 만든 프로젝트 내부 파일을 문자열로 바꾸는 일인데 말이죠. | ||
|
|
||
| --- | ||
|
|
||
| ### React로 프로젝트 내부 파일을 문자열로 변환하는 작업이 왜 불가능한가? | ||
|
|
||
| React로 프로젝트 내부 파일을 문자열로 변환하는 작업은 몇 가지 기술적 제한과 React의 동작 방식 때문에 불가능합니다. 핵심은 React가 **브라우저 환경**에서 동작하는 클라이언트 사이드 UI 라이브러리라는 점입니다. React는 브라우저에서 DOM을 조작하고 사용자와 상호작용하는 데 초점이 맞춰져 있어, 로컬 파일 시스템에 접근하거나 소스 파일을 문자열로 변환하는 작업을 수행할 수 없습니다. | ||
|
|
||
| ### 1. **React는 클라이언트 사이드 라이브러리** | ||
|
|
||
| React는 브라우저에서 실행되며, 브라우저는 보안상의 이유로 로컬 파일 시스템에 직접 접근할 수 없습니다. React 애플리케이션이 실행되는 브라우저 환경은 사용자의 데이터를 보호하기 위해 다음과 같은 제한을 둡니다: | ||
|
|
||
| - 로컬 파일 시스템에 직접 접근하려는 시도는 차단됩니다. | ||
| - 브라우저가 파일 시스템에 접근하려면 반드시 사용자가 파일을 업로드해야 하며(File API), 이 경우에도 업로드된 파일만 접근할 수 있습니다. | ||
| - React는 클라이언트 사이드 동작에 최적화되어 있어, 파일 시스템 접근과 같은 작업은 기본적으로 지원하지 않습니다. | ||
|
|
||
| ### 2. **개발 환경과 브라우저 환경의 차이** | ||
|
|
||
| React 애플리케이션은 **개발 환경**에서 작성되고, 최종적으로 **브라우저 환경**에서 실행됩니다. 이 두 환경의 차이로 인해 파일 시스템 접근이 어려워집니다. | ||
|
|
||
| ### (1) 개발 환경 | ||
|
|
||
| - 개발 중에는 Node.js 기반 도구(Vite, Webpack 등)를 사용합니다. Node.js는 파일 시스템(`fs` 모듈)을 통해 로컬 파일에 접근할 수 있으므로, 파일 작업이 가능합니다. | ||
|
There was a problem hiding this comment. 그렇기 때문에 빌드 환경에서 파일을 읽고 변수에 저장할 수 있어요. 전에 특강해드렸던 메타프로그래밍을 해보면 어떨까 싶네요 ㅎㅎ 저라면 빌드 파이프라인에 스크립트를 하나 만들어놓고, 실행한뒤 그걸 import 하는 식으로 구성했을거같아요. const input = fs.readFileSync("./src/someWhere.ts", "utf-8");
const output = `
export const source = \`${myFile}\`;
`;
fs.writeFileSync("./src/__generated__/someWhere.inline.ts", output); |
||
| - React 개발 환경은 이러한 도구를 통해 JSX를 브라우저가 이해할 수 있는 JavaScript 코드로 변환(트랜스파일링)하여 브라우저에 전달합니다. | ||
|
|
||
| ### (2) 브라우저 환경 | ||
|
|
||
| - 최종 빌드된 React 애플리케이션은 브라우저에서 실행됩니다. | ||
| - 브라우저는 보안상의 이유로 로컬 파일 시스템 접근을 제한하며, 트랜스파일링된 JavaScript 결과물만 실행합니다. 따라서 React 컴포넌트 파일의 원본 코드를 문자열로 변환하거나 파일 시스템 작업을 처리하는 것은 불가능합니다. | ||
|
|
||
| --- | ||
|
|
||
| ### 3. **JSX와 파일 시스템 작업의 한계** | ||
|
|
||
| React 컴포넌트는 주로 **JSX 파일**로 작성됩니다. JSX는 HTML과 비슷해 보이지만, 실제로는 JavaScript의 확장 문법이며 브라우저가 바로 이해할 수 있는 형태가 아닙니다. | ||
|
|
||
| ### (1) 트랜스파일링 과정 | ||
|
|
||
| - JSX는 Babel과 같은 트랜스파일러를 통해 순수 JavaScript로 변환됩니다. | ||
| - 이 과정에서 React 컴포넌트 파일의 원본 내용은 변환되어 브라우저에서는 더 이상 원본 파일의 구조와 내용을 알 수 없습니다. | ||
|
|
||
| ### (2) React가 처리하는 데이터의 범위 | ||
|
|
||
| - 브라우저에서 실행되는 React는 트랜스파일링된 JavaScript만 실행하며, 컴포넌트 파일 자체를 문자열로 변환하거나 원본 파일 내용에 접근할 방법을 제공하지 않습니다. | ||
|
There was a problem hiding this comment. JSX는 현재 주제와 무관한 내용 같아요. JSX 아니더라도 어차피 클라이언트 빌드�가 수행되면 트랜스파일된 결과만 남기 때문에 소스에 접근할 수 없거든요. |
||
|
|
||
| --- | ||
|
|
||
| ### 4. **React의 역할과 제한** | ||
|
|
||
| React는 **UI를 선언적으로 렌더링하고, 상태 변화에 따라 DOM을 효율적으로 업데이트**하는 데 초점이 맞춰진 라이브러리입니다. React는 다음과 같은 작업에 특화되어 있습니다: | ||
|
|
||
| - DOM 조작 및 UI 업데이트 | ||
| - 사용자 입력과 이벤트 처리 | ||
| - 서버와의 데이터 통신(Fetch API, GraphQL 등) | ||
|
|
||
| 파일 시스템 접근과 같은 서버 사이드 작업은 React의 설계 목적과 맞지 않으며, 이는 Node.js와 같은 서버 환경에서 처리해야 합니다. | ||
|
|
||
| ### **요약** | ||
|
|
||
| React로 프로젝트 내부 파일을 문자열로 변환할 수 없는 이유 | ||
|
|
||
| 1. **브라우저 환경 제한**: | ||
| - React는 브라우저에서 동작하며, 브라우저는 보안상의 이유로 로컬 파일 시스템 접근을 차단합니다. | ||
| 2. **React의 설계 목적**: | ||
| - React는 UI를 렌더링하고 업데이트하는 데 초점이 맞춰져 있으며, 파일 시스템 작업과 같은 서버 사이드 기능은 제공하지 않습니다. | ||
| 3. **개발 환경과 실행 환경의 차이**: | ||
| - 개발 환경(Node.js)에서는 파일 시스템 접근이 가능하지만, 브라우저 환경에서는 불가능합니다. | ||
| 4. **JSX 트랜스파일링**: | ||
| - React 컴포넌트는 트랜스파일러에 의해 변환된 JavaScript만 브라우저에서 실행되므로, 원본 파일에 접근할 수 없습니다. | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
요게 더 맞는 타이틀인거 같습니다. React는 클라이언트 환경에서 작동하는 UI 라이브러리이고, React를 활용해서 파일을 문자열로 바꾸는건 본래 React가 만들어진 이유와 상관이 없는 내용 같아요.