Coder Social home page Coder Social logo
ko.reactjs.org

reactjs / ko.reactjs.org Goto Github PK

View Code? Open in 1sVSCode Editor NEW
337.0 26.0 236.0 127.84 MB

(Work in progress) React documentation website in Korean

Home Page: koreactjsorg.fbopensource.vercel.app

License: Creative Commons Attribution 4.0 International

JavaScript 45.29% CSS 7.33% HTML 0.54% Shell 0.01% TypeScript 46.82%

ko.reactjs.org's Introduction

reactjs.org

이 저장소는 reactjs.org의 소스 코드와 개발 문서를 포함하고 있습니다.

시작하기

사전 준비

  1. Git
  2. Node: 12.0.0 이상으로 시작하는 모든 12.x 버전
  3. Yarn: Yarn website for installation instructions 참고
  4. 포크한 개인 저장소
  5. 로컬에 클론(Clone) 한 reactjs.org repo 개인 저장소

설치

  1. cd reactjs.org를 실행하여 프로젝트 경로로 이동합니다.
  2. yarn을 이용하여 npm 의존성 모듈들을 설치합니다.

개발 서버 실행하기

  1. yarn dev 명령어를 사용하여 hot-reloading 개발 서버를 시작합니다. (powered by Gatsby)
  2. open http://localhost:8000 명령어를 사용하여 선호하는 브라우저로 접속하세요.

기여방법

가이드라인

이 문서는 목적이 다른 여러 섹션으로 나뉘게 됩니다. 문장을 추가할 계획이라면, 적절한 섹션에 대한 가이드라인을 숙지하는 것이 도움이 될 것입니다.

브랜치(branch) 만들기

  1. reactjs.org 로컬 저장소에서 git checkout main를 실행합니다.
  2. git pull origin main를 실행하여 최신 원본 코드를 보장할 수 있습니다.
  3. git checkout -b the-name-of-my-branch (the-name-of-my-branch 를 적절한 이름으로 교체)를 실행하여 브랜치를 만듭니다.

수정하기

  1. "개발 서버 실행하기" 부분을 따릅니다.
  2. 파일을 저장하고 브라우저에서 확인합니다. 1.src안에 있는 React 컴포넌트가 수정될 경우 hot-reload가 적용됩니다.
    1. content안에 있는 마크다운 파일이 수정될 경우 hot-reload가 적용됩니다.
    2. 플러그인을 사용하는 경우, .cache 디렉토리를 제거한 후 서버를 재시작해야 합니다.

수정사항 체크하기

  1. 가능하다면, 변경한 부분에 대해서 많이 사용하는 브라우저의 최신 버전에서 시각적으로 제대로 적용되었는지 확인해주세요. (데스크탑과 모바일 모두)
  2. 프로젝트 루트에서 yarn check-all를 실행합니다. (이 명령어는 Prettier, ESLint, 그리고 Flow를 실행합니다.)

Push 하기

  1. git add -A && git commit -m "My message" (My message 부분을 Fix header logo on Android 같은 커밋 메시지로 교체)를 실행하여 변경한 파일들을 commit 해주세요.
  2. reactjs.org repo에서 최근에 푸시된 브랜치를 볼 수 있습니다.
  3. Github 지침을 따라주세요.
  4. 가능하다면 시각적으로 변화된 부분의 스크린샷을 첨부해주세요. PR을 만들고 다른사람들이 수정사항을 볼 수 있게되면 자동으로 빌드할 것입니다.

번역

reactjs.org 번역에 흥미가 있다면, translations.reactjs.org에서 현재 번역이 얼마나 진행되었는지 확인해주세요.

번역하려는 언어가 아직 진행되지 않았다면, 해당 언어에 대해 새롭게 만들 수 있습니다. reactjs.org Translations를 참고해주세요.

문제 해결하기

  • yarn reset 명령어를 사용하여 로컬 캐시를 초기화합니다.

저작권

위 내용에 대한 저작권은 reactjs.org가 가지고 있으며, LICENSE-DOCS.md에서 볼 수 있는 CC-BY-4.0 라이센스를 따릅니다.

ko.reactjs.org's People

Contributors

gaearon avatar zpao avatar bvaughn avatar taehwanno avatar sophiebits avatar alexkrolick avatar petehunt avatar reactjs-translation-bot avatar chenglou avatar vjeux avatar jimfb avatar acdlite avatar dependabot[bot] avatar tesseralis avatar marocchino avatar hg-pyun avatar kohei-takata avatar lex111 avatar simsim0709 avatar seanjun21 avatar koba04 avatar yangshun avatar mcsheffrey avatar gnujoow avatar sebmarkbage avatar cadenzah avatar Beingbook avatar Daniel15 avatar therobhrt avatar DSchau avatar

Stargazers

 avatar HW Lee avatar Woochul Lee avatar  avatar pihamchi avatar 1ilsang avatar victor park avatar GyuTaeKim avatar Moriah(모리) avatar Park GyeongCheol avatar SeYun(Marco) avatar Jaeyeon Kim avatar Haegul Pyun avatar jiwonSong avatar 이호진 avatar  avatar Sang-moon, Lee avatar  avatar Amadeusine avatar  avatar Nicole avatar 2O_OS avatar Leesuho avatar PARK, Yeonjong avatar HYUNJIN LEE avatar Dongho avatar 나상우(Roy) avatar Jwu avatar Yoonmin Cho avatar rikapo avatar 장호철 avatar SangKwon_Yeum avatar youngseojeon avatar KimYoungJun avatar Buddhisha avatar SuKyoung avatar Jonghyeon Ko avatar ECMs avatar SONGMINSEOK avatar Jiwoo Joy Kim avatar Yangha avatar Taehwan Noh avatar Min Kyung Kang avatar jieun song avatar cansoup avatar Jiin Eom avatar Daniel avatar Yesdoing avatar Dubby avatar  avatar Jin Young Park avatar Jinju avatar Eunsu(Daniel) Kim avatar Kang Hyeong Min avatar Gyuri Lee avatar Minju Kim avatar Minsu Kim avatar Jeong Jinwoo avatar 노우제 avatar jinsun Park avatar dongseub, choi avatar DoHyeong Lee avatar Shawn Charles avatar Steve Sung avatar  avatar  avatar Siyoon Jeon avatar Hyunja avatar Changsik Yoon avatar JaeSeoKim avatar 정성훈 avatar Duil HWANG avatar gitgitWi avatar Ji Sungbin avatar Dayeon Moon avatar  avatar Sung Jeon avatar Juyeong Byeon avatar  avatar 오일교 avatar Byeongju Park avatar  avatar Ha young, Kim avatar Yubin avatar Theo Oh avatar Nochi avatar Juyeon avatar Cho Sangmuk avatar Gyu-Ae Park avatar Jeongwon Han avatar Sungmin You avatar Kwon gi seok avatar dev.yelee avatar Junseo avatar 남궁선아(Suna Namgung) avatar Juhyeong Kim avatar Hangyul avatar ImChangGyu avatar 홍영란 avatar 코딩하는펭귄 avatar

Watchers

Sebastian Markbåge avatar Ryan Florence avatar James Cloos avatar dofstar avatar Flarnie Marchan avatar Bonggyun Lee avatar  avatar bono.podo avatar 윤도경 avatar Taehwan Noh avatar bangjuyoung avatar Kim JooYoung avatar Ahyeon Choi avatar Ilkwon Sim avatar Haegul Pyun avatar  avatar  avatar JangBongKi avatar b9words avatar Martin Moon (문성주) avatar  avatar polaris avatar cemujax avatar  avatar uplift avatar cansoup avatar

ko.reactjs.org's Issues

`$ yarn check-all` command modifies some files

Hi.

I followed instruction and had test as mentioned.

Test the change
If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile.
Run yarn check-all from the project root. (This will run Prettier, ESLint, and Flow.)

but, after i run yarn check-all, it automatically modifies two files and result to fail for textlint while committing it.

here is my logs...

➜  ko.reactjs.org git:(master) git status
On branch master
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean`
➜  ko.reactjs.org git:(master) git checkout -b translate-uncontrolled-components
Switched to a new branch 'translate-uncontrolled-components'`
➜  ko.reactjs.org git:(translate-uncontrolled-components) yarn check-all
yarn run v1.7.0
$ npm-run-all prettier generate-ids --parallel lint flow
$ yarn format:source && yarn format:examples
$ prettier --config .prettierrc --write "{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}"
flow-typed/gatsby.js 400ms
flow-typed/glamor.js 19ms
flow-typed/hex2rgba.js 14ms
flow-typed/react-helmet.js 10ms
flow-typed/slugify.js 8ms
gatsby-browser.js 34ms
gatsby-config.js 77ms
gatsby-node.js 15ms
plugins/gatsby-remark-header-custom-ids/gatsby-client.js 27ms
plugins/gatsby-remark-header-custom-ids/gatsby-ssr.js 34ms
plugins/gatsby-remark-header-custom-ids/index.js 33ms
plugins/gatsby-remark-use-jsx/index.js 17ms
plugins/gatsby-source-react-error-codes/gatsby-node.js 17ms
plugins/gatsby-transformer-authors-yaml/gatsby-node.js 18ms
plugins/gatsby-transformer-home-example-code/gatsby-node.js 17ms
plugins/gatsby-transformer-versions-yaml/create-redirects.js 29ms
plugins/gatsby-transformer-versions-yaml/gatsby-node.js 14ms
src/components/ButtonLink/ButtonLink.js 22ms
src/components/ButtonLink/index.js 8ms
src/components/CodeEditor/CodeEditor.js 76ms
src/components/CodeEditor/index.js 12ms
src/components/CodeExample/CodeExample.js 21ms
src/components/CodeExample/index.js 9ms
src/components/Container/Container.js 12ms
src/components/Container/index.js 6ms
src/components/ErrorDecoder/ErrorDecoder.js 34ms
src/components/ErrorDecoder/index.js 6ms
src/components/Flex/Flex.js 13ms
src/components/Flex/index.js 8ms
src/components/Header/Header.js 8ms
src/components/Header/index.js 7ms
src/components/Layout/index.js 6ms
src/components/Layout/Layout.js 14ms
src/components/LayoutFooter/ExternalFooterLink.js 10ms
src/components/LayoutFooter/Footer.js 45ms
src/components/LayoutFooter/FooterLink.js 13ms
src/components/LayoutFooter/FooterNav.js 13ms
src/components/LayoutFooter/index.js 9ms
src/components/LayoutHeader/DocSearch.js 34ms
src/components/LayoutHeader/Header.js 51ms
src/components/LayoutHeader/HeaderLink.js 19ms
src/components/LayoutHeader/index.js 7ms
src/components/LayoutHeader/SearchSvg.js 8ms
src/components/MarkdownHeader/index.js 6ms
src/components/MarkdownHeader/MarkdownHeader.js 9ms
src/components/MarkdownPage/index.js 6ms
src/components/MarkdownPage/MarkdownPage.js 31ms
src/components/StickyResponsiveSidebar/index.js 6ms
src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js 39ms
src/components/TitleAndMetaTags/index.js 7ms
src/components/TitleAndMetaTags/TitleAndMetaTags.js 9ms
src/html.js 12ms
src/pages/404.js 13ms
src/pages/acknowledgements.html.js 24ms
src/pages/blog/all.html.js 46ms
src/pages/docs/error-decoder.html.js 21ms
src/pages/index.js 58ms
src/pages/jsx-compiler.html.js 15ms
src/pages/languages.js 28ms
src/pages/versions.js 18ms
src/prism-styles.js 29ms
src/site-constants.js 8ms
src/templates/blog.js 16ms
src/templates/codepen-example.js 20ms
src/templates/community.js 14ms
src/templates/components/ChevronSvg/index.js 11ms
src/templates/components/ExternalLinkSvg/index.js 8ms
src/templates/components/MetaTitle/index.js 22ms
src/templates/components/NavigationFooter/index.js 9ms
src/templates/components/NavigationFooter/NavigationFooter.js 31ms
src/templates/components/Sidebar/index.js 9ms
src/templates/components/Sidebar/ScrollSyncSection.js 28ms
src/templates/components/Sidebar/Section.js 20ms
src/templates/components/Sidebar/Sidebar.js 13ms
src/templates/docs.js 12ms
src/templates/tutorial.js 10ms
src/theme.js 53ms
src/types.js 9ms
src/utils/createLink.js 18ms
src/utils/createOgUrl.js 9ms
src/utils/findSectionForPath.js 10ms
src/utils/isItemActive.js 9ms
src/utils/loadScript.js 7ms
src/utils/patchDOMForGoogleTranslate.js 10ms
src/utils/sectionList.js 8ms
src/utils/slugify.js 7ms
src/utils/toCommaSeparatedList.js 12ms
$ prettier --config examples/.prettierrc --write "examples/**/*.js"
examples/16-3-release-blog-post/context-example.js 392ms
examples/16-3-release-blog-post/create-ref-example.js 17ms
examples/16-3-release-blog-post/fancy-button-example.js 15ms
examples/16-3-release-blog-post/forward-ref-example.js 30ms
examples/16-3-release-blog-post/hoc-theme-example.js 10ms
examples/16-4-release-blog-post/pointer-events-example.js 52ms
examples/components-and-props/composing-components.js 12ms
examples/components-and-props/extracting-components-continued.js 29ms
examples/components-and-props/extracting-components.js 36ms
examples/components-and-props/rendering-a-component.js 9ms
examples/context/motivation-problem.js 10ms
examples/context/motivation-solution.js 11ms
examples/context/multiple-contexts.js 17ms
examples/context/reference-caveats-problem.js 8ms
examples/context/reference-caveats-solution.js 11ms
examples/context/theme-detailed-app.js 22ms
examples/context/theme-detailed-theme-context.js 12ms
examples/context/theme-detailed-themed-button.js 10ms
examples/context/updating-nested-context-app.js 14ms
examples/context/updating-nested-context-context.js 6ms
examples/context/updating-nested-context-theme-toggler-button.js 8ms
examples/es5-syntax-example.js 8ms
examples/forwarding-refs/customized-display-name.js 11ms
examples/forwarding-refs/fancy-button-ref.js 7ms
examples/forwarding-refs/fancy-button-simple-ref.js 8ms
examples/forwarding-refs/fancy-button-simple.js 6ms
examples/forwarding-refs/fancy-button.js 6ms
examples/forwarding-refs/log-props-after.js 11ms
examples/forwarding-refs/log-props-before.js 8ms
examples/forwarding-refs/wrapped-component-with-function-name.js 6ms
examples/forwarding-refs/wrapped-component.js 6ms
examples/hello-world.js 6ms
examples/introducing-jsx.js 9ms
examples/jsx-simple-example.js 6ms
examples/react-component-reference/get-snapshot-before-update.js 11ms
examples/reconciliation/index-used-as-key.js 25ms
examples/reconciliation/no-index-used-as-key.js 27ms
examples/reference-react-forward-ref.js 11ms
examples/rendering-elements/render-an-element.js 7ms
examples/rendering-elements/update-rendered-element.js 10ms
examples/strict-mode/enabling-strict-mode.js 12ms
examples/strict-mode/side-effects-in-constructor.js 7ms
examples/tutorial-expanded-version.js 7ms
examples/uncontrolled-components/input-type-file.js 13ms
examples/update-on-async-rendering/adding-event-listeners-after.js 12ms
examples/update-on-async-rendering/adding-event-listeners-before.js 9ms
examples/update-on-async-rendering/adding-event-listeners-create-subscription.js 12ms
examples/update-on-async-rendering/definition-getderivedstatefromprops.js 7ms
examples/update-on-async-rendering/definition-getsnapshotbeforeupdate.js 7ms
examples/update-on-async-rendering/fetching-external-data-after.js 11ms
examples/update-on-async-rendering/fetching-external-data-before.js 10ms
examples/update-on-async-rendering/initializing-state-after.js 6ms
examples/update-on-async-rendering/initializing-state-before.js 9ms
examples/update-on-async-rendering/invoking-external-callbacks-after.js 6ms
examples/update-on-async-rendering/invoking-external-callbacks-before.js 14ms
examples/update-on-async-rendering/react-dom-properties-before-update-after.js 9ms
examples/update-on-async-rendering/react-dom-properties-before-update-before.js 10ms
examples/update-on-async-rendering/side-effects-when-props-change-after.js 7ms
examples/update-on-async-rendering/side-effects-when-props-change-before.js 6ms
examples/update-on-async-rendering/updating-external-data-when-props-change-after.js 12ms
examples/update-on-async-rendering/updating-external-data-when-props-change-before.js 12ms
examples/update-on-async-rendering/updating-state-from-props-after.js 6ms
examples/update-on-async-rendering/updating-state-from-props-before.js 6ms
examples/update-on-async-rendering/using-react-lifecycles-compat.js 8ms
$ node scripts/generateHeadingIDs.js content
$ flow
$ eslint .
Launching Flow server for /Users/sukjaelee/open-source-project/ko.reactjs.org
Spawned flow server (pid=91711)
Logs will go to /private/tmp/flow/zSUserszSsukjaeleezSopen-source-projectzSko.reactjs.org.log
No errors!
✨  Done in 10.61s.
➜  ko.reactjs.org git:(translate-uncontrolled-components) ✗ git status
On branch translate-uncontrolled-components
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

	modified:   content/community/conferences.md
	modified:   content/docs/hooks-faq.md

no changes added to commit (use "git add" and/or "git commit -a")
➜  ko.reactjs.org git:(translate-uncontrolled-components) ✗ git add -A
➜  ko.reactjs.org git:(translate-uncontrolled-components) ✗ git commit -m "Translated docs/uncontrolled-components page"
husky > pre-commit (node v8.11.1)
  ↓ Stashing changes... [skipped]
    → No partially staged files found...
  ❯ Running linters...
    ❯ Running tasks for *.md
      ✖ textlint --rulesdir textlint/rules



✖ textlint --rulesdir textlint/rules found some errors. Please fix them and try committing again.

/Users/sukjaelee/open-source-project/ko.reactjs.org/content/docs/hooks-faq.md
 64:80   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
121:54   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
140:208  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
189:38   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
220:44   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
240:171  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
254:270  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
263:184  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
283:143  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
297:150  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
325:92   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
341:73   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
376:170  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
416:95   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
439:173  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
457:271  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
482:100  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
536:268  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
550:96   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
572:190  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
591:174  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
611:94   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
631:96   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
635:256  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
659:174  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
676:357  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
697:227  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
723:83   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
737:152  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
749:77   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
772:76   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
782:89   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
794:180  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
804:147  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
833:82   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
841:178  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
858:163  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
875:105  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
904:444  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
929:166  error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon
976:54   error  문장 끝에 쌍점(:)과 쌍반점(;)은 사용하지 않습니다  no-endline-colon

✖ 41 problems (41 errors, 0 warnings)

husky > pre-commit hook failed (add --no-verify to bypass)

typo in 'React 최상위 API' page

I'm so sorry, but there might be a typo on the page below.
(on Chrome, It doesn't show up on IE.)
https://ko.reactjs.org/docs/react-api.html
I think that 'ㄴㄴ' should be removed.

개요 > 컴포넌트 > React 컴포넌트를 사용하면 UI를 독립적이고 재사용할 수 있는 부분으로 나누고 각 부분을 분리하여 "생각할�� 수" 있습니다.

Review remain pull request

The remaining PR reviews are not being reviewed for a long time. Please give us your opinion on what to do from now on.

Conflict Merge

스크린샷 2022-02-09 오후 10 47 15

우연찮게 발견하게 되었는데
Conflict가 된 상태 그대로 Merge가 되면서 문제가 생긴거 같습니다.

Using Github Issues as unit of translation.

As we know, this project have many volunteers, and documents.

So, I think we need a board to share each work's status, blocking problems, etc.. also to prevent duplication of translation, and to work more effectively.

and, github issues and projects will do us.
could you share your idea about this?

[Beta] Translate custom tag component

YouWillLearn, Gotcha, Recap, Challenges 와 같은 커스텀 태그 컴포넌트에 있는 영문 값들도 수정해주는 게 좋을 것 같다는 생각이 있습니다.
제가 번역을 진행한 Javascript in jsx with curly braces 에서 확인할 수 있는 컴포넌트는 이정도 있었습니다.

  • Challenges

  • ToC

  • ExpandableCallout

  • MDXComponent/YouWillLearn

Translating the new official document

React의 새로운 공식문서 번역이 시작되는 것 같습니다. 아래 스레드에서 논의가 진행되는 것 같은데 트래킹하면 좋을 것 같습니다.
A new official document translation of React seems to begin. The discussion seems to be taking place in the thread below, so it would be nice to track it.

reactjs/reactjs.org#4135 (comment)

[Beta] Translating New React Docs Progress (Korean)

How to translate ?

Currently the beta website is in the beta folder.

For New Translators

To translate a page:

  1. Check that no one else has claimed your page in the checklist and comments below.
  2. Comment below with the name of the page you would like to translate. Take only one page at a time.
  3. Clone this repo, translate your page using with this checker, and submit a pull request!

Before contributing, read the glossary and this wiki page to understand how to translate various technical and React-specific terms.

Please be prompt with your translations! If you find that you can't commit any more, let the maintainers know so they can assign the page to someone else.

Please join in React Korea Slack #translation channel if you are interested in the translation.

Check List

The new docs aren't fully written yet, and some parts will definitely change. However, a lot of the pages are already "stable". We suggest to use this checklist for the beginning. means "ok to translate", 🔴 means "don't translate yet".

  • Installation (note: a lot of content here is similar to old website) (@hapumee) #386
  • 🔴 Quick Start (don't translate the index page yet, it will change)
  • 🔴 Describing the UI (don't translate the index page yet, it might change)
  • 🔴 Adding Interactivity (don't translate the index page yet, it might change)
  • 🔴 Managing State (don't translate the index page yet, it might change)
    • Reacting to Input with State (@woojenoh)
    • Choosing the State Structure (@junsikshim)
    • Sharing State Between Components (@devSoyoung)
    • Preserving and Resetting State (@atobaum) #389
    • Extracting State Logic into a Reducer (@jinsunee) #391
    • Passing Data Deeply with Context (@Jincy7)
    • Scaling Up with Reducer and Context (@cos22k)
  • 🔴 Escape Hatches (not written yet)
  • Shared Component Translation (e.g. YouWillLearn, Gotcha) (@alstn2468) #383

Reference

Resolve Conflict

현재 기존 페이지와 React 18관련해서 컨플릭트가 어머어머한데요. 한번 털고 가야할 듯 싶습니다. 어떻게 시작해야할까 고민인데 좋은 아이디어 스레드로 논의해보고 진행해보면 좋을 것 같습니다.

Korean Translation Progress

Maintainer List

For New Translators

To translate a page:

  1. Check that no one else has claimed your page in the checklist and comments below.
  2. Comment below with the name of the page you would like to translate. Take only one page at a time.
  3. Check out prior works in #4 before you get started.
  4. Clone this repo, translate your page using with this checker, and submit a pull request!

Before contributing, read the glossary and this wiki page to understand how to translate various technical and React-specific terms.

Please be prompt with your translations! If you find that you can't commit any more, let the maintainers know so they can assign the page to someone else.

Please join in React Korea Slack #translation channel if you are interested in the translation.

For maintainers

When someone volunteers, edit this issue with the username of the volunteer, and with the PR. Ex:

When PRs are merged, make sure to mark that page as completed!

Core Pages

To do before releasing as an "official" translation. Please translate these pages first.

Basics

API Reference

Navigation

These are the navigation links that appears in the sidebar. Possibly wait until
the corresponding sections are translated to do these.

Next Steps

These are the next most important translations, ordered by importance:

Installation

Hooks

Everyone is hooked on hooks! People are really excited for these and it would be great for them to be translated.

Warnings

These are the pages that you get when you click the links in the console (e.g. https://reactjs.org/warnings/dont-call-proptypes.html). People tend to search these, so please don't translate the error message itself.

Advanced Guides

FAQ

Contributing

Priority: Low

  • How to Contribute (@Kim-Ki-Soo) #126
  • Codebase Overview (@Kimguyeop) #123
  • Implementation Notes (@baekjuwon) #129
  • Design Principles (@hapumee) #133

Components

Components in src/components that have some text in them.

Additional Translations

These are not the primary translation targets.

  • Blog
  • Community

Translations added after this issue creation

Testing

  • Testing Overview (@koDaegon) #179
  • Testing Recipes (@cdsleaf) #201
  • Testing Environments (@BeomYoung) #183

Concurrent Mode (Experimental)

  • Introducing Concurrent Mode (@Yohan-Kim2) #186
  • Suspense for Data Fetching (@cadenzah) #221
  • Concurrent UI Patterns (@Beingbook) #224
  • Adopting Concurrent Mode (@junsikshim) #182
  • Concurrent Mode API Reference (@DDOLDDOL) #192

Prior works

There are some Korean translations of official React documents. I think we can translate them a little bit faster if we can use the previously translated text. So, I list the translation posts that are accessible by URL but are not committed in the current repository. The translation lists are listed in the latest order of publication date. The pages that did not find translations are not listed below.

If you would like to recommend another translation, please let me know by comment. I will update the description of this issue.

⚠️ Please note that this does not mean that you "must use" the following listed translations. The translations can also be protected by copyright, so if you want to refer to them, it's a good way to work with permission in advance. Please respect the translator who worked in advance.

Core Pages 📖

Basics

API Reference

Navigation

Next Steps 📖

Installation

Hooks

Advanced Guides

Additional Information

Need to add lost original text translation

Related to #270 (comment)

When I'm resolving syn pull request #270, I find that some original text are lost. we need to add translation.

React.Component's componentDidCatch

Production and development builds of React slightly differ in the way componentDidCatch() handles errors.

On development, the errors will bubble up to window, this means that any window.onerror or window.addEventListener('error', callback) will intercept the errors that have been caught by componentDidCatch().

On production, instead, the errors will not bubble up, which means any ancestor error handler will only receive errors not explicitly caught by componentDidCatch().

Wrong translation in docs/hooks-state.html

Hi,
I am a beginner of react-hooks and I really appreciates for your translation works.

I found a small mistranslation in https://reactjs.org/docs/hooks-state.html#declaring-a-state-variable page.

  • English version
What do we pass to useState as an argument? The only argument to the useState() Hook is the initial state. 
Unlike with classes, the state doesn’t have to be an object.
...
  • Korean version
useState의 인자로 무엇을 넘겨주어야 할까요? useState()Hook의 인자로 넘겨주는 값은 state의 초기 값입니다.
함수 컴포넌트의 state는 클래스와 달리 객체를 가질 수 없고, 숫자 타입과 문자 타입을 가질 수 있습니다. 

the state doesn't have to be an object is translated as 객체를 가질 수 없고 for now,
but 객체일 필요가 없고 could be more correct one for this case.

Thanks.

PR merge rule and PR template suggestion

pr merge

Since no PR has been merged yet, I think it would be good to make rule for merging PR.

pr template

<!--

Thank you for the PR! Contributors like you keep React awesome!

Please see the Contribution Guide for guidelines:

https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md

If your PR references an existing issue, please add the issue number below

-->

here is the current PR template, but if the checklist is included here, contributors and reviewers can check the progress of the PR so it can bring better communicate better.

typo in 'create a new react app' page

I'm so sorry to mention about this, but the page 'create-a-new-react-app.html' doesn't show up whole contents of it on Chrome and IE also. (Part of the contents show up on the page)
I think that it's because of script tag(<script>) below.

line_25

It might be translated "<script>" tag instead of " `<script>` " text, so the browser treats it as a HTML tag.

I think that it's better to modify that. ^^;

Draft: Best practices for translation

I wrote a draft of "Best practices for translation" document. Will appreciate any feedback from you. :)
"번역 모범 사례" 문서의 초안을 작성해보았습니다. 보시고 의견있으시면 주세요. 어떤 피드백이든 환영합니다. :)


모범사례

쌍점은 거의 사용하지 않습니다.

한국어 맞춤법에서는 쌍점(colon, 콜론)을 사용하는 경우를 규정하고 있는데 항목의 열거나 희곡 대사 등에서만 제한적으로 사용합니다(참고). 특히 영어처럼 문장 끝에 쌍점을 붙이는 경우는 없으므로 주의하세요.

👍모범 사례
다음 예제를 보세요.

👎잘못된 사례
다음 예제를 보세요:

'시'는 제한적으로 사용합니다.

존칭을 표현하는 '-시-'는 문장의 간결함을 해칠 수 있습니다. ~하세요처럼 제한적인 경우에만 사용하고 그 외에는 사용하지 않는 편이 좋습니다. 다만, 작업자들끼리 대화할 때는 존중의 의미에서 사용해도 상관없습니다.

👍모범 사례
살펴보면 좋습니다.

👍모범 사례
살펴보세요.

👎잘못된 사례
살펴보시면 좋습니다.

쉼표를 모두 옮길 필요는 없습니다.

영어와 우리말에서 쉼표를 사용하는 사례가 다릅니다. 우리말에서 쉼표를 사용하는 몇 가지 경우는 맞춤법에 규정되어 있습니다. 꼭 필요할 때만 사용하고 그 외에는 제한하는 편이 좋을 것 같습니다.

🇬🇧For example, if `id` is the row ID, either of the following would work

👍모범 사례
예를 들어 `id`가 행의 ID일 경우 다음 코드가 모두 작동합니다.

👎잘못된 사례
예를 들어, `id`가 행의 ID일 경우 다음 코드가 모두 작동합니다.

render = 렌더링하다

renderbind처럼 우리말 번역이 없고 원문의 음만 따서 쓰는 동사는 명사형 + ~하다로 번역하는 게 좋습니다.

🇬🇧 React renders DOM elements.

👍모범 사례
React는 DOM 엘리먼트를 렌더링합니다.

👎잘못된 사례
React는 DOM 엘리먼트를 렌더합니다.

👍모범 사례
함수를 바인딩해야 합니다.

당신과 여러분은 없어도 됩니다.

아주 가끔 꼭 필요할 때가 있기는 하지만 영어 표현에 많은 당신이나 여러분, 우리같은 표현은 안 쓰는 게 훨씬 자연스럽습니다.

🇬🇧 Let's say you want to output "Hello, world" in an DOM element.

👍모범 사례
DOM 엘리먼트에 "Hello, World"를 표현한다고 생각해봅시다.

👎잘못된 사례
당신이 DOM 엘리먼트에 "Hello, World"를 표현하고 싶다고 생각해봅시다.

피동형 문장에 주의하세요.

사실 원칙대로라면 ~되다같은 수동태도 가능하면 억제하는 편이 좋지만 실제로 작업을 하다 보면 써야 문장이 자연스러울 때도 있습니다. 다만 보여지다, 생각되다와 같은 불필요한 피동형 문장은 자제하는 편이 좋습니다.

🇬🇧 Elements appeared on the screen

👍모범 사례
화면에 보이는 엘리먼트

👎잘못된 사례
화면에 보여지는 엘리먼트

똑같은 표현은 비슷한 표현으로 대체하면 문장이 더 유려해집니다.

번역문에서 흔히 나타나는 문제가 영어 단어를 1:1로 번역하다 보니 표현이 단조로워진다는 점입니다. 예를 들어 common일반적으로라고만 번역한다거나 call호출한다라고만 번역하는 사례가 많습니다. 가까운 위치에서 똑같은 표현이 여러 차례 등장할 때 조금씩 표현을 바꾸어주면 문장이 더 읽기 좋아집니다. common이나 commonly일반적으로, 널리, 흔히 등으로 바꿀 수 있고 call, invoke 등은 호출하다, 실행하다 등으로 바꿀 수 있습니다.

👍모범 사례
이때 흔히 사용되는 패턴은 일반 자바스크립트 객체를 전달하는 것이다.

👎잘못된 사례
이때 일반적으로 사용되는 패턴은 일반 자바스크립트 객체를 전달하는 것이다. 

어색하지 않다면 단수형을 사용합시다.

원래 우리말에서는 ~들이라는 복수형 표현을 그리 널리 사용하지 않습니다. 물론 문장의 의미에 따라 반드시 복수의 객체임을 명시해야 할 때가 있긴 하지만, 그 외의 경우라면 단수형으로 표현하는 편이 대체로 자연스럽습니다.

🇬🇧 The examples below demonstrate the differences.

👍모범 사례
아래 예시는 위에서 언급한 차이점을 보여줍니다.

👍모범 사례 - 복수형 표현이 필요한 경우
아래 예시는 위에서 언급한 여러 차이점을 보여줍니다.

👎잘못된 사례
아래 예시들은 위에서 언급한 차이점들을 보여줍니다.

If는 생략할 수도 있습니다.

If로 시작하는 문장의 번역이 항상 만약으로 시작할 필요는 없습니다. 틀린 번역은 아니지만 한국어에서는 ~한다면이라는 어미가 이미 조건 또는 상황의 가정을 의미하므로 때로는 만약이 없어도 충분히 말이 됩니다. 아래 예시는 인접한 두 문장이 모두 만약으로 시작하고 있었습니다. 한 문장 만이라도 만약을 생략하면 조금 더 읽기 수월해집니다.

🇬🇧If you load React from a `<script>` tag, .... If you use ES6 with npm, ...

👍모범 사례
React를 <script> 태그로 불러온다면 ... ES6와 npm을 함께 사용한다면 ...

👎잘못된 사례
만약 React를 <script> 태그로 불러온다면 ... 만약 ES6와 npm을 함께 사용한다면 ...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.