Skip to content

Commit

Permalink
docs: translate korean to english on landing page (#1373)
Browse files Browse the repository at this point in the history 
# Overview

- update english landing page 
  - translate korean content on english landing page to english

<!--
    A clear and concise description of what this pr is about.
 -->

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.
  • Loading branch information
@gwansikk
gwansikk authored Nov 24, 2024
1 parent 63a126e commit 9bca0a1
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 32 deletions.
35 changes: 17 additions & 18 deletions docs/suspensive.org/src/pages/en/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { HomePage, Scrollycoding } from '@/components'
<Scrollycoding>
# !!steps If you write code without Suspense with TanStack Query, a representative library, you would write it like this.

In this case, you can check isLoading and isError to handle loading and error states, and remove undefined from data in TypeScript.
In this case, you can check `isLoading` and `isError` to handle loading and error states, and remove `undefined` from data in TypeScript.

```jsx ! Page.jsx
const Page = () => {
Expand Down Expand Up @@ -108,8 +108,8 @@ const Page = () => {

# !!steps Suspense makes the code concise in terms of type. However, the depth of the component inevitably increases.

useSuspenseQuery can handle loading and error states externally using Suspense and ErrorBoundary.
However, since useSuspenseQuery is a hook, the component must be separated to place Suspense and ErrorBoundary in the parent, which causes the depth to increase.
`useSuspenseQuery` can handle loading and error states externally using `Suspense` and `ErrorBoundary`.
However, since `useSuspenseQuery` is a hook, the component must be separated to place `Suspense` and `ErrorBoundary` in the parent, which causes the depth to increase.

```jsx ! Page.jsx
const Page = () => (
Expand Down Expand Up @@ -145,7 +145,7 @@ return promotions.map((promotion) => (

# !!steps Using Suspensive's SuspenseQuery component, you can avoid the constraints of hooks and write code more easily at the same depth.

1. Using SuspenseQuery, you can remove depth.
1. Using `SuspenseQuery`, you can remove depth.

2. You remove the component called UserInfo, leaving only the presentational component like UserProfile, which makes it easier to test.

Expand Down Expand Up @@ -188,7 +188,7 @@ const Page = () => (
<Scrollycoding>
# !!steps When using frameworks like Next.js, it can be difficult to use Suspense on the server.

Or, there are times when you don't want to use Suspense on the server.
Or, there are times when you don't want to use `Suspense` on the server.

```jsx ! Page.jsx
const Page = () => (
Expand All @@ -202,7 +202,7 @@ const Page = () => (

# !!steps In this case, you can easily solve it by using Suspensive's ClientOnly.

Just wrap ClientOnly and it will be solved.
Just wrap `ClientOnly` and it will be solved.

```jsx ! Page.jsx
const Page = () => (
Expand Down Expand Up @@ -233,8 +233,7 @@ const Page = () => (
# !!steps However, when developing, it is sometimes difficult to add fallbacks to Suspense one by one.

Especially when working on a product like Admin, there are cases where designers do not specify each one, so you want to provide default values.

In that case, try using DefaultProps.
In that case, try using `DefaultProps`.

```jsx ! Page.jsx
const defaultProps = new DefaultProps({
Expand All @@ -256,7 +255,7 @@ const Page = () => (

# !!steps Sometimes, instead of the default fallback, you want to give a FadeIn-like effect.

Then, how about using FadeIn?
Then, how about using `FadeIn`?

```jsx ! Page.jsx
const defaultProps = new DefaultProps({
Expand All @@ -278,7 +277,7 @@ const Page = () => (

# !!steps Of course, if you want to override the default fallback, just add it.

The designer asked me to support Skeleton instead of the default Spinner in this part~! Just add it.
The designer asked me to support `Skeleton` instead of the default `Spinner` in this part~! Just add it.

```jsx ! Page.jsx
const defaultProps = new DefaultProps({
Expand All @@ -304,9 +303,9 @@ const Page = () => (

<Scrollycoding>

# !!steps ErrorBoundary의 fallback 외부에서 ErrorBoundary를 reset하고 싶을 때 resetKeys를 사용해야 합니다.
# !!steps You should use resetKeys when you want to reset the ErrorBoundary from outside its fallback.

이는 깊은 컴포넌트의 경우 resetKey를 전달해야 하는 문제가 있습니다. 또한 state를 만들어 resetKey를 전달해야 하는 문제가 있습니다.
This has the issue of requiring `resetKey` to be passed down for deeply nested components. Additionally, you need to create a state to pass the `resetKey`.

```jsx ! Page.jsx
const Page = () => {
Expand Down Expand Up @@ -335,9 +334,9 @@ const DeepComponent = ({ resetKeys }) => (
)
```

# !!steps Suspensive가 제공하는 ErrorBoundary와 ErrorBoundaryGroup을 조합하면 이러한 문제를 매우 단순히 해결할 수 있습니다.
# !!steps By combining the ErrorBoundary and ErrorBoundaryGroup provided by Suspensive, you can solve these issues in a very straightforward way.

ErrorBoundaryGroup을 사용해보세요.
Try using `ErrorBoundaryGroup`.

```jsx ! Page.jsx
const Page = () => (
Expand All @@ -362,9 +361,9 @@ const DeepComponent = () => (
)
```

# !!steps 그런데 ErrorBoundary를 사용하다보면 특정 Error에 대해서만 처리하고 싶을 때가 있습니다.
# !!steps However, when using ErrorBoundary, there are times when you may want to handle only specific errors.

그럴 때에는 Suspensive가 제공하는 ErrorBoundary의 shouldCatch를 써보세요. 이 shouldCatch에 Error Constructor를 넣으면 해당 Error에 대해서만 처리할 수 있습니다.
In such cases, try using the `shouldCatch` feature provided by Suspensive's `ErrorBoundary`. By passing an Error Constructor to `shouldCatch`, you can handle only the specified errors.

```jsx ! Page.jsx
const Page = () => (
Expand Down Expand Up @@ -392,9 +391,9 @@ const DeepComponent = () => (
)
```

# !!steps 혹은 반대로 그 Error만 빼고 처리할 수도 있습니다.
# !!steps Alternatively, you can exclude that specific error from being handled.

그럴 때에는 shouldCatch에 callback을 넣어서 처리할 수 있습니다.
In such cases, you can handle it by passing a callback to `shouldCatch`.

```jsx ! Page.jsx
const Page = () => (
Expand Down
28 changes: 14 additions & 14 deletions docs/suspensive.org/src/pages/ko/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { HomePage, Scrollycoding } from '@/components'

# !!steps 대표적인 라이브러리인 TanStack Query로 Suspense 없이 코드를 작성한다면 이렇게 작성합니다.

이 경우 isLoading과 isError를 체크하여 로딩과 에러 상태를 처리하고 타입스크립트적으로 data에서 undefined를 제거할 수 있습니다.
이 경우 `isLoading`과 `isError`를 체크하여 로딩과 에러 상태를 처리하고 타입스크립트적으로 data에서 `undefined`를 제거할 수 있습니다.

```jsx ! Page.jsx
const Page = () => {
Expand Down Expand Up @@ -64,7 +64,7 @@ const Page = () => {

# !!steps 그런데 만약 조회해야 할 api가 더 많아진다고 가정해봅시다.

조회해야 하는 api가 더 많아진다면 이 로딩상태와 에러상태를 처리하는 코드가 더욱 복잡해집니다.
조회해야 하는 API가 더 많아진다면 이 로딩상태와 에러상태를 처리하는 코드가 더욱 복잡해집니다.

```jsx ! Page.jsx
const Page = () => {
Expand Down Expand Up @@ -109,8 +109,8 @@ const Page = () => {

# !!steps Suspense를 사용하면 타입적으로 코드가 간결해집니다. 하지만 컴포넌트의 깊이는 깊어질 수 밖에 없습니다.

useSuspenseQuery는 Suspense와 ErrorBoundary를 사용하여 외부에서 로딩과 에러 상태를 처리할 수 있습니다.
하지만 useSuspenseQuery는 hook이기 때문에 부모에 Suspense와 ErrorBoundary를 두기 위해 컴포넌트가 분리되어야만 하기 때문에 뎁스가 깊어지는 문제가 있습니다.
`useSuspenseQuery`는 `Suspense`와 `ErrorBoundary`를 사용하여 외부에서 로딩과 에러 상태를 처리할 수 있습니다.
하지만 `useSuspenseQuery`는 hook이기 때문에 부모에 `Suspense`와 `ErrorBoundary`를 두기 위해 컴포넌트가 분리되어야만 하기 때문에 뎁스가 깊어지는 문제가 있습니다.

```jsx ! Page.jsx
const Page = () => (
Expand Down Expand Up @@ -146,7 +146,7 @@ const PromotionList = ({ userId }) => {

# !!steps Suspensive의 SuspenseQuery 컴포넌트를 사용하면 hook의 제약을 피해 같은 뎁스에서 더욱 쉽게 코드를 작성할 수 있습니다.

1. SuspenseQuery를 사용하면 depth를 제거할 수 있습니다.
1. `SuspenseQuery`를 사용하면 depth를 제거할 수 있습니다.
2. UserInfo라는 컴포넌트를 제거하고 UserProfile과 같은 Presentational 컴포넌트만 남으므로 테스트하기 쉬워집니다.

```jsx ! Page.jsx
Expand Down Expand Up @@ -189,7 +189,7 @@ const Page = () => (

# !!steps Next.js와 같은 프레임워크를 사용하다보면 서버에서 Suspense를 사용하기 어려울 때가 있습니다.

혹은 서버에서 Suspense를 사용하고 싶지 않을 때가 있습니다.
혹은 서버에서 `Suspense`를 사용하고 싶지 않을 때가 있습니다.

```jsx ! Page.jsx
const Page = () => (
Expand All @@ -203,7 +203,7 @@ const Page = () => (

# !!steps 이럴 때 Suspensive의 ClientOnly를 사용하면 쉽게 해결할 수 있습니다.

ClientOnly를 감싸주기만 하면 해결됩니다.
`ClientOnly`를 감싸주기만 하면 해결됩니다.

```jsx ! Page.jsx
const Page = () => (
Expand Down Expand Up @@ -234,7 +234,7 @@ const Page = () => (
# !!steps 그런데 개발을 하다보면 Suspense에 일일이 fallback을 넣어주기 어려울 때가 있습니다.

특히 Admin과 같은 제품을 할 때 디자이너가 일일이 지정해주지 않는 경우가 있어서 기본값을 주고 싶을 때가 있습니다.
그럴 때 DefaultProps를 활용해보세요.
그럴 때 `DefaultProps`를 활용해보세요.

```jsx ! Page.jsx
const defaultProps = new DefaultProps({
Expand All @@ -256,7 +256,7 @@ const Page = () => (

# !!steps 기본 fallback이 바로 나오는 것보다는 FadeIn과 같은 효과를 주고 싶을 때가 있습니다.

그렇다면 FadeIn을 활용해보면 어떨까요?
그렇다면 `FadeIn`을 활용해보면 어떨까요?

```jsx ! Page.jsx
const defaultProps = new DefaultProps({
Expand All @@ -278,7 +278,7 @@ const Page = () => (

# !!steps 당연히 기본 fallback을 Override하고 싶다면 그냥 넣어주면 됩니다.

디자이너가 이 부분에 기본 Spinner보다 Skeleton으로 동작하도록 지원해달라고 하네요~! 그냥 넣으면 되어요
디자이너가 이 부분에 기본 `Spinner`보다 `Skeleton`으로 동작하도록 지원해달라고 하네요~! 그냥 넣으면 되어요.

```jsx ! Page.jsx
const defaultProps = new DefaultProps({
Expand Down Expand Up @@ -306,7 +306,7 @@ const Page = () => (

# !!steps ErrorBoundary의 fallback 외부에서 ErrorBoundary를 reset하고 싶을 때 resetKeys를 사용해야 합니다.

이는 깊은 컴포넌트의 경우 resetKey를 전달해야 하는 문제가 있습니다. 또한 state를 만들어 resetKey를 전달해야 하는 문제가 있습니다.
이는 깊은 컴포넌트의 경우 `resetKey`를 전달해야 하는 문제가 있습니다. 또한 state를 만들어 `resetKey`를 전달해야 하는 문제가 있습니다.

```jsx ! Page.jsx
const Page = () => {
Expand Down Expand Up @@ -337,7 +337,7 @@ const DeepComponent = ({ resetKeys }) => (

# !!steps Suspensive가 제공하는 ErrorBoundary와 ErrorBoundaryGroup을 조합하면 이러한 문제를 매우 단순히 해결할 수 있습니다.

ErrorBoundaryGroup을 사용해보세요.
`ErrorBoundaryGroup`을 사용해보세요.

```jsx ! Page.jsx
const Page = () => (
Expand All @@ -364,7 +364,7 @@ const DeepComponent = () => (

# !!steps 그런데 ErrorBoundary를 사용하다보면 특정 Error에 대해서만 처리하고 싶을 때가 있습니다.

그럴 때에는 Suspensive가 제공하는 ErrorBoundary의 shouldCatch를 써보세요. 이 shouldCatch에 Error Constructor를 넣으면 해당 Error에 대해서만 처리할 수 있습니다.
그럴 때에는 Suspensive가 제공하는 `ErrorBoundary`의 `shouldCatch`를 써보세요. 이 `shouldCatch`에 Error Constructor를 넣으면 해당 Error에 대해서만 처리할 수 있습니다.

```jsx ! Page.jsx
const Page = () => (
Expand Down Expand Up @@ -394,7 +394,7 @@ const DeepComponent = () => (

# !!steps 혹은 반대로 그 Error만 빼고 처리할 수도 있습니다.

그럴 때에는 shouldCatch에 callback을 넣어서 처리할 수 있습니다.
그럴 때에는 `shouldCatch`에 callback을 넣어서 처리할 수 있습니다.

```jsx ! Page.jsx
const Page = () => (
Expand Down

0 comments on commit 9bca0a1

Please sign in to comment.