diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..1bb2661fd --- /dev/null +++ b/.editorconfig @@ -0,0 +1,7 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +indent_style = space diff --git a/.env.production b/.env.production index e403f96b6..8d10ee6a1 100644 --- a/.env.production +++ b/.env.production @@ -1 +1 @@ -NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT' \ No newline at end of file +NEXT_PUBLIC_GA_TRACKING_ID = 'G-C4MKP7MN1V' diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 000000000..8a5a53391 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,4 @@ +# https://git-scm.com/docs/gitattributes + +# Ensure consistent EOL(LF) for all files that Git considers text files. +* text=auto eol=lf diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 000000000..b7e5c36c1 --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1 @@ +* @hg-pyun @gnujoow @eomttt @lumirlumir diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 000000000..c51ac7c6c --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +github: [lumirlumir] diff --git a/.github/ISSUE_TEMPLATE/2-suggestion.yml b/.github/ISSUE_TEMPLATE/2-suggestion.yml deleted file mode 100644 index ac0b480fe..000000000 --- a/.github/ISSUE_TEMPLATE/2-suggestion.yml +++ /dev/null @@ -1,34 +0,0 @@ -name: "๐Ÿ’ก Suggestions" -description: "Suggest a new page, section, or edit for an existing page." -title: "[Suggestion]: " -labels: ["type: documentation"] -body: - - type: textarea - attributes: - label: Summary - description: | - A clear and concise summary of what we should add. - placeholder: | - Example: - Add a new page for how to use React with TypeScript. - validations: - required: true - - type: input - attributes: - label: Page - description: | - What page is this about? - placeholder: | - https://react.dev/ - validations: - required: false - - type: textarea - attributes: - label: Details - description: | - Please provide a explanation for what you're suggesting. - placeholder: | - Example: - I think it would be helpful to have a page that explains how to use React with TypeScript. This could include a basic example of a component written in TypeScript, and a link to the TypeScript documentation. - validations: - required: true diff --git a/.github/ISSUE_TEMPLATE/need-translation.md b/.github/ISSUE_TEMPLATE/need-translation.md new file mode 100644 index 000000000..ea0adf842 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/need-translation.md @@ -0,0 +1,20 @@ +--- +name: ๋ฒˆ์—ญ ํ•„์š” +about: ๋ฒˆ์—ญ์ด ํ•„์š”ํ•œ ๋ฌธ์„œ์— ๋Œ€ํ•ด ์ด ํ…œํ”Œ๋ฆฟ์„ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š” +title: '[๋ฒˆ์—ญ ํ•„์š”]: ' +labels: 'need translation' +assignees: '' +--- + +## Summary + + + +## Page + + + + +## Details + + diff --git a/.github/ISSUE_TEMPLATE/term.md b/.github/ISSUE_TEMPLATE/term.md new file mode 100644 index 000000000..7064fa165 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/term.md @@ -0,0 +1,21 @@ +--- +name: Term +about: ๋ฌธ์„œ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์šฉ์–ด ๋ฒˆ์—ญ์— ๋…ผ์˜๊ฐ€ ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์ด ํ…œํ”Œ๋ฆฟ์„ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š” +title: '' +labels: discussion, term +assignees: '' +--- + +## ๋…ผ์˜ํ•˜๊ณ ์ž ํ•˜๋Š” ์šฉ์–ด + +## ํ•ด๋‹น ์šฉ์–ด๊ฐ€ ๋“ฑ์žฅํ•˜๋Š” ์›๋ฌธ์˜ ๋ฌธ์žฅ + +--- + +## ๋…ผ์˜๊ฐ€ ์™„๋ฃŒ๋œ ํ›„ + +1. ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์—…๋ฐ์ดํŠธ ํ•ด์ฃผ์„ธ์š”. + - [ ] [`/textlint/data/rules/translateGlossary.js`](https://github.com/reactjs/ko.react.dev/blob/main/textlint/data/rules/translateGlossary.js) + +2. ์šฉ์–ด ์‚ฌ์ „์— ์—…๋ฐ์ดํŠธ๋œ ๋‚ด์—ญ์ด ์ •์ƒ ๋ฐ˜์˜๋˜์—ˆ๋‚˜ ํ™•์ธํ•ด์ฃผ์„ธ์š”. (ํ•ด๋‹น ๋‚ด์—ญ์€ husky์˜ pre-commit ํ›…์„ ํ†ตํ•ด ์ž๋™ ์—…๋ฐ์ดํŠธ ๋ฉ๋‹ˆ๋‹ค.) + - [ ] [`/wiki/translate-glossary.md`](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 7e4f6d2f2..5bbfcb602 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,11 +1,26 @@ + +# + + -Please see the Contribution Guide for guidelines: +## ํ•„์ˆ˜ ํ™•์ธ ์‚ฌํ•ญ -https://github.com/reactjs/react.dev/blob/main/CONTRIBUTING.md +- [ ] [๊ธฐ์—ฌ์ž ํ–‰๋™ ๊ฐ•๋ น ๊ทœ์•ฝCode of Conduct](https://github.com/reactjs/ko.react.dev/blob/main/CODE_OF_CONDUCT.md) +- [ ] [๊ธฐ์—ฌ ๊ฐ€์ด๋“œ๋ผ์ธContributing](https://github.com/reactjs/ko.react.dev/blob/main/CONTRIBUTING.md) +- [ ] [๊ณตํ†ต ์Šคํƒ€์ผ ๊ฐ€์ด๋“œUniversal Style Guide](https://github.com/reactjs/ko.react.dev/blob/main/wiki/universal-style-guide.md) +- [ ] [๋ฒˆ์—ญ์„ ์œ„ํ•œ ๋ชจ๋ฒ” ์‚ฌ๋ก€Best Practices for Translation](https://github.com/reactjs/ko.react.dev/blob/main/wiki/best-practices-for-translation.md) +- [ ] [๋ฒˆ์—ญ ์šฉ์–ด ์ •๋ฆฌTranslate Glossary](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md) +- [ ] [`textlint` ๊ฐ€์ด๋“œTextlint Guide](https://github.com/reactjs/ko.react.dev/blob/main/wiki/textlint-guide.md) +- [ ] [๋งž์ถค๋ฒ• ๊ฒ€์‚ฌSpelling Check](https://nara-speller.co.kr/speller/) -If your PR references an existing issue, please add the issue number below +## ์„ ํƒ ํ™•์ธ ์‚ฌํ•ญ ---> +- [ ] ๋ฒˆ์—ญ ์ดˆ์•ˆ ์ž‘์„ฑDraft Translation +- [ ] ๋ฆฌ๋ทฐ ๋ฐ˜์˜Resolve Reviews diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml deleted file mode 100644 index 2f5b2a497..000000000 --- a/.github/workflows/discord_notify.yml +++ /dev/null @@ -1,32 +0,0 @@ -name: Discord Notify - -on: - pull_request_target: - types: [opened, ready_for_review] - -permissions: {} - -jobs: - check_maintainer: - uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main - permissions: - # Used by check_maintainer - contents: read - with: - actor: ${{ github.event.pull_request.user.login }} - - notify: - if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} - needs: check_maintainer - runs-on: ubuntu-latest - steps: - - name: Discord Webhook Action - uses: tsickert/discord-webhook@v6.0.0 - with: - webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }} - embed-author-name: ${{ github.event.pull_request.user.login }} - embed-author-url: ${{ github.event.pull_request.user.html_url }} - embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }} - embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}' - embed-description: ${{ github.event.pull_request.body }} - embed-url: ${{ github.event.pull_request.html_url }} diff --git a/.github/workflows/label_core_team_prs.yml b/.github/workflows/label_core_team_prs.yml deleted file mode 100644 index f9b3328ee..000000000 --- a/.github/workflows/label_core_team_prs.yml +++ /dev/null @@ -1,41 +0,0 @@ -name: Label Core Team PRs - -on: - pull_request_target: - -permissions: {} - -env: - TZ: /usr/share/zoneinfo/America/Los_Angeles - # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout - SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1 - -jobs: - check_maintainer: - uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main - permissions: - # Used by check_maintainer - contents: read - with: - actor: ${{ github.event.pull_request.user.login }} - - label: - if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} - runs-on: ubuntu-latest - needs: check_maintainer - permissions: - # Used to add labels on issues - issues: write - # Used to add labels on PRs - pull-requests: write - steps: - - name: Label PR as React Core Team - uses: actions/github-script@v7 - with: - script: | - github.rest.issues.addLabels({ - owner: context.repo.owner, - repo: context.repo.repo, - issue_number: ${{ github.event.number }}, - labels: ['React Core Team'] - }); diff --git a/.github/workflows/textlint_lint.yml b/.github/workflows/textlint_lint.yml new file mode 100644 index 000000000..8c15e1214 --- /dev/null +++ b/.github/workflows/textlint_lint.yml @@ -0,0 +1,47 @@ +name: Textlint Lint + +on: + push: + branches: + - main + paths: + - 'src/**/*.md' + - 'textlint/**/*.js' + - '.github/workflows/textlint_lint.yml' + + pull_request: + types: + - opened + - synchronize + - reopened + paths: + - 'src/**/*.md' + - 'textlint/**/*.js' + - '.github/workflows/textlint_lint.yml' + +jobs: + Lint: + runs-on: ubuntu-latest + + steps: + - name: Set up checkout + uses: actions/checkout@v4 + + - name: Set up node + uses: actions/setup-node@v4 + with: + node-version: 20.x + cache: yarn + + - name: Set up cache + uses: actions/cache@v4 + with: + path: ~/.yarn-cache + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + + - name: Install dependencies + run: yarn install --frozen-lockfile + # The `--frozen-lockfile` flag in Yarn ensures that dependencies are installed without modifying the `yarn.lock` file. It is useful for maintaining consistency in CI/CD environments by preventing unexpected changes to the lock file and ensuring that the same versions of dependencies are installed. + + - name: Lint + run: yarn textlint-lint diff --git a/.github/workflows/textlint_test.yml b/.github/workflows/textlint_test.yml new file mode 100644 index 000000000..10af72be0 --- /dev/null +++ b/.github/workflows/textlint_test.yml @@ -0,0 +1,45 @@ +name: Textlint Test + +on: + push: + branches: + - main + paths: + - 'textlint/**/*.js' + - '.github/workflows/textlint_test.yml' + + pull_request: + types: + - opened + - synchronize + - reopened + paths: + - 'textlint/**/*.js' + - '.github/workflows/textlint_test.yml' + +jobs: + Test: + runs-on: ubuntu-latest + + steps: + - name: Set up checkout + uses: actions/checkout@v4 + + - name: Set up node + uses: actions/setup-node@v4 + with: + node-version: 20.x + cache: yarn + + - name: Set up cache + uses: actions/cache@v4 + with: + path: ~/.yarn-cache + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + + - name: Install dependencies + run: yarn install --frozen-lockfile + # The `--frozen-lockfile` flag in Yarn ensures that dependencies are installed without modifying the `yarn.lock` file. It is useful for maintaining consistency in CI/CD environments by preventing unexpected changes to the lock file and ensuring that the same versions of dependencies are installed. + + - name: Test + run: yarn textlint-test diff --git a/.gitignore b/.gitignore index 92626a1e6..eea4134ff 100644 --- a/.gitignore +++ b/.gitignore @@ -40,9 +40,16 @@ public/fonts/**/Optimistic_*.woff2 # rss public/rss.xml +<<<<<<< HEAD +# code editor +.cursor +.idea +*.code-workspace +======= # claude local settings .claude/*.local.* .claude/react/ # worktrees .worktrees/ +>>>>>>> 55a317d40781a0054a05a9f6c443ae0bd71f7d7e diff --git a/.husky/common.sh b/.husky/common.sh new file mode 100644 index 000000000..a9390c4df --- /dev/null +++ b/.husky/common.sh @@ -0,0 +1,9 @@ +#!/bin/sh +command_exists () { + command -v "$1" >/dev/null 2>&1 +} + +# Windows 10, Git Bash and Yarn workaround +if command_exists winpty && test -t 1; then + exec < /dev/tty +fi diff --git a/.husky/pre-commit b/.husky/pre-commit index dc0378c34..eb6e8c1c0 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,5 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" +. "$(dirname "$0")/common.sh" -yarn lint-staged \ No newline at end of file +yarn lint-staged diff --git a/.textlintrc.js b/.textlintrc.js new file mode 100644 index 000000000..fc2a0b9a5 --- /dev/null +++ b/.textlintrc.js @@ -0,0 +1,20 @@ +module.exports = { + rules: { + 'allowed-uris': { + disallowed: { + /** + * Disallow URIs starting with the following strings: + * - https://ko.react.dev + * - http://ko.react.dev + * + * For example, + * `https://ko.react.dev/reference/rules` can be replaced with `/reference/rules`. + */ + links: [/https?:\/\/ko\.react\.dev/g], + }, + }, + }, + filters: { + comments: true, + }, +}; diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 000000000..034db5d67 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,7 @@ +{ + "recommendations": [ + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "editorconfig.editorconfig" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..44d5ad55b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,8 @@ +{ + "editor.formatOnSave": true, + "editor.formatOnPaste": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "always" + } +} diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index f049d4c53..97c4965b8 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,76 +1,122 @@ -# Code of Conduct +# ๊ธฐ์—ฌ์ž ํ–‰๋™ ๊ฐ•๋ น ๊ทœ์•ฝ -## Our Pledge +## ์„œ์•ฝ -In the interest of fostering an open and welcoming environment, we as -contributors and maintainers pledge to make participation in our project and -our community a harassment-free experience for everyone, regardless of age, body -size, disability, ethnicity, sex characteristics, gender identity and expression, -level of experience, education, socio-economic status, nationality, personal -appearance, race, religion, or sexual identity and orientation. +์šฐ๋ฆฌ๋Š” ๊ตฌ์„ฑ์›, ๊ธฐ์—ฌ์ž ๋ฐ ๋ฆฌ๋”๋กœ์„œ ์ปค๋ฎค๋‹ˆํ‹ฐ์— ์ฐธ์—ฌํ•˜์—ฌ +์—ฐ๋ น, ์‹ ์ฒด ํฌ๊ธฐ, ๋ˆˆ์— ๋ณด์ด๊ฑฐ๋‚˜ ๋ณด์ด์ง€ ์•Š๋Š” ์žฅ์• , ๋ฏผ์กฑ์„ฑ, ์„ฑ๋ณ„, ์„ฑ ์ •์ฒด์„ฑ๊ณผ ํ‘œํ˜„, +๊ฒฝ๋ ฅ, ํ•™๋ ฅ, ์‚ฌํšŒ ๊ฒฝ์ œ์  ์ง€์œ„, ๊ตญ์ , ์™ธ๋ชจ, ์ธ์ข…, ์นด์ŠคํŠธ ์ œ๋„, ํ”ผ๋ถ€์ƒ‰, ์ข…๊ต +๋˜๋Š” ์„ฑ์  ์ •์ฒด์„ฑ๊ณผ ์„ฑ์  ์„ฑํ–ฅ์— ๊ด€๊ณ„์—†์ด ๋ชจ๋“  ์‚ฌ๋žŒ์„ ์ฐจ๋ณ„ํ•˜์ง€ ์•Š์„ ๊ฒƒ์„ ์„œ์•ฝํ•œ๋‹ค. -## Our Standards +์šฐ๋ฆฌ๋Š” ๊ฐœ๋ฐฉ์ ์ด๊ณ  ์นœ๊ทผํ•˜๋ฉฐ ๋‹ค์–‘ํ•˜๊ณ  ํฌ์šฉ์ ์ด๋ฉฐ ๊ฑด๊ฐ•ํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๊ธฐ์—ฌํ•˜๋Š” +๋ฐฉ์‹์œผ๋กœ ํ–‰๋™ํ•˜๊ณ  ์ƒํ˜ธ์ž‘์šฉํ•  ๊ฒƒ์„ ์„œ์•ฝํ•œ๋‹ค. -Examples of behavior that contributes to creating a positive environment -include: +## ํ‘œ์ค€ -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ๊ธ์ •์ ์ธ ํ™˜๊ฒฝ์„ ์œ„ํ•ด ๊ธฐ์—ฌ์ž๊ฐ€ ํ•ด์•ผ ํ•  ํ–‰๋™์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. -Examples of unacceptable behavior by participants include: +- ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์— ๋Œ€ํ•œ ์นœ์ ˆ๊ณผ ๊ณต๊ฐ ํ‘œํ˜„ +- ์„œ๋กœ ๋‹ค๋ฅธ ์˜๊ฒฌ ๋ฐ ๊ด€์ , ๊ฒฝํ—˜์— ๋Œ€ํ•œ ์กด์ค‘ +- ๊ฑด์„ค์ ์ธ ํ”ผ๋“œ๋ฐฑ์„ ์ œ๊ณต ๋ฐ ์—ด๋ฆฐ ๋งˆ์Œ์œผ๋กœ ์ˆ˜๋ฝ +- ์ฑ…์ž„์„ ๋ฐ›์•„๋“ค์ด๊ณ  ์‹ค์ˆ˜๋กœ ์ธํ•ด ์˜ํ–ฅ์„ ๋ฐ›์€ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ์‚ฌ๊ณผํ•˜๋ฉฐ ๊ฒฝํ—˜์„ ํ†ตํ•ด ๋ฐฐ์›€ +- ๊ฐœ์ธ๋ฟ๋งŒ ์•„๋‹Œ ์ „์ฒด ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ์œ„ํ•œ ์ตœ์„ ์˜ ๋ฐฉ๋ฒ•์— ์ง‘์ค‘ -* The use of sexualized language or imagery and unwelcome sexual attention or - advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic - address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a - professional setting +ํ•˜์ง€๋ง์•„์•ผ ํ•  ํ–‰๋™์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. -## Our Responsibilities +- ์„ฑ์ ์ธ ์–ธ์–ด์™€ ์ด๋ฏธ์ง€ ์‚ฌ์šฉ, ์„ฑ์  ๊ด€์‹ฌ์ด๋‚˜ ์–ด๋–ค ์ข…๋ฅ˜์˜ ์ ‘๊ทผ +- ์†Œ๋ชจ์ ์ธ ๋…ผ์Ÿ, ๋ชจ์š•์  ๋˜๋Š” ๋น„ํ•˜ํ•˜๋Š” ๋Œ“๊ธ€๊ณผ ๊ฐœ์ธ์  ๋˜๋Š” ์ •์น˜์ ์ธ ๊ณต๊ฒฉ +- ๊ณต๊ฐœ์ ์ด๊ฑฐ๋‚˜ ๊ฐœ์ธ์ ์ธ ๊ดด๋กญํž˜ +- ๋™์˜์—†๋Š” ์ง‘์ฃผ์†Œ ๋˜๋Š” ์ด๋ฉ”์ผ ์ฃผ์†Œ ๋“ฑ์˜ ๊ฐœ์ธ ์ •๋ณด์˜ ๊ณต๊ฐœ +- ๋ถ€์ ์ ˆํ•œ ๊ฒƒ์œผ๋กœ ๊ฐ„์ฃผ๋  ์ˆ˜ ์žˆ๋Š” ๋‹ค๋ฅธ ํ–‰์œ„ -Project maintainers are responsible for clarifying the standards of acceptable -behavior and are expected to take appropriate and fair corrective action in -response to any instances of unacceptable behavior. +## ์ง‘ํ–‰ ์ฑ…์ž„ -Project maintainers have the right and responsibility to remove, edit, or -reject comments, commits, code, wiki edits, issues, and other contributions -that are not aligned to this Code of Conduct, or to ban temporarily or -permanently any contributor for other behaviors that they deem inappropriate, -threatening, offensive, or harmful. +์ปค๋ฎค๋‹ˆํ‹ฐ ๋ฆฌ๋”๋Š” ํ—ˆ์šฉ๋˜๋Š” ํ–‰๋™์˜ ๊ธฐ์ค€์„ ๋ช…ํ™•ํžˆ ํ•˜๊ณ  ์ง‘ํ–‰ํ•  ์ฑ…์ž„์ด ์žˆ์œผ๋ฉฐ +๋ถ€์ ์ ˆํ•˜๋‹ค๊ณ  ์—ฌ๊ฒจ์ง€๋Š” ๋ชจ๋“  ํ–‰๋™, ์œ„ํ˜‘, ๊ณต๊ฒฉ ๋˜๋Š” ํ”ผํ•ด์— ๋Œ€ํ•ด ์ ์ ˆํ•˜๊ณ  +๊ณต์ •ํ•œ ํ–‰๋™์„ ์ทจํ•œ๋‹ค. -## Scope +ํ”„๋กœ์ ํŠธ ์œ ์ง€์ž๋Š” ์ด ํ–‰๋™ ๊ฐ•๋ น์„ ๋”ฐ๋ฅด์ง€ ์•Š์€ ๋Œ“๊ธ€, ์ปค๋ฐ‹, ์ฝ”๋“œ, ์œ„ํ‚ค ํŽธ์ง‘, +์ด์Šˆ์™€ ๊ทธ ์™ธ ๋‹ค๋ฅธ ๊ธฐ์—ฌ๋ฅผ ์‚ญ์ œ, ์ˆ˜์ • ๋˜๋Š” ๊ฑฐ๋ถ€ํ•  ๊ถŒ๋ฆฌ์™€ ์ฑ…์ž„์ด ์žˆ๋‹ค. ๋˜ํ•œ, +๋ถ€์ ๋‹นํ•˜๊ฑฐ๋‚˜ ํ—˜์•…ํ•˜๊ฑฐ๋‚˜ ๊ณต๊ฒฉ์ ์ด๊ฑฐ๋‚˜ ํ•ด๋กญ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ๋‹ค๋ฅธ ํ–‰๋™์„ ํ•œ ๊ธฐ์—ฌ์ž๋ฅผ +์ผ์‹œ์  ๋˜๋Š” ์˜๊ตฌ์ ์œผ๋กœ ํ‡ด์žฅ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค. -This Code of Conduct applies within all project spaces, and it also applies when -an individual is representing the project or its community in public spaces. -Examples of representing a project or community include using an official -project e-mail address, posting via an official social media account, or acting -as an appointed representative at an online or offline event. Representation of -a project may be further defined and clarified by project maintainers. +์ปค๋ฎค๋‹ˆํ‹ฐ ๋ฆฌ๋”๋Š” ์ด ํ–‰๋™ ๊ฐ•๋ น์„ ๋”ฐ๋ฅด์ง€ ์•Š๋Š” ๋Œ“๊ธ€, ์ปค๋ฐ‹, ์ฝ”๋“œ, ์œ„ํ‚ค ํŽธ์ง‘, +์ด์Šˆ์™€ ๊ทธ ์™ธ ๋‹ค๋ฅธ ๊ธฐ์—ฌ๋ฅผ ์‚ญ์ œ, ์ˆ˜์ • ๋˜๋Š” ๊ฑฐ๋ถ€ํ•  ๊ถŒ๋ฆฌ์™€ ์ฑ…์ž„์ด ์žˆ์œผ๋ฉฐ, +์ ์ ˆํ•œ ๊ฒฝ์šฐ ์ค‘์žฌ์  ์˜์‚ฌ๊ฒฐ์ •์— ๋Œ€ํ•œ ์ด์œ ๋ฅผ ์ „๋‹ฌํ•  ๊ฒƒ์ด๋‹ค. -## Enforcement +## ๋ฒ”์œ„ -Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported by contacting the project team at . All -complaints will be reviewed and investigated and will result in a response that -is deemed necessary and appropriate to the circumstances. The project team is -obligated to maintain confidentiality with regard to the reporter of an incident. -Further details of specific enforcement policies may be posted separately. +์ด ํ–‰๋™ ๊ฐ•๋ น์€ ๊ฐœ์ธ์ด ๊ณต๊ฐœ ์˜์—ญ์—์„œ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ๊ณต์‹์ ์œผ๋กœ ๋Œ€ํ‘œํ•  ๋•Œ๋ฅผ +ํฌํ•จํ•˜์—ฌ ๋ชจ๋“  ์ปค๋ฎค๋‹ˆํ‹ฐ ์˜์—ญ์— ์ ์šฉ๋œ๋‹ค. +์ปค๋ฎค๋‹ˆํ‹ฐ ๋Œ€ํ‘œ์˜ ์˜ˆ๋กœ ๊ณต์‹ ์ด๋ฉ”์ผ ์ฃผ์†Œ ์‚ฌ์šฉ, ๊ณต์‹ ์†Œ์…œ ๋ฏธ๋””์–ด ๊ณ„์ •์„ ํ†ตํ•œ ๊ฒŒ์‹œ, +์˜จ/์˜คํ”„๋ผ์ธ ์ด๋ฒคํŠธ์—์„œ ์ž„๋ช…๋œ ๋Œ€ํ‘œ์ž์˜ ํ™œ๋™์ด ์žˆ๋‹ค. -Project maintainers who do not follow or enforce the Code of Conduct in good -faith may face temporary or permanent repercussions as determined by other -members of the project's leadership. +## ์ง‘ํ–‰ -## Attribution +๋ชจ์š•์ ์ด๊ฑฐ๋‚˜ ๊ดด๋กญํž˜ ๋˜๋Š” ๊ทธ ์™ธ ํ•˜์ง€๋ง์•„์•ผ ํ•  ํ–‰๋™์„ ๋ฐœ๊ฒฌํ•˜๋ฉด +์„ ํ†ตํ•ด ์ง‘ํ–‰ ์ฑ…์ž„์ด ์žˆ๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ ๋ฆฌ๋”์—๊ฒŒ ๋ณด๊ณ ํ•œ๋‹ค. +๋ชจ๋“  ๋ถˆ๋งŒ์‚ฌํ•ญ์€ ์‹ ์†ํ•˜๊ณ  ๊ณต์ •ํ•˜๊ฒŒ ๊ฒ€ํ† ๋˜๊ณ  ์กฐ์‚ฌ๋  ๊ฒƒ์ด๋‹ค. -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, -available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html +์ปค๋ฎค๋‹ˆํ‹ฐ ๋ฆฌ๋”๋Š” ์‚ฌ๊ฑด์˜ ๋ณด๊ณ ์ž์˜ ์‚ฌ์ƒํ™œ๊ณผ ์•ˆ์ „์„ ์กด์ค‘ํ•  ์˜๋ฌด๊ฐ€ ์žˆ๋‹ค. -[homepage]: https://www.contributor-covenant.org +## ์ง‘ํ–‰ ์ง€์นจ + +์ปค๋ฎค๋‹ˆํ‹ฐ ๋ฆฌ๋”๋Š” ํ–‰๋™ ๊ฐ•๋ น ์œ„๋ฐ˜์œผ๋กœ ๊ฐ„์ฃผ๋˜๋Š” ํ–‰๋™์— ๋Œ€ํ•œ ๊ฒฐ๊ณผ๋ฅผ ๊ฒฐ์ •ํ•  ๋•Œ, +๋‹ค์Œ์˜ ์ปค๋ฎค๋‹ˆํ‹ฐ ์˜ํ–ฅ ์ง€์นจ์„ ์ค€์ˆ˜ํ•œ๋‹ค: + +### 1. ์ •์ • + +**์ปค๋ฎค๋‹ˆํ‹ฐ ์˜ํ–ฅ**: ์ปค๋ฎค๋‹ˆํ‹ฐ ๋‚ด ๋ถ€์ ์ ˆํ•œ ์–ธ์–ด ์‚ฌ์šฉ์ด๋‚˜ +๋น„์ „๋ฌธ์ ์ธ ํ–‰๋™ ๋˜๋Š” ๋ถˆ์พŒํ•จ์„ ์ฃผ๋Š” ํ–‰๋™. + +**๊ฒฐ๊ณผ**: ์ปค๋ฎค๋‹ˆํ‹ฐ ๋ฆฌ๋”๊ฐ€ ๋ณ„๋„๋กœ ์œ„๋ฐ˜์— ๋Œ€ํ•œ ๋ช…ํ™•์„ฑ๊ณผ ๋ถ€์ ์ ˆํ•จ์— ๋Œ€ํ•œ +์ด์œ ๋ฅผ ์„ค๋ช…ํ•˜๊ณ  ์„œ๋ฉด ๊ฒฝ๊ณ . +๊ณต๊ฐœ ์‚ฌ๊ณผ๋ฅผ ์š”์ฒญํ•  ์ˆ˜ ์žˆ๋‹ค. + +### 2. ๊ฒฝ๊ณ  + +**์ปค๋ฎค๋‹ˆํ‹ฐ ์˜ํ–ฅ**: ๋‹จ์ผ ์‚ฌ๊ณ  ๋˜๋Š” ์—ฐ์†๋œ ํ–‰๋™ ์œ„๋ฐ˜. + +**๊ฒฐ๊ณผ**: ์ง€์†์ ์ธ ํ–‰๋™์— ๋Œ€ํ•œ ๊ฒฐ๊ณผ์— ๋Œ€ํ•ด ๊ฒฝ๊ณ . +ํŠน์ • ๊ธฐ๊ฐ„๋™์•ˆ ํ–‰๋™ ๊ฐ•๋ น์„ ์‹œํ–‰ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค๊ณผ์˜ ์›์น˜ ์•Š๋Š” ์ƒํ˜ธ์ž‘์šฉ์„ ํฌํ•จํ•œ +๊ด€๋ จ๋œ ์‚ฌ๋žŒ๋“ค๊ณผ์˜ ์ƒํ˜ธ์ž‘์šฉ ๊ธˆ์ง€. ์†Œ์…œ ๋ฏธ๋””์–ด์™€ ๊ฐ™์€ ์™ธ๋ถ€ ์ฑ„๋„๋ฟ๋งŒ ์•„๋‹Œ +์ปค๋ฎค๋‹ˆํ‹ฐ ๊ณต๊ฐ„์—์„œ์˜ ์ƒํ˜ธ์ž‘์šฉ๋„ ๊ธˆ์ง€๋œ๋‹ค. +์ด ์กฐํ•ญ์„ ์œ„๋ฐ˜ํ•˜๋ฉด ์ผ์‹œ์  ํ˜น์€ ์˜๊ตฌ์ ์œผ๋กœ ์ œ์žฌ๋กœ ์ด์–ด์งˆ ์ˆ˜ ์žˆ๋‹ค. + +### 3. ์ผ์‹œ์ ์ธ ์ œ์žฌ + +**์ปค๋ฎค๋‹ˆํ‹ฐ ์˜ํ–ฅ**: ์ง€์†์ ์œผ๋กœ ๋ถ€์ ์ ˆํ•œ ํ–‰๋™์„ ํฌํ•จํ•œ +์‹ฌ๊ฐํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ธฐ์ค€ ์œ„๋ฐ˜. -For answers to common questions about this code of conduct, see -https://www.contributor-covenant.org/faq +**๊ฒฐ๊ณผ**: ํŠน์ • ๊ธฐ๊ฐ„๋™์•ˆ ์ปค๋ฎค๋‹ˆํ‹ฐ์™€์˜ ์–ด๋– ํ•œ ์ข…๋ฅ˜์˜ ์ƒํ˜ธ์ž‘์šฉ์ด๋‚˜ +๊ณต๊ฐœ์  ์†Œํ†ต์ด ์ผ์‹œ์  ์ œ์žฌ. +์ด ๊ธฐ๊ฐ„๋™์•ˆ ํ–‰๋™ ๊ฐ•๋ น์„ ์‹œํ–‰ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค๊ณผ์˜ ์›์น˜ ์•Š๋Š” ์ƒํ˜ธ์ž‘์šฉ์„ ํฌํ•จํ•œ +๊ด€๋ จ๋œ ์‚ฌ๋žŒ๋“ค๊ณผ์˜ ์ƒํ˜ธ์ž‘์šฉ ๊ธˆ์ง€. ์†Œ์…œ ๋ฏธ๋””์–ด์™€ ๊ฐ™์€ ์™ธ๋ถ€ ์ฑ„๋„๋ฟ๋งŒ ์•„๋‹Œ +์ปค๋ฎค๋‹ˆํ‹ฐ ๊ณต๊ฐ„์—์„œ์˜ ์ƒํ˜ธ์ž‘์šฉ๋„ ๊ธˆ์ง€๋œ๋‹ค. +์ด ์กฐํ•ญ์„ ์œ„๋ฐ˜ํ•˜๋ฉด ์ผ์‹œ์  ํ˜น์€ ์˜๊ตฌ์ ์œผ๋กœ ์ œ์žฌ๋กœ ์ด์–ด์งˆ ์ˆ˜ ์žˆ๋‹ค. + +### 4. ์˜๊ตฌ ์ œ์žฌ + +**์ปค๋ฎค๋‹ˆํ‹ฐ ์˜ํ–ฅ**: ์ง€์†์ ์ธ ๋ถ€์ ์ ˆํ•œ ํ–‰๋™, ๊ฐœ์ธ์ ์ธ ๊ดด๋กญํž˜ ๋˜๋Š” +๊ฐœ์ธ์˜ ๊ณ„๊ธ‰์— ๋Œ€ํ•œ ๊ณต๊ฒฉ์ด๋‚˜ ํ„ํ•˜๋ฅผ ํฌํ•จํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ‘œ์ค€ ์œ„๋ฐ˜ ํŒจํ„ด์„ ๋ณด์ž„. + +**๊ฒฐ๊ณผ**: ์ปค๋ฎค๋‹ˆํ‹ฐ์™€์˜ ๋ชจ๋“  ์ข…๋ฅ˜์˜ ๊ณต๊ฐœ์  ๊ต๋ฅ˜๋ฅผ ์˜๊ตฌ์ ์œผ๋กœ ์ œ์žฌ. + +## ์ฐธ๊ณ  + +์ด ํ–‰๋™ ๊ฐ•๋ น์€ [๊ธฐ์—ฌ์ž ๊ทœ์•ฝ][homepage] ์˜ 2.1 ๋ฒ„์ „์„ ๋ณ€ํ˜•ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๊ทธ ๋‚ด์šฉ์€ +[https://www.contributor-covenant.org/ko/version/2/1/code-of-conduct.html][v2.1] +์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + +์ปค๋ฎค๋‹ˆํ‹ฐ ์˜ํ–ฅ ์ง€์นจ์€ [Mozilla's code of conduct enforcement ladder][Mozilla CoC] +์—์„œ ์˜๊ฐ์„ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค. + +์ด ํ–‰๋™ ๊ฐ•๋ น์— ๊ด€๋ จํ•œ ์ผ๋ฐ˜์ ์ธ ์งˆ๋ฌธ์— ๋Œ€ํ•œ ๋Œ€๋‹ต์€ +[https://www.contributor-covenant.org/faq][FAQ]๋ฅผ ์ฐธ๊ณ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +๋ฒˆ์—ญ๋ณธ์€ [https://www.contributor-covenant.org/translations][translations]์—์„œ +๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + +[homepage]: https://www.contributor-covenant.org +[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html +[Mozilla CoC]: https://github.com/mozilla/diversity +[FAQ]: https://www.contributor-covenant.org/faq +[translations]: https://www.contributor-covenant.org/translations diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 4c7e5ec74..96229a467 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,52 +1,50 @@ -# Contributing +# ๊ธฐ์—ฌํ•˜๊ธฐ -Thank you for your interest in contributing to the React Docs! +React ๋ฌธ์„œ ๊ธฐ์—ฌ์— ๊ด€์‹ฌ์„ ๊ฐ€์ ธ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! -## Code of Conduct +## ํ–‰๋™ ๊ฐ•๋ น -Facebook has adopted a Code of Conduct that we expect project -participants to adhere to. Please [read the full text](https://code.facebook.com/codeofconduct) -so that you can understand what actions will and will not be tolerated. +ํŽ˜์ด์Šค๋ถFacebook์€ ํ”„๋กœ์ ํŠธ ์ฐธ๊ฐ€์ž๊ฐ€ ์ค€์ˆ˜ํ•ด์•ผ ํ•˜๋Š” ํ–‰๋™ ๊ฐ•๋ น์„ ์ฑ„ํƒํ–ˆ์Šต๋‹ˆ๋‹ค. [์ „๋ฌธ์„ ์ฝ์–ด๋ณด์„ธ์š”](https://code.facebook.com/codeofconduct). ์–ด๋–ค ํ–‰๋™์ด ํ—ˆ์šฉ๋˜๊ณ  ํ—ˆ์šฉ๋˜์ง€ ์•Š๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. -## Technical Writing Tips +## ๊ธฐ์ˆ  ๋ฌธ์„œ ์ž‘์„ฑ ํŒ -This is a [good summary](https://medium.com/@kvosswinkel/coding-like-a-journalist-ee52360a16bc) for things to keep in mind when writing technical docs. +๊ธฐ์ˆ  ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ์—ผ๋‘์— ๋‘์–ด์•ผ ํ•  ์‚ฌํ•ญ์— ๋Œ€ํ•œ [์ข‹์€ ์š”์•ฝ](https://medium.com/@kvosswinkel/coding-like-a-journalist-ee52360a16bc)์ž…๋‹ˆ๋‹ค. -## Guidelines for Text +## ๊ธ€์— ๋Œ€ํ•œ ๊ฐ€์ด๋“œ๋ผ์ธ -**Different sections intentionally have different styles.** +**์„น์…˜๋งˆ๋‹ค ์˜๋„์ ์œผ๋กœ ๋‹ค๋ฅธ ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.** -The documentation is divided into sections to cater to different learning styles and use cases. When editing an article, try to match the surrounding text in tone and style. When creating a new article, try to match the tone of the other articles in the same section. Learn about the motivation behind each section below. +์ด ๋ฌธ์„œ๋Š” ๋‹ค์–‘ํ•œ ํ•™์Šต ์Šคํƒ€์ผ๊ณผ ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ๊ณ ๋ คํ•˜์—ฌ ๋ถ„ํ• ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณธ๋ฌธ์„ ์ˆ˜์ •ํ•  ๋•Œ๋Š” ์ฃผ๋ณ€ ๊ธ€์˜ ํ†คTone๊ณผ ์Šคํƒ€์ผStyle์— ๋งž๊ฒŒ ์ž‘์„ฑํ•˜๋„๋ก ์ฃผ์˜ํ•˜์„ธ์š”. ์ƒˆ๋กœ์šด ๊ธ€์„ ์ž‘์„ฑํ•  ๋•Œ๋Š” ๊ฐ™์€ ์„น์…˜์— ์žˆ๋Š” ๋‹ค๋ฅธ ๊ธ€๋“ค๊ณผ ํ†ค์„ ๋งž์ถ”๋„๋ก ํ•˜์„ธ์š”. ๊ฐ ์„น์…˜์˜ ์˜๋„์™€ ๋™๊ธฐ๋Š” ์•„๋ž˜์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. -**[Learn React](https://react.dev/learn)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Learn React builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Learn React article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Learn React also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them. +**[React ํ•™์Šตํ•˜๊ธฐ](https://ko.react.dev/learn)** ์„น์…˜์€ ๊ธฐ์ดˆ ๊ฐœ๋…์„ ๋‹จ๊ณ„๋ณ„๋กœ ์†Œ๊ฐœํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์ œ๊ณต๋˜๋Š” ๊ธ€๋“ค์€ ์ด์ „์— ์„ค๋ช…๋œ ์ง€์‹์„ ๋ฐ”ํƒ•์œผ๋กœ ํ•˜๋ฏ€๋กœ, ๊ธ€ ๊ฐ„ ์•ž๋’ค ๊ฐœ๋…์ด ์ค‘๋ณต๋˜๊ฑฐ๋‚˜ ๊ผฌ์ด์ง€ ์•Š๋„๋ก ์ฃผ์˜ํ•˜์„ธ์š”. ๋…์ž๋Š” ์ฒซ ๋ฒˆ์งธ ๊ธ€๋ถ€ํ„ฐ ๋งˆ์ง€๋ง‰ ๊ธ€๊นŒ์ง€ ์ˆœ์„œ๋Œ€๋กœ ์ฝ์œผ๋ฉฐ ๊ฐœ๋…์„ ์ตํž ์ˆ˜ ์žˆ์–ด์•ผ ํ•˜๋ฉฐ, ์ถ”๊ฐ€ ์„ค๋ช…์„ ์œ„ํ•ด ๋ฏธ๋ฆฌ ์•ž์„  ๊ฐœ๋…๋“ค์„ ์‚ดํŽด๋ณด์ง€ ์•Š๋„๋ก ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฐ ์ด์œ ๋กœ ์ƒํƒœState๋Š” ์ด๋ฒคํŠธEvent๋ณด๋‹ค ๋จผ์ € ์„ค๋ช…๋˜๊ณ , 'React๋กœ ์‚ฌ๊ณ ํ•˜๊ธฐ' ํŒŒํŠธ์—์„œ `ref`๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๋“ฑ ํŠน์ • ์ˆœ์„œ๊ฐ€ ์ •ํ•ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ๋™์‹œ์— 'React ํ•™์Šตํ•˜๊ธฐ'๋Š” React ๊ฐœ๋…์— ๋Œ€ํ•œ ์ฐธ๊ณ  ์ž๋ฃŒ ์—ญํ• ์„ ํ•˜๋ฏ€๋กœ, ๊ฐœ๋…๋“ค์— ๋Œ€ํ•œ ์ •์˜์™€ ์ƒํ˜ธ ๊ด€๊ณ„๋ฅผ ์—„๊ฒฉํ•˜๊ฒŒ ๋‹ค๋ฃจ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. -**[API Reference](https://react.dev/reference/react)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs. +**[API ์ฐธ๊ณ ์„œ](https://ko.react.dev/reference/react)** ์„น์…˜์€ ๊ฐœ๋…์ด ์•„๋‹Œ API๋ณ„๋กœ ์ •๋ฆฌ๋˜์–ด ์žˆ์œผ๋ฉฐ, ๊ฐ€๋Šฅํ•œ ํ•œ ๋ชจ๋“  ๊ฒฝ์šฐ๋ฅผ ํฌํ•จํ•˜๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ ํ•ฉ๋‹ˆ๋‹ค. 'React ํ•™์Šตํ•˜๊ธฐ'์—์„œ ๊ฐ„๋‹จํžˆ ๋‹ค๋ค˜๊ฑฐ๋‚˜ ์ƒ๋žตํ•œ ์˜ˆ์™ธ ์‚ฌํ•ญEdge Cases ํ˜น์€ ๊ถŒ์žฅ ์‚ฌํ•ญRecommendations์€ ํ•ด๋‹น API์˜ ๋ ˆํผ๋Ÿฐ์Šค ๋ฌธ์„œ์— ์ถ”๊ฐ€๋กœ ์–ธ๊ธ‰ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. -**Try to follow your own instructions.** +**์Šค์Šค๋กœ ์ž‘์„ฑํ•œ ์ง€์นจInstructions์„ ์‹ค์ฒœํ•ด ๋ณด์„ธ์š”.** -When writing step-by-step instructions (e.g. how to install something), try to forget everything you know about the topic, and actually follow the instructions you wrote, a single step at time. Often you will discover that there is implicit knowledge that you forgot to mention, or that there are missing or out-of-order steps in the instructions. Bonus points for getting *somebody else* to follow the steps and watching what they struggle with. Often it would be something very simple that you have not anticipated. +์˜ˆ๋ฅผ ๋“ค์–ด, ๋‹จ๊ณ„๋ณ„ ๊ฐ€์ด๋“œ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค๋ฉด, ์ง์ ‘ ๊ทธ ์ง€์นจ์„ ๋”ฐ๋ผ๊ฐ€ ๋ณด๋ฉฐ ๋ˆ„๋ฝ๋œ ๋‚ด์šฉ์ด๋‚˜ ์ˆœ์„œ๊ฐ€ ๋งž์ง€ ์•Š๋Š” ๋ถ€๋ถ„์„ ์ฐพ์•„๋ณด์„ธ์š”. ์‹ค์ œ๋กœ ์ง€์นจ์„ ์ˆœ์„œ๋Œ€๋กœ ์ง„ํ–‰ํ•˜๋‹ค๋ณด๋ฉด, ์ž‘์„ฑ์ž๊ฐ€ ์„ค๋ช…ํ•˜์ง€ ์•Š์€ ๋ฐฐ๊ฒฝ์ง€์‹์ด ์žˆ๊ฑฐ๋‚˜, ๋‹จ๊ณ„๊ฐ€ ๋’ค์„ž์—ฌ ์žˆ๋Š” ๋“ฑ์˜ ๋ฌธ์ œ๋ฅผ ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด ๋‹ค๋ฅธ ์‚ฌ๋žŒ์—๊ฒŒ ์ง€์นจ์„ ๋”ฐ๋ผ๋ณด๊ฒŒ ํ•˜๊ณ , ๊ทธ๋“ค์ด ์–ด๋ ค์›€์„ ๊ฒช๋Š” ๋ถ€๋ถ„์„ ๊ด€์ฐฐํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์€ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์‚ฌ์†Œํ•ด ๋ณด์ด์ง€๋งŒ ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ๊ณณ์—์„œ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. -## Guidelines for Code Examples +## ์ฝ”๋“œ ์˜ˆ์‹œ์— ๋Œ€ํ•œ ๊ฐ€์ด๋“œ๋ผ์ธ -### Syntax +### ๊ตฌ๋ฌธSyntax -#### Prefer JSX to `createElement`. +#### ๊ฐ€๋Šฅํ•˜๋ฉด `createElement` ๋Œ€์‹  JSX๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š” -Ignore this if you're specifically describing `createElement`. +๋‹จ, `createElement` ์ž์ฒด๋ฅผ ์„ค๋ช…ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๋Š” ์˜ˆ์™ธ์ž…๋‹ˆ๋‹ค. -#### Use `const` where possible, otherwise `let`. Don't use `var`. +#### ๊ฐ€๋Šฅํ•˜๋ฉด `const`, ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—๋Š” `let`์„ ์‚ฌ์šฉํ•˜๊ณ , `var`๋Š” ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š” -Ignore this if you're specifically writing about ES5. +ES5๋งŒ ๋‹ค๋ฃจ๋Š” ๊ฒฝ์šฐ๋ผ๋ฉด ์ด ๊ทœ์น™์€ ๋ฌด์‹œํ•˜์„ธ์š”. -#### Don't use ES6 features when equivalent ES5 features have no downsides. +#### ES5์˜ ๊ธฐ๋Šฅ๋งŒ์œผ๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ, ES6์˜ ๊ธฐ๋Šฅ์„ ๋ฌด์กฐ๊ฑด์ ์œผ๋กœ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š” -Remember that ES6 is still new to a lot of people. While we use it in many places (`const` / `let`, classes, arrow functions), if the equivalent ES5 code is just as straightforward and readable, consider using it. +ES6๊ฐ€ ์•„์ง ๋‚ฏ์„  ์‚ฌ๋žŒ๋„ ๋งŽ์Šต๋‹ˆ๋‹ค. ์ด๋ฏธ ์—ฌ๋Ÿฌ ๊ณณ์—์„œ `const` / `let`, ํด๋ž˜์Šค, ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ๋“ฑ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์ง€๋งŒ, ๊ทธ์— ์ƒ์‘ํ•˜๋Š” ES5 ์ฝ”๋“œ๊ฐ€ ๊ฐ„๋‹จํ•˜๊ณ  ๊ฐ€๋…์„ฑ์ด ์ข‹๋‹ค๋ฉด ES5๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋„ ๊ณ ๋ คํ•˜์„ธ์š”. -In particular, you should prefer named `function` declarations over `const myFunction = () => ...` arrows for top-level functions. However, you *should* use arrow functions where they provide a tangible improvement (such as preserving `this` context inside a component). Consider both sides of the tradeoff when deciding whether to use a new feature. +ํŠนํžˆ ์ตœ์ƒ์œ„ ํ•จ์ˆ˜์—์„œ๋Š” `const myFunction = () => ...`๊ณผ ๊ฐ™์€ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ๋Œ€์‹ ์— ์ด๋ฆ„ ์žˆ๋Š” `function` ์„ ์–ธ์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ปดํฌ๋„ŒํŠธ ๋‚ด `this` ์ปจํ…์ŠคํŠธ๋ฅผ ์œ ์ง€ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”. ์ƒˆ๋กœ์šด ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•  ๋•Œ๋Š” ์žฅ๋‹จ์ ์„ ๋ชจ๋‘ ๋”ฐ์ ธ๋ณด๊ณ  ๊ฒฐ์ •ํ•˜์„ธ์š”. -#### Don't use features that aren't standardized yet. +#### ์•„์ง ํ‘œ์ค€ํ™”๋˜์ง€ ์•Š์€ ๊ธฐ๋Šฅ์€ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š” -For example, **don't** write this: +์˜ˆ๋ฅผ ๋“ค์–ด, ๋‹ค์Œ ์ฝ”๋“œ์ฒ˜๋Ÿผ ์ž‘์„ฑํ•˜์ง€ ๋งˆ์„ธ์š”. ```js class MyComponent extends React.Component { @@ -57,7 +55,7 @@ class MyComponent extends React.Component { } ``` -Instead, **do** write this: +๋Œ€์‹ , ๋‹ค์Œ์ฒ˜๋Ÿผ ์ž‘์„ฑํ•˜์„ธ์š”. ```js class MyComponent extends React.Component { @@ -72,65 +70,65 @@ class MyComponent extends React.Component { } ``` -Ignore this rule if you're specifically describing an experimental proposal. Make sure to mention its experimental nature in the code and in the surrounding text. +์‹คํ—˜์ ์ธ ์ œ์•ˆExperimental Proposal์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๋Š” ๊ฒฝ์šฐ๋ผ๋ฉด ์˜ˆ์™ธ๋กœ ํ•˜๋˜, ์ฝ”๋“œ์™€ ์ฃผ๋ณ€ ๊ธ€์—์„œ ์‹คํ—˜์ ์ž„Experimental์„ ๋ช…์‹œํ•˜์„ธ์š”. -### Style +### ์Šคํƒ€์ผ -- Use semicolons. -- No space between function names and parens (`method() {}` not `method () {}`). -- When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/). -- Always capitalize React concepts such as Hooks, Effects, and Transitions. +- ์„ธ๋ฏธ์ฝœ๋ก ์„ ์‚ฌ์šฉํ•˜์„ธ์š”. +- ํ•จ์ˆ˜ ์ด๋ฆ„๊ณผ ๊ด„ํ˜ธ ์‚ฌ์ด์—๋Š” ๊ณต๋ฐฑ์„ ๋„ฃ์ง€ ๋งˆ์„ธ์š”. (`method () {}`๊ฐ€ ์•„๋‹Œ, `method() {}` ํ˜•ํƒœ.) +- ๊ณ ๋ฏผ๋  ๋•Œ๋Š” [Prettier](https://prettier.io/playground/)์˜ ๊ธฐ๋ณธ ์Šคํƒ€์ผ์„ ๋”ฐ๋ฅด์„ธ์š”. +- Hooks, Effects, Transitions ๊ฐ™์€ React ๊ด€๋ จ ๊ฐœ๋…์€ ํ•ญ์ƒ ๋Œ€๋ฌธ์ž๋กœ ์‹œ์ž‘ํ•˜์„ธ์š”. -### Highlighting +### ํ•˜์ด๋ผ์ดํŒ… -Use `js` as the highlighting language in Markdown code blocks: +๋งˆํฌ๋‹ค์šดMarkdown์˜ ์ฝ”๋“œ ๋ธ”๋ก์—์„œ๋Š” `js`๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”: ```` ```js -// code +// ์ฝ”๋“œ ``` ```` -Sometimes you'll see blocks with numbers. -They tell the website to highlight specific lines. +๊ฐ„ํ˜น ์ˆซ์ž์™€ ํ•จ๊ป˜ ์‚ฌ์šฉ๋˜๋Š” ๋ธ”๋ก์ด ์žˆ์Šต๋‹ˆ๋‹ค. +์ด๋Š” ํŠน์ • ์ค„์„ ๊ฐ•์กฐํ•˜๊ธฐ ์œ„ํ•œ ์šฉ๋„์ž…๋‹ˆ๋‹ค. -You can highlight a single line: +ํ•œ ์ค„์„ ๊ฐ•์กฐํ•˜๋Š” ์˜ˆ์‹œ. ```` ```js {2} function hello() { - // this line will get highlighted + // ์ด ์ค„์ด ๊ฐ•์กฐ๋ฉ๋‹ˆ๋‹ค } ``` ```` -A range of lines: +์ผ์ • ๋ฒ”์œ„๋ฅผ ๊ฐ•์กฐํ•˜๋Š” ์˜ˆ์‹œ. ```` ```js {2-4} function hello() { - // these lines - // will get - // highlighted + // ์—ฌ๊ธฐ๋ถ€ํ„ฐ + // ์‹œ์ž‘ํ•ด์„œ + // ์—ฌ๊ธฐ๊นŒ์ง€ ๊ฐ•์กฐ๋ฉ๋‹ˆ๋‹ค } ``` ```` -Or even multiple ranges: +์—ฌ๋Ÿฌ ๋ฒ”์œ„๋ฅผ ๊ฐ•์กฐํ•˜๋Š” ์˜ˆ์‹œ. ```` ```js {2-4,6} function hello() { - // these lines - // will get - // highlighted + // ์—ฌ๊ธฐ๋ถ€ํ„ฐ + // ์‹œ์ž‘ํ•ด์„œ + // ์—ฌ๊ธฐ๊นŒ์ง€ ๊ฐ•์กฐ๋ฉ๋‹ˆ๋‹ค console.log('hello'); - // also this one + // ์ด ์ค„๋„ ๊ฐ•์กฐ๋ฉ๋‹ˆ๋‹ค console.log('there'); } ``` ```` -Be mindful that if you move some code in an example with highlighting, you also need to update the highlighting. +์ฝ”๋“œ๋ฅผ ์ด๋™ํ•˜๊ฑฐ๋‚˜ ์ˆœ์„œ๋ฅผ ๋ฐ”๊ฟจ๋‹ค๋ฉด, ๊ฐ•์กฐํ•˜๋Š” ์ค„๋„ ๊ฐ™์ด ์ˆ˜์ •ํ•ด์•ผ ํ•œ๋‹ค๋Š” ์ ์„ ์žŠ์ง€ ๋งˆ์„ธ์š”. -Don't be afraid to often use highlighting! It is very valuable when you need to focus the reader's attention on a particular detail that's easy to miss. +๊ฐ•์กฐ ๊ธฐ๋Šฅ์€ ๋…์ž๊ฐ€ ๋†“์น˜๊ธฐ ์‰ฌ์šด ๊ตฌ์ฒด์ ์ธ ๋ถ€๋ถ„์— ์ฃผ์˜๋ฅผ ํ™˜๊ธฐํ•ด์ฃผ๋ฏ€๋กœ ์ ๊ทน์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธธ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. diff --git a/README.md b/README.md index 182192cb5..4cbaabe18 100644 --- a/README.md +++ b/README.md @@ -1,63 +1,85 @@ -# react.dev +# ko.react.dev -This repo contains the source code and documentation powering [react.dev](https://react.dev/). +[![React Korea ๋””์Šค์ฝ”๋“œ ์ฑ„๋„](https://img.shields.io/badge/discord-channel?style=for-the-badge&logo=discord&logoSize=100&label=React%20Korea&labelColor=%2323272F&color=%23149ECA)](https://discord.gg/YXdTyCh5KF) -## Getting started +## ํ•œ๊ตญ์–ด ๋ฒˆ์—ญ ์ •๋ณด -### Prerequisites +### ๊ฐ€์ด๋“œ + +๋ฒˆ์—ญ ํ˜น์€ ๊ธฐ์—ฌ๋ฅผ ์ง„ํ–‰ํ•  ๋•Œ, ์•„๋ž˜ ๊ฐ€์ด๋“œ๋ฅผ ๋”ฐ๋ผ์ฃผ์„ธ์š”. + +1. [๊ธฐ์—ฌ ๊ฐ€์ด๋“œ๋ผ์ธContributing](/CONTRIBUTING.md) ๋ฐ [๊ธฐ์—ฌ์ž ํ–‰๋™ ๊ฐ•๋ น ๊ทœ์•ฝCode of Conduct](/CODE_OF_CONDUCT.md)์„ ๋”ฐ๋ฅด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. +1. [๊ณตํ†ต ์Šคํƒ€์ผ ๊ฐ€์ด๋“œUniversal Style Guide](/wiki/universal-style-guide.md)๋ฅผ ํ™•์ธํ•ด์ฃผ์„ธ์š”. +1. [๋ฒˆ์—ญ์„ ์œ„ํ•œ ๋ชจ๋ฒ” ์‚ฌ๋ก€Best Practices for Translation](/wiki/best-practices-for-translation.md)๋ฅผ ๋”ฐ๋ผ์ฃผ์„ธ์š”. +1. ๊ณตํ†ต๋œ ๋‹จ์–ด ๋ฒˆ์—ญ์„ ์œ„ํ•ด [๋ฒˆ์—ญ ์šฉ์–ด ์ •๋ฆฌTranslate Glossary](/wiki/translate-glossary.md)๋ฅผ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”. +1. ๋Œ์–ด์˜ค๊ธฐ ์š”์ฒญPull Request์‹œ ํ…Œ์ŠคํŠธ๋ฅผ ํ†ต๊ณผํ•˜์ง€ ๋ชปํ•  ๊ฒฝ์šฐ, [`textlint` ๊ฐ€์ด๋“œTextlint Guide](/wiki/textlint-guide.md)๋ฅผ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”. +1. ๋งˆ์ง€๋ง‰์œผ๋กœ [๋งž์ถค๋ฒ• ๊ฒ€์‚ฌSpelling Check](https://nara-speller.co.kr/speller/)๋ฅผ ์ง„ํ–‰ํ•ด์ฃผ์„ธ์š”. + +์ด ์ €์žฅ์†ŒRepository๋Š” [ko.react.dev](https://ko.react.dev/)์˜ ์†Œ์Šค ์ฝ”๋“œ์™€ ๊ฐœ๋ฐœ ๋ฌธ์„œ๋ฅผ ํฌํ•จํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. + +## ์‹œ์ž‘ํ•˜๊ธฐ + +### ์‚ฌ์ „ ์ค€๋น„ 1. Git -1. Node: any version starting with v16.8.0 or greater -1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) -1. A fork of the repo (for any contributions) -1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine +1. Node: v16.8.0 ์ด์ƒ์˜ ๋ชจ๋“  ๋ฒ„์ „ +1. Yarn v1(`yarn@1.22.22`): [Yarn ์„ค์น˜ ์•ˆ๋‚ด](https://yarnpkg.com/lang/en/docs/install/) ์ฐธ๊ณ  +1. ํฌํฌForkํ•œ ๊ฐœ์ธ ์ €์žฅ์†Œ +1. ๋กœ์ปฌ์— ํด๋ก Cloneํ•œ [ko.react.dev ์ €์žฅ์†Œ](https://github.com/reactjs/ko.react.dev) -### Installation +### ์„ค์น˜ -1. `cd react.dev` to go into the project root -3. `yarn` to install the website's npm dependencies +1. `cd ko.react.dev`๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ํ”„๋กœ์ ํŠธ ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค. +1. `yarn` ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•˜์—ฌ npm ์˜์กด์„ฑ ๋ชจ๋“ˆ๋“ค์„ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค. -### Running locally +### ๊ฐœ๋ฐœ ์„œ๋ฒ„ ์‹คํ–‰ํ•˜๊ธฐ -1. `yarn dev` to start the development server (powered by [Next.js](https://nextjs.org/)) -1. `open http://localhost:3000` to open the site in your favorite browser +1. `yarn dev` ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœ ์„œ๋ฒ„๋ฅผ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค. (powered by [Next.js](https://nextjs.org).) +1. `open http://localhost:3000` ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„ ํ˜ธํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ €๋กœ ์ ‘์†ํ•˜์„ธ์š”. -## Contributing +## ๊ธฐ์—ฌ ๋ฐฉ๋ฒ• -### Guidelines +### ๊ฐ€์ด๋“œ๋ผ์ธ -The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/react.dev/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections. +์ด ๋ฌธ์„œ๋Š” ๋ชฉ์ ์ด ๋‹ค๋ฅธ ์—ฌ๋Ÿฌ ์„น์…˜์œผ๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค. ๋ฌธ์žฅ์„ ์ถ”๊ฐ€ํ•  ๊ณ„ํš์ด๋ผ๋ฉด, ์ ์ ˆํ•œ ์„น์…˜์— ๋Œ€ํ•œ [๊ธฐ์—ฌ ๊ฐ€์ด๋“œ๋ผ์ธContributing](/CONTRIBUTING.md)์„ ์ˆ™์ง€ํ•˜๋Š” ๊ฒƒ์ด ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. -### Create a branch +### ๋ถ„๊ธฐBranch ๋งŒ๋“ค๊ธฐ -1. `git checkout main` from any folder in your local `react.dev` repository -1. `git pull origin main` to ensure you have the latest main code -1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch +1. `ko.react.dev` ๋กœ์ปฌ ์ €์žฅ์†Œ์—์„œ `git checkout main`์„ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค. +1. `git pull origin main`์„ ์‹คํ–‰ํ•˜์—ฌ ์ตœ์‹  ์ฝ”๋“œ๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +1. `git checkout -b the-name-of-my-branch`๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ๋ถ„๊ธฐBranch๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค. (์ด๋•Œ, `the-name-of-my-branch`๋ฅผ ์ ์ ˆํ•œ ์ด๋ฆ„์œผ๋กœ ๊ต์ฒด.) -### Make the change +### ์ˆ˜์ •ํ•˜๊ธฐ -1. Follow the ["Running locally"](#running-locally) instructions -1. Save the files and check in the browser - 1. Changes to React components in `src` will hot-reload - 1. Changes to markdown files in `content` will hot-reload - 1. If working with plugins, you may need to remove the `.cache` directory and restart the server +1. ["๊ฐœ๋ฐœ ์„œ๋ฒ„ ์‹คํ–‰ํ•˜๊ธฐ"](#๊ฐœ๋ฐœ-์„œ๋ฒ„-์‹คํ–‰ํ•˜๊ธฐ) ๋ถ€๋ถ„์„ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค. +1. ํŒŒ์ผ์„ ์ €์žฅํ•˜๊ณ  ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. +1. `src` ์•ˆ์— ์žˆ๋Š” React ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ˆ˜์ •๋  ๊ฒฝ์šฐ hot-reload๊ฐ€ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. +1. `content` ์•ˆ์— ์žˆ๋Š” ๋งˆํฌ๋‹ค์šด ํŒŒ์ผ์ด ์ˆ˜์ •๋  ๊ฒฝ์šฐ hot-reload๊ฐ€ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. +1. ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ, `.cache` ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ์ œ๊ฑฐํ•œ ํ›„ ์„œ๋ฒ„๋ฅผ ์žฌ์‹œ์ž‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. -### Test the change +### ์ˆ˜์ •์‚ฌํ•ญ ๊ฒ€์‚ฌํ•˜๊ธฐ -1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile. -2. Run `yarn check-all`. (This will run Prettier, ESLint and validate types.) +1. ๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด, ๋ณ€๊ฒฝํ•œ ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ €์˜ ์ตœ์‹  ๋ฒ„์ „์—์„œ ์‹œ๊ฐ์ ์œผ๋กœ ์ œ๋Œ€๋กœ ์ ์šฉ๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•ด์ฃผ์„ธ์š”. (๋ฐ์Šคํฌํƒ‘๊ณผ ๋ชจ๋ฐ”์ผ ๋ชจ๋‘.) +1. ํ”„๋กœ์ ํŠธ ๋ฃจํŠธ์—์„œ `yarn check-all`์„ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค. (์ด ๋ช…๋ น์–ด๋Š” Prettier, ESLint, ๊ทธ๋ฆฌ๊ณ  ํƒ€์ž… ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.) -### Push it +### ํ‘ธ์‹œPush ํ•˜๊ธฐ -1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes +1. `git add -A && git commit -m "My message"`๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ๋ณ€๊ฒฝํ•œ ํŒŒ์ผ๋“ค์„ ์ปค๋ฐ‹commit ํ•ด์ฃผ์„ธ์š”. (์ด๋•Œ, `My message` ๋ถ€๋ถ„์„ `Fix header logo on Android` ๊ฐ™์€ ์ปค๋ฐ‹ ๋ฉ”์‹œ์ง€๋กœ ๊ต์ฒด.) 1. `git push my-fork-name the-name-of-my-branch` -1. Go to the [react.dev repo](https://github.com/reactjs/react.dev) and you should see recently pushed branches. -1. Follow GitHub's instructions. -1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub. +1. [ko.react.dev ์ €์žฅ์†Œ](https://github.com/reactjs/ko.react.dev)์—์„œ ์ตœ๊ทผ์— ํ‘ธ์‹œ๋œ ๋ถ„๊ธฐBranch๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +1. ๊นƒํ—ˆ๋ธŒGitHub ์ง€์นจ์„ ๋”ฐ๋ผ์ฃผ์„ธ์š”. +1. ๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด ์‹œ๊ฐ์ ์œผ๋กœ ๋ณ€ํ™”๋œ ๋ถ€๋ถ„์˜ ์Šคํฌ๋ฆฐ์ƒท์„ ์ฒจ๋ถ€ํ•ด์ฃผ์„ธ์š”. ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ๊นƒํ—ˆ๋ธŒGitHub์— ํ‘ธ์‹œPush๋˜๋ฉด ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋นŒ๋“œ๊ฐ€ ํŠธ๋ฆฌ๊ฑฐ๋ฉ๋‹ˆ๋‹ค. + +## ๋ฌธ์ œ ํ•ด๊ฒฐํ•˜๊ธฐ + +`yarn cache-reset` ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋กœ์ปฌ ์บ์‹œ๋ฅผ ์ดˆ๊ธฐํ™”ํ•ฉ๋‹ˆ๋‹ค. + +## ๋ฒˆ์—ญ + +`react.dev` ๋ฒˆ์—ญ์— ํฅ๋ฏธ๊ฐ€ ์žˆ๋‹ค๋ฉด, [translations.react.dev](https://translations.react.dev/)์—์„œ ํ˜„์žฌ ๋ฒˆ์—ญ์ด ์–ผ๋งˆ๋‚˜ ์ง„ํ–‰๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•ด์ฃผ์„ธ์š”. -## Translation +๋ฒˆ์—ญํ•˜๋ ค๋Š” ์–ธ์–ด๊ฐ€ ์•„์ง ์ง„ํ–‰๋˜์ง€ ์•Š์•˜๋‹ค๋ฉด, ํ•ด๋‹น ์–ธ์–ด์— ๋Œ€ํ•ด ์ƒˆ๋กญ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. [translations.react.dev ์ €์žฅ์†Œ](https://github.com/reactjs/translations.react.dev)๋ฅผ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”. -If you are interested in translating `react.dev`, please see the current translation efforts [here](https://github.com/reactjs/react.dev/issues/4135). +## ์ €์ž‘๊ถŒ -## License -Content submitted to [react.dev](https://react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md) file. +์œ„ ๋‚ด์šฉ์— ๋Œ€ํ•œ ์ €์ž‘๊ถŒ์€ [react.dev](https://react.dev)๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ, [LICENSE-DOCS.md](/LICENSE-DOCS.md)์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋Š” CC-BY-4.0 ๋ผ์ด์„ผ์Šค๋ฅผ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค. diff --git a/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js b/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js index 250e0a1e5..d59ba2616 100644 --- a/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js +++ b/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js @@ -11,12 +11,7 @@ const path = require('path'); const {ESLint} = require('eslint'); const plugin = require('..'); -const FIXTURES_DIR = path.join( - __dirname, - 'fixtures', - 'src', - 'content' -); +const FIXTURES_DIR = path.join(__dirname, 'fixtures', 'src', 'content'); const PARSER_PATH = path.join(__dirname, '..', 'parser.js'); function createESLint({fix = false} = {}) { @@ -53,11 +48,7 @@ async function lintFixture(name, {fix = false} = {}) { async function run() { const basicResult = await lintFixture('basic-error.md'); - assert.strictEqual( - basicResult.messages.length, - 1, - 'expected one diagnostic' - ); + assert.strictEqual(basicResult.messages.length, 1, 'expected one diagnostic'); assert( basicResult.messages[0].message.includes('Calling setState during render'), 'expected message to mention setState during render' @@ -91,9 +82,7 @@ async function run() { fix: true, }); assert( - duplicateFixed.output.includes( - "{expectedErrors: {'react-compiler': [4]}}" - ), + duplicateFixed.output.includes("{expectedErrors: {'react-compiler': [4]}}"), 'expected duplicates to be rewritten to a single canonical block' ); assert( @@ -118,14 +107,12 @@ async function run() { fix: true, }); assert( - malformedFixed.output.includes( - "{expectedErrors: {'react-compiler': [4]}}" - ), + malformedFixed.output.includes("{expectedErrors: {'react-compiler': [4]}}"), 'expected malformed metadata to be replaced with canonical form' ); } -run().catch(error => { +run().catch((error) => { console.error(error); process.exitCode = 1; }); diff --git a/eslint-local-rules/rules/metadata.js b/eslint-local-rules/rules/metadata.js index fb58a37c2..80194c479 100644 --- a/eslint-local-rules/rules/metadata.js +++ b/eslint-local-rules/rules/metadata.js @@ -84,7 +84,9 @@ function parseExpectedErrorsEntries(rawEntries) { if (parsed && typeof parsed === 'object') { for (const [key, value] of Object.entries(parsed)) { - entries[key] = normalizeEntryValues(Array.isArray(value) ? value.flat() : value); + entries[key] = normalizeEntryValues( + Array.isArray(value) ? value.flat() : value + ); } } @@ -92,7 +94,9 @@ function parseExpectedErrorsEntries(rawEntries) { } function parseExpectedErrorsToken(tokenText) { - const match = tokenText.match(/^\{\s*expectedErrors\s*:\s*(\{[\s\S]*\})\s*\}$/); + const match = tokenText.match( + /^\{\s*expectedErrors\s*:\s*(\{[\s\S]*\})\s*\}$/ + ); if (!match) { return null; } @@ -203,7 +207,9 @@ function cloneMetadata(metadata) { } function findExpectedErrorsToken(metadata) { - return metadata.tokens.find((token) => token.type === 'expectedErrors') || null; + return ( + metadata.tokens.find((token) => token.type === 'expectedErrors') || null + ); } function getCompilerExpectedLines(metadata) { diff --git a/eslint-local-rules/rules/react-compiler.js b/eslint-local-rules/rules/react-compiler.js index 26d3878ee..db603bcfa 100644 --- a/eslint-local-rules/rules/react-compiler.js +++ b/eslint-local-rules/rules/react-compiler.js @@ -98,17 +98,19 @@ function runReactCompiler(code, filename) { continue; } - const loc = typeof detail.primaryLocation === 'function' - ? detail.primaryLocation() - : null; + const loc = + typeof detail.primaryLocation === 'function' + ? detail.primaryLocation() + : null; if (loc == null || typeof loc === 'symbol') { continue; } - const message = typeof detail.printErrorMessage === 'function' - ? detail.printErrorMessage(result.sourceCode, {eslint: true}) - : detail.description || 'Unknown React Compiler error'; + const message = + typeof detail.printErrorMessage === 'function' + ? detail.printErrorMessage(result.sourceCode, {eslint: true}) + : detail.description || 'Unknown React Compiler error'; diagnostics.push({detail, loc, message}); } diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 000000000..0f296312a --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,27 @@ +/* eslint-disable import/no-anonymous-default-export */ +import md from 'eslint-markdown'; + +export default [ + { + ignores: ['**/*.js', '**/*.mjs', '**/*.cjs'], + }, + { + ...md.configs.base, + files: ['src/content/**/*.md'], + rules: { + 'md/no-curly-quote': [ + 'error', + { + checkLeftSingleQuotationMark: false, + checkRightSingleQuotationMark: false, + }, + ], + 'md/no-double-space': 'error', + 'md/no-git-conflict-marker': ['error', {skipCode: false}], + 'md/no-irregular-whitespace': [ + 'error', + {skipCode: false, skipInlineCode: false}, + ], + }, + }, +]; diff --git a/lint-staged.config.js b/lint-staged.config.js new file mode 100644 index 000000000..39e17325d --- /dev/null +++ b/lint-staged.config.js @@ -0,0 +1,8 @@ +module.exports = { + '*': 'yarn editorconfig-checker', + '*.{js,ts,jsx,tsx,css}': 'yarn prettier', + 'src/**/*.md': ['yarn fix-headings', 'yarn textlint-lint'], + 'textlint/**/*.js': 'yarn textlint-test', + 'textlint/data/rules/translateGlossary.js': 'yarn textlint-docs', + 'textlint/generators/genTranslateGlossaryDocs.js': 'yarn textlint-docs', +}; diff --git a/package.json b/package.json index 8cb257733..f790ea7f6 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,10 @@ { - "name": "react-dev", - "version": "1.0.0", "private": true, "license": "CC", "scripts": { "analyze": "ANALYZE=true next build", "dev": "next-remote-watch ./src/content", - "build": "next build && node --experimental-modules ./scripts/downloadFonts.mjs", + "build": "yarn cache-reset && next build && node --experimental-modules ./scripts/downloadFonts.mjs", "lint": "next lint && eslint \"src/content/**/*.md\"", "lint:fix": "next lint --fix && eslint \"src/content/**/*.md\" --fix", "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"", @@ -15,12 +13,17 @@ "prettier:diff": "yarn nit:source", "lint-heading-ids": "node scripts/headingIdLinter.js", "fix-headings": "node scripts/headingIdLinter.js --fix", - "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss deadlinks", + "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss deadlinks lint-editorconfig", "tsc": "tsc --noEmit", "start": "next start", "postinstall": "yarn --cwd eslint-local-rules install && is-ci || husky install .husky", "check-all": "npm-run-all prettier lint:fix tsc rss", "rss": "node scripts/generateRss.js", + "cache-reset": "rm -rf node_modules/.cache && rm -rf .next && yarn cache clean", + "lint-editorconfig": "yarn editorconfig-checker", + "textlint-test": "yarn mocha ./textlint/tests/utils && yarn mocha ./textlint/tests/rules", + "textlint-docs": "node ./textlint/generators/genTranslateGlossaryDocs.js && git add wiki/translate-glossary.md", + "textlint-lint": "yarn textlint ./src/content --rulesdir ./textlint/rules -f pretty-error && npx --yes eslint@9 -c eslint.config.mjs", "deadlinks": "node scripts/deadLinkChecker.js", "copyright": "node scripts/copyright.js", "test:eslint-local-rules": "yarn --cwd eslint-local-rules test" @@ -35,7 +38,11 @@ "classnames": "^2.2.6", "debounce": "^1.2.1", "github-slugger": "^1.3.0", +<<<<<<< HEAD + "next": "15.4.10", +======= "next": "15.1.12", +>>>>>>> 55a317d40781a0054a05a9f6c443ae0bd71f7d7e "next-remote-watch": "^1.0.0", "parse-numeric-range": "^1.2.0", "react": "^19.0.0", @@ -63,8 +70,9 @@ "asyncro": "^3.0.0", "autoprefixer": "^10.4.2", "babel-eslint": "10.x", - "babel-plugin-react-compiler": "^1.0.0", + "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112", "chalk": "4.1.2", + "editorconfig-checker": "^6.0.1", "eslint": "7.x", "eslint-config-next": "12.0.3", "eslint-config-react-app": "^5.2.1", @@ -72,6 +80,7 @@ "eslint-plugin-import": "2.x", "eslint-plugin-jsx-a11y": "6.x", "eslint-plugin-local-rules": "link:eslint-local-rules", + "eslint-markdown": "^0.1.0-canary.12", "eslint-plugin-react": "7.x", "eslint-plugin-react-compiler": "^19.0.0-beta-e552027-20250112", "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215", @@ -80,9 +89,10 @@ "gray-matter": "^4.0.2", "husky": "^7.0.4", "is-ci": "^3.0.1", - "lint-staged": ">=10", + "lint-staged": "^15.3.0", "mdast-util-to-string": "^1.1.0", "metro-cache": "0.72.2", + "mocha": "^10.6.0", "npm-run-all": "^4.1.5", "postcss": "^8.4.5", "postcss-flexbugs-fixes": "4.2.1", @@ -99,6 +109,10 @@ "retext-smartypants": "^4.0.0", "rss": "^1.2.2", "tailwindcss": "^3.4.1", + "textlint": "^14.0.4", + "textlint-filter-rule-comments": "^1.2.2", + "textlint-rule-allowed-uris": "^2.0.0", + "textlint-tester": "^14.0.4", "typescript": "^5.7.2", "unist-util-visit": "^2.0.3", "webpack-bundle-analyzer": "^4.5.0" @@ -111,9 +125,5 @@ "budgetPercentIncreaseRed": 10, "showDetails": true }, - "lint-staged": { - "*.{js,ts,jsx,tsx,css}": "yarn prettier", - "src/**/*.md": "yarn fix-headings" - }, "packageManager": "yarn@1.22.22" } diff --git a/public/.well-known/atproto-did b/public/.well-known/atproto-did index ad8b0a36b..a73fe2232 100644 --- a/public/.well-known/atproto-did +++ b/public/.well-known/atproto-did @@ -1 +1 @@ -did:plc:uorpbnp2q32vuvyeruwauyhe \ No newline at end of file +did:plc:uorpbnp2q32vuvyeruwauyhe diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx index 158a54971..d7b7b3432 100644 --- a/src/components/DocsFooter.tsx +++ b/src/components/DocsFooter.tsx @@ -37,7 +37,7 @@ export const DocsPageFooter = memo(
{prevRoute?.path ? ( @@ -47,7 +47,7 @@ export const DocsPageFooter = memo( {nextRoute?.path ? ( @@ -70,7 +70,7 @@ function FooterLink({ }: { href: string; title: string; - type: 'Previous' | 'Next'; + type: '์ด์ „' | '๋‹ค์Œ'; }) { return (
- {type === 'Previous' ? 'Previous' : 'Next'} + {type === '์ด์ „' ? '์ด์ „' : '๋‹ค์Œ'} {title} diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx new file mode 100644 index 000000000..6b0a9d838 --- /dev/null +++ b/src/components/Layout/Feedback.tsx @@ -0,0 +1,107 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {useState} from 'react'; +import {useRouter} from 'next/router'; +import cn from 'classnames'; + +export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) { + const {asPath} = useRouter(); + const cleanedPath = asPath.split(/[\?\#]/)[0]; + // Reset on route changes. + return ; +} + +const thumbsUpIcon = ( + + + +); + +const thumbsDownIcon = ( + + + +); + +function sendGAEvent(isPositive: boolean) { + const category = isPositive ? 'like_button' : 'dislike_button'; + const value = isPositive ? 1 : 0; + // Fragile. Don't change unless you've tested the network payload + // and verified that the right events actually show up in GA. + // @ts-ignore + gtag('event', 'feedback', { + event_category: category, + event_label: window.location.pathname, + event_value: value, + }); +} + +function SendFeedback({onSubmit}: {onSubmit: () => void}) { + const [isSubmitted, setIsSubmitted] = useState(false); + return ( +
+

+ {isSubmitted + ? 'ํ”ผ๋“œ๋ฐฑ์„ ๋ณด๋‚ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!' + : '์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?'} +

+ {!isSubmitted && ( + + )} + {!isSubmitted && ( + + )} +
+ ); +} diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index d11e1469d..5603f7294 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -320,50 +320,46 @@ export function Footer() {
- Learn React - - Quick Start - Installation - - Describing the UI + React ํ•™์Šตํ•˜๊ธฐ + ๋น ๋ฅด๊ฒŒ ์‹œ์ž‘ํ•˜๊ธฐ + ์„ค์น˜ํ•˜๊ธฐ + UI ํ‘œํ˜„ํ•˜๊ธฐ - Adding Interactivity + ์ƒํ˜ธ์ž‘์šฉ์„ฑ ๋”ํ•˜๊ธฐ - Managing State - Escape Hatches + State ๊ด€๋ฆฌํ•˜๊ธฐ + ํƒˆ์ถœ๊ตฌ
- API Reference + API ์ฐธ๊ณ ์„œ React APIs React DOM APIs
- Community + ์ปค๋ฎค๋‹ˆํ‹ฐ - Code of Conduct + ํ–‰๋™ ๊ฐ•๋ น - Meet the Team + ํŒ€ ์†Œ๊ฐœ - Docs Contributors - - - Acknowledgements + ๋ฌธ์„œ ๊ธฐ์—ฌ์ž + ๊ฐ์‚ฌ์˜ ๋ง
- More - Blog + ๋” ๋ณด๊ธฐ + ๋ธ”๋กœ๊ทธ React Native - Privacy + ๊ฐœ์ธ ์ •๋ณด ๋ณดํ˜ธ - Terms + ์•ฝ๊ด€
+

{children}

); @@ -73,6 +73,15 @@ function Para({children}) { ); } +function Br({breakPointPrefix = 'lg'}) { + const breakPointClass = { + lg: 'lg:inline', + xl: 'xl:inline', + }[breakPointPrefix]; + + return
; +} + function Center({children}) { return (
@@ -143,7 +152,7 @@ export function HomeContent() { React

- The library for web and native user interfaces + ์›น ๋ฐ ๋„ค์ดํ‹ฐ๋ธŒ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

- Learn React + React ํ•™์Šตํ•˜๊ธฐ - API Reference + API ์ฐธ๊ณ ์„œ
-
Create user interfaces from components
+
+ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ +
์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๋งŒ๋“ค๊ธฐ +
- React lets you build user interfaces out of individual pieces - called components. Create your own React components like{' '} - Thumbnail, LikeButton, and{' '} - Video. Then combine them into entire screens, pages, - and apps. + React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ๋ผ ๋ถˆ๋ฆฌ๋Š” ์กฐ๊ฐ๋“ค์„ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž + ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Thumbnail,{' '} + LikeButton, ๊ทธ๋ฆฌ๊ณ  Video ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ + ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”. ๊ทธ๋Ÿฐ ๋‹ค์Œ ์ „์ฒด ํ™”๋ฉด, ํŽ˜์ด์ง€ ๋ฐ ์•ฑ์—์„œ ์ด๋“ค์„ ๊ฒฐํ•ฉํ•  + ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
@@ -181,22 +193,24 @@ export function HomeContent() {
- Whether you work on your own or with thousands of other - developers, using React feels the same. It is designed to let you - seamlessly combine components written by independent people, - teams, and organizations. + ํ˜ผ์ž์„œ ์ž‘์—…ํ•˜๋“ , ์ˆ˜์ฒœ ๋ช…์˜ ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž์™€ ํ•จ๊ป˜ ์ž‘์—…ํ•˜๋“ , React๋ฅผ + ์‚ฌ์šฉํ•˜๋Š” ๋Š๋‚Œ์€ ๋™์ผํ•ฉ๋‹ˆ๋‹ค. ๊ฐœ์ธ, ํŒ€, ์กฐ์ง์—์„œ ์ž‘์„ฑํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ + ์›ํ™œํ•˜๊ฒŒ ๊ฒฐํ•ฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
-
Write components with code and markup
+
+ ์ฝ”๋“œ์™€ ๋งˆํฌ์—…์œผ๋กœ +
์ปดํฌ๋„ŒํŠธ ์ž‘์„ฑํ•˜๊ธฐ +
- React components are JavaScript functions. Want to show some - content conditionally? Use an if statement. - Displaying a list? Try array map(). Learning React is - learning programming. + React ์ปดํฌ๋„ŒํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. ์กฐ๊ฑด๋ถ€๋กœ ๋‚ด์šฉ์„ + ํ‘œ์‹œํ•˜๋ ค๋ฉด if ๋ฌธ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชฉ๋ก์„ + ํ‘œ์‹œํ•˜๋ ค๋ฉด ๋ฐฐ์—ด์— map()์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. React๋ฅผ + ๋ฐฐ์šฐ๋Š” ๊ฒƒ์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ๋ฐฐ์šฐ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
@@ -204,22 +218,25 @@ export function HomeContent() {
- This markup syntax is called JSX. It is a JavaScript syntax - extension popularized by React. Putting JSX markup close to - related rendering logic makes React components easy to create, - maintain, and delete. + ์ด ๋งˆํฌ์—… ๊ตฌ๋ฌธ์„ JSX๋ผ ๋ถ€๋ฆ…๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ React์— ์˜ํ•ด์„œ ๋Œ€์ค‘ํ™”๋œ + ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ตฌ๋ฌธ์˜ ํ™•์žฅ์ž…๋‹ˆ๋‹ค. JSX ๋งˆํฌ์—…์„ ๊ด€๋ จ๋œ ๋ Œ๋”๋ง ๋กœ์ง๊ณผ + ๊ฐ€๊นŒ์ด ๋‘๋ฉด, React ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‰ฝ๊ฒŒ ๋งŒ๋“ค๊ณ  ๊ด€๋ฆฌํ•˜๊ณ  ์‚ญ์ œํ•  ์ˆ˜ + ์žˆ์Šต๋‹ˆ๋‹ค.
-
Add interactivity wherever you need it
+
+ ํ•„์š”ํ•œ ๊ณณ์— +
์ƒํ˜ธ์ž‘์šฉ ์š”์†Œ ์ถ”๊ฐ€ํ•˜๊ธฐ +
- React components receive data and return what should appear on the - screen. You can pass them new data in response to an interaction, - like when the user types into an input. React will then update the - screen to match the new data. + React ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›๊ณ  ํ™”๋ฉด์— ํ‘œ์‹œํ•  ๋‚ด์šฉ์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. + ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅ๋ž€์— ์ž…๋ ฅํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์ด ์ƒํ˜ธ์ž‘์šฉ์— ์‘๋‹ตํ•˜์—ฌ ์ƒˆ + ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ React๋Š” ์ƒˆ ๋ฐ์ดํ„ฐ์™€ + ์ผ์น˜ํ•˜๋„๋ก ํ™”๋ฉด์„ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค.
@@ -227,16 +244,16 @@ export function HomeContent() {
- You donโ€™t have to build your whole page in React. Add React to - your existing HTML page, and render interactive React components - anywhere on it. + ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ React๋กœ ๋นŒ๋“œํ•  ํ•„์š”๋Š” ์—†์Šต๋‹ˆ๋‹ค. React๋ฅผ ๊ธฐ์กด HTML + ํŽ˜์ด์ง€์— ์ถ”๊ฐ€ํ•˜๊ณ , ํŽ˜์ด์ง€ ์–ด๋””์—์„œ๋‚˜ ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” React ์ปดํฌ๋„ŒํŠธ๋ฅผ + ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
- Add React to your page + ํŽ˜์ด์ง€์— React ์ถ”๊ฐ€ํ•˜๊ธฐ
@@ -245,15 +262,16 @@ export function HomeContent() {
- Go full-stack
- with a framework + ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ํ†ตํ•ด +
ํ’€์Šคํƒ์œผ๋กœ ๋งŒ๋“ค๊ธฐ
- React is a library. It lets you put components together, but it - doesnโ€™t prescribe how to do routing and data fetching. To build an - entire app with React, we recommend a full-stack React framework - like Next.js or{' '} - React Router. + React๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ๋ฅผ ์กฐํ•ฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ์ง€๋งŒ, + ๋ผ์šฐํŒ…์ด๋‚˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•์„ ๊ทœ์ •ํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. React๋กœ + ์™„์ „ํ•œ ์•ฑ์„ ๋งŒ๋“ค๋ ค๋ฉด,{' '} + Next.js ๋˜๋Š”{' '} + React Router ๊ฐ™์€ + ํ’€์Šคํƒ React ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.
@@ -261,17 +279,23 @@ export function HomeContent() {
- React is also an architecture. Frameworks that implement it let - you fetch data in asynchronous components that run on the server - or even during the build. Read data from a file or a database, and - pass it down to your interactive components. + React๋Š” ์•„ํ‚คํ…์ฒ˜์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ์„œ๋ฒ„์—์„œ + ์‹คํ–‰๋˜๋Š” ๋น„๋™๊ธฐ ์ปดํฌ๋„ŒํŠธ ํ˜น์€ ๋นŒ๋“œ ์ค‘์— ์‹คํ–‰๋˜๋Š” ๋น„๋™๊ธฐ + ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ํŒŒ์ผ์ด๋‚˜ + ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฝ๊ณ , ์ด๋ฅผ ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ์— + ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
+ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ ์‹œ์ž‘ํ•˜๊ธฐ +======= href="/learn/creating-a-react-app"> Get started with a framework +>>>>>>> 55a317d40781a0054a05a9f6c443ae0bd71f7d7e
@@ -279,12 +303,12 @@ export function HomeContent() {
-
Use the best from every platform
+
๋ชจ๋“  ํ”Œ๋žซํผ์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ
- People love web and native apps for different reasons. React - lets you build both web apps and native apps using the same - skills. It leans upon each platformโ€™s unique strengths to let - your interfaces feel just right on every platform. + ์‚ฌ๋žŒ๋“ค์€ ๋‹ค์–‘ํ•œ ์ด์œ ๋กœ ์›น๊ณผ ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. React๋Š” + ๋™์ผํ•œ ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜์—ฌ ์›น ์•ฑ๊ณผ ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์„ ๋ชจ๋‘ ๋งŒ๋“ค ์ˆ˜ + ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ ํ”Œ๋žซํผ์˜ ์žฅ์ ์„ ํ™œ์šฉํ•˜์—ฌ ๋ชจ๋“  ํ”Œ๋žซํผ์—์„œ ์ ํ•ฉํ•œ + ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
@@ -298,15 +322,15 @@ export function HomeContent() {

- Stay true to the web + ์›น์— ์ถฉ์‹คํ•˜๊ธฐ

- People expect web app pages to load fast. On the server, - React lets you start streaming HTML while youโ€™re still - fetching data, progressively fillingย in the remaining - content before any JavaScript code loads. On the client, - React can use standard web APIs to keep your UI - responsive even in the middle ofย rendering. + ์‚ฌ๋žŒ๋“ค์€ ์›น ์•ฑ์ด ๋น ๋ฅด๊ฒŒ ๋กœ๋“œ๋˜๊ธธ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค. ์„œ๋ฒ„์—์„œ + React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋™์•ˆ HTML์„ + ์ŠคํŠธ๋ฆฌ๋ฐํ•˜์—ฌ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๊ฐ€ ๋กœ๋“œ๋˜๊ธฐ ์ „์— ๋‚จ์€ + ๋‚ด์šฉ์„ ์ ์ง„์ ์œผ๋กœ ์ฑ„์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํด๋ผ์ด์–ธํŠธ์—์„œ + React๋Š” ํ‘œ์ค€ ์›น API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ Œ๋”๋ง ์ค‘์—๋„ UI๊ฐ€ + ๋ฐ˜์‘ํ•˜๋„๋ก ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@@ -384,21 +408,22 @@ export function HomeContent() {

- Go truly native + ์ง„์ •ํ•œ ๋„ค์ดํ‹ฐ๋ธŒ์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ

- People expect native apps to look and feel like their - platform.{' '} + ์‚ฌ๋žŒ๋“ค์€ ๋„ค์ดํ‹ฐ๋ธŒNative ์•ฑ์ด ํ•ด๋‹น ํ”Œ๋žซํผ์˜ + ๋ชจ์Šต๊ณผ ๋Š๋‚Œ์„ ๊ฐ–๊ธฐ๋ฅผ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค.{' '} React Native - {' '} - and{' '} - Expo{' '} - let you build apps in React for Android, iOS, and - more. They look and feel native because their UIs{' '} - are truly native. Itโ€™s not a web viewโ€”your - React components render real Android and iOS views - provided by the platform. + + ์™€{' '} + Expo + ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด React๋ฅผ ํ†ตํ•ด Android, iOS ๋“ฑ์„ ์œ„ํ•œ ์•ฑ์„ + ๋นŒ๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. UI๊ฐ€ ์ง„์ •ํ•œ ๋„ค์ดํ‹ฐ๋ธŒ์ด๊ธฐ ๋•Œ๋ฌธ์— + ๋„ค์ดํ‹ฐ๋ธŒ์ฒ˜๋Ÿผ ๋ณด์ด๊ณ  ๋Š๊ปด์ง‘๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์›น ๋ทฐ + Web View๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. React ์ปดํฌ๋„ŒํŠธ๋“ค์€ + ์‹ค์ œ Android, iOS ํ”Œ๋žซํผ์—์„œ ์ œ๊ณตํ•˜๋Š” ๋ทฐ + View๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

@@ -408,14 +433,14 @@ export function HomeContent() {
- With React, you can be a web and a native developer. Your - team can ship to many platforms without sacrificing the user - experience. Your organization can bridge the platform silos, and - form teams that own entire features end-to-end. + React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์›น ๋ฐ ๋„ค์ดํ‹ฐ๋ธŒ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž + ๊ฒฝํ—˜์˜ ์ €ํ•˜ ์—†์ด ์—ฌ๋Ÿฌ ํ”Œ๋žซํผ์— ์ถœ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์กฐ์ง์—์„œ๋Š” + ํ”Œ๋žซํผ ๊ฐ„์˜ ๊ฒฉ์ฐจ๋ฅผ ์ค„์ด๊ณ , ๊ธฐ๋Šฅ์„ ์™„์ „ํžˆ ์†Œ์œ ํ•˜๋Š” ํŒ€์„ ๊ตฌ์„ฑํ•  ์ˆ˜ + ์žˆ์Šต๋‹ˆ๋‹ค.
- Build for native platforms + ๋„ค์ดํ‹ฐ๋ธŒ ํ”Œ๋žซํผ์—์„œ React ์‚ฌ์šฉํ•˜๊ธฐ
@@ -426,23 +451,26 @@ export function HomeContent() {
-
Upgrade when the future is ready
+
+ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์— ๋งž์ถฐ +
์—…๊ทธ๋ ˆ์ด๋“œ ํ•˜๊ธฐ +
- React approaches changes with care. Every React commit is - tested on business-critical surfaces with over a billion - users. Over 100,000 React components at Meta help validate - every migration strategy. + React๋Š” ๋ณ€ํ™”์— ์‹ ์ค‘ํ•˜๊ฒŒ ์ ‘๊ทผํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  React ์ปค๋ฐ‹์€ 10์–ต๋ช… + ์ด์ƒ์˜ ์‚ฌ์šฉ์ž๊ฐ€ ์žˆ๋Š” ๋น„์ฆˆ๋‹ˆ์Šค์˜ ํฌ๋ฆฌํ‹ฐ์ปฌํ•œ ์˜์—ญ์—์„œ ํ…Œ์ŠคํŠธ๋ฅผ + ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. Meta์—์„œ๋Š” 10๋งŒ ๊ฐœ ์ด์ƒ์˜ React ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ชจ๋“  + ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ์ „๋žต์„ ๊ฒ€์ฆํ•ฉ๋‹ˆ๋‹ค.
- The React team is always researching how to improve React. - Some research takes years to pay off. React has a high bar - for taking a research idea into production. Only proven - approaches become a part of React. + React ํŒ€์€ ํ•ญ์ƒ React๋ฅผ ๊ฐœ์„ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์—ฐ๊ตฌํ•ฉ๋‹ˆ๋‹ค. ๋ช‡ ๋…„์ด + ๊ฑธ๋ฆฌ๋Š” ์—ฐ๊ตฌ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. React๋Š” ์—ฐ๊ตฌ ์•„์ด๋””์–ด๋ฅผ ์ œํ’ˆ์— + ์ ์šฉํ•˜๋Š” ๋ฐ์— ๋†’์€ ๊ธฐ์ค€์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฒ€์ฆ๋œ ์ ‘๊ทผ + ๋ฐฉ์‹๋งŒ์ด React ์ผ๋ถ€๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.
- Read more React news + ๋” ๋งŽ์€ React ๋‰ด์Šค ์ฝ๊ธฐ
@@ -450,7 +478,7 @@ export function HomeContent() {

- Latest React News + ์ตœ์‹  React ๋‰ด์Šค

@@ -468,7 +496,7 @@ export function HomeContent() {
- Read more React news + React ๋‰ด์Šค ๋” ๋ณด๊ธฐ
@@ -480,14 +508,11 @@ export function HomeContent() {
-
- Join a community
- of millions -
+
์ˆ˜๋ฐฑ๋งŒ ๋ช…์ด ์žˆ๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ
- Youโ€™re not alone. Two million developers from all over the - world visit the React docs every month. React is something - that people and teams can agree on. + ์—ฌ๋Ÿฌ๋ถ„์€ ํ˜ผ์ž๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ์ „์„ธ๊ณ„์˜ 200๋งŒ ๋ช…์ด ๋„˜๋Š” ๊ฐœ๋ฐœ์ž๋“ค์ด + React ๋ฌธ์„œ๋ฅผ ๋งค๋‹ฌ ๋ฐฉ๋ฌธํ•ฉ๋‹ˆ๋‹ค. React๋Š” ์‚ฌ๋žŒ๋“ค๊ณผ ํŒ€์ด ๋™์˜ํ•  ์ˆ˜ + ์žˆ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
@@ -495,13 +520,12 @@ export function HomeContent() {
- This is why React is more than a library, an architecture, or - even an ecosystem. React is a community. Itโ€™s a place where - you can ask for help, find opportunities, and meet new - friends. You will meet both developers and designers, - beginners and experts, researchers and artists, teachers and - students. Our backgrounds may be very different, but React - lets us all create user interfaces together. + ์ด๊ฒƒ์ด ๋ฐ”๋กœ React๊ฐ€ ๋‹จ์ˆœํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ์•„ํ‚คํ…์ฒ˜, ํ˜น์€ ์ƒํƒœ๊ณ„ + ๊ทธ ์ด์ƒ์ธ ์ด์œ ์ž…๋‹ˆ๋‹ค. React๋Š” ๋ฐ”๋กœ ์ปค๋ฎค๋‹ˆํ‹ฐ์ž…๋‹ˆ๋‹ค. ๋„์›€์„ + ์š”์ฒญํ•˜๊ณ , ๊ธฐํšŒ๋ฅผ ์ฐพ๊ณ , ์ƒˆ๋กœ์šด ์นœ๊ตฌ๋ฅผ ๋งŒ๋‚  ์ˆ˜ ์žˆ๋Š” ๊ณณ์ž…๋‹ˆ๋‹ค. + ๊ฐœ๋ฐœ์ž์™€ ๋””์ž์ด๋„ˆ, ์ดˆ๋ณด์ž์™€ ์ „๋ฌธ๊ฐ€, ์—ฐ๊ตฌ์›๊ณผ ์˜ˆ์ˆ ๊ฐ€, ๊ต์‚ฌ์™€ + ํ•™์ƒ์„ ๋งŒ๋‚  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐฐ๊ฒฝ์€ ๋ชจ๋‘ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์ง€๋งŒ, React๋ฅผ + ํ†ตํ•ด ํ•จ๊ป˜ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
@@ -518,15 +542,15 @@ export function HomeContent() {
- Welcome to the
- React community + React ์ปค๋ฎค๋‹ˆํ‹ฐ์— +
์˜ค์‹  ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค
- Get Started + ์‹œ์ž‘ํ•˜๊ธฐ
diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx index e2e2169fd..8a1b53a09 100644 --- a/src/components/Layout/Toc.tsx +++ b/src/components/Layout/Toc.tsx @@ -23,7 +23,7 @@ export function Toc({headings}: {headings: Toc}) {