인프런 커뮤니티 질문&답변

열씨미살자!

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

Next.js 역할 소개

브라우저 동작 과정에 대한 질문입니다.

작성

286

브라우저가 프론트서버에서 index.html을 요청하고 Index.html을 받은뒤 브라우저에서 html을 파싱하다가 script 태그를 만나면 해당 자바스크립트를 서버에 다시 요청해서 받아서 다운로드 받는것으로 알고있습니다. 강의에서 ssr 일 시에 html 과 데이터를 같이 받아온다고 하셔서 이해했었던 개념들과 같이 정리를 해보았는데

1. index.html요청

2. index.html을 브라우저에서 파싱(돔생성)

3. html 파싱하다가 script 태그를 만나면 javascript 를 서버에 요청 및 실행

4. script의 defer을 이용하여 html 파싱 이후 실행되게 만듬. 화면은 html을 뿌리고 있고 javascript가 다운로드가 완료되지 않았다면 인터렉션 효과는 잠시동안 발생되지 않을 수 있음.

5. javascript 실행 중에 비동기 data fetch 로직이 있으면 그때 프론트서버가 백엔드서버에 데이터 요청 및 응답을 받음.(브라우저가 백엔드서버에 데이터 요청을 하는지 헷갈립니다..)

6. data 를 받아와서 ... ?

6번에서 막히게 됩니다. index.html + data를 같이 받아와서 화면에 뿌려준다고 하셨는데 이해했었던 개념들이랑 충돌이나서 고민하고있습니다.. index.html에 데이터를 출력해줘야되는 영역이 있다면 바로 화면에 출력해주는 것이 아니라 data를 다 받아온뒤 index.html에 같이 뿌려주는 것인가요?

express redux nodejs react Next.js

답변 4

제로초(조현영)

지식공유자

1. GET /로 요청을 보낼 때 프론트서버에서 pages/index.js를 읽습니다. 그리고 거기서 wrapper.getServerSideProps를 발견하면 그걸 실행하고, 그 때 백엔드서버로 axios 요청이 가게 됩니다. 그 데이터를 받아와 index.js의 리액트 부분을 렌더링하면서 데이터도 같이 넣어주는 겁니다.

2. wrapper.getServerSideProps, wrapper.getStaticProps 등이 해당됩니다.

3번은 이 강좌랑 상관이 없습니다. 왜냐하면 저건 일반적인 스크립트이기 때문이죠. 일반적인 html처럼 실행됩니다. 프론트서버로부터 응답을 받은 후 script를 파싱하여 저 부분이 실행됩니다. 반면에 next.js에서는 wrapper.getServerSideProps가 프론트 서버에서 먼저 실행됩니다. 그 후 응답 데이터와 react 부분이 합쳐져서 응답으로 보내집니다.

제로초(조현영)

지식공유자

SSR에서는 4 5번 과정이 1~2번 사이에 일어납니다.

1. 특정 페이지 요청(index.html처럼 html을 요청하는 게 아닙니다. 페이지랑 html은 다른 개념입니다)

2. 프론트서버에서 특정 페이지에 들어있는 데이터 요청 파악 후 백엔드서버로 요청 보내서 받아옴

3. 받아온 데이터와 페이지 화면을 합쳐 index.html로 만들어서 프론트 전송

4. index.html을 브라우저에서 파싱(돔생성)

5. html 파싱하다가 script 태그를 만나면 javascript 를 실행

...

열씨미살자!

질문자

어느정도 이해가 간 것 같습니다. 답변 감사합니다!

열씨미살자!

질문자

잘 이해가 가지 않습니다.. 일단 계속 뒷부분 강의를 듣고있지만 앞에서 헤매고있습니다ㅠㅠ

1. index.html처럼 html을 요청하는 것이 아니라는 것. 즉 우리가 처음에 사이트에 접속하게 되면 자동으로 / 이 라우트로 접속하게 되는데 프론트서버단에서 코드로 res.get('/', index.html을 반환하는 로직)을 짜게되듯이 / 라는 페이지요청을 하면 / 에 맞는 .html 파일을 반환해준다는 건가요?

2. 프론트서버에서 특정 페이지에 들어있는 데이터 요청 파악 후 <- 이 말의 의미가 무엇일까요? ... 이부분에 대한 데이터 요청 로직은 프론트서버 로직에 있는건가요 ? 제가 지금 헷갈리는 것이 index.html에 포함되어져있는 javascript 파일에 들어가는 fetch로직이랑 헷갈려하는것같습니다.

3. 예를 들어 밑의 코드처럼 아주 간단한 코드가 있다고 한다면 브라우저 동작과정이 어떻게 되는건지 한번만 설명 가능하실까요?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script>
        const app = document.querySelector('#app')
        fetch('https://api.github.com/repos/javascript-tutorial/ko.javascript.info/commits')
            .then((res)=>res.json())
            .then((json)=>app.innerHTML = JSON.stringify(json))
    </script>
</body>
</html>

열씨미살자!

작성한 질문수

전체 Q&A

질문하기