안녕하세요. 잠시만요. 상황을 파악해야겠어요. 네.00:24

안녕하세요. 함께하게 되어 기쁩니다. 제 이름은 Dan Abramov이고, BlueSky에서 소프트웨어 엔지니어로 일하고 있습니다.00:37

저희는 조합 가능하고 오픈 소스 소셜 미디어를 만들고 있습니다. 혹시 그런 종류의 것에 관심이 있으시다면 한번 확인해보세요. 하지만 제 강연은 블루스카이에 대한 것이 아닙니다.00:47

제 강연은 리액트에 대한 내용이에요. 그리고 제목은 '투 컴퓨터를 위한 리액트'라고 해요. 이 강연에 대해 알아두셔야 할 첫 번째는 이것이 강연이라는 점이에요.00:57

네, 그렇게 생각했어요. 원래 발표가 아니었거든요. 그래서 블로그 게시물로 할까 생각했었어요.01:12

그리고 이 블로그 게시글을 쓸려고 여러 번, 아마 열서너 번 정도 시도했던 것 같아요. 아직까지 출판하지 못한 초안들이 많이 있어요. 도저히 어떻게 써야 할지 잘 모르겠더라고요.01:18

나중에 생각해보니, 그건 단지 다른 형식일 뿐이라는 것을 깨달았습니다.01:26

실제로 이렇게 대화 형식으로 하는 것이 더 자연스러울 것 같아요. 자, 그럼 강연과 블로그 게시글의 차이점은 무엇일까요? 강연은 공연의 일종입니다. 제가 여기 서 있고, 여러분들 앞에 있습니다. 제가 말하고, 행동을 하고, 어쩌면…01:31

엉망으로 만들 수도 있겠지만, 솔직히 조금 긴장되네요. 하지만 아시잖아요, 일종의 라이브 액션 같은 거고, 글로 쓰기 어려운, 공연에서만 할 수 있는 것들이 분명히 있을 거예요.01:45

강연은 단순히 공연이 아니라 이야기이기도 합니다. 그래서 제가 이야기를 하나 썼고, 이 이야기를 가지고 이렇게 오게 되었습니다. 이 이야기가 바로 이것입니다.01:57

제가 발표하는 내용이 바로 이 주제이고, 이 강연은 어느 정도 두 사람의 협업이라고 할 수 있습니다. 발표를 맡은 사람은 저입니다.02:07

지금 이 자리에서, 이 공연을 하고 있지만, 이 강연과 이야기를 썼던 과거의 저도 있습니다. 저와 과거의 저는…02:18

과거의 나와 현재의 나는 같은 공간에 있지 않아요. 시간과 공간에 의해 분리되어 있는 거죠. 과거의 나는 런던에서 뭘 써야 할지 고민하고 있고, 현재의 나는 여기 있답니다.02:31

하지만 과거의 저와 현재의 저 사이에는 일종의 소통이 있는 것 같습니다.02:41

과거의 제가 이 강연에 사용할 대본을 어느 정도 써 놓았고, 현재의 제가 그 대본을 활용해서 강연을 마무리하게 됩니다. 두 단계 모두 완료되어야 강연이 완성되는 것이죠.02:45

음, 과거의 저와 현재의 제가 맺는 관계라는 게, 마치 다른 인간관계 패턴과 비슷한 구석이 좀 있는 것 같아요. 같은 맥락이라고 할 수 있을 것 같습니다.03:02

음, 시나리오 작가와 출연진 사이의 관계처럼, 여러 요소들이 서로 영향을 미치는 구조라고 할 수 있습니다. 예를 들어, 시나리오 작가가 TV 프로그램이나 영화와 같은 작품을 작업할 때, 그 과정에서 여러 가지 요소들이 고려될 수 있습니다.03:16

작가님께서 희곡을 쓰시는 것처럼, 처음에는 희곡이 작성되는 단게가 있습니다. 하지만 그 희곡이 실제로 무대에 올려지는 것은 그 다음 단계입니다.03:30

배우분들은 실제로 이야기를 체화하시고, 마치 삶을 불어넣는 것처럼, 관객분들과 소통하시죠. 작가님의 의도를 전달하는, 일종의 두 단계 과정이라고 할 수 있습니다.03:42

배우분들은 일종의 한 방향으로 텍스트나 대본을 통해서 소통하는 경향이 있습니다. 이러한 패턴은 인간관계에서도 나타나지만, 다른 곳에서도 존재합니다.03:52

컴퓨터와의 관계, 만약 그런 개념이 존재한다면요.04:05

오늘 제가 이야기하고 싶은 패턴은 서버와 클라이언트 사이의 관계입니다. 그리고 서버와 클라이언트의 종류가 여러 가지가 있습니다.04:09

사람들은 그것에 대해 매우 다양한 의미를 부여합니다. 따라서 저는 서버와 클라이언트를 꼭 기계일 필요는 없고, 전통적인 웹 개발의 요청-응답 모델의 맥락 안에서 일종의 컴퓨터 프로그램 정도로만 이해하고 싶습니다.04:23

고객이 서버에 특정 페이지를 요청하면, 서버는 다른 컴퓨터가 실행할 수 있는 어떤 것을 응답으로 제공합니다. 예를 들어 HTML과 HTML 내부에 포함된 스크립트 같은 것들이 있을 수 있겠습니다.04:38

음, '스크립트'라는 단어를 조금 더 은유적으로 생각해 보면, HTML도 일종의 스크립트라고 할 수 있지 않나요? 컴퓨터가 표시해야 할 내용을 위한 프로그래밍 언어와 비슷하잖아요. 그래서 전체적으로 보면 일종의 스크립트라고 볼 수 있는 것 같아요.04:52

그래서 이 관계에 대해 좀 더 자세히 알아보고 싶어서요. 준비한 예시가 조금 있습니다.05:06

음, 다들 아시겠지만 고양이 이름을 짓는 건 어려운 일이죠. 그래서 가끔은 앱이 필요할 때도 있습니다.05:14

그래서 제가 간단한 앱을 하나 만들었어요. 혹시 고양이 이름을 지어야 할 때가 있으시면, 그냥 누르시면 돼요.05:27

이미 이름이 정해졌더라고요, 아시죠? 제가 그냥 'Reveal' 버튼을 누르니까, 네, 제 고양이 이름으로 선택된 게 이거네요.05:33

이 방식은 배열을 사용하는 것으로, 배열 안에 고정적으로 고양이 이름들이 저장되어 있습니다. 제가 그 배열에서 무작위 인덱스를 선택하고, 선택된 고양이 이름을 문서 본문에 표시하는 방식입니다.05:41

그리고 이건 괜찮지만, 가끔은 코딩하는 게 별로 마음에 안 들 때가 있어요. 예를 들어, 제가 여기 바로 고양이 이름 목록을 코딩하고 싶지 않을 때가 있거든요. 뭔가 유연성을 갖고 싶을 때요.05:55

데이터베이스에서 가져오거나 파일 시스템에서 읽어오거나, 아니면 챗 GPT에게 문의해 볼 수도 있을 것 같습니다.06:07

음, 잘 모르겠습니다만, 제 어플리케이션에서 필요로 하는 데이터를 어플리케이션 내에 직접 코딩하는 방식이 아니라, 어느 정도 유연성을 갖고 싶습니다.06:14

그래서 보통 이 문제를 해결하는 방법은 꽤 전통적인 방법이에요. API를 사용하는 거죠.06:24

그래서 await fetch를 사용할 거예요. catnames라는 API는 이미 준비되어 있거든요.06:32

그리고 해당 API에서 JSON 데이터를 가져올 예정입니다.06:40

그리고 JSON에서 고양이 이름을 읽어보려고 하는데, 한번 확인해 볼게요. 페이지 새로 고침을 하니 오류가 있네요. 'weight'라고 적혀 있어요.06:46

이 코드는 비동기 함수 안에서만 유효하네요. 그래서 이 함수를 비동기적으로 만들어야 할 것 같습니다. 다시 한번 새로고침을 하고 '표현'을 누르니 잘 되네요! 다행히 아무것도 망치지 않았습니다.06:58

그것은 중요한 이정표입니다. 네, 이렇게 하면 잘 작동하는 것 같습니다.07:11

아시겠지만, 이제 제가 마무리하고 갈 수 있습니다. 그런데, 제가 동작 방식에 약간의 변경을 가했는데, 지금 로딩할 때 문제가 조금 발생할 것 같습니다.07:16

페이지에 있는데, 만약 제 연결이 느려진다면, 속도 제한을 걸어서 'Reveal'을 누르면 즉각적으로 나타나지 않게 됩니다.07:28

데이터가 그때 존재하지 않아서 로딩하는 데 시간이 좀 걸리는 건데요, 사용자 인터페이스가 렌더링되는 과정 때문입니다.07:37

음, 지금 API에서 데이터를 가져와서 응답을 기다려야 하거든요. 혹시 페이지를 로딩했는데 연결이 끊기면 아예 안 나타날 수도 있고, 아...07:42

경우에 따라서는 괜찮을 수도 있습니다. 예를 들어 링크를 클릭하거나 다른 탭으로 이동할 때, 서버로 이동하는 것과 같은 방식으로 작동할 거라고 예상하는 경우가 많기 때문에, 필요합니다.07:56

알려드리자면, 데이터를 가져오거나 일부 정보를 처리할 때 약간의 지연이 발생할 수 있습니다. 예를 들어, 설정을 저장하거나 게시물을 제출하거나 사진을 '좋아요' 누르는 등의 작업은 시간이 조금 걸릴 수 있습니다.08:09

음, 네, 이런 일들이 시간이 걸리는 건 흔한 일입니다만, 사용자 인터페이스에 대해서는 저희가 어느 정도 통제권을 갖고 싶기도 합니다. 특정 인터랙션은 반드시 동기식으로 이루어져야 한다고 말씀드리고 싶습니다. 예를 들어서…08:23

화면에 데이터가 이미 존재하도록 하고 싶습니다. 나중에 불러오는 것과 같이 기다리고 싶지 않은데, 특정 상호작용에 대한 낮은 지연 시간을 보장할 수 있도록 하고 싶습니다. 어떻게 하면 좋을까요? 혹시 아이디어가 있으신가요?08:38

고객 관점에서는 이 문제를 어떻게 접근해야 할지 명확하게 드러나지 않는 것 같아요. 제가 가진 것은 이 fetch 호출밖에 없습니다.08:54

기다려야 할 것 같습니다. 제가 그 부분에서는 별로 할 수 있는 일이 없을 것 같아요. 그래서 혹시 살펴볼 수 있는 것이 있다면 서버 코드를 확인해 보는 건 어떨까요? 이쪽이 제 서버입니다.09:08

제가 만든 NPI 엔드포인트가 있는데, 파일에서 읽어들여서 고양이 이름 목록을 JSON 형태로 반환합니다.09:16

하지만 계속 내리다 보면, 여기 흥미로운 게 있네요.09:27

이곳에 스크립트 태그가 있는데, 여기는 이 페이지의 클라이언트 코드를 가리키는 코드입니다. 시각적으로 더 명확하게 하기 위해 실제로 어떤 코드인지 보여주려고 합니다.09:30

저희 프로그램에서 진행되는 내용과 프로그램의 구조에 대해 말씀드리려고 합니다. 코드 부분을 직접 복사해서 붙여넣을 예정인데, 코드를 인라인으로 스크립트에 넣는 것은 꼭 가장 좋은 방법은 아닐 수 있습니다.09:43

프로덕션 코드를 구현하는 방법은 더 효율적인 방법들이 많이 있지만, 설명을 위해 이 방법을 사용하면 코드에서 어떤 일이 벌어지는지 이해하는 데 도움이 될 것 같습니다.09:58

그리고 한번 다시 확인해 볼까요, 네, 코드가 아직 작동하는지 확인해 보죠.10:09

이전에 서버 코드와 클라이언트 코드를 서로 대화하는 두 개의 별도 프로그램으로 보고 있었어요.10:15

서로 메시지를 주고받거나, 서로 필요한 것을 요청하기도 했죠. 그런데 이제는 좀 다른 관점에서 보고 있어요. 그래서 마치 두 개의 장치를 연결해서, 두 대의 컴퓨터에 걸쳐있는 하나의 프로그램처럼 생각하고 있습니다.10:23

두 단계 정도로 평가되는 프로그램과 비슷하다고 할 수 있습니다.10:37

이 코드를 이렇게 살펴보니까, 제가 미처 알아차리지 못했을 단순화할 수 있는 최적화 기회들이 보이네요.10:43

예를 들어, 또 다시 말하자면 이 함수를 동기식으로 만들고 싶어요. 클릭 핸들러를 동기식으로 만들고 싶다는 거죠. 그래서 이 async를 제거할 건데, 이 aways들은 어디에 놓아야 할까요?10:54

음, 리액트에서 가끔 하는 방식이 있는데, 그걸 '상태 끌어올리기(lifting state up)'라고 부르죠. 부모 컴포넌트에 상태를 두고, 그 상태를 자식 컴포넌트로 전달하는 방식입니다.11:06

데이터를 상위 컴포넌트로 올리는 대신, 상위 컴퓨터로 데이터를 올릴 수 있다면 어떨까요?11:16

서버로 데이터를 올려요. 여기 있는 걸 그냥 복사해서 붙여 넣을 거예요. 여기다 넣을게요.11:26

재미있네요, 색깔도 화려해졌어요. 이전에 전부 초록색이었거든요. 이 초록색 글꼴은 제게 매트릭스 영화가 떠오르게 해요, 그냥 보이잖아요.11:36

안에 있으면 진짜 세상이라고 생각하죠. 하지만 사실은 아니에요. 이건 진짜 세상이 아니고, 서버 안에 계신 거에요.11:51

네, 한번 작동하는지 확인해 보겠습니다. 쿵, 작동하지 않네요.12:03

음, 작동하지 않는 이유는 지금 이 fetch 요청이 서버에서 일어나고 있기 때문에, 서버가 스스로 추측할 수 없어서 호스트를 명시적으로 지정해야 할 것 같습니다.12:07

그래서 '표현하기'를 누르려고 해도 계속 작동하지 않아요. '참조 오류: JSON이 정의되지 않았습니다'라고 표시되어서요.12:19

여기 페이지에서 확인하고 있는데, 물론 저는 이 JSON 변수를 사용하고 있지만, 사실은 여기에서 정의되었습니다. 그리고 이 함수가 일반적인 중첩 함수가 아니었다면 그냥 그렇게 작동했을 겁니다. 단순히 클로저일 뿐이지만, 저희가 무엇을...12:30

여기서 시도하고 있는 것은 좀 더 네트워크 덮개를 이용한 클로저 같은데, 이건 좀 이상하네요. 어떻게 하면 이게 작동할까요?12:43

하나의 방법은 JSON의 목적이 무엇인지 알아보는 것일 수 있잖아요. 네트워크로 보낼 수 있는 자료 말이죠.12:53

그래서, 이 프로그램은 또 다른 프로그램을 텍스트 조각, 문자열 형태로 보내는 프로그램입니다. 그래서, 저희는 이 JSON을 문자열로 변환해서 저희 프로그램과 함께 보낼 수 있습니다.13:01

JSON.stringify를 호출해 볼게요. 와, 잘 작동하네요.13:13

그리고 지금 주목해야 할 점은 페이지를 로드하고 '표현하기'를 누르면 네트워크 요청이 발생하지 않는다는 것입니다. 그 이유는 데이터가 이미 여기에 있기 때문입니다.13:24

이미 페이지에 다 올라와 있어요. 그래서 클라이언트와 서버를 생각하는 방식이 꽤 흥미로운 것 같아요.13:36

저는 그냥 이 토끼굴을 계속 따라가서 어디로 이어지는지 한번 지켜보려고 합니다.13:46

음, 제가 알아차리고 있는 또 다른 점은, 네, 예를 들어 서버에 접속해서 이 페이지를 보여주고 싶을 때, 가장 먼저 일어나는 일은, 아시다시피 API를 호출하는 건데, 그게 어디에서 일어나는 걸까요?13:53

음, 저희가 이 API를 제공하는 서버와 동일한 서버에 접속했는데, JSON 형태로 응답을 반환하고, 이렇게 보여주더라고요. 그래서 제가 '이것에 정말 API가 필요할까요?'라고 생각했습니다.14:07

음, 어쩌면 몇몇 경우에는 그렇겠지만, 아마 이 경우에는 아닐 것 같습니다. 제가 사용 경험이 하나밖에 없어서, 코드를 여기 붙여넣을 예정이고, API 핸들러는 삭제할 거예요.14:16

한번 제대로 작동하는지 확인해 봅시다. 음, 아마 추상화에 대해 이야기할 수도 있겠죠?14:28

관심사 분리 문제는 어떻게 되나요? 만약 이 코드를 여기에서 가지고 싶지 않다면, 항상 다른 파일로 옮길 수 있습니다.14:37

모듈로 옮겨서 이름을 붙일 수도 있어요. API가 분리된 관심사를 강제하지 않았던 것도 맞고요. 그래서, 이런 걸 할 수 있는 도구는 여전히 남아있고, 정말 그렇게 하고 싶다면 이 부분을 추출할 수도 있습니다.14:45

네, 알겠습니다. 제가 뭘 해야 할지 잊어버렸어요. 네, 알겠습니다. 응답을 살펴보면 또 다른 걸 알아차릴 수 있습니다.15:02

지금 일어나고 있는 일은 고양이 이름 목록이 JSON 형식으로 줄을 잇고 있지만, 실제로는 꽤 길다는 것입니다.15:15

하지만 서버와 클라이언트 측면 모두 포함하여 전체 그림을 갖게 되면서 데이터가 어떻게 흘러가는지 관계도 파악하게 됩니다.15:22

API를 클라이언트 코드로 가져와서 거기서 어떻게 사용되는지 알 수 있어요. 그래서 제가 이 곳에서 고양이 이름들이 여기로 흐르는 것을 발견했고, 그 중에서 무작위로 하나를 선택하는 것을 확인했어요.15:33

사실 저는 그것들 중 하나만 필요하거든요, 그래서 전부 보내는 건 말이 안 돼요. 아마 이 라인들을 그냥 가져와서, 더 위로 옮기고 추출해 놓을까 봐요.15:46

여기에 넣어두겠습니다. 그래서 이건 이 컴퓨터에서 미리 할 수 있는 일이 있고, JSON을 통해 고양이 이름을 전달할 수 있죠. 그리고 지금 페이지를 새로고침하고 '표현하기'를 누르면, 여전히 작동하는 것을 확인할 수 있습니다.15:56

페이지에 표시된 데이터를 살펴보니, 이것 하나에 대한 데이터일 뿐인 것 같습니다.16:10

음, 그러니까, 이 파일에 많은 변경 사항을 적용했는데, 거의 완전히 뒤집었다고 할 수 있을 것 같아요. 그래서 지금 결과물을 한번 살펴보고, 이 결과물의 형태가 어떻게 나타나는지 확인하고 싶습니다.16:18

음, 꽤 지저분해 보일 수도 있죠. 마치, 있잖아요, 2003년쯤 PHP로 썼던 코드처럼 보일 수도 있다는 반응도 있을 수 있겠네요. 문자열을 삽입하고, 그냥 이것저것 전달하면서, 마치 미친 과학자처럼요.16:32

만약 기능적으로 뇌를 사용하신다면, 아마 이 기능을 부분적인 네트워크 적용이라고 생각하실 수도 있을 겁니다.16:48

함수를 여러 단계로 적용하는 이런 개념이 있어요. 그런데 이건 그와 비슷하지만, 그 사이에 네트워크 단계가 있어서 꽤 흥미롭네요.16:57

하지만 제가 이 문제를 주로 그렇게 보는 이유는, 문제에 불필요한 모든 경계를 제거했기 때문이라고 생각해요. 아시다시피, 우리가 제거할 수 있는 모든 경계를 제거했고, 남은 경계는 물리 법칙에 의해 결정되는 것이죠.17:07

그래서 이 코드는 처음에 이 컴퓨터에서 실행해야 하고, 그런 다음 이 코드를 다른 컴퓨터로 보내서 나중에 실행해야 합니다. 그리고 이 코드와 함께 데이터를 함께 전달할 수 있죠.17:22

그래서 이게 정말로 문제의 근본적인 형태입니다. 어떤 라이브러리를 사용하든 어떤 접근 방식을 사용하든, 겉모습은 이와 같이 보일 거예요.17:38

그래서, 두 개의 다른 세상이 있어요. 이 코드는 한 세상에서 실행되고, 이 코드는 다른 세상에서 실행된다는 거죠. 그리고 저는 데이터가 애플리케이션을 통해 흐르는 방식이 명확하게 분리되어 있다는 점이 마음에 들어요.17:53

하지만 물론, 저는 두 가지 이유로 이와 같은 코드를 실제로 작성하고 싶지는 않을 거예요. 한 가지 이유는 문자열 안에서 코드를 작성하고 싶지 않기 때문입니다.18:05

그렇게 되면 말이 안 되잖아요. 저는 코드 하이라이팅 기능도 필요하고, 모듈 기능도 필요하고, 타입 검사 기능도 필요해서요. 이런 건 실제 프로덕션 환경에서 사용하기는 좀 어렵겠네요. 그리고 또 다른 문제도 있어요.18:16

이 코드는 복잡해질 가능성이 높아서, 기능을 계속 추가하다 보면 버튼을 여러 번 표시하고 싶어도 여기저기에 많은 부분을 추가해야 할 것 같습니다.18:30

그리고 저는 아마 그들을 연결해야 할 텐데요. 만약 우리가 함수를 다른 함수로 분리하고, 제품 기능에 해당하는 이름을 부여할 수 있는 방법이 있다면 얼마나 좋을까요?18:43

이렇게 기능을 하나로 묶어두는 대신, 좀 더 개념적으로 분리해서 처리할 수 있으면 좋을 것 같습니다.18:58

물론, 이 개념과 그 구성 요소들에 대해 가지고 있습니다. 아마 이와 같은 코드가 컴포넌트 기반 세계에서 어떻게 구현될 수 있는지 살펴보는 것이 좋겠습니다.19:05

음, 여기에서 몇 가지 부분을 발췌해서 어떻게 표현되는지 살펴보겠습니다.19:20

먼저 컴포넌트에서 할 일은 이름을 붙이는 거예요. 여기서는 이걸 '고양이 이름 생성기'라고 부르겠어요. 왜냐하면 이게 하는 일이니까요. 그리고 이걸 내보내야 하고, 비동기 함수가 될 거예요.19:26

그리고 이 읽어낸 파일 부분은 필요하지만, URL 부분은 필요하지 않습니다. 특정 부분에 정말 집중하고 있어서요, 본문 태그는 필요 없고, 딱 이 부분만 필요합니다.19:41

고양이 이름 생성기의 논리적인 부분에 좀 더 집중하다 보니, 이러한 요소들이 모두 필요할 것 같아서 복사해서 붙여넣고, 그 다음에 무언가를 해야 할 것 같습니다.19:54

아직 정확히 뭘 해야 할지는 모르겠지만, 조금만 기다렸다가 살펴볼게요. 여기 뭐가 있나 한번 볼까요? 관련된 HTML 코드는 꽤 많이 있는데, 지금은 크게 중요하지 않아 보이네요.20:07

하지만 이 공개 버튼은 제가 렌더링하고 싶은 부분에 분명히 포함되는 것 같아요. 그리고 클릭 핸들러가 있는데, 이 클릭 핸들러는 일부 정보에 의존하고 있네요.20:19

여기서 제가 하고 싶은 말은, 이 정보, 이 JSON 데이터는 이 내부 코드들이 실행되기 전에 이미 알려진 상태라는 점입니다. 그래서 어느 정도...20:30

뽑아서 여기다가 놓을 수 있어요. 상관없어요, 로딩될 때 이미 사용 가능한 상태거든요. 지금 이렇게 살펴보니 여기에는... 가 보이네요.20:44

이 텍스트를 입력하고 보니 마치 props를 가진 React 컴포넌트처럼 보여서, 이걸 prop으로 전달해볼게요. 그리고 이 이벤트 핸들러는 복사해서 붙여넣겠습니다.20:53

자, 확인해 보겠습니다. 그리고 이 버튼을 복사해서 붙여 넣을게요. 그러면 버튼이 될 거예요.21:07

이것은 h이고, 이것은 jsx입니다. HTML이 아니므로, 약간 문법을 바꿔야 할 것 같아요. 그리고 이것에 이름을 붙여줘야 할 것 같습니다. 지금은 이름이 없어서, 일단 'reveal 버튼'이라고 부르겠습니다.21:18

제 버튼이 여기 있습니다.21:33

그래서, 제가 하고 싶은 다음 논리적인 일은, 외부의 것에서 내부의 것으로 정보를 전달하고 싶다는 겁니다. 아시죠?21:38

음, 저는 이 버튼을 고양이 이름과 함께 나타나도록 렌더링하는 것을, 음, 자연스럽다고 생각합니다.21:48

혹시 이것으로 끝인가요, 아니면 깜빡한 게 있을까요? 제가 생각하기에는 뭔가 빠뜨린 것 같아요.22:00

이 초록색 부분들은 어때요? 분명히 뭔가가 있잖아요, 그렇죠? 물리 법칙에 의해 결정되는 일종의 경계가 있는 것 같아요.22:06

저기, 아시다시피, 이건 정말 완전히 별개의 세상이에요. 이 코드가 다른 컴퓨터에서 실행될 수도 있잖아요.22:16

아마 훨씬 더 빨리 실행될 수도 있습니다. 그리고 있잖아요, 과거에 이 발표를 준비했던 저와 현재 이 발표를 하고 있는 제가 같은 공간에 동시에 존재할 수 없는 것처럼, 이 두 가지 구성 요소도 같은 파일 안에 있을 수 없습니다.22:28

물리학 법칙을 깨뜨립니다. 그럼, 우리는 어떻게 해야 할까요?22:42

이것저것 제가 할 일 중 하나는, 사실 이 두 가지가 정말로 두 개의 다른 프로그램이라는 점을 인정하는 거예요. 이 두 프로그램은 서로 다른 환경에서, 또 다른 시점에 실행되거든요.22:47

이들을 하나의 대상으로 생각하지 않는 편이 좋겠는데, 방금 말씀드린 내용과 모순되는 것처럼 들릴 수 있지만, 어떤 명확한 경계가 존재하는 것 같습니다.23:00

그분들 사이에는 음, 그리고, 생각해 보면 이 프로그램은 완전히 별개의 프로그램입니다. 그러니까, 이 프로그램은 서버에서 실행되고, 만약 무언가를 가져온다면, 그것 또한 그곳에 있을 겁니다.23:09

그리고 나서 이 부분은 브라우저에서 무언가를 불러올 때 실행되는 부분입니다. 음, 이 사이에 정보를 어떻게 전달해야 할까요? 여기 정보를 어떻게 넘겨야 할까요?23:21

거기서 저는 일종의 문자열을 입력하는 것처럼, 한 세계에서 다른 세계로 이동할 수 있는 공간 같은 곳에 들어가는 것 같습니다. 그렇게 이동하면서 어떤 데이터라도 함께 가지고 들어갈 수 있을 것 같아요.23:35

혹시 두 개의 별개의 프로그램이지만, 그 사이에 문을 열어 연결할 수 있는 방법이 있다면 어떨까요? 이 문은 한 방향으로만 작동하며, 자료를 통과시킬 수는 있지만, 과거의 어떤 것을 통과시키는 것은 아닙니다.23:48

미래는 텍스트나 JSON, 혹은 직렬화될 수 있는 것들만이 통과할 수 있습니다. 그러니 문을 하나 추가해 볼까요?24:03

이것이 문이고, 이것은 초록색 물질입니다. 아시죠, 마치 매트릭스 안에서, 밖에서 초록색 화면을 보면서 무슨 뜻인지 이해하지 못하는 것처럼요.24:14

무슨 일이 일어나는지 궁금하셨을 텐데, 그런데 매트릭스 안에 들어가면 마치 모든 것이 평범하게 보이는 것 같아요.24:26

저, 이제 매트릭스에 들어온 것 같습니다.24:34

네, 그렇습니다. 실제로 작동하는지 확인해 보겠습니다. 저는 Next.js를 사용하고 있지만, 이 예제는 React 서버 컴포넌트를 지원하는 다른 프레임워크에서도 사용 가능합니다.24:40

그리고 여기에서 reveal 버튼이 있습니다. 눌러보면 결과가 나타나요. 다시 한번, 기대하는 대로 잘 작동하는지 확인해 볼까요.24:53

페이지를 새로고침하고, reveal 버튼을 누릅니다. 별도의 네트워크 요청은 없어요, 왜냐하면 서버 쪽 부분은 이미 실행되었기 때문입니다.25:01

HTML을 보면은, 여기 많은 것들이 있어요. 하지만, 여기쯤에 고양이 이름이 들어있는 프로퍼티들이 있을 거예요.25:11

이것이 문을 통해 전달되는 물건들이네요.25:22

그래서 왜 이런 일을 하고 싶어 하시는지, 음… 그 이유는 지금 저희가 컴포넌트로 생각하고 있기 때문에 컴포넌트로서 할 수 있는 모든 것을 할 수 있다는 점입니다. 즉, 중첩해서 사용할 수 있습니다.25:31

네, 여러 개를 렌더링하고, 각 컴포넌트마다 정보를 한 환경에서 다른 환경으로 전달할 수 있는 핸드오프 포인트 같은 것들이 있을 수 있습니다. 지금은 보여드리지 않겠지만, 오늘 여러 세션에서 이러한 아이디어에 대해 더 자세히 다루는 내용이 있을 거예요.25:44

확인해 보시는 것을 권장합니다.25:59

그리고 제가 잠시 되돌아가서 현재 상황을 다시 한번 정리하고 싶습니다.26:02

우리는 보통 클라이언트와 서버를 별개의 프로그램으로 생각하죠.26:13

하지만 웹 페이지 렌더링이나 UI 렌더링을 마치 두 대의 컴퓨터로 분산된 하나의 프로그램처럼 생각할 수도 있습니다.26:18

그리고 일반적인 자바스크립트 표현 방식을 살펴볼 때, 작동 방식은 이 부분이 서버 측에서 실행되고, 그 다음에 클라이언트 측에서 실행될 프로그램 코드를 방출하는 방식으로 진행됩니다.26:29

데이터를 전달할 수 있는 일종의 구멍이 있는데, JSON 형식으로 변환될 수 있는 데이터들만 그 구멍을 통과할 수 있습니다.26:44

이 두 단계가 모두 완료되면 프로그램이 완성됩니다. 다시 React 버전으로 살펴보면, 서버가 존재합니다.26:55

이 세상에 존재하는 부분을 가지고, 데이터를 많이 준비할 수 있고, 그리고 나서 선택할 수 있죠. 여기 문이 있습니다.27:08

모든 모듈에 문이 있는 것은 아니지만, 만약 문이 있다면, 이 모듈은 서버로부터 데이터를 받을 수 있다는 의미를 전달하는 것과 같습니다.27:16

위에 있는 곳뿐만 아니라 대문자 위에 있는 곳에서도 프로퍼티를 받을 수 있어요. 과거의 다른 컴퓨터에서 프로퍼티를 받는 것처럼요.27:25

정보의 블랙홀과 같아요. 그리고, 음, 이건 이 프로그램의 두 번째 단계라고 할 수 있겠네요.27:33

이것처럼 두 단계로 구성된 프로그램인데, 흥미로운 점은 실용적인 이유로 서버에서는 두 단계를 모두 실행하고 싶다는 것입니다.27:41

원하는 HTML을 생성하기 위해 이 단계를 초기 상태로 실행하게 됩니다. 그러면 HTML을 얻게 되지만, 클라이언트 측에서 이 부분을 수정하고 싶을 수도 있습니다.27:52

이러한 방식으로 스테이지 변경에 반응하여 업데이트되고 다시 렌더링될 수 있도록 생각하시면 됩니다. 마치 두 대의 컴퓨터를 위한 프로그램이고, 이것이 첫 번째 단계이며, 이와 같이 설명되어 있습니다.28:02

다음에는 무엇을 하실 예정이신가요. 그리고 이건 코드를 의미하고, 이 데이터는 코드가 필요로 하는 데이터입니다. 서버에 다시 접속할 필요 없이 바로 이용 가능하며, 정말 편리합니다.28:16

정보가 통과하는 문을 통해서요, 이와 같은 정보를 전달할 수 있도록 하는 문을 말씀드리는 겁니다. 그리고 저는 이 강연을 준비해 왔고, 이것이 과정의 첫 번째 단계였습니다. 현재는…28:26

이 강연과 함께 저희는 프로세스의 두 번째 단계에 접어들었으며, 이제 계산이 완료되었습니다. 감사합니다.28:40