Safari 브라우저에서 PASS 본인인증 팝업이 뜨지 않는 이슈였다.

중요도가 높았던 이유는 회원가입이나 요금제를 신청하거나 마이페이지에서 수정할 때 본인인증이 필수 프로세스이며 아이폰, 맥북에서 Safari를 주로 사용하는 사용자들도 있기 때문이다.

Safari에서 본인인증 버튼을 클릭했을 때 팝업이 차단되었다는 문구가 떴다. 맥북에서는 해당 문구를 확인하고 차단된 팝업을 허용하면 되지만, 아이폰에서는 버튼을 클릭했을 때 아무런 동작을 하지 않아서 사용자가 왜 안되는지 알 수 없는 상태였다.

원인 파악

PASS 본인인증 프로세스는 간단하게 설명하면 다음처럼 진행된다.

1. 클라이언트로부터 이벤트 발생 시 서버에게 본인인증 html 파일을 요청
2. 전달받은 html 파일을 팝업창으로 띄움
3. 본인인증을 마친 클라이언트의 결과값을 콜백으로 전달받아 결과에 맞게 처리

대부분의 복잡한 인증 로직은 서버에서 처리해주므로 프론트에서 처리할건 html 파일을 팝업창으로 보여주는 것 뿐이다.

팝업창을 띄우는 코드는 다음과 같다.

const openPassPopup = async (action = 'signup') => {
    try {
        const res = await fetch('서버 API')
        return new Promise((resolve, reject) => {
            if (res.code === 200 && res.data) {
                const listener = (event) => {
                    window.removeEventListener('message', listener)
                    if (event?.data?.message === 'PassPopupClosed') {
                        resolve(event.data.result)
                    } else {
                        reject(null)
                    }
                }
                window.removeEventListener('message', listener)
                window.addEventListener('message', listener, false)
                const authWindow = window.open(
                    '',
                    '_blank',
                    'width=500, height=550, top=0, left=100, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=no, scrollbar=no'
                )
                if (authWindow) {
                    authWindow.document.open()
                    authWindow.document.write(data)
                    authWindow.document.close()
                }
            } else {
                reject(null)
            }
        })
    } catch (error) {
        throw error
    }
}

위 코드를 간단하게 하면 아래 코드처럼 동작하고, 이는 사파리 브라우저에서 정상적으로 동작하지 않게 된다.

const openPassPopup = async (action = 'signup') => {
  await 비동기
  window.open('', '_blank') // 동작 안함
  // window.open(url, target, windowFeatures)
}

그 이유는 사파리 브라우저에서는 비동기 호출 후 이루어지는 window.open() 호출을 차단하기 때문이다.

사파리에서는 사용자 클릭 이벤트에서만 window.open을 통한 팝업을 허용하며, 보안 정책 중 하나로 script의 팝업 호출을 제한하고 있다.

해결 방법

비동기 호출 하기 전에 window.open을 호출하고 전달 받은 html 파일을 보여주는 방식으로 해결했다.

const openPassPopup = async (action = 'signup') => {
    try {
          const authWindow = window.open(
            '',
            '_blank',
            'width=500, height=550, top=0, left=100, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=no, scrollbar=no'
        )
        const res = await fetch('서버 API')
        return new Promise((resolve, reject) => {
            if (res.code === 200 && res.data) {
                ...

                if (authWindow) {
                    authWindow.document.open()
                    authWindow.document.write(data)
                    authWindow.document.close()
                }
            } else {
                reject(null)
            }
        })
    } catch (error) {
        throw error
    }
}

이렇게 팝업창을 미리 띄우고, api 호출로 받아온 데이터를 받아온다.

띄운 팝업창에 document.open()으로 기존에 있던 페이지 내용을 지우고 document.write(data)로 받아온 html 파일로 내용을 작성한 뒤 document.close()로 페이지를 완성함으로써 추가로 write를 할 수 없는 상태이다.

추가 이슈 사항들

window.open할 때 target을 '_blank'로 작성하고 팝업을 띄우면, 버튼을 클릭할 때마다 중복된 팝업이 계속 뜨는 버그가 발생하게 된다.

MDN에서도 target='_blank'는 피하는 것을 권고하고 있다.

그래서 다음과 같이 수정하여 해결했다.

const authWindow = window.open(
    '',
    'passPopup',
    'width=500, height=550, top=0, left=100, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=no, scrollbar=no'
)

이렇게 함으로써 중복으로 뜨는 이슈는 해결했지만, 현재 창이 떠있을 때 한 번 더 클릭하면 에러가 발생하게 된다.

이를 해결하기 위해 팝업창이 있으면 닫고 다시 띄우도록 수정해줬다.

let authWindow: Window | null

if (authWindow) {
  authWindow.close()
}

authWindow = window.open(
    '',
    'passPopup',
    'width=500, height=550, top=0, left=100, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=no, scrollbar=no'
)

...

IDaaS란?

Identity as a Service의 줄임말인 IDaaS는 SaaS의 한 유형으로 클라우드 기반 중앙 관리 시스템입니다.

IDaaS 서비스의 목적은 사용자의 신원을 확인하여 소프트웨어 애플리케이션, 파일 또는 기타 리소스에 따라 적합한 엑세스 권한을 적시에 제공하는 것입니다.

클라우드 서비스 모델(SaaS, PaaS, IaaS, FaaS)을 생각하면 이해하기 쉽습니다.

주로 제공하는 기능으로 다음과 같이 있습니다.

• IAM(Identity and Access Management)
• SSO(Single Sign-On)
• MFA(Adaptive Multi-Factor Authentication)
• 보고 및 분석
• 솔루션/앱 연동 및 요금 비교
• 비정상적인 접속 차단
• 인사 동기화

IAM

ID 및 액세스 관리(identity and access management, IAM)는 올바른 엔티티(개인 또는 장치)가 올바를 리소스(애플리케이션 또는 데이터)를 적시에 원하는 디바이스로 방해 없이 사용할 수 있게 해주는 보안 정책입니다.

IAM은 IT 관리자가 단일 디지털 ID(테넌트 ID)를 각 엔티티(사용자 또는 장치)에 지정하고, 로그인 시 사용자를 인증하며, 지정된 리소스에 접근할 수 있는 권한을 부여하는 과정들을 모니터링 및 관리할 수 있는 시스템과 프로세스로 구성되어 있습니다.

주요 기능

• 사용자 관리: 사용자 계정 생성, 수정, 삭제
• 접근 권한 관리: 사용자 역할에 따라 특정 리소스에 대한 접근 권한을 설정
• 정책 관리: 보안 정책 및 규정을 설정하고 관리
• 감사 및 컴플라이언스: 사용자 활동 및 접근 기록을 추적하여 규정 준수를 지원

IAM의 예시로 AWS IAM이 있으며, AWS 리소스에 대한 접근을 관리할 수 있도록 도와줍니다.

SSO

SSO(Single Sign-On) 솔루션은 사용자가 하나의 자격증명으로 필요한 모든 애플리케이션에 접근할 수 있도록하는 것으로, 간편 로그인을 지원합니다.

이를 통해 여러 사용자 이름과 비밀번호를 기억할 필요가 없고, 생산성이 높아지며 원활한 환경을 제공합니다.

IdP

Identity Provider, ID 공급자(IdP)는 사용자의 디지털 ID를 저장하고 관리하여, 이를 기반으로 다양한 서비스에 대한 접근을 제공하는 시스템입니다.

주요 기능

• 사용자 인증
• 아이덴티티 관리
• SSO 지원
• SAML, OAuth, OpenID Connect 지원

대표적인 예시로 Google이 있습니다.

Google은 Google 계정을 통해 다양한 Google 서비스(예: Gmail, Google Drive)에 SSO 기능을 제공합니다.

IdP가 사용자 인증을 처리한 뒤 SSO는 인증 정보를 가지고 여러 서비스 접근에 사용합니다.

SAML

SAML(Security Assertion Markup Language)은 인증 정보 제공자와 서비스 제공자 간의 인증 및 인가 데이터를 교환하기 위한 XML 기반의 표준 데이터 포맷이다.

SAML은 인증 정보를 XML 포맷으로 생성하고, 이 XML 데이터를 암호화하여 제 3자에게 노출시키지 않고 전달할 수 있다.

OIDC

OIDC(OpenID Connect)는 OAuth 2.0위에 구축된 인증 프로토콜로 Json Web Token(JWT) 표준을 사용하는 완전한 인증 및 권한 부여 프로토콜입니다.

OIDC는 Authentication(인증)을 위한 기술이고, OAuth는 Authorization(인가)을 위한 기술입니다.

• 인증은 사용자가 누구인지 확인하는 절차
• 인가는 사용자가 요청한 자원에 대해 권한이 있는지 확인하는 절차

LDAP

LDAP(Lightweight Directory Access Protocol)은 사용자가 네트워크 상에서 조직, 구성원 등에 대한 데이터를 찾는데 도움이 되는 프로토콜입니다.

LDAP는 경량화된 버전의 디렉터리 서비스 프로토콜로, 효율적이고 빠른 데이터 접근을 제공합니다.

• 디렉터리 서비스: LDAP는 사용자, 그룹, 컴퓨터 및 기타 리소스에 대한 정보를 저장하는 데이터베이스 역할을 합니다. 이러한 정보는 계층적 구조로 조직됩니다.

• 객체와 속성: LDAP 디렉터리는 객체(예: 사용자, 그룹)와 그 객체의 속성(예: 이름, 이메일, 전화번호)으로 구성됩니다. 각 객체는 고유한 DN(Distinguished Name)으로 식별됩니다.

• 계층 구조: LDAP 디렉터리는 트리 구조로 구성되어 있어, 조직의 구조를 쉽게 표현할 수 있습니다. 예를 들어, 부서별로 그룹화하여 관리할 수 있습니다.

LDAP는 디렉터리 내에서 정보를 효율적으로 검색할 수 있는 기능을 제공하며, 사용자 및 리소스 정보를 추가, 수정, 삭제하는 중앙 집중식 데이터 관리가 가능합니다.

MFA

MFA(Multi-Factor Authentication), 다중 인증은 애플리케이션에 접근하기 위해 사용자 이름과 비밀번호의 조합보다 더 안전하게 사용자 신원을 확인하는 방법입니다.

MFA의 한 유형인 2FA는 비밀번호외에 추가 인증 요소를 포함한 인증 프로세스입니다.

2FA 인증 요소에는 다음과 같이 있습니다.

• SMS 기반
• 보안 앱 (Google Authenticator)
• FIDO (패스키, 암호화 키, 얼굴, 지문 등)
• Sound-Proof: 장치에 내장된 마이크에 주변 소음으로 확인하는 방법
• QR 코드

참고

• okta - IDaaS란? IDaas의 특징 및 이점 알아보기
• entrust - IDaaS(Identity as a Service)란 무엇인가요?
• jumpcloud - IAM vs. IDaaS: What’s the Difference?
• cloudflare - ID 및 액세스 관리(IAM)란 무엇입니까?
• cloudflare - ID 공급자(IdP)는 무엇입니까?
• cloudflare - SSO란? | 싱글 사인온의 작동 방식
• cloudflare - 다단계 인증(MFA)이란?
• IBM - 어디서나 가능한 다단계 인증(MFA)
• 호다닥 공부해보는 SSO와 친구들 (SAML, OAuth, OIDC)
• okta - OAuth, OpenID Connect, SAML의 특징 및 차이점
• red hat - 10.3. SAML과 OpenID Connect 비교
• red hat - LDAP(Lightweight Directory Access Protocol) 인증이란?

• 메시지가 어떻게 흘러가는가
• HTTP 메시지 시작줄, 헤더, 본문
• 요청과 응답 메시지의 차이
• 요청 메시지의 메서드들
• 응답 메시지의 상태 코드들

메시지의 흐름

메시지는 원 서버 방향을 인바운드로 송신하고, 모든 처리가 끝난 뒤에 메시지가 사용자 에이전트 방향인 아웃바운드로 이동한다.

HTTP 메시지는 요청 메시지 또는 응답 메시지에 관계없이 다운스트림으로 흐른다.

즉, 메시지의 발송자는 수신자의 업스트림이 된다.

HTTP 메시지는 시작줄, 헤더 블록, 본문으로 이루어진다.

시작줄은 어떤 메시지인지를, 헤더 블록은 속성을, 본문은 데이터를 담고 있다. 본문은 아예 없을 수도 있다.

시작줄과 헤더는 줄 단위로 분리된 아스키 문자열이다.

각 줄은 캐리지 리턴과 개행 문자로 구성된 두 글자의 줄바꿈 문자열이며, 이를 CRLF라고 쓴다.

메시지 문법

요청 메시지의 형식은 다음과 같다.

<메서드> <요청 URL> <버전>
<헤더>

<엔터티 본문>

응답 메시지의 형식은 다음과 같다.

<버전> <상태 코드> <사유 구절>
<헤더>

<엔터티 본문>

• 메서드: 클라이언트 측에서 서버가 리소스에 대해 수행하길 바라는 동작으로 GET, HEAD, POST등이 있다.
• 요청 URL: 요청 대상이 되는 리소스를 지칭하는 완전한 URL 혹은 URL의 경로 구성 요소다. (절대 경로, 상대 경로 해당)
• 버전: 메시지에서 사용 중인 HTTP의 버전이다. 버전의 형식 HTTP/<메이저>, <마이너>
• 상태 코드: 요청 중에 무엇이 일어났는지 설명하는 세 자리 숫자이다. 보통 각 코드의 첫 번째 자릿수는 상태의 일반적인 분류를 나타낸다.
• 사유 구절: 숫자로 된 상태 코드를 사람이 이해하기 위해 설명해주는 짧은 문구다. HTTP/1.0 200 OK
• 헤더: 헤더는 0개 이상으로 이루어지며 요청과 응답의 추가 정보를 더해준다. 기본적으로 이름/값 쌍의 목록이다.
• 엔터티 본문: 임의의 데이터 블록을 포함하며, 모든 메시지가 엔터티 본문을 갖는 것은 아니다.

메서드

안전한 메서드 (Safe Method)

GET과 HEAD 메서드는 안전한 메서드라고 볼 수 있는데, HTTP의 요청의 결과로 서버에 어떤 작용도 없음을 의미한다.

즉, HTTP 요청의 결과로 서버에서 어떠한 일도 일어나지 않는다는 것이다.

안전한 메서드가 서버에 작용을 유발하지 않는다는 보장은 없지만, 안전하지 않은 메서드가 사용될 때 사용자들에게 그 사실을 알려주도록 설계 해야한다.

GET

GET 메서드는 가장 흔히 쓰이는 메서드이며, 주로 서버에게 리소스를 달라고 요청하기 위해 쓰인다.

HEAD

HEAD 메서드는 정확히 GET처럼 행동하지만, 서버는 응답으로 헤더만 반환한다. 엔터티 본문은 반환되지 않는다.

이는 클라이언트가 리소스를 실제로 가져올 필요 없이 헤더만 조사하는 역할을 한다

• 리소스를 가져오지 않고, 헤더를 통해 타입 등을 알아낼 수 있다.
• 응답의 상태 코드를 통해, 리소스가 존재하는지 확인할 수 있다.
• 헤더를 확인하여 리소스가 변경되었는지 검사할 수 있다.

PUT

GET 메서드는 서버로부터 문서를 읽는 반면에, PUT 메서드는 서버에 문서를 쓰는 역할을 한다.

서버가 요청의 본문을 가지고 새 문서를 만들거나, 이미 URL이 존재한다면 본문을 사용해서 교체해준다.

POST

POST 메서드는 서버에 입력 데이터를 전송하기 위해 설계되었다. 특히 HTML에 Form을 지원할 때 흔히 사용된다.

PUT과 POST에 가장 큰 차이점은 동일한 요청(문서 생성)을 여러번 보낼 때 PUT 메서드는 교체를 하지만, POST는 요청에 맞게 여러번 생성하게 된다. 이런 특성으로 PUT 메서드는 멱등하고, POST는 멱등하지 않다.

입력 받은 Form 데이터는 서버로 전송되며, 서버는 이를 모아 필요로 하는 곳에 보낸다.

TRACE

클라이언트가 어떤 요청을 할 때, 그 요청은 방화벽, 프록시, 게이트웨이 등의 애플리케이션을 통과할 수 있다.

각각을 통과할 때 HTTP 요청을 수정할 수 있는데, TRACE 메서드는 클라이언트에게 자신의 요청이 서버에 도달했을 때 어떻게 보이게 되는지를 알려준다.

따라서 TRACE 메서드는 주로 진단을 위해 사용된다. 예를 들면 요청이 의도한 요청/응답 연쇄 과정을 거쳐가는지 검사할 수 있다.

응답 헤더를 보면 Via헤더가 있는데 이를 통해 1.1 proxy3.company.com 프록시 서버를 거쳐간 것을 알 수 있다.

OPTIONS

OPTIONS 메서드는 웹 서버에게 여러 가지 종류의 지원 범위에 대해 물어보는 역할을 한다. 즉, 서버에게 특정 리소스에 대해 어떤 메서드가 지원되는지 알 수 있다.

DELETE

DELETE 메서드는 서버에게 요청 URL로 지정한 리소스를 삭제할 것을 요청한다. 하지만 클라이언트는 삭제가 수행되는 것을 무조건 보장하지 못한다.

이유는 HTTP 명세 중 서버가 클라이언트에게 알리지 않고 요청에 대해 무시하는 것을 허용하기 때문이다.

확장 메서드

HTTP는 필요에 따라 확장해도 문제가 없도록 설계되어 있다. 새로운 기능을 추가해도 과거에 구현한 소프트웨어들의 오동작을 유발하지 않는다.

다음은 HTTP 완벽 가이드 책을 읽고 정리한 내용입니다.

이번에 학습할 내용

• URL 문법, 여러 URL 컴포넌트가 어떤 의미를 가지고 무엇을 수행하는가
• 상대 URL과 확장 URL 같은 단축 URL
• URL의 인코딩과 문자 규칙

URL

URL은 통합 자원 식별자(Uniform Resource Identifier) 혹은 URI라고 불리는 부분집합이다.

URI는 URL과 URN으로 구성된 종합적인 개념으로, URN은 이름만으로 리소스를 식별하며, URL은 위치로 리소스를 식별한다.

대부분 URL과 URI를 하나로 취급해서 설명한다.

URL 문법

대부분의 URL Scheme 문법은 일반적으로 9개 부분으로 나뉜다. <스킴>://<사용자 이름>:<비밀번호>@<호스트>:<포트>/<경로>;<파라미터>?<질의>#<프래그먼트>

위의 문법을 모두 가지는 URL은 거의 없고, 스킴, 호스트, 경로가 가장 중요하다.

사용자 이름과 비밀번호

FTP 서버와 같이 데이터에 접근하기 위해서는 사용자 이름과 비밀번호를 URL에 전달해야한다.

ftp://ftp.prep.ai.mit.edu/pub/gnu ftp://anonymous:my_passwd@ftp.prep.ai.mit.edu/pub/gnu ftp://joe:joespasswd@www.joes-hardware.com/sales_info.txt 위에 첫번째 예시처럼 사용자 이름이나 비밀번호 없이 접근할 수 있다.

근데 만약 사용자 이름과 비밀번호를 요구하지만, 입력하지 않은 경우 기본 값으로 사용자 이름은 anonymous이고, 비밀번호는 브라우저마다 다르다.

사용자 이름과 비밀번호를 기술한 경우는 3번째 예시처럼 사용자 이름은 joe이고, 비밀번호는 joespasswd가 된다.

파라미터

URL의 파라미터는 애플리케이션이 서버에 정확한 요청을 하기 위해 필요한 입력 파라미터를 받는데 사용한다.

이름/값 쌍의 리스트로 URL 나머지에 ; 문자로 구분하여 기술한다.

ftp://prep.ai.mit.edu/pub/gnu;type=d

이 예시의 경우 이름은 type이고, 값은 d인 한 개의 파라미터를 전달한다.

http:/www.joes-hardware.com/hammers;sale=false/index.html;graphics=true

위 URL에는 hammers와 index.html이라는 두 개의 경로 조각이 있다.

hammers 경로 조각은 값이 false인 sale이라는 파라미터를 가지고, index.html 경로 조각은 값이 true인 graphics 파라미터를 가지게 된다.

프래그먼트

리소스의 특정 부분을 가리킬 수 있도록, URL은 프래그먼트를 제공한다.

예를 들어 URL은 HTML 문서에 있는 특정 이미지나, 일부분을 가리킬 수 있다.

http://www.joes-hardware.com/tools.html#drills

위 예시는 drills라는 프래그먼트로 해당 웹 서버에 위치한 /tools.html 웹 페이지의 일부를 가리킨다.

프래그먼트는 클라이언트에서만 다루고, 서버에는 전달하지 않는다.

단축 URL

상대 URL

URL은 상대 URL과 절대 URL 두 가지로 나뉜다. (상대 경로, 절대 경로)

지금까지의 예시는 절대 URL이며, 절대 URL은 리소스에 접근하는데 필요한 모든 정보를 가지고 있다.

상대 URL은 모든 정보를 담고 있지 않으며, URL을 짧게 표기하는 방식이다.

http://www.joes-hardware.com/tools.html - 현재 URL (기저 URL) http://www.joes-hardware.com/hammers.html 2개의 URL이 있고, 현재 URL은 tools.html이다.

해당 HTML 파일안에 ./hammers.html을 가리키는 하이퍼링크가 이런식으로 작성되어 있다면, 이는 문서의 URL을 기준으로 상대 URL로 작성된 것이다.

URL 확장

어떤 브라우저들은 URL을 입력한 다음이나 입력하는 도중에 자동으로 URL이 확장된다. (자동완성)

자동으로 URL이 확장되기 때문에 URL 전체를 입력하지 않아도 되어 빠르고 편리하게 도와준다.

이러한 확장은 2가지 기능으로 나뉘어진다.

• 호스트명 확장 호스트명 확장 기능을 지원하는 브라우저는 단순한 휴리스틱만 사용해서 확장할 수 있다. yahoo를 입력하면, 브라우저는 호스트 명에 자동으로 www.와 .com을 붙여서 www.yahoo.com을 만든다.
• 히스토리 확장 과거에 사용자가 방문했던 URL의 기록을 저장해 놓았다가, URL을 입력하면 입력된 URL의 앞 글자들을 포함하는 완결된 형태의 URL들을 선택하게 도와준다. http://www.joes-처럼 이전에 방문했던 URL의 시작 부분을 입력하면, 브라우저는 http://www.joes-hardware.com을 보여주게 된다.

URL의 인코딩 규칙

URL 문자 집합

컴퓨터 시스템의 기본 문자 집합은 보통 영어 중심으로 설정되어 US-ASCII 문자 집합을 사용해왔다.

하지만 전 세계 사람들이 사용하다보니, 각 나라의 언어의 문자들은 US-ASCII가 지원하지 않는다.

따라서 이러한 문자들을 지원하기 위해, URL 설계자들은 URL에 이스케이프 문자열을 쓸 수 있게하여 US-ASCII에서 지원하지 않는 문자들을 인코딩할 수 있게 했다.

지원되지 않는 문자에는 공백도 포함된다. 따라서 공백은 %20으로 처리된다.

예약어

몇몇 문자는 URL 내에서 예약어로 사용된다.

따라서 아래 표에 있는 예약어를 사용하기 위해서는 반드시 사용전에 인코딩해야 한다.

회사에서 인사 동기화를 구현하는 과정에서 인사 정보가 동기화되었는지 주기적으로 확인해야하는 상황이 생겼습니다.

간단한 프로세스는 인사 정보를 매핑하고, 수동 인사 동기화를 요청합니다.

요청 받은 서버는 수동 인사 동기화를 진행을 시작하고,

요청에 대한 반환값으로는 진행 중이면 P, 동기화가 완료되면 S, 실패하면 E를 반환합니다.

이때 주기적으로 확인해야할 필요가 있으므로 Polling 구현해서 이를 해결했습니다.

Polling이란?

이전에 웹소켓을 공부할 때 잠깐 알아본 기억이 있었는데, 다시 한 번 알아보겠습니다.

폴링은 클라이언트가 일정 주기로 서버에 필요한 데이터를 요청하는 것을 의미합니다.

JS에서는 setTimeout, setInterval 등으로 이를 구현할 수 있습니다.

변경사항이 없어도 계속 요청을 보내기 때문에 서버에 부담을 줄 수 있고, 요청하는 주기가 짧아질수록 부하는 커지며, HTTP Connection을 맺기 위한 비용이 계속 발생합니다.

Long Polling

클라이언트가 일정 주기마다 요청을 보내지만 서버가 응답을 바로 전달하지 않는 방식을 의미합니다.

1. 클라이언트가 서버에게 요청을 보냅니다.
2. 서버는 즉시 요청을 처리하고 응답을 보내지 않습니다.
3. 서버에서 특정 이벤트가 발생하면 응답을 보내고, 서버의 응답이 없으면 타임 아웃이 발생합니다.
4. 응답을 받은 클라이언트는 다시 서버에게 요청합니다.

롱 폴링으로 처리하면 폴링의 단점을 보완할 수 있습니다.

그런데도 폴링으로 하게 된 이유는 폴링은 서버에서 별도의 추가적인 작업이 필요없지만, 롱 폴링은 서버에서 추가적인 작업이 필요합니다.

해당 요청을 즉시 처리하지 않기 때문입니다.

따라서 추가적인 작업이 필요없는 폴링 방식을 선택하게 되었습니다.

Polling 구현

위에서 말했듯이 setTimeout, setInterval으로 구현할 수 있습니다.

setTimeout

const timeoutPolling = (func, timeout) => {
  setTimeout(() => {
    func();
    timeoutPolling(func, timeout);
  }, timeout);
}

timeoutPolling(() => console.log('hi'), 1000)

timeoutPolling함수를 재귀적으로 호출하게 됩니다.

setTimeout 함수는 콜백 함수 실행 시간과 상관없이 콜백 함수 실행 간격이 일정하게 보장됩니다. 즉, 콜백 함수가 끝난 시점을 기준으로 시간을 체크합니다.

setInterval

const intervalPolling = (func, interval, maxAttempts = -1) => {
  let attempts = 0;
  let intervalId = setInterval(() => {
    if (maxAttempts === attempts) {
      clearInterval(intervalId);
      return;
    }
    attempts++;
    func()
  }, interval);
};

setInterval 함수는 콜백 함수의 실행 시간이 길면 콜백 함수 실행 간격이 짧아지게 됩니다. 즉, 콜백 함수가 시작한 시점을 기준으로 시간을 체크합니다.

while loop

setTimeout, setInterval 말고 while loop를 사용하는 방법도 있습니다. JS에는 타이머가 따로 제공되지 않기 때문에 Promise를 사용해서 직접 구현해야 합니다.

const delay = (timeout = 1000) => {
  return new Promise((resolve) => {
    setTimeout(resolve, timeout);
  });
};

const delayPolling = async (func, validateFunc, timeout) => {
  let result = await func();
  while (!validateFunc(result)) {
    await delay(timeout);
    try {
      result = await func();
    } catch (e) {
      console.error(e.message);
    }
  }
  return result;
};

이 중 어떤 방식을 선택해도 상관없지만, 익숙한 방식인 while loop로 진행했습니다.

const DEFAULT_TIME = 1000

const delay = (timeout = DEFAULT_TIMEOUT) => {
    return new Promise((resolve) => {
        setTimeout(resolve, timeout)
    })
}

const polling = async (callback: Function, validate: (status: string) => boolean, timeout: number) => {
    let result = await callback()
    while (!validate(result)) {
        await delay(timeout)
        result = await callback()
        if (result === 'E') {
            throw Error('status')
        }
    }
    return result
}

const hrInfoSyncMapping = async () => {
    const getSyncStatus = async () => {
        const key = '/api~'
        try {
            const data = await $http.post(key, {
                body: {
                    ...
                }
            })
            if (data.code === 200) {
                return data.data.status
            }
        } catch (error) {
            console.error('--- 인사 정보 상태 catch error', error)
        }
    }

    const isNextStep = (status: string) => {
        return status === 'S'
    }

    const resPolling = await polling(getSyncStatus, isNextStep, DEFAULT_TIMEOUT)

    ...

1장은 JavaScript의 배경지식에 대한 설명으로 시작합니다.

JavaScript 이름의 유래

JavaScript라는 이름은 마케팅 목적으로 사람들을 속이기 위해 고안한 이름인 것을 알고 계셨나요?

처음에 브렌든 아이크는 Mocha라고 부르다가 넷스케이프에서 LiveScript로 불렀고, 그 때 당시 Java가 큰 인기를 끌면서 마케팅 효과를 노려 이후에는 JavaScript로 공식 명칭이 되었습니다.

브랜든 아이크는 JavaScript를 개발한 넷스케이프 프로그래머이다.

스크립트라는 단어가 가벼운 프로그램이라는 뜻으로 유행했고, 자바 개발자들에게 어필하기 위한 목적으로 만들어졌다.

TC39 절차

TC39에서 지정하고 ECMA 표준 기구에 의해 공식화된 명칭은 ECMAScript입니다.

TC39는 JS를 관리하는 기술 운영 위원회로, JS의 공식 명세를 관리합니다.

TC39에서 모든 제안을 5단계로 이루어지며 (0 ~ 4단계), 각 단계상 절차는 여기에서 확인할 수 있습니다.

간략하게 다음과 같은 절차로 진행됩니다.

JS와 웹 브라우저

대부분 명세서에 정의된 JS와 브라우저 엔진에서 돌아가는 JS는 동일합니다.

TC39 절차를 통해 새로운 동작이 추가 및 수정 등 명세서가 개정됐을 때, 기존 브라우저 엔진에서 실행되던 JS의 작동 방식과 다른 경우가 발생하기도 합니다.

이렇게 불일치가 발생하면 TC39는 종종 기존 결정을 철회하고 명세서를 웹에 맞춥니다.

실제 사례로 배열 메서드 contains()를 추가하려다 몇몇 JS 프레임워크에서 충돌이 나서 해당 메서드명을 includes()로 수정한 사례가 있습니다.

또한 배열 메서드 flatten()이 제안되었다가 flat()으로 변경된 사례도 있습니다.

모든 코드가 명세서대로 동작하는 것은 아닙니다.

브라우저 개발자 도구의 콘솔이나 Node.js의 REPL이 js 환경이라는 가정하에 JS 코드를 작성합니다.

REPL(Read-Evaluation-Print-Loop)은 사용자가 특정 코드를 입력하면 그 코드를 평가하고 코드의 실행 결과를 출력해주는 것을 반복해주는 환경을 말한다.

node.js를 설치한뒤 cmd에서 node 키워드로 REPL 환경에 접속이 가능하다.

하지만 이 둘은 만들어진 목적이 다릅니다. 개발자 도구는 말 그대로 개발자를 위한 도구이기 때문에 명세서에 정의된 명세를 항상 엄격하게 준수할 것이라고 생각하면 안됩니다.

콘솔에 입력한 코드는 JS 엔진이 .js 파일을 다루는 방식과 동일한 방식으로 처리되지 않습니다.

콘솔에 목적은 개발자가 짧은 코드를 입력했을 때 그 결과를 즉시 확인하기 위함인 것을 인지해야합니다.

JS 패러다임

JS는 다중 패러다임 언어라 절차적, 객체 지향, 함수형 스타일 코드를 모두 작성할 수 있습니다.

• 절차적 프로그래밍은 코드가 탑다운이고, 선형적으로 구조화되며, 프로시저라 불리는 코드 단위에 미리 정해진 일련의 연산을 작성합니다.
• 객체 지향 프로그래밍은 클래스 기준으로 코드를 구조화하며, 클래스에는 로직과 데이터가 정의됩니다.
• 함수형 프로그래밍은 코드를 함수 단위로 구조화하며, 함수는 부수 효과가 없는 순수 함수여야 합니다. 또한 함수 자체가 값으로 취급된다는 특징이 있습니다.

하위 호환성과 상위 호환성

JS는 하위 호환성은 지원하지만, 상위 호환성은 지원하지 않습니다.

하위 호환성이란 이전 버젼에 구현된 스펙들에 대해 다음 버젼에서도 정상 작동된다는 것을 보장한다는 것입니다.

이로인해 1995년에 작성한 코드가 시간이 흘러도 무조건 작동한다는 것을 보장받게 됩니다.

상위 호환성이란 새로운 버전에 들어간 스펙을 사용한 코드를 이전 버전으로 돌려도 에러 없이 돌아가는 것입니다.

대표적으로 HTML과 CSS는 상위 호환성을 지원하여, 2010년에 만들어진 브라우저에서 2019년에 추가된 기능을 사용할 때 웹 페이지가 망가지지는 않습니다.

브라우저는 인식이 불가능한 HTML/CSS는 건너 뛰고 인식 가능한 HTML/CSS는 명세서에 따라 처리하기 때문입니다.

상위 호환성을 지원하지 않는 JS에서 하위 버전에서 실행 시켜야될 경우 어떻게 해결해야 할까요?

대표적인 해결방법으로는 Transpiling과 Polyfill이 있습니다.

FEConf) 유인동님의 ES6+ 비동기 프로그래밍과 실전 에러 핸들링 영상을 정리한 내용입니다.

문제 발생

이미지의 높이를 더하는 코드를 작성해보려고 합니다.

    const imgs = [
      {name: 'image1', url:'https://picsum.photos/id/1/5000/3333'},
      {name: 'image2', url:'https://picsum.photos/id/2/5000/3333'},
      {name: 'image3', url:'https://picsum.photos/id/3/5000/3333'},
      {name: 'image4', url:'https://picsum.photos/id/4/5000/3333'}
    ]

    function f1() {
      imgs
        .map(({url}) => {
          let img = new Image();
          img.src = url;
          return img;
        })
        .map(img => img.height)
        .forEach(height => console.log(height))
    }

    f1();

이미지의 높이를 가져오기 위해 new Image()로 이미지를 생성해줬습니다. 그리고 img.height의 값을 로그로 찍어보지만 가져올 수 없습니다.

이유는 이미지 생성은 했지만, 이미지를 불러오진 않았기 때문입니다.

    const loadImage = url => {
      let img = new Image();
      img.src = url;
      img.onload = () => console.log(img.height)
      return img
    }

    loadImage(imgs[0].url); // 3333

이미지의 높이를 구할 수 있는 시점은 img.onload 즉, 이미지가 로드 되었을 때 가져올 수 있게 됩니다.

이 시점을 외부에 알려줘야 이미지들의 높이를 더할 수 있는데, 이를 Promise를 사용하면 해결할 수 있습니다.

    const loadImage = url => new Promise(resolve => {
      let img = new Image();
      img.src = url;
      img.onload = () => resolve(img)
      return img
    })

    loadImage(imgs[0].url).then(img => console.log(img.height)); // 3333

이렇게 resolve를 사용하면 쉽게 구할 수 있습니다.

그럼 이제 만들어논 loadImage로 변경해주면 잘 동작할까요?

    const imgs = [
      {name: 'image1', url:'https://picsum.photos/id/1/5000/3333'},
      {name: 'image2', url:'https://picsum.photos/id/2/5000/3333'},
      {name: 'image3', url:'https://picsum.photos/id/3/5000/3333'},
      {name: 'image4', url:'https://picsum.photos/id/4/5000/3333'}
    ]

    const loadImage = url => new Promise(resolve => {
      let img = new Image();
      img.src = url;
      img.onload = () => resolve(img)
      return img
    })

    function f1() {
      imgs
        .map(({url}) => loadImage(url))
        .map(img => img.height)
        .forEach(height => console.log(height))
    }

    f1(); // undefined * 4

loadImage는 Promise 객체를 반환해서 undefined가 찍히게 됩니다.

이를 해결하기 위해 async await을 사용하면 어떨까요?

    function f1() {
      imgs
        .map( async ({url}) => await loadImage(url))
        .map(img => img.height)
        .forEach(height => console.log(height))
    }

    f1(); // undefined * 4

    // ====================

    function f1() {
      imgs
        .map( async ({url}) => {
            const img = await loadImage(url);
            return img.height;
        })
        .forEach(async height => console.log(await height)) // 3333 * 4
    }

분명 Promise 객체에 async await을 해주면 풀리는 걸로 알고 있는데 결과는 그대로 undefined만 찍히게 됩니다.

forEach안에서도 async await을 해주면 높이가 잘 찍히게 됩니다.

그럼 이제 이미지들의 높이 합을 구해볼까요.

    async function f1() {
         const total = await imgs
        .map( async ({url}) => {
            const img = await loadImage(url);
            return img.height;
        })
        .reduce(async (total, height) => await total + await height, 0); 
      console.log(total) // 13332
    }

이렇게 코드를 작성하면 동작은 하지만 이 코드는 아슬아슬하게 동작하는 코드입니다.

왜 아슬아슬한 코드일까요?

만약 imgs 중 이미지 url 하나를 수정하고 코드를 실행하면 에러도 안나고 결과 값도 찍히지도 않는 이상한 동작을 하게 됩니다.

이럴 때 에러 핸들링(try-catch문)을 사용해줘야 합니다.

에러를 잡으려면 에러가 발생해야하는데, 위 코드는 에러가 발생하지 않는 코드입니다.

const imgs = [
      {name: 'image1', url:'https://picsum.photos/id/1/5000/3333'},
      {name: 'image2', url:'https://picsum.photo/id/2/5000/3333'}, // 수정한 URL
      {name: 'image3', url:'https://picsum.photos/id/3/5000/3333'},
      {name: 'image4', url:'https://picsum.photos/id/4/5000/3333'}
    ]

    const loadImage = url => new Promise((resolve, reject) => {
      let img = new Image();
      img.src = url;
      img.onload = () => resolve(img);
      img.onerror = () => reject(img);
      return img
    })

    async function f1() {
         const total = await imgs
        .map( async ({url}) => {
          try{
            const img = await loadImage(url);
            return img.height;
          } catch(error) {
            console.error(error)
          }
        })
        .reduce(async (total, height) => await total + await height, 0); 
      console.log(total) // NaN
    }

    f1();

이미지의 url이 올바르지 않아 에러가 발생하면 이벤트를 onerror로 받고 reject로 에러를 발생시키고 try-catch문에서 에러를 잡아서 NaN이라는 값이 찍혔습니다.

만약 에러가 났을 때 NaN이 아닌 0이 찍히게 만든다면 다음처럼 수정하면 됩니다.

    const loadImage = url => new Promise((resolve, reject) => {
      let img = new Image();
      console.log('이미지 로드', url)
      img.src = url;
      img.onload = () => resolve(img);
      img.onerror = () => reject(img);
      return img
    })

    async function f1() {
      try{
        const total = await imgs
         .map( async ({url}) => {
           try{
             const img = await loadImage(url);
             return img.height;
           } catch(error) {
             console.error(error);
             throw error;
           }
         })
         .reduce(async (total, height) => await total + await height, 0); 
       console.log(total)
      } catch(error) {
        console.log(0);
      }
    }

    f1();

2번째 이미지로 인해 에러가 발생했고, 에러 핸들링을 했는데도 불구하고 그 뒤에 있는 코드까지 실행이 되고 있습니다.

이 코드는 에러 핸들링은 했지만 버그가 있는 코드로써 이전 코드들 보다 더 심각한 코드가 되었습니다.

만약 get으로 호출하는 이미지가 아닌 post와 같은 side effect를 일으켜서 문제가 될 수 있고, 또한 get이어도 많은 양의 코드를 호출한다면 충분히 부하를 일으킬 수 있습니다.

문제 해결

    // 제너레이터로 map 추상화
    function* map(f, iter) {
      for(const a of iter) {
        // 부수효과를 내부에서 일으키지 않고 바깥으로 발생 시키기
        yield a instanceof Promise ? a.then(f) : f(a);
      }
    }

    async function f2() {
      let acc = 0;
      for (const a of map((img) => img.height, map(({url}) => loadImage(url), imgs))) {
        acc = acc + await a;
      }
      console.log(acc);
    }

    f2(); // 13332

제너레이터로 map을 추상화시키고 yield 키워드를 통해 부수효과를 내부에서 일으키지 않고 바깥으로 발생 시키도록 작성했습니다.

또한 a가 Promise일 경우 함수 합성을 통해 비동기와 동기일 때 처리해줬습니다.

위 코드를 한 번 더 개선해보겠습니다.

    // 제너레이터로 map 추상화
    function* map(f, iter) {
      for(const a of iter) {
        // 부수효과를 내부에서 일으키지 않고 바깥으로 발생 시키기
        yield a instanceof Promise ? a.then(f) : f(a);
      }
    }

    async function reduceAsync(f, acc, iter) {
      for (const a of iter) {
        acc = f(acc, await a);
      }
      return acc;
    }

    const f2 = (imgs) => 
        reduceAsync((a,b) => a + b, 0, 
          map((img) => img.height, 
            map(({url}) => loadImage(url), imgs)))


    f2(imgs);

reduceAsync라는 순수 함수를 만들어서 좀 더 안정적인 코드가 되었습니다.

또한 async await을 없애고 함수 표현식으로 간결하게 가독성을 높이고, imgs를 인자로 제한해줬습니다.

에러가 나는 2번째 이미지 까지 동작을 하고 그 이후에는 동작하지 않으며, 에러를 발생시키고 있습니다.

    async function f2(imgs) {
      try {
      console.log(
        await reduceAsync((a,b) => a + b, 0, 
          map((img) => img.height, 
            map(({url}) => loadImage(url), imgs))))
      } catch (error) {
        console.error(error);
      }
    }

    f2(imgs);

에러가 발생한다고해서 순수 함수 내에 try-catch문으로 에러 핸들링을 하기도 하는데 이 방법이 좋다고 생각하지 않습니다.

즉, 에러 핸들링을 하지 않는 코드가 좋은 코드라고 생각합니다.

    async function f2(imgs) {
        await reduceAsync((a,b) => a + b, 0, 
          map((img) => img.height, 
            map(({url}) => loadImage(url), imgs))))
    }

    f2(imgs).catch(_ => 0).then(log); // 에러가 안나는 코드 (13332)
    f2(imgs1).catch(_ => 0).then(log); // 잘못된 인자로 에러가 나는 코드 (0)

순수 함수는 순수 함수 그 자체가 가장 좋고 에러를 발생시키게만 만들어주면 됩니다.

에러가 발생할 것 같다고 해서 순수 함수 내에 미리 에러 핸들링을 하는 것은 불필요한 것이고, 해당 함수의 사용을 제약하는 것이며, 에러를 숨기는 행동입니다.

에러 핸들링은 부수효과를 일으키는 코드 주변에 작성하는 것이 좋습니다.

다운로드를 하기 위해서는 필요한 내용들이 있다.

HTTP Headers, MIME Type, Blob, URL.createObjectURL, a 태그 등이 있으니 하나씩 알아보도록 하자.

HTTP Headers

HTTP Headers에는 다양한 헤더들이 존재하지만, 그 중 다운로드 기능 시 필요한 헤더들만 알아볼 것이다.

Content-Disposition

일반적인 HTTP 응답에서 해당 헤더는 컨텐츠가 브라우저 내부에 보여줄지(inline) 혹은 다운로드되거나 로컬에 저장할 용도인지(attachment) 알려주는 헤더다.

또한 데이터가 너무 클 경우 multipart/form-data 의 하위 파트로 활용(form-data)될 수 있다.

헤더에서 사용되는 파라미터는 inline, form-data, attachment, name, filename 이 쓰이고, name과 filename은 필수 파라미터는 아니다.

파일 다운로드 형식 예시

Content-Disposition: inline // 기본값
Content-Disposition: attachment // 반드시 다운로드 받아야함
Content-Disposition: attachment; filename="filename.jpg" // 저장 시 해당 이름으로

아래는 cool.html이라는 파일을 다운로드하라는 응답이다.

Content-Type은 MIME Type으로 지정되고, 해당 파일과 타입이 일치해야한다.

200 OK
Content-Type: text/html; charset=utf-8
Content-Disposition: attachment; filename="cool.html"
Content-Length: 21

multipart 형식 예시

Content-Type: multipart/form-data;boundary="boundary"
Content-Disposition: form-data
Content-Disposition: form-data; name="fieldName"
Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"

아래는 총 2개의 데이터로 쪼개져서 전달된 것이고, Content-Type헤더에 boundary가 있다.

boundary의 역할은 조각난 데이터의 처음과 끝을 알 수 있게 해주는 역할이다.

boundary는 유니크해야하므로 대부분 UUID로 만든다.

--boundary는 전송되는 파일 데이터의 구분자다.

--boundary--는 쪼개진 데이터의 요청(body)의 끝을 알려주는 것이다.

POST /test.html HTTP/1.1
Host: example.org
Content-Type: multipart/form-data;boundary="boundary"

--boundary
Content-Disposition: form-data; name="field1" 

value1
--boundary 
Content-Disposition: form-data; name="field2"; filename="example.txt" 

value2
--boundary-- 

Content-Type

해당 헤더는 리소스의 Media Type을 나타내기 위해 사용된다.

즉, 반환된 컨텐츠의 유형이 실제로 무엇인지를 알려준다.

어떤 경우에는 MIME 스니핑을 해서 이 헤더의 값을 따르지 않을 수도 있다.

이를 막기 위해 X-Content-Type-Options 헤더를 nosniff로 설정할 수 있다.

형식 예시

Content-Type: text/html; charset=utf-8
Content-Type: multipart/form-data; boundary=something

자주 사용하는 MIME Type의 예시

적합한 MIME Type을 가진 리소스만이 HTML 엘리먼트 내에서 인식되어 사용할 수 있다. 예로 video나 audio가 이에 해당된다.

또한 파일 업로드나 다운로드 구현 시 file type 파라미터로 MIME Type이 필요하다.

자세한 MIME Type의 종류를 확인할 수 있다.

Blob

Blob이란 Binary Large Object(이진 대형 객체)의 약자로 이진 데이터를 나타내는 JavaScript 객체다.

주로 텍스트, 이미지 같은 이진 데이터를 다룰때나 파일 관련 작업에서 유용하게 사용된다.

Blob 생성자

Blob 객체는 생성자를 사용하여 생성할 수 있다.

// new Blob(array, options)
const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj, null, 2)], { type: "application/json" });

• array : Blob 객체에 포함시킬 배열 또는 데이터
• options : MIME Type이나 다른 설정을 담고있는 객체(선택 값)

속성

• size : Blob 객체 바이트(Byte) 단위 사이즈
• type : 객체의 MIME Type, 타입을 알 수 없는 경우 빈 문자열

Blob URL

Blob 객체를 가리키는 URL을 생성하기 위해 URL 객체의 정적 메소드로 URL.createObjectURL과 URL.revokeObjectURL을 사용할 수 있다,

• URL.createObjectURL

  Blob 객체나 File 객체를 나타내는 URL을 포함한 DOMString을 생성한다.

  이 Blob URL은 생성된 window의 document에서만 유효하며, 다른 window에서 재활용할 수 없고 URL의 수명이 한정되어 있다.

  Blob URL 형태

    blob:http://localhost:1234/28ff8746-94eb-4dbe-9d6c-2443b581dd30

  Blob URL 활용

    <img src="blob:http://localhost:1234/28ff8746-94eb-4dbe-9d6c-2443b581dd30" alt="Blob URL Image" />

• URL.revokeObjectURL

  URL.createObjectURL을 통해 생성한 기존 URL을 해제한다.

  기존 URL을 해제하지 않으면 유효한 URL로 판단하여 자바스크립트 엔진에서 GC되지 않아 메모리 누수가 될 수 있기 때문에 URL을 바인딩한 후에는 해제하는 것이 좋다.

    // Create Blob URL
    const blobUrl = window.URL.createObjectURL(blob);
  
    // Revoke Blob URL after DOM updates..
    window.URL.revokeObjectURL(blobUrl);

<a> 태그

a 태그에는 download라는 속성이 존재하는데 이는 href에 지정된 파일을 다운로드해주는 기능이다.

사용 방법

<a href='fileurl' download> <!-- fileurl의 파일 이름으로 다운로드 -->

<a href='fileurl' download="sample"> <!-- fileurl의 sample파일 명으로 다운로드 -->

이렇게 a태그에 직접 인라인으로 걸어줄 수 있고, JavaScript로 작성할 수도 있다.

const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.setAttribute('download', `${fileName}`)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url)

다운로드 기능 구현

위 내용들을 기반으로 다운로드 기능을 fetch API로 사용해서 구현해보겠습니다.

let fileName;

const options = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    }
};

const key = '다운로드 API URI';

fetch(key, options)
    .then(response => {
        const contentDisposition = response.headers.get('Content-Disposition');
        fileName = contentDisposition.split('filename=')[1].replace(/['"]/g, '');
        return response.blob();
    })
    .then(blobData => {
        const blob = new Blob(['\ufeff', blobData], { type: file.fileType });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
    })
    .catch(error => {
        console.error('Error:', error);
    });

여기서 blob 배열에 \ufeff를 추가한 이유는 csv나 exel 파일 같은 경우 한글이 꺠져서 저장되는 이슈가 있었다.

발생하는 이유는 바이트 순서 표식(BOM)에 의해 UTF-8로 인식되지 않아 깨지는 것이고, 해결하기 위해서는 \ufeff를 데이터 맨 앞에 추가하면 된다.

참고

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Content-Type https://developer.mozilla.org/ko/docs/Glossary/MIME_type https://developer.mozilla.org/ko/docs/Web/API/Blob https://heropy.blog/2019/02/28/blob/

console.log('start');

foo(); // ReferenceError: foo is not defined
// 발생한 에러를 방치하면 프로그램은 강제 종료

// 에러로 인해 프로그램이 강제 종료되어 아래 코드는 실행되지 않음
console.log('end');

try ... catch 문을 사용해 발생한 에러에 적절하게 처리하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다.

console.log('start');

try {
  foo(); 
} catch (error) {
  console.error('에러 발생', error);
  // 에러 발생 ReferenceError: foo is not defined
}

// 에러 처리로 인해 프로그램이 강제 종료되지 않음
console.log('end');

또는 API 호출로 값을 접근할 수 없거나 DOM에서 요소 노드를 찾을 수 없어 null이나 undefined를 반환하는 경우 추가 처리를 해주지 않으면 에러로 이어질 가능성이 있다.

if문으로 처리하거나 단축 평가 또는 옵셔널 체이닝 연산자를 사용해 에러 처리를 할 수 있다.

// DOM에 button 요소가 존재하지 않는 경우 querySelector 메서드는 에러를 발생시키지 않고 null을 반환
const $button = document.querySelector('button'); // null

// 만약 옵셔널 체이닝 연산자를 사용하지 않았다면 에러가 발생함
$button?.classList.add('disabled'); // undefined

이처럼 에러나 예외적인 상황에 대응하지 않는다면 프로그램은 강제 종료된다.

에러나 예외적인 상황은 너무나 다양하고 많기 때문에 대응 없이 프로그램이 강제 종료된다면 원인을 파악하여 대응하기 어렵다.

try ... catch ... finally 문

3개의 코드 블록으로 구성되며, finally 문은 불필요하다면 생략 가능하다.

try {
  // 실행할 코드 (에러가 발생할 가능성이 있는 코드)
} catch (err) {
  // try 코드 블록에서 에러가 발생하면 이 코드 블록의 코드가 실행됨
  // err에는 try 코드 블록에서 발생한 Error 객체가 전달
} finally {
  // 에러 발생과 상관없이 반드시 한 번 실행됨
}

try 코드 블록이 먼저 실행되고, try 코드 블록에서 에러가 발생하면 catch 코드 블록에서 err 변수에 전달된다.

finally 코드 블록은 에러 발생과 상관없이 반드시 한 번 실행된다.

이렇게 try ... catch ... finally문으로 에러 처리하면 프로그램이 강제 종료되지 않는다.

Error 객체

Error 생성자 함수는 에러 객체를 생성하며, Error 생성자 함수에는 에러를 상세히 설명하는 에러 메시지를 인수로 전달할 수 있다.

const error = new Error('invalid');

에러 객체는 message 프로퍼티와 stack 프로퍼티를 갖는다.

• message 프로퍼티 : 인수로 전달한 에러 메시지 값
• stack 프로퍼티 : 에러를 발생시킨 콜 스택의 호출 정보

Error 생성자 함수

에러 객체의 프로토 타입은 모두 Error.prototype을 상속 받는다.

1 @ 1; // SyntaxError: Invalid or unexpected token
foo(); // ReferenceError: foo is not defined
null.foo; // TypeError: Cannot read property 'foo' of null
new Array(-1); // RangeError: Invalid array length
decodeURIComponent('%'); // URIError: URI malformed
Promise.any([Promise.reject(new Error("some error"))]) // AggregateError: All promises were rejected

throw 문

Error 생성자 함수로 에러 객체를 생성한다고 에러가 발생하는 것은 아니다.

에러 객체 생성과 에러 발생은 의미가 다르기 때문이다.

try {
  // 에러 객체를 생성한다고 에러가 발생하는 것은 아님
  new Error('something wrong');
  console.log('try 코드 블록');
} catch (error) {
  console.log(error);
}

에러를 발생시키려면 try 코드 블록에서 throw 문으로 에러 객체를 던져야 한다.

try {
  // 에러 객체를 던지면 catch 코드 블록이 실행
  throw new Error('something wrong');
  console.log('try 코드 블록');
} catch (error) {
  console.error(error);
}

throw 문의 표현식은 어떤 값이라도 상관 없지만 일반적으로 에러 객체를 지정한다.

에러를 던지면 catch 문의 에러 변수가 생성되고 던져진 에러 객체가 할당되면서 catch 코드 블록이 실행된다.

발생한 에러를 콘솔로 보고 싶으면 log가 아닌 error로 보는 것이 좋다.

console.log는 일반적인 값을 보기 위한 목적이고, console.error는 발생한 error의 값을 보기 위해서이다.

에러의 전파

에러는 호출자 방향으로 전파된다. 즉, 콜 스택의 아래 방향(= 실행 중인 실행 컨텍스트가 푸시되기 직전에 푸시된 실행 컨텍스트 방향)으로 전파된다.

const foo = () => {
  // 에러 객체를 생성하고 throw 문으로 에러 발생
  throw Error('foo에서 발생한 에러'); // 4
};

const bar = () => {
  foo(); // 3
};

const baz = () => {
  bar(); // 2
};

try {
  baz(); // 1
} catch (err) {
  console.error(err);
}

함수의 호출 순서는 1 -> 2 -> 3 -> 4이고, foo 함수가 throw한 에러는 호출자에게 전파되어 전역에서 캐치된다.

이처럼 throw 된 에러를 캐치하지 않으면 호출자 방향으로 전파되고, throw 된 에러를 어느 컨텍스트에서도 캐치하지 않으면 프로그램은 강제 종료된다.

주의할 점은 비동기 함수인 setTimeout이나 프로미스 후속 처리 메서드의 콜백 함수는 호출자가 없다는 것이다.

태스크 큐나 마이크로태스크 큐에 일시 저장되었다가 콜 스택이 비어있으면 이벤트 루프에 의해 콜 스택으로 푸시되어 실행된다.

이 때 콜 스택에 푸시된 콜백 함수의 실행 컨텍스트는 콜 스택의 가장 하부에 존재하기 때문에 에러를 전파할 호출자가 존재하지 않고 해당 실행 컨텍스트에서 에러 처리를 하지 않으면 프로그램은 강제 종료된다.

이로인해 함수는 호출된 순서대로 순차적으로 실행되는 것이다.

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.

싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있다.

자바스크립트 엔진은 싱글 스레드 방식으로 동작하기 때문에 처리 시간이 오래 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다.

// sleep 함수는 일정 시간(delay)이 경과된 이후에 콜백 함수를 호출한다.
function sleep(func, delay) {
  // Date.now()는 현재 시간을 숫자(ms)로 반환한다.
  const delayUntil = Date.now() + delay;

  // 현재 시간에 delay를 더한 delayUntil이 현재 시간보다 작으면 계속 반복한다.
  while (Date.now() < delayUntil);

  // 일정 시간이 경과한 이후에 콜백 함수를 호출한다.
  func();
}

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
}

// sleep 함수는 3초 이상 실행된다.
sleep(foo, 3 * 1000);

// bar 함수는 sleep 함수의 실행이 종료된 이후 호출되어 3초 이상 블로킹 된다.
bar();

// (3초 경과 후) foo 호출 -> bar 호출

이처럼 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크가 대기하는 방식을 동기(synchronous) 처리 방식이라고 한다.

동기 처리 방식은 태스크를 순서대로 처리해 실행 순서가 보장된다는 장점은 있지만, 처리 시간이 긴 태스크가 앞에 있을 경우 뒤에 있는 태스크는 블로킹되는 단점이 있다.

// 타이머 함수인 setTimeout으로 변경

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
}

// 타이머 함수 setTimeout은 일정 시간이 경과된 이후에 콜백 함수 foo를 호출한다.
// setTimeout은 bar 함수를 블로킹하지 않는다.
setTimeout(foo, 3 * 1000);
bar();

// bar 호출 -> (3초 경과 후) foo 호출

이처럼 현재 실행 중인 테스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기(asynchronous) 처리 방식이라고 한다.

비동기 처리 방식은 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 바로 실행하므로 블로킹이 발생하지 않는다는 장점이 있지만, 태스크의 실행 순서가 보장되지 않는 단점이 있다.

타이머 함수, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다.

이벤트 루프와 태스크 큐

HTML 요소가 애니메이션 효과를 통해 움직이면서 이벤트를 처리하기도 하고, HTTP 요청을 통해 서버로부터 데이터를 가지고 오면서 렌더링하기도 한다.

이처럼 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프다.

구글의 V8 자바스크립트 엔진을 비롯해 대부분의 자바스크립트 엔진은 크게 콜 스택 영역과 힙 영역으로 구분할 수 있다.

• 콜 스택 (call stack) 소스 코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행 컨텍스트 스택이 바로 콜 스택이다.
• 힙 (heap) 힙은 객체가 저장되는 메모리 공간으로 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다.

비동기 처리에서 소스코드 평가와 실행을 제외한 모든 처리는 브라우저 또는 Node.js가 담당한다.

이러한 브라우저 환경은 태스크 큐와 이벤트 루프를 제공한다.

• 태스크 큐 (task queue/event queue/callback queue) setTimeout이나 setInterval과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역이다.
• 이벤트 루프 (event loop) 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 그리고 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인한다.

만약 콜 스택이 비어 있고, 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적(FIFO방식)으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.

즉, 태스크 큐에 있던 비동기 함수들이 콜 스택으로 이동한 뒤 실행되는 방식이 비동기 처리 방식이다.

정리

자바스크립트는 싱글 스레드 방식 => 자바스크립트 엔진이 싱글 스레드 방식으로 동작

브라우저는 멀티 스레드로 동작한다.

따라서 브라우저와 내장된 자바스크립트 엔진이 협력하여 비동기로 동작할 수 있는 것이다.

만약 일정 시간 뒤에 호출되도록 예약하려면 타이머 함수를 사용하면 된다.

타이머 함수

setTimeout / clearTimeout

setTimeout 함수의 첫 번째 인수로 전달 받은 콜백 함수는 두 번째 인수로 전달 받은 시간(ms, 1/1000초) 이후 단 한 번 실행되도록 호출 스케줄링된다.

const timeoutId = setTimeout(func|code[, delay, param1, param2, ...]);

// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다.
setTimeout(() => console.log('Hi!'), 1000);

// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다.
// 이 때 콜백 함수에 'Lee'가 인수로 전달된다.
setTimeout((name) => console.log(`Hi! ${name}.`), 1000, 'Lee');

// 두 번째 인수(delay)를 생략하면 기본값 0이 지정된다.
setTimeout(() => console.log('Hi!'));

• func: 타이머가 만료된 뒤 호출될 콜백 함수
• delay: 타이머 만료 시간(ms). delay 값을 생략한 경우 기본값 0이 지정된다.

  delay 시간이 설정된 타이머가 만료된다해서 콜백 함수가 즉시 호출되는 것이 보장되지는 않는다.

  delay 시간은 테스크 큐에 콜백 함수를 등록하는 시간을 지연할 뿐이기 때문이다.

• param1: 호출 스케줄링된 콜백 함수에 전달해야 할 인수가 존재하는 경우 세 번째 이후의 인수로 전달이 가능하다.

setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환하고, 이 값은 브라우저 환경인 경우에는 숫자이며 Node.js 환경인 경우 객체다.

또한 타이머 id를 clearTimeout 함수의 인수로 전달하면 타이머를 취소할 수 있다.

// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다.
// setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다.
const timerId = setTimeout(() => console.log('Hi!'), 1000);

// 타이머가 취소되면 setTimeout 함수의 콜백 함수가 실행되지 않는다.
clearTimeout(timerId);

setInterval / clearInterval

setInterval 함수의 콜백 함수는 두 번째 인수로 전달받은 시간이 경과할 때마다 반복 실행되도록 호출 스케줄링된다.

setInterval 함수의 전달한 인수는 setTimeout 함수와 동일하다.

const timeoutId = setInterval(func|code[, delay, param1, param2, ...]);

let count = 1;

// 1초(1000ms) 후 타이머가 만료될 때마다 콜백 함수가 호출된다.
// setInterval 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다.
const timerId = setInterval(() => {
  console.log(count); // 1 2 3 4 5

  // count가 5가 되면 clearInterval 함수의 인자로 timerId를 전달하여 타이머를 취소한다.
  if (count++ === 5) clearInterval(timerId);
}, 1000);

setInterval 함수도 고유한 타이머 Id를 반환하고, 이를 clearInterval 함수에 인수로 전달하면 타이머를 취소할 수 있다.

디바운스와 스로틀

scroll, resize, input, mousemove와 같은 이벤트는 짧은 시간 간격으로 연속해서 발생한다.

이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되고 성능에 문제를 일으킬 수 있다.

디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이다.

예시

디바운스

짧은 시간 간격으로 이벤트가 연속으로 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다.

대표적인 예시로, 검색할 때 입력 필드 input 이벤트가 짧은 시간 간격 연속으로 발생하는 예시다.

<!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>
  <input type="text">
  <div class="msg"></div>
  <script>
    const $input = document.querySelector('input');
    const $msg = document.querySelector('.msg');

    const debounce = (callback, delay) => {
      let timerId;

      // debounce 함수는 timerId를 기억하는 클로저를 반환한다.
      return event => {
        // delay가 경과하기 이전에 이벤트가 발생하면 이전 타이머를 취소하고 새로운 타이머로 재설정한다.
        // 따라서 delay시간 보다 짧은 간격으로 이벤트가 발생하면 callback 호출되지 않는다.
        if (timerId) clearTimeout(timerId)
        timerId = setTimeout(callback, delay, event)
      }
    }

    // debounce 함수가 반환하는 클로저가 이벤트 핸들러로 등록된다.
    // 300ms보다 짧은 간격으로 input 이벤트가 발생하면 debounce 함수의 콜백 함수는
    // 호출되지 않다가 300ms 동안 input 이벤트가 더 이상 발생하지 않으면 한 번만 호출된다.
    $input.oninput = debounce(e => {
      $msg.textContent = e.target.value;
    }, 300)
  </script>
</body>
</html>

input 이벤트는 사용자가 텍스트 입력 필드에 값을 입력할 때마다 연속해서 발생한다.

만약 input 핸들러에서 사용자가 입력한 값에 맞는 자동 완성을 추천해주는 것과 같은 무거운 처리를 수행한다면 사용자가 입력을 완료하지 않았어도 fetch 요청이 전송될 것이다.

이러한 요청은 서버에도 불필요한 처리이므로 사용자가 입력을 완료했을 때 한 번만 실행되도록 처리하는 것이 바람직하다.

디바운스를 활용한 다양한 예시는 resize 이벤트 처리, input 입력 필드 자동 완성, 버튼 중복 클릭 방지 처리 등에 유용하게 사용된다.

스로틀

짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다.

예를 들어, scroll 이벤트가 짧은 시간 간격으로 연속해서 발생되는 경우다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      width: 300px;
      height: 300px;
      background-color: rebeccapurple;
      overflow: scroll;
    }

    .content {
      width: 300px;
      height: 1000vh;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="content"></div>
  </div>
  <div>
    일반 클릭 이벤트 카운터
    <span class="normal-count">0</span>
  </div>
  <div>
    스로틀 클릭 이벤트 카운터
    <span class="throttle-count">0</span>
  </div>
  <script>
    const $container = document.querySelector('.container');
    const $normalCount = document.querySelector('.normal-count');
    const $throttleCount = document.querySelector('.throttle-count');

    const throttle = (callback, delay) => {
      let timerId;

      // throttle 함수는 timerId를 기억하는 클로저를 반환한다.
      return event => {
        // delay가 경과하기 이전에는 동작하지 않는다.
        // delay가 경과했을 때 이벤트가 발생하면 새로운 타이머를 재설정한다.
        // 따라서 delay 간격으로 callback이 호출된다.
        if (timerId) return;
        timerId = setTimeout(() => {
          callback(event);
          timerId = null;
        }, delay, event)
      }
    }

    let normalCount = 0;
    $container.addEventListener('scroll', () => {
      $normalCount.textContent = ++normalCount;
    });

    let throttleCount = 0;
    // throttle 함수가 반환하는 클로저가 이벤트 핸들러로 등록된다.
    $container.addEventListener('scroll', throttle(() => {
      $throttleCount.textContent = ++throttleCount;
    }, 100));
  </script>
</body>
</html>

이처럼 스트롤은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정 시간 간격으로 이벤트를 호출하는 방식으로 scroll 이벤트 처리, 무한 스크롤 등에 유용하다.

Node.prototype.nodeType

노드 타입 상수를 반환하는 프로퍼티고, Node에 정의되어 있다.

• Node.ELEMENT_NODE: 요소 노드 타입을 나타내는 상수 1을 반환
• Node.TEXT_NODE: 텍스트 노드 타입을 나타내는 상수 3을 반환
• Node.DOCUMENT_NODE: 문서 노드 타입을 나타내는 상수 9를 반환

Node.prototype.nodeName

노드의 이름을 문자열로 반환한다.

• 요소 노드: 대문자 문자열로 태그 이름(ex. ul, li등)을 반환
• 텍스트 노드 타입: 문자열 #text를 반환
• 문서 노드 타입: 문자열 #document를 반환

<!DOCTYPE html>
<html>
  <body>
    <div id='foo'>Hello</div>
  </body>
  <script>
    // 문서 노드의 노드 정보를 취득한다.
    console.log(document.nodeType); // 9
    console.log(document.nodeName); // #document

    // 요소 노드의 노드 정보를 취득한다.
    const $foo = document.getElementById('foo');
    console.log($foo.nodeType); // 1
    console.log($foo.nodeName); // DIV

     // 텍스트 노드의 노드 정보를 취득한다.
    const $textNode = #foo.firstChild;
    console.log($textNode.nodeType); // 3
    console.log($textNode.nodeName); // #text
  </script>
</html>

nodeValue

노드 정보 프로퍼티는 모두 읽기 전용 접근자 프로퍼티다.

Node.prototype.nodeValue 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티로써 참조와 할당 모두 가능하다.

<!DOCTYPE html>
<html>
  <body>
    <div id='foo'>Hello</div>
  </body>
  <script>
    // 문서 노드의 nodeValue 프로퍼티를 참조한다.
    console.log(document.nodeValue); // null

    // 요소 노드의 nodeValue 프로퍼티를 참조한다.
    const $foo = document.getElementById('foo');
    console.log($foo.nodeValue); // null

     // 텍스트 노드의 nodeValue 프로퍼티를 참조한다.
    const $textNode = #foo.firstChild;
    console.log($textNode.nodeValue); // Hello
  </script>
</html>

노드 객체의 nodeValue 프로퍼티를 참조하면 노드 객체의 값을 반환하는데, 노드 객체의 값은 노드 텍스트이다.

따라서 텍스트 노드가 아닌 노드의 nodeValue 프로퍼티를 참조하면 null을 반환한다.

textContent

Node.prototype.textContent 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티로서 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경한다.

<!DOCTYPE html>
<html>
  <body>
    <div id='foo'>
      Hello
      <span>world!</span>
    </div>
  </body>
  <script>
    // #foo 요소 노드의 텍스트를 모두 취득한다.
    const $foo = document.getElementById('foo');
    console.log($foo.textContent); // Hello world!
  </script>
</html>

이 때 HTML 마크업이 포함되어 있어도 무시하고 문자열인 텍스트만 취득할 수 있다.

textContent와 유사한 동작을 하는 innerText 프로퍼티가 있지만 다음과 같은 이유로 사용하지 않는 것이 좋다.

• innerText 프로퍼티는 CSS에 의해 비표시(visibility: hidden;)로 지정된 요소 노드의 텍스트를 반환하지 않는다.
• innerText 프로퍼티는 CSS를 고려해야 하므로 textContent 프로퍼티보다 느리다.

DOM 조작

DOM 조작은 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것을 말한다.

DOM 조작에 의해 새로운 노드가 추가되거나 삭제되면 리플로우와 리페인트가 발생하는 원인이 되어 성능에 영향을 준다.

리플로우와 리페인트

• 리플로우: 요소 추가, 제거, 크기 및 위치 변경과 같이 레이아웃이 변경될 때 발생합니다.
• 리페인트: 요소의 색상, 배경과 같이 웹 페이지의 스타일이 변경될 때 발생합니다.

innterHTML

Element.prototype.innerHTML 프로퍼티는 setter와 getter모두 존재하는 접근자 프로퍼티로서 요소 노드의 HTML 마크업을 취득하거나 변경한다.

<!DOCTYPE html>
<html>
  <body>
    <div id='foo'>
      Hello
      <span>world!</span>
    </div>
  </body>
  <script>
    // #foo 요소 노드의 텍스트를 모두 취득한다.
    const $foo = document.getElementById('foo');
    console.log($foo.innerHTML); // Hello <span>world!</span>
  </script>
</html>

앞서 살펴본 textContent 프로퍼티는 HTML 마크업을 무시하고 텍스트만 반환하지만, innerHTML 프로퍼티는 HTML 마크업이 포함된 문자열 그대로 반환한다.

<!DOCTYPE html>
<html>
  <body>
    <div id='foo'>
      Hello
      <span>world!</span>
    </div>
  </body>
  <script>
    const $foo = document.getElementById('foo');
    $foo.innerHTML = 'Hello span>there!</span>'
  </script>
</html>

이렇게 innerHTML 프로퍼티를 사용하면 간단히 DOM 조작이 가능하다.

간단히 DOM 조작이 가능하다는 의미는 위험할 수 있다. 만약 사용자로부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하는 것은 크로스 사이트 스크립팅 공격 (XSS)에 취약하다.

크로스 사이트 스크립팅 공격

브라우저에 스크립트가 실행되도록 해서 사용자의 세션을 가로채거나 웹사이트를 변조, 악의적인 콘텐츠를 삽입 등과 같은 공격을 의미합니다.

하지만 HTML5는 innerHTML 프로퍼티로 삽입된 script 요소 내의 자바스크립트 코드를 실행하지 않는다.

script 요소 없이도 XSS 공격은 가능하다.

<!DOCTYPE html>
<html>
  <body>
    <div id='foo'>
      Hello
    </div>
  </body>
  <script>
    // 에러 이벤트를 강제로 발생시켜서 자바스크립트 코드가 실행된다.
    const $foo = document.getElementById('foo');
    $foo.innerHTML = '<img src="x" onerror="alert(document.cookie)">';
  </script>
</html>

innerHTML 프로퍼티를 사용하면 DOM 조작이 간편하지만 XSS 공격에 취약하기 때문에 주의해야 한다.

HTML 새니티제이션

HTML 새니티제이션은 사용자로부터 입력받은 데이터에 의해 발생할 수 있는 XSS 공격을 예방하기 위해 위험을 제거하는 기능을 말한다.

새니티제이션 함수를 직접 구현도 가능하지만, DOMPurify 라이브러리를 사용하는 것을 권장한다.

DOMPurify.sanitize('<img src="x" onerror="alert(document.cookie)">');
// => <img src="x">

insertAdjacentHTML 메서드

Element.prototype.insertAdjacentHTML(position, DOMString) 메서드는 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소를 삽입할 수 있다.

• position은 DOMString을 전달할 위치로 문자열을 전달하는데 아래 이미지처럼 4가지로 정의되어 있다.

<!DOCTYPE html>
<html>
  <body>
    <!-- beforebegin -->
    <div id='foo'>
      <!-- afterbegin -->
      Hello
      <!-- beforeend -->
    </div>
    <!-- afterend -->
  </body>
  <script>
    const $foo = document.getElementById('foo');

    $foo.insertAdjacentHTML('beforebegin', '<p>beforebegin</p>');
    $foo.insertAdjacentHTML('afterbegin', '<p>afterbegin</p>');
    $foo.insertAdjacentHTML('beforeend', '<p>beforeend</p>');
    $foo.insertAdjacentHTML('afterend', '<p>afterend</p>');
  </script>
</html>

insertAdjacentHTML 메서드는 innerHTML 프로퍼티와 다르게 요소를 추가할 때 기존 요소에는 영향을 주지 않고 새로 추가되는 요소만 파싱하여 효율적이고 빠르다.

하지만 innerHTML 프로퍼티와 마찬가지로 HTML 마크업 문자열을 파싱하기 때문에 XSS 공격에 취약하다.

createElement(tagName)

Document.prototype.createElement(tagName) 메서드는 요소 노드를 생성하여 반환한다.

// 요소 노드 생성
const $li = document.createElement('li');

// 생성된 요소 노드는 자식 노드를 가지고 있지 않다.
console.log($li.childNodes); // NodeList []

createElement 메서드로 생성한 요소 노드는 자식 노드를 가지고 있지 않고 홀로 존재하는 상태다.

createTextNode(text)

Document.prototype.createTextNode(text) 메서드는 텍스트 노드를 생성하여 반환한다.

// 텍스트 노드 생성
const textNode = document.createTextNode('Banana');

텍스트 노드 또한 자식 노드로 추가되지 않고 홀로 존재하는 상태라 텍스트 노드를 요소 노드에 추가하는 처리가 별도로 필요하다.

appendChild(childNode)

Node.prototype.appendChild(childNode) 메서드는 매개변수 childNode에게 인수로 전달한 노드를 appendChild 메서드를 호출한 노드의 마지막 자식 노드로 추가한다.

// 텍스트 노드를 $li 요소 노드의 자식 노드로 추가
$li.appendChild(textNode);

이렇게 요소 노드와 텍스트 노드는 부자 관계로 연결되었지만 아직 DOM에 추가되지 않은 상태다.

위 예제처럼 요소 노드에 자식 노드가 하나도 없는 경우에는 textContent 프로퍼티를 사용하여 추가하는 편이 더욱 간편하다.

// 텍스트 노드를 생성하여 요소 노드의 자식 노드로 추가
$li.appendChild(document.createTextNode('Banana'));

// $li 요소 노드의 자식 노드가 하나도 없으면 위 코드와 동일하게 동작한다.
$li.textContent = 'Banana';

노드 생성과 추가 과정

<!DOCTYPE html>
<html>
  <body>
    <ul id='fruits'>
      <li>Apple</li>
    </ul>
  </body>
  <script>
    const $fruits = document.getElementById('fruits');

    // 요소 노드 생성
    const $li = document.createElement('li');

    // 텍스트 노드 생성
    const textNode = document.createTextNode('Banana');

    // 텍스트 노드를 $li 요소 노드의 자식 노드로 추가
    $li.appendChild(textNode);

    // $li 요소 노드를 $fruits 요소 노드의 마지막 자식 노드로 추가
    $fruits.appendChild($li);
  </script>
</html>

이 과정에서 새롭게 생성한 요소 노드 1개가 DOM에 추가되는데 이 때 리플로우와 리페인트가 1번 실행된다.

만약 요소 노드가 여러개 생성되어 DOM에 여러번 추가되면 리플로우와 리페인트도 여러번 실행되므로 성능에 좋지 않다.

insertBefore(newNode, childNode)

appendChild 메서드는 인수로 전달받은 노드를 자신이 호출한 노드의 마지막 자식 노드로 DOM에 추가한다.

이때 노드 위치를 지정할 수 없고 항상 마지막에 추가하게 되는데 Node.prototype.insertBefore(newNode, childNode) 메서드는 첫 번째 인수로 전달 받은 노드를 두 번째 인수로 전달받은 노드 앞에 삽입한다.

<!DOCTYPE html>
<html>
  <body>
    <ul id='fruits'>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </body>
  <script>
    const $fruits = document.getElementById('fruits');

    // 요소 노드 생성
    const $li = document.createElement('li');

    // 텍스트 노드 생성
    const textNode = document.createTextNode('Orange');

    // 텍스트 노드를 $li 요소 노드의 자식 노드로 추가
    $li.appendChild(textNode);

    // $li 요소 노드를 $fruits 요소 노드의 마지막 자식 노드 앞에 삽입
    $fruits.insertBefore($li, $fruits.lastElementChild);
  </script>
</html>

이터레이션 프로토콜은 내장 객체 또는 구문이 아닌 프로토콜로써 몇가지 규칙에 따라 모든 객체에서 구현될 수 있다.

ES6에서 순회 가능한(Iterable) 자료 구조를 만들기 위해 도입 됐다.

이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있다.

이터러블 프로토콜 (Iterable protocol)

이터러블은 for ... of문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다.

이터러블은 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속 받은 Symbol.iterator메서드를 호출하여 구현할 수 있다.

이터레이터 프로토콜 (Iterator protocol)

이터러블의 Symbol.iterator메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다.

이터레이터는 next 메서드를 가지고 있어 호출하면 이터러블을 순회하고, value와 done 프로퍼티를 갖는 이터레이터 result 객체를 반환한다.

• value는 현재 순회중인 이터러블의 값을 반환
• done은 이터러블의 순회 완료 여부를 반환

즉, 이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할을 한다.

for ... of문은 [Symbole.iterator]() 메소드의 호출로 시작해서 이터러블 값을 next()를 반복적으로 호출하여 순회한다. 순회가 끝나면 done: true를 반환한다.

[Symbol.iterator]()

// 아래 처럼 next 메소드를 통해 이터러블 요소를 탐색하기 위한 포인터 되어있다.
{
  next() {
    return { value: any, done: boolean }
  }
}

// 배열은 이터러블이다.
const array = [1, 2, 3];

// 이터러블은 Symbol.iterator 메소드를 소유한다.
// Symbol.iterator 메소드는 이터레이터를 반환한다.
let iter = array[Symbol.iterator]();

// 이터레이터는 next 메소드를 소유한다.
// next 메소드는 이터레이터 result 객체를 반환한다.
console.log(iter.next()); // {value: 1, done: false}
console.log(iter.next()); // {value: 2, done: false}
console.log(iter.next()); // {value: 3, done: false}
console.log(iter.next()); // {value: undefined, done: true}

[Symbol.iterator]

Symbol.iterator를 프로퍼티 key로 사용한 메소드를 가진 객체는 이터러블이다.

const iterable1 = {};

iterable1[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

console.log([...iterable1]); // [1, 2, 3]

.iterator()가 아닌 [Symbol.iterator] 메소드를 사용하는 이유

기존에 사용 중인 객체가 이미 .iterator() 메소드를 갖고 있다면 문제가 될 수 있다.

따라서 평범한 문자열 대신 Symbol을 사용하여 고유한 메소드를 정의해준 것이다.

const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function';

// 배열, 문자열, Map, Set 등은 이터러블이다.
isIterable([]); // true
isIterable(''); // true
isIterable(new Map()); // true
isIterable(new Set()); // true
isIterable({}); // false

빌트인 이터러블

자바스크립트는 이터레이션 프로토콜을 준수한 객체인 빌트인 이터러블을 제공한다.

for ... of 문

for (변수 선언문 of 이터러블) { ... }이와같이 사용할 수 있다.

// 배열은 이터러블
for (const item of [1, 2, 3]) {
  // item 변수에 순차적으로 1, 2, 3이 할당 된다.
  console.log(item); // 1 2 3
}

// 위 동작을 for문으로는 다음처럼 표현할 수 있다.
const iterable = [1, 2, 3];

// 이터러블의 Symbol.iterator 메서드를 호출하여 이터레이터를 생성한다.
const iterator = iterable[Symbol.iterator]()

for ( ;; ) {
  // next 메서드를 호출하여 이터러블을 순회한다.
  const res = iterator.next();

  // result 객체의 done 프로퍼티 값이 true이면 이터러블 순회를 중단한다.
  if (res.done) break;

  const item = res.value;
  console.log(item); // 1 2 3
}

이터러블과 유사 배열 객체

유사 배열 객체는 배열처럼 인덱스로 프로퍼티 값에 접근 가능하고 length 프로퍼티를 갖는 객체를 말한다.

유사 배열 객체도 length 프로퍼티를 갖기 때문에 for 문으로 순회할 수 있고, 인덱스를 나타내는 숫자 형식의 문자열 프로퍼티를 키로 가지고 있기 때문에 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있다.

// 유사 배열 객체
const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
}

// 유사 배열 객체는 length 프로퍼티를 갖기 때문에 for문으로 순회할 수 있다.
for (let i = 0; i < arrayLike.length; i++) {
  console.log(arrayLike[i]); // 1 2 3
}

하지만 유사 배열 객체는 이터러블이 아는 일반 객체다.

// Symbol.iterator 메서드가 없기 때문에 for ... of 문으로 순회할 수 없다.
for (const item of arrayLike) {
  console.log(item); // 1 2 3
} // TypeError: arrayLike is not iterable

하지만 arguments, NodeList, HTMLCollection은 유사 배열 객체이면서 이터러블이다.

이유는 ES6에서 이터러블이 도입되면서 해당 객체에 Symbol.iterator 메서드를 구현했기 때문에 이터러블이 되었다.

// 유사 배열 객체
const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
}

// Array.from을 통해 유사 배열 객체를 배열로 변환할 수 있다.
const arr = Array.from(arrayLike);
console.log(arr); // [1, 2, 3]

for (const item of arr) {
  console.log(item); // 1 2 3
}

사용자 정의 이터러블

일반 객체에 이터레이션 프로토콜을 준수하도록 구현하면 사용자 정의 이터러블이 된다.

// 피보나치 수열을 구현한 사용자 정의 이터러블
const fibonacci = {
  // Symbol.iterator 메서드를 구현하여 이터러블 프로토콜 준수
  [Symbol.iterator]() {
    let [pre, cur] = [0, 1];
    const max = 10;

    return {
      next() {
        [pre, cur] = [cur, pre + cur];
        return { value: cur, done: cur >= max }
      }
    }
  }
}

for (const num of fibonacci) {
  console.log(num); // 1 2 3 5 8
}

const arr = [...fibonacci];
console.log(arr); // [1, 2, 3, 5, 8]

const [first, second, ...rest] = fibonacci;
console.log(first, second, rest); // 1 2 [3, 5, 8]

만들어진 사용자 정의 이터러블을 for ... of 문으로 순회할 때마다 next 메서드가 호출되고, done 프로퍼티가 true 값을 가질 때 까지 반복한다.

이처럼 이터러블은 for ... of 문뿐만 아니라 스프레드 문법, 배열 디스트럭처링 할당에도 사용 가능하다.

max는 10으로 고정되어 있는데 이를 인수로 전달받아 이터러블을 반환하는 함수로 만들 수 있다.

// 피보나치 수열을 구현한 사용자 정의 이터러블
const fibonacci = function (max) {
  let [pre, cur] = [0, 1];
  // Symbol.iterator 메서드를 구현하여 이터러블 프로토콜 준수
  return {
      [Symbol.iterator]() {    
      return {
          next() {
          [pre, cur] = [cur, pre + cur];
          return { value: cur, done: cur >= max }
        }
      }
    }
  }
}

for (const num of fibonacci(10)) {
  console.log(num); // 1 2 3 5 8
}

클로저를 이해하기 위해서는 핵심 내용인렉시컬 환경에 대해 알고 넘어가야 한다.

렉시컬 스코프

자바스크립트 엔진은 함수를 어디서 호출했는지(동적 스코프)가 아닌, 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는데 이를 렉시컬 스코프(정적 스코프)라 한다.

const x = 1;

function foo() {
    const x = 10;
      bar();
}

function bar() {
    console.log(x);
}

foo(); // ?
bar(); // ?

여기서 함수 foo와 bar는 전역에서 정의되었기 때문에, 정의되는 시점에서 함수의 상위 스코프는 전역으로 결정되고 변하지 않는다.

따라서 함수 bar를 호출하면 변수 x를 bar 스코프 내에서 찾고 없으면 스코프 체인을 통해 상위 스코프인 전역 변수 x의 값을 참조해서 1이 찍힌다.

함수 foo 또한 bar를 호출하고 있는데 호출에 의해 상위 스코프 참조는 변경되지 않기 때문에 동일한 1을 출력된다.

함수 객체의 내부 슬롯 [[Environment]]

함수는 정의된 환경과 호출되는 환경이 다를 수 있다.

호출과는 상관 없이 상위 스코프를 기억해야 하므로 상위 스코프의 참조를 함수의 내부 슬롯[[Environment]]에 저장하게 된다.

예를 들어, 전역에서 정의된 함수 선언문은 전역 코드가 평가되는 시점에 평가되어 함수 객체를 생성한다.

생성된 함수 객체 내부 슬롯 [[Environment]]에는 실행 컨텍스트의 렉시컬 환경인 전역 렉시컬 환경의 참조가 저장된다.

만약 함수 내부에서 정의된 함수 표현식은 외부 함수가 실행되는 시점에 평가되어 함수 객체를 생성한다.

외부 함수 렉시컬 환경의 참조가 생성된 함수 객체 내부 슬롯에 저장된다.

따라서 위 예제를 보면 foo와 bar 함수는 전역에서 함수 선언문으로 정의되었기 때문에 내부 슬롯 [[Environment]]에는 전역 렉시컬 환경의 참조가 저장된다.

클로저와 렉시컬 환경

위에서 설명한 렉시컬 스코프와 함수 객체의 내부 슬롯에 대한 개념을 이해했다면 클로저를 이해할 수 있다.

const x = 1;

function outer() {
  const x = 10;
  const inner = funtion () {
    console.log(x);
  }
  return inner;

const innerFunc = outer();
innerFunc(); // ?

outer 함수를 호출하면 중첩 함수인 inner를 반환하고 생명 주기를 마감한다.

이때 outer 함수의 지역 변수 x도 같이 생명 주기를 마감하고, 더이상 outer 함수의 지역 변수 x에는 접근할 수 없다.

하지만 innerFunc 함수를 실행하면 outer 함수의 지역 변수 x 값을 출력하게 된다.

이처럼 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다.

이러한 중첩 함수를 클로저라고 부른다.

outer 함수의 생명 주기가 종료되면 해당 함수의 실행 컨텍스트가 실행 컨텍스트 스택에서 제거된다.

outer 함수의 실행 컨텍스트에서 제거는 되지만 outer 함수의 렉시컬 환경까지 소멸하는 것은 아니다.

outer 함수의 렉시컬 환경은 inner 함수의 [[Environment]] 내부 슬롯에 참조되고 있고 inner 함수도 전역 변수 innerFunc에 참조되고 있기 때문에 가비지 컬렉션의 대상이 되지 않아 메모리 공간에서 제거되지 않는다.

클로저의 조건은 다음과 같다.

1. 중첩 함수로 선언되었는가?
2. 상위 스코프의 식별자를 참조하고 있는가?
3. 중첩 함수가 외부 함수보다 더 오래 유지되는가? (오래 유지하려면 중첩 함수가 외부 함수의 반환값이어야 한다.)

위 3가지 조건에 하나라도 부합되지 않으면 클로저가 아니다.

또한 클로저는 상위 스코프 식별자가 x, y, z가 있고 그 중 x만 참조하고 있다면 x만 기억하고 그 외 식별자는 기억하지 못한다.

이렇게 클로저에 의해 참조되는 상위 스코프의 변수를 자유 변수라고 부른다.

클로저는 상위 스코프를 기억해야 하므로 불필요한 메모리 낭비라고 생각할 수도 있지만, 클로저가 참조하고 있지 않은 식별자는 기억하지 않으므로 불필요한 메모리 낭비가 아니다.

따라서 클로저는 필요하다면 적극적으로 활용하는 것이 좋다.

클로저 활용하기

주로 클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다.

즉, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.

const increase = (function () {
  let num = 0;

  // 클로저
  return function () {
    return ++num;
  };
}());

console.log(increase()); // 1
console.log(increase()); // 2
console.log(increase()); // 3

즉시 실행 함수가 실행되고 반환한 함수가 increase 변수에 할당된다.

increase 변수에 할당된 함수는 즉시 실행 함수의 렉시컬 환경을 기억하는 클로저가 된다.

num 변수는 외부에서 직접 접근할 수 없는 private 변수이므로 안전하게 상태를 변경할 수 있다.

const counter = (function () {
  let num = 0;

  return {
    // num : 0 프로퍼티는 public 하므로 은닉되지 않는다.
    increase() {
      return ++num;
    },
    decrease() {
      return num > 0 ? --num : 0;
    }
  };
}());

console.log(counter.increase()); // 1
console.log(counter.increase()); // 2

console.log(counter.decrease()); // 1
console.log(counter.decrease()); // 0

즉시 실행 함수가 반환하는 객체 리터럴은 코드 블록이 아니므로 별도의 스코프를 생성하지 않는다.

다음은 함수형 프로그래밍에서 클로저를 활용하는 예제다.

// 함수를 인수로 전달받고 함수를 반환하는 고차 함수
function makeCounter(predicate) {
  let counter = 0;

  return function () {
    counter = predicate(counter);
    return counter;
  };
}

function increase(n) {
  return ++n;
}

function decrease(n) {
  return --n;
}

const increaser = makeCounter(increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

// increaser 함수와는 별개의 독립된 렉시컬 환경을 갖기 때문에 카운터 상태가 연동되지 않는다.
const decreaser = makeCounter(decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2

makeCounter 함수는 인자로 전달받은 함수를 합성하여 자신이 반환하는 값으로 함수의 동작을 변경할 수 있다.

이 때 주의할 점은 makeCounter 함수를 호출해 함수를 반환할 때 반환된 함수는 자신만의 독립된 렉시컬 환경을 갖는다.

increaser와 decreaser 함수는 makeCounter 함수를 호출 할 때마다 함수 객체를 생성하고 반환한 후 소멸된다. 따라서 각각 생성된 함수 객체는 [[Environment]] 내부 슬롯에 makeCounter 함수의 렉시컬 환경을 기억하고 있기 때문에 counter 변수는 공유 되지 않는다.

만약 독립된 counter가 아닌 연동하여 증감이 가능한 카운터를 만들려면 렉시컬 환경을 공유하는 클로저를 만들어야 한다.

function counter = (function () {
  let count = 0;

  return function (predicate) {
    count = predicate(count);
    return count;
  };
}());

function increase(n) {
  return ++n;
}

function decrease(n) {
  return --n;
}

console.log(counter(increase)); // 1
console.log(counter(increase)); // 2

console.log(counter(decrease)); // 1
console.log(counter(decrease)); // 0

캡슐화와 정보 은닉

캡슐화는 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것을 말한다.

캡슐화는 주로 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 정보 은닉이라고 한다.

정보 은닉은 외부에 공개하지 않고 감추어 적절치 못한 접근으로 부터 객체의 상태가 변경되는 것을 보호하고, 객체 간의 결합도를 낮추는 효과가 있다.

입력 값을 받은 뒤 출력 값을 반환하는데, 입력으로 전달 받는 변수를 매개 변수, 함수 호출 시 입력하는 값을 인수, 함수 내부에서 처리하고 나온 출력 값을 반환 값이라고 한다.

함수 또한 여러 개 존재할 수 있어서 특정 함수를 구별하기 위해 식별자를 함수의 이름으로 사용할 수 있다.

// 함수 정의
function add(x, y) {
  return x + y;
}

// 함수 호출
var result = add(2, 5);

console.log(result); // 7

함수를 왜 사용하는가?

함수는 필요할 때 여러 번 호출할 수 있다는 특징이 있다.

• 하나의 함수로 동일한 작업에서 사용하여 코드의 재사용성
• 하나의 코드에서 수정함으로써 여러 곳에서 수정할 필요없는 유지보수 편의성
• 적절한 함수의 이름으로 코드의 가독성

이와 같은 이유로 함수를 사용하고, 함수는 객체지만 일반 객체와 다르다.

일반 객체는 호출할 수 없지만 함수는 호출할 수 있고, 함수는 다른 함수의 인수로 전달할 수 있는 일급 객체이다.

함수 정의

함수를 정의하는 방법에는 4가지가 있다.

// 함수 선언문
function add(x, y) {
  return x + y;
}

// 함수 표현식
var add = function (x, y) {
  return x + y;
};

// Function 생성자 함수
var add = new Function('x', 'y', 'return x + y');

// 화살표 함수(ES6)
var add = (x, y) => x + y;

함수 선언문

함수 선언문은 함수 이름을 생략할 수 없다.

또한 함수 선언문은 표현식이 아닌 문이다.

크롬 콘솔에서 함수 선언문을 실행하면 undefined가 출력되고, 표현식인 문인 화살표 함수는 함수가 출력되는 것을 볼 수 있다.

function foo() { console.log('foo'); }

foo(); // foo

(function bar() { console.log('bar'); });

bar(); // ReferenceError: bar is not defined

함수 표현식

자바스크립트의 함수는 값처럼 변수에 할당 할 수도, 프로퍼티 값이 될 수도, 배열의 요소가 될 수도 있다.

이러한 성질을 갖는 객체를 일급 객체라 하며, 함수 리터럴로 생성한 함수 객체를 변수에 할당하는 방식을 함수 표현식이라 한다.

함수 표현식은 함수 이름을 생략할 수 있다.

// 익명 함수 표현식
var add = function (x, y) {
  return x + y;
}

// 기명 함수 표현식
var add = function foo (x, y) {
  return x + y;
}

console.log(add(2,5)); // 7

console.log(foo(2,5)); // ReferenceError: foo is not defined

함수 호이스팅

// 함수 참조
console.dir(add); // f add(x, y)
console.dir(sub); // undefined

// 함수 호출
console.log(add(2, 5)); // 7
console.log(sub(2, 5)); // TypeError: sub is not a function

// 함수 선언문
function add(x, y) {
  return x + y;
};

// 함수 표현식
var sub = function (x, y) {
  return x - y;
}

위 예제를 보면 함수 선언문은 이전에 호출이 가능하지만, 함수 표현식은 이전에 호출할 수 없다.

그 이유는 각각의 함수 생성 시점이 다르기 때문이다.

모든 선언문은 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행이 되면서 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당하게 된다.

따라서 함수 선언문은 이전에 함수를 참조 및 호출할 수 있으며 이처럼 함수 선언문이 코드의 상단에 끌어 올려진 것처럼 동작하는 것을 함수 호이스팅이라고 한다.

함수 표현식은 var 키워드로 선언했기 때문에 undefined로 초기화 되고, 아직 함수 객체가 할당되지 않았기 때문에 함수 호출에서는 타입 에러가 발생하는 것이다.

즉 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생하게 되며, 이로 인해 함수 선언문 대신 함수 표현식을 사용할 것을 권장한다.

Function 생성자 함수

Function 생성자 함수에 매개 변수 목록과 함수 몸체를 문자열로 전달하면서 new 연산자와 함께 호출하면 함수 객체가 생성된다.

new 연산자 없이 호출해도 결과는 동일하게 동작한다.

var add = new Function('x', 'y', 'return x + y');

console.log(add(2, 5)); // 7

Function 생성자 함수는 클로저를 생성하지 않는 등 함수 선언문이나 표현식과 다르게 동작한다.

화살표 함수

ES6에서 도입된 함수로 function 키워드 대신 화살표 =>를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있고, 항상 익명 함수로 정의한다.

const add = (x, y) => x + y;
console.log(add(2, 5)); // 7

화살표 함수는 생성자 함수로 사용할 수 없고, 기존 함수와 this 바인딩 방식이 다르며, prototype 프로퍼티가 없고, arguments 객체를 생성하지 않는 점이 특징이다.

함수 호출

함수를 호출할 때 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는다.

따라서 일치하지 않아도 에러가 발생하지 않고, 인수가 부족해서 매개변수에 인수가 할당되지 않으면 해당 값은 undefined다.

function add(x, y) {
  return x + y;
}

console.log(add(2)); // 2 + undfined가 되므로 NaN이 반환된다.
console.log(add('a', 'b')); // 'ab'

또한 자바스크립트는 동적 타입 언어로써 매개변수의 타입을 사전에 지정할 수 없다.

따라서 적절한 인수가 전달되었는지 확인하는 법은 다음과 같다.

function add(x, y) {
  if (typeof x !== 'number' || typeof y !== 'number') {
    // 매개변수를 통해 전달된 인수의 타입이 부적절한 경우 에러를 발생
    throw new TypeError('인수는 모두 숫자 값이어야 한다.');
  }
  return x + y;
}

console.log(add(2)); // TypeError: 인수는 모두 숫자 값이어야 한다.
console.log(add('a', 'b')); // TypeError: 인수는 모두 숫자 값이어야 한다.

이처럼 함수 내부에서 적절한 인수가 전달되었는지 확인하지만 부적절한 호출을 사전에 방지할 수 없고, 에러는 런타임에서 발생하게 된다. 따라서 타입스크립트를 사용하면 컴파일 시점에서 부적절한 호출을 방지할 수 있다.

만약 매개변수보다 인수가 더 많은 경우 초과된 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관된다.

function add(x, y) {
  console.log(arguments); // Arguments(3) [2, 5, 10, callee: f, Symbol(Symbol.iterator): f]
  return x + y;
}

console.log(add(2, 5, 10)); // 7

arguments 객체는 매개 변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하게 사용할 수 있다.

function add(x, y, z) {
  x = x || 0;
  y = y || 0;
  z = z || 0;
  return x + y + z;
}

// ES6에서 도입된 매개변수 기본값 지정
function add(x = 0, y = 0, z = 0) {
  return x + y + z;
}

console.log(add(1, 2, 3)); // 6
console.log(add(1, 2)); // 3
console.log(add(1)); // 1
console.log(add()); // 0

이렇게 사용하면 인수 체크 및 초기화를 시킬 수 있다.

참조에 의한 전달과 외부 상태의 변경

매개변수도 함수 몸체 내부에서 변수와 동일하게 취급되므로 매개변수 또한 타입에 따른 전달 방식을 그대로 따른다.

원시 값(primitive)은 값에 의한 전달(pass by value) 객체 값(object)은 참조에 의한 전달(pass by reference)

// 매개변수 primitive는 원시 값, obj는 객체를 전달 받음
function changeVal(primitive, obj) {
  primitive += 100;
  obj.name = 'kim';
}

// 외부 상태
let num = 100;
let person = { name: 'lee' };

console.log(num); // 100
console.log(person); // {name: 'lee'}

// 원시 값은 값 자체가 복사되어 전달되고 객체는 참조 값이 복사되어 전달된다.
// 원시 값은 재할당이 이뤄지고 객체는 변경 가능한 값이므로 직접 변경
changeVal(num, person);

// 원시 값은 원본이 훼손되지 않는다.
console.log(num); // 100

// 객체는 원본이 훼손된다. 부수 효과 발생
console.log(person); // {name: 'kim'}

원시 타입 인수는 값 자체가 복사되어 매개변수에 전달되기 때문에 함수 내부에서 매개변수 값을 변경해도 원본은 훼손되지 않는다. (부수 효과 발생하지 않음)

하지만 객체 타입의 인수는 참조 값이 복사되어 매개변수에 전달되기 때문에 함수 내부에서 참조 값을 변경할 경우 원본이 훼손된다. (부수 효과 발생함)

이처럼 함수에 객체를 전달하고 함수 내부에서 객체 값이 변경되면 상태 변화를 추적하기 어렵고, 코드의 복잡성이 높아지고 버그가 일어날 수 있다.

이를 해결하기 위해서는 객체를 불변 객체로 만들어 사용해야 하는데, 불변 객체로 만들기 위해서는 깊은 복사를 통해 새로운 객체를 생성하고 재할당을 통해 교체해야 한다.

이처럼 외부 상태를 변경하지 외부 상태에 의존하지 않는 함수를 순수 함수라고 한다.

다양한 함수 형태

즉시 실행 함수(IIFE, Immediately Invoked Function Expression)

함수 정의와 동시에 즉시 호출하는 함수를 즉시 실행 함수라고 하며, 단 한번만 호출되고 다시 호출할 수 없다.

// 익명 즉시 실행 함수
(function() {
   var a = 3;
   var b = 5;
   return a * b;
}());

// 기명 즉시 실행 함수
(function foo() {
   var a = 3;
   var b = 5;
   return a * b;
}());

foo(); // ReferenceError: foo is not defined

function() { // SyntaxError: Function statements require a function name
   var a = 3;
   var b = 5;
   return a * b;
}();

function foo () { 
   var a = 3;
   var b = 5;
   return a * b;
}(); // SyntaxError: Unexpected token ')' 
// function foo() {}(); => function foo() {};();

이처럼 즉시 실행 함수는 반드시 그룹 연산자 (...)로 감싸야 한다.

함수 선언문은 함수 이름을 생략할 수 없고, 함수 선언문이 끝나는 위치(중괄호 뒤에) 세미콜론이 암묵적으로 추가되기 때문에 위와 같은 에러가 발생하게 된다.

즉 그룹 연산자로 함수를 묶는 이유는 함수 리터럴을 평가해서 함수 객체를 생성하기 위해서다.

재귀 함수

함수가 자기 자신을 호출하는 것을 재귀 호출이라고 한다.

재귀 함수는 자기 자신을 호출하는 함수를 말하며 주로 반복되는 처리를 위해 사용한다.

// 일반적인 반복 함수
function coundown(n) {
    for (var i=n; i>0; i--) console.log(i);
}

// 재귀 함수
function  countdownRecursive(n) {
    if (n==0) return
    console.log(n)
    countdownRecursive(n-1)
}

재귀 함수는 무한 호출이 될 수 있으므로 반드시 종료 조건을 넣어줘야한다.

재귀함수에 return문이 없었다면, -무한대까지 계속 반복하다가 스택오버플로 에러가 발생한다.

이런 점에서 코드를 직관적이고 간결하게 짤 수 있을 때만 잘 선택해서 사용해야한다.

중첩 함수

함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라 한다.

중첩 함수를 포함하는 함수를 외부 함수라 부르며, 중첩 함수는 외부 함수 내에서만 호출할 수 있다.

function outer() {
  var x = 1;

  // 중첩 함수
  function inner() {
    var y = 2;
    // 외부 함수의 변수를 참조할 수 있다.
    console.log(x + y); // 3
  }

  inner();
}

outer();

콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고하며, 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고한다.

고차 함수는 콜백 함수를 자신의 일부분으로 합성하며 고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다.

콜백 함수는 고차 함수에 의해 호출되며 이때 고차 함수는 필요에 따라 함수에 인수를 전달할 수 있다.

// 외부에서 전달받은 f를 n만큼 반복 호출한다
function repeat(n, f) {
  for (var i = 0; i < n; i++) {
    f(i); // i를 전달하면서 f를 호출
  }
}

var logAll = function (i) {
  console.log(i);
};

// 반복 호출할 함수를 인수로 전달한다.
repeat(5, logAll); // 0 1 2 3 4

var logOdds = function (i) {
  if (i % 2) console.log(i);
};

// 반복 호출할 함수를 인수로 전달한다.
repeat(5, logOdds); // 1 3

콜백 함수는 함수형 프로그래밍 패러다임뿐만 아니라 비동기 처리(이벤트 처리, Ajax 통신, 타이머 함수 등)에 활용되는 중요한 패턴이다.

//콜백 함수를 사용한 이벤트 처리
//myButton 버튼을 클릭하면 콜백 함수 실행
document.getElementbyId('myButton').addEventListener('click', function () {
    console.log('button clicked!');
});

// 콜백 함수를 사용한 비동기 처리
// 1초 후에 메시지 출력
setTimeout(function () {
    console.log('1초 경과');
});

순수 함수와 비순수 함수

순수 함수

함수형 프로그래밍에서 어떤 외부 상태에 의존하지도 않고 변경하지도 않는, 즉 부수 효과가 없는 함수다.

var count = 0; // 현재 카운트를 나타내는 상태

// 순수 함수 increase는 동일한 인수가 전달되면 언제나 동일한 값을 반환한다.
function increase(n) {
  return ++n;
}

// 순수 함수가 반환한 결과값을 변수에 재할당해서 상태를 변경
count = increase(count);
console.log(count) // 1

count = increase(count);
console.log(count) // 2

비순수 함수

외부상태에 의존하거나 외부 상태를 변경하는, 즉 부수 효과가 있는 함수다.

var count = 0; // 현재 카운트를 나타내는 상태: increase 함수에 의해 변화한다.

// 비순수 함수
function increase() {
  return ++count; // 외부 상태에 의존하며 외부 상태를 변경한다.
}

// 비순수 함수는 외부 상태(count)를 변경하므로 상태 변화를 추적하기 어려워진다.
increase();
console.log(count) // 1

increase();
console.log(count) // 2

함수형 프로그래밍

함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 외부 상태를 변경하는 부수 효과를 최소화해서 불변성을 지향하는 프로그래밍 패러다임이다. 자바스크립트는 멀티 패러다임 언어이므로 객체지향 프로그래밍뿐만 아니라 함수형 프로그래밍을 적극적으로 활용하고 있다.

하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산등을 수행해 하나의 값을 만들며, 연산의 대상을 피연산자라고 한다.

또한 피연산자는 값으로 평가될 수 있는 표현식이다.

산술 연산자

피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만드는 연산자를 의미한다.

만약 산술 연산이 불가능한 경우 NaN을 반환한다.

이항 산술 연산자

2개의 피연산자를 산술 연산하여 숫자 값을 만든다.

모든 이항 산술 연산자는 부수 효과(side effect)가 없다.

즉, 산술 연산을 해도 피연산자의 값이 바뀌지 않고 새로운 값을 만든다.

단항 산술 연산자

1개의 피연산자를 산술 연산하여 숫자 값을 만든다.

증가/감소(++/--) 연산자는 위치에 따라 연산이 다르게 수행된다

x = 5;
// 선할당 후증감
result = x++;
console.log(result, x); // 5 6
result = x--;
console.log(result, x); // 6 5

// 선증감 후할당
result = ++x;
console.log(result, x); // 6 6
result = --x;
console.log(result, x); // 5 5

또한 + 연산자는 피연사자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.

'1' + 2; // '12'
1 + '2'; // '12'

할당 연산자

우항에 있는 피연산자의 결과 값을 좌항에 있는 변수에 할당한다.

따라서 할당 연산자는 좌항에 있는 변수의 값이 변하는 부수 효과가 있다.

이러한 할당문은 표현식으로 할당된 값으로 평가되어 다음과 같이 사용할 수 있다.

console.log(x = 10); // 10

// 연쇄 할당, 오른쪽에서 왼쪽으로 진행
a = b = c = 0;
console.log(a, b, c); // 0 0 0

비교 연산자

좌항과 우항의 피연산자를 비교한 뒤 결과를 불리언 값으로 변환한다.

불리언 값이기 때문에 if문이나 for문과 같은 제어문의 조건식으로 주로 사용한다.

동등/일치 비교 연산자

동등 비교 연산자와 일치 비교 연산자의 차이는 엄격함의 정도가 다르다.

동등 비교 연산자(==)는 느슨한 비교로 값만 같으면 되지만, 일치 비교 연산자(===)는 엄격한 비교로 값과 타입이 같아야 한다.

동등 비교 연산자는 좌항과 우항의 피연산자를 비교할 때 암묵적 타입 변환을 통해 타입을 일치 시킨 뒤 값을 비교하여 서로 다른 타입이더라도 값이 같다면 true를 반환하게 된다.

5 == 5; // true

// 타입은 다르지만 암묵적 타입 변환으로 타입을 일치 시키면 값이 일치하기 때문에 true다.
5 == '5'; // true

// 안티 패턴
'0' == ''; // false
0 == ''; // true
0 == '0'; // true
false == 'false' // false
false == '0' // true
false == null // false
false == undefined // false

동등 비교 연산자는 이러한 안티 패턴이 있기에 예측하기 어려운 결과를 만들 수 있으므로 일치 비교 연산자를 사용하는 것이 좋다.

일치 비교 연산자는 암묵적 타입 변환 없이 좌항과 우항의 타입과 값이 동일해야 true를 반환한다.

5 === 5; // true

// 타입이 서로 다르기 때문에 false다.
5 === '5'; // false

// NaN은 자신과 일치하지 않는 유일한 값이다.
NaN === NaN; // false

// isNaN 함수를 통해 NaN인지 확인이 가능하다.
isNaN(NaN); // true
isNaN(10); // false
isNaN(1 + undefined); // true

// 양의 0과 음의 0의 비교는 모두 true를 반환한다.
0 === -0; // true
0 == -0; // true

Object.is 메서드는 일치 비교 연산자와 비슷하게 정확한 비교 결과를 반환하지만 조금 다른점이 있다. Object.is(-0, +0) => false Object.is(NaN, NaN) => true 이 두개를 제외하고는 일치 비교 연산자와 동일한 결과를 반환한다.

대소 관계 비교 연산자

피연산자의 크기를 비교하여 불리언 값을 반환한다.

삼항 조건 연산자

조건식의 결과 값에 따라 반환할 값을 결정한다.

사용법은 조건식 ? 조건식이 true일 때 반환 값 : 조건식이 false일 때 반환 값으로 표현한다.

if - else는 표현식이 아니지만 삼항 조건 연산자는 표현식으로 사용할 수 있다.

const x = 2;
let result = x % 2 ? '홀수' : '짝수';

console.log(result); // 짝수

// 아래와 동일하게 동작한다.
if(x % 2) result = '홀수';
else result = '짝수';

console.log(result); // 짝수

논리 연산자

우항과 좌항의 피연산자를 논리 연산한다.

만약 부정 논리 연산자의 경우 우항의 피연산자를 논리 연산한다.

// 논리합
true || false; // true
false || true; // true
// 위 두 개의 비교는 같은 true를 반환한다.
// 하지만 첫 번째는 앞의 값이 true이기 때문에 뒤에 오는 값은 검사하지 않고 true를 반환한다.
// 두 번째는 앞의 값이 false이기 떄문에 뒤에 값까지 검사해서 true를 반환한다.

// 논리곱
true && false; // false
false && true; // false
// 여기서도 같은 false를 반환한다.
// 하지만 첫 번째는 앞이 true이기 때문에 뒤에 값까지 확인해야 결과를 알 수 있다.
// 두 번째는 앞이 false이기 떄문에 뒤에 값은 확인하지 않아도 false가 된다.

쉼표 연산자

왼쪽 피연산자부터 차례대로 피연산자를 평가하여 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 결과를 반환한다.

var x, y, z;

x = 1, y = 2, z = 3; // 마지막 피연산자의 값 3을 반환

그룹 연산자

소괄호로 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다.

그룹 연산자를 사용하면 연산자의 우선 순위를 조절할 수 있고, 그룹 연산자가 가장 높다.

10 * 2 + 3; // 23

10 * (2 + 3); //50

typeof 연산자

피연산자의 데이터 타입을 문자열로 반환한다.

typeof 연산자는 7가지 타입 string, number, boolean, undefined, symbol, object, function 중 하나를 반환한다.

typeof 연산자로 null을 연산하면 object를 반환하는데, 이는 자바스크립트의 첫 번째 버그다. 하지만 기존 코드에 영향을 줄 수 있어 아직까지 수정되지 못하고 있다.

따라서 값이 null 타입인지 확인할 때는 일치 비교 연산자(===)을 사용해야 한다.

선언하지 않은 식별자를 typeof 연산자로 연산하면 undefined를 반환하는 것도 주의하자.

지수 연산자

ES7에서 도입되었으며 좌항의 피연산자에 대해 우항의 피연산자를 지수 거듭 제곱하여 숫자 값을 반환한다.

2 ** 2; // 4
2 ** 2.5; // 5.65685424949238
2 ** 0; // 1
2 ** -2; // 0.25

지수 연산자 이전에는 Math.pow 메서드를 통해 값을 반환했다.

그 외의 연산자

즉 API를 생성하지 않더라도 함수 수준에서 서버에 직접 접근해 데이터 요청 등을 수행할 수 있다.

규칙

서버 액션을 만들려면 async 함수 내부 또는 파일 상단에 use server 지시어로 선언해야한다.

// Server Component
export default function Page() {
  // Server Action
  async function create() {
    'use server'

    // ...
  }

  return (
    // ...
  )
}

또는 파일 상단에 선언하면 클라이언트 컴포넌트나 서버 컴포넌트에서 가져다 사용할 수 있다.

// app/actions.ts
'use server'

export async function create() {
  // ...
}

// app/ui/button.tsx
import { create } from '@/app/actions'

export function Button() {
  return (
    // ...
  )
}

Forms

React는 HTML form 요소를 확장하여 action 프로퍼티로 서버 액션을 호출할 수 있다.

form에서 action이 호출되면 FormData 객체를 자동으로 전달 받고, 필드를 관리하기 위해 useState를 사용할 필요가 없이 FormData 메서드를 사용하여 데이터를 추출할 수 있다.

export default function Page() {
  async function createInvoice(formData: FormData) {
    'use server'

    const rawFormData = {
      customerId: formData.get('customerId'),
      amount: formData.get('amount'),
      status: formData.get('status'),
    }

    // mutate data
    // revalidate cache
  }

  return <form action={createInvoice}>...</form>
}

추가 인수 전달

만약 서버 액션에 추가 인수를 전달하기 위해서는 bind메서드를 사용해서 전달할 수 있다.

function AddToCart({productId}) {
  async function addToCart(productId, formData) {
    "use server";
    //...
  }
  const addProductToCart = addToCart.bind(null, productId);
  return (
    <form action={addProductToCart}>
      <button type="submit">Add to Cart</button>
      //<input type="hidden" name="productId" value={productId} />
    </form>
  );
}

useFormStatus

Form이 제출되는 동안 보류 중인 상태를 표시하기 위해 useFormStatus 훅을 사용할 수 있다.

해당 훅은 특정 Form의 상태를 반환하기 때문에 <form> 요소의 자식으로 정의되어야 한다.

또한 훅은 클라이언트 컴포넌트에서 사용해야한다.

// app/submit-button.tsx
'use client'

import { useFormStatus } from 'react-dom'

export function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button type="submit" disabled={pending}>
      Add
    </button>
  )
}

// app/page.tsx
import { SubmitButton } from '@/app/submit-button'
import { createItem } from '@/app/actions'

// Server Component
export default async function Home() {
  return (
    <form action={createItem}>
      <input type="text" name="field-name" />
      <SubmitButton />
    </form>
  )
}

Network

서버 액션을 통해 구현한 데모 사이트가 있다.

여기서 todo title과 body를 입력하고 Add 버튼을 클릭하고 네트워크 탭을 보면 다음처럼 보인다.

페이로드를 보면 ACTION_ID라는 서버 액션과 입력한 데이터를 볼 수 있다.

서버 액션을 실행하면 클라이언트에서 현재 라우트 주소와 ACTION_ID, 입력한 데이터를 보내게 된다.

그러면 서버에서 요청 받은 데이터를 바탕으로 실행해야 하는 서버 액션을 찾고 서버에서 직접 실행한다.

use server로 선언 되어 있는 내용은 클라이언트 번들링에 포함되지 않고 서버에서만 실행되고, 따라서 CORS 이슈가 발생하지 않는다.

Form이 아닌 요소

보통 <form> 요소 내에서 서버 액션을 사용하지만, 이벤트 핸들러나 useEffect와 같은 코드 내에서도 호출할 수 있다.

// app/like-button.tsx
'use client'

import { incrementLike } from './actions'
import { useState } from 'react'

export default function LikeButton({ initialLikes }: { initialLikes: number }) {
  const [likes, setLikes] = useState(initialLikes)

  return (
    <>
      <p>Total Likes: {likes}</p>
      <button
        onClick={async () => {
          const updatedLikes = await incrementLike()
          setLikes(updatedLikes)
        }}
      >
        Like
      </button>
    </>
  )
}

onClick과 같은 이벤트 핸들러에서 서버 액션을 호출하여 좋아요 수를 늘릴 수 있다.

Revalidating

revalidatePath API를 사용하여 서버 액션 내에서 Next.js 캐시 유효성을 재검증할 수 있다.

'use server'

import { revalidatePath } from 'next/cache'

export async function createPost() {
  try {
    // ...
  } catch (error) {
    // ...
  }
  revalidatePath('/posts')
}

또한 revalidateTag API도 동일하게 동작한다.

'use server'

import { revalidateTag } from 'next/cache'

export async function createPost() {
  try {
    // ...
  } catch (error) {
    // ...
  }
  revalidateTag('posts')
}

참고

• Next.js - server actions
• Nextjs-server-actions Github Example

Next.js 13버전 이전까지 공통 레이아웃을 구성하려면 _app 파일 내에서만 가능했다.

하지만 그 방식 마저도 각 페이지별로 서로 다른 레이아웃을 적용하는데도 무리가 있었다.

_app: app은 페이지를 초기화하기 위한 용도로 사용되며, 다음과 같은 작업이 가능하다.

• 페이지 변경 시에 유지하고 싶은 레이아웃
• 페이지 변경 시 상태 유지
• 페이지간 추가적인 데이터 삽입
• global CSS 주입

이러한 한계를 극복하기 위해 13버전 이후부터 App 디렉토리가 나오게 됐다.

라우팅

기존 13버전 이전에는 라우팅을 /pages로 정의하던 방식이 /app 디렉터리로 이동했다.

Next.js 12이하: /pages/a/b/index.tsx => /a/b로 라우팅

Next.js 13 app: /app/a/b => /a/b로 라우팅

Next.js 13의 app 디렉토리 내부 파일명은 라우팅 명칭에 아무런 영향이 없고, app 내부에서 가질 수 있는 파일명은 예약어로 제한되어있다.

layout.tsx

layout 파일은 페이지의 기본적인 레이아웃을 구성한다. 해당 폴더에 layout이 있다면 그 하위 폴더 및 주소에 모두 영향을 미친다.

// app/layout.ts
import { ReactNode } from 'react';

export default function AppLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="ko">
      <head>
        <title>안녕하세요</title>
      </>
      <body>
        <h1>웹 페이지입니다.</h1>
        <main>{children}</main>
      </body>
    </html>
  )
}

// app/blog/layout.tsx
import { ReactNode } from 'react';

export default function BlogLayout({ children }: { children: ReactNode }) {
  return <section>{children}</section>
}

루트 layout은 모든 페이지에 영향을 미치는 공통 레이아웃으로 단 하나의 layout만 만들 수 있다.

이처럼 주소별 공통 레이아웃을 만들 수 있고, layout 파일 내에서는 HTML에서 기본으로 제공하는 <html/> 태그 등을 추가하고 수정할 수 있다.

layout 파일에서 주의할 점

• app 디렉터리 내부에서 사용되는 예약어로, 무조건 layout.{js|jsx|ts|tsx}로 사용해야 한다.
• layout은 children을 props로 받아서 렌더링해야 한다. (children은 같은 경로 page.tsx에 작성된 내용을 전달받게 된다.)
• layout 내부에서도 API요청과 같은 비동기 작업 수행이 가능하다. (서버 컴포넌트이므로 use client를 사용할 수 없다.)

page.tsx

app 디렉토리 안에서 page도 예약어이며, 일반적으로 이전에 다뤘던 페이지를 의미한다.

export default function BlogPage() {
  return <>블로그 글 내용</>
}

page가 받는 props는 다음과 같다.

• params: 옵셔널 값으로, [...id]와 같은 동적 라우트 파라미터를 사용할 경우 해당 파라미터 값이 들어온다.
• searchParams: QueryString 값이 들어오게 된다. 예시로 ?a=1&b=2로 접근하면 {a: '1', b:'2' }라는 객체 값이 들어온다. 해당 값은 page 내부에서만 수행가능하다.

page 파일에서 주의할 점

• app 디렉토리 내부에서 사용되는 예약어로, 무조건 page.{js|jsx|ts|tsx}로 사용해야 한다.
• 내부에서 반드시 export default로 내보내는 컴포넌트가 있어야 한다.

error.tsx

해당 라우팅 영역에서 사용되는 공통 에러 컴포넌트로, 특정 라우팅별로 서로 다른 에러 UI를 렌더링할 수 있다.

'use client'

import { useEffect } from 'react'

exort default function Error({ error, reset }: { error: Error, reset: () => void }) {
  useEffect(() => {
    console.log('logging error:', error);
  }, [error])

  return (
    <>
      <div>
        <strong>Error:</strong> {error?.message}
      </div>
      <div>
        <button onClick={() => reset()}>에러 리셋</button>
      </div>
    </>
  )
}

2개의 props를 전달받는다.

error는 에러 정보를 담고 있고,reset은 에러 바운더리를 초기화할 수 있다.

error 파일 주의할 점

• 에러 바운더리는 클라이언트에서만 작동하므로 error 컴포넌트도 클라이언트 컴포넌트여야 하기 때문에 상단에 use client를 작성했다.
• 같은 수준의 layout에서 에러가 발생할 경우 해당 error 컴포넌트로 이동하지 않는다. 그 이유는 아래와 같은 구조로 페이지가 렌더링되기 때문이다.

 <Layout>
  <Error>
    {children}
  </Error>
 </Layout>

만약 Layout에서 발생한 에러를 처리하려면 상위 컴포넌트에서 error를 사용하거나 app의 루트 에러처리를 하는 app/global-error.js 페이지를 사용하면 된다.

not-found.tsx

not-found 파일은 특정 라우팅 하위의 주소를 찾을 수 없는 404 페이지를 렌더링할 때 사용한다.

export default function NotFound() {
  return (
    <>
      <h2>Not Found</h2>
      <p>404</p>
       </>
  )
}

error와 마찬가지로 전체 애플리케이션에서 404를 노출하려면 app/not-found.tsx를 생성하면 된다.

loading.tsx

loading은 리액트 Suspense를 기반으로 해당 컴포넌트가 불러오는 중임을 나타낼 때 사용한다.

export default function Loading() {
  return 'Loading...';
}

route.ts

Next.js 13.4.0에서 app 디렉토리가 정식으로 출시되면서 /app/api 기준으로 디렉토리 라우팅을 지원하며 route.ts로 통일했다.

// /api/users/[id]/route.ts

import { NextRequest } from 'next/server';

export async function GET(request: NextRequest, context: { params: { id: string }}) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${context.params.id}`);
  // ...
  return new Response(JSON.stringify(result), {
    status: 200,
    headers: {
      'content-type': 'application/json'
    },
  })
}

export async function HEAD(request: NextRequest) {}

export async function POST(request: NextRequest) {}

export async function PUT(request: NextRequest) {}

export async function DELETE(request: NextRequest) {}

export async function PATCH(request: NextRequest) {}

export async function OPTIONS(request: NextRequest) {}

이렇게 route.ts 파일 내에서 REST API의 HTTP 메서드명을 예약어로 선언해두면 HTTP 요청에 맞게 해당 메서드를 호출한다.

route.ts 파일이 있는 폴더 안에는 page.tsx가 존재할 수 없다.

• request: NextRequest 객체이며, fetch의 Request를 확장한 Next.js만의 Request이다. 이 객체에는 cookie, headers뿐 아니라 nextUrl 같은 주소 객체도 확인할 수 있다.
• context: params만을 가지고 있는 객체로, 동적 라우팅 파라미터 객체가 포함된다. /app/api/users/[id]/route.ts라면 id값을 사용할 수 있다.

리액트 서버 컴포넌트 (RSC)

리액트 18에서 새로 도입된 리액트 서버 컴포넌트는 서버 사이드 렌더링과 완전히 다른 개념이다.

기존 리액트로 앱을 개발할 때 문제가 있다.

1. 컴포넌트가 렌더링될 때 레이아웃이 갑자기 이동되는 문제

   <CourseWrapper>
   <CourseList /> // fetch로 데이터 호출
   <Testimonials /> // fetch로 데이터 호출
   </CourseWrapper>

   위 그림과 같이 Testimonials 컴포넌트가 먼저 렌더링되고 그 다음에 CourseList 컴포넌트가 렌더링되면서 레이아웃이 이동하는 문제가 발생한다.

2. Waterfall 문제

   function Course() {
   return (
    <CourseWrapper> // fetch로 데이터 호출
      <CourseList /> // fetch로 데이터 호출
      <Testimonials /> // fetch로 데이터 호출
    </CourseWrapper>
   )
   }

   부모 컴포넌트인 CourseWrapper가 먼저 호출하고 데이터를 가져오는 동안 자식 컴포넌트의 렌더링은 일어나지 않는다.

이처럼 현재 작업을 시작하기 위해 이전 작업이 완료되기를 기다리는 것을 Waterfall이라고 부른다.

이러한 Waterfall 문제를 해결하기 위해 각각의 컴포넌트에서 호출하는 것이 아닌 부모 컴포넌트에서 단일 호출하도록 네트워크 호출 로직을 끌어 올릴 수 있다.

3. 유지 보수 문제

   function Course() {
    const info = fetchAllDetails();
    return(
        <CourseWrapper
            ino={info.wrapperInfo} >
            <CourseList
                ino={info.listInfo} />
            <Testimonials
                ino={info.testimonials} />
        </CourseWrapper>     
    )
   }

   이렇게 최상위 컴포넌트에서 API 호출을 하고 자식 컴포넌트에 Props로 전달하면 자식 컴포넌트는 부모 컴포넌트에 종속되어 재사용하기 어려워지는 유지 보수 측면에서 문제가 발생할 수 있다.

4. 성능 비용 문제 리액트는 CSR로써 클라이언트에서 애플리케이션을 로드하기 위해 필요한 리소스를 다운로드하게 된다.

만약 해당 애플리케이션에 종속되어 있는 외부 라이브러리가 많다면, 해당 리소스를 다운로드 하는 시간이 더욱 길어지고 이는 UX에 좋지 않은 영향을 미칠 수 있다.

이러한 문제들을 해결하기 위해 리액트 서버 컴포넌트가 등장하게 된다.

서버 컴포넌트

서버와 클라이언트 모두에서 컴포넌트를 렌더링할 수 있는 기법을 서버 컴포넌트라고 한다.

서버에서 할 수 있는 일은 서버가 처리하고, 그 외는 클라이언트인 브라우저에서 수행한다.

이러한 서버 컴포넌트는 서버에 있으므로 데이터를 더 빨리 가져올 수 있으며, 파일 시스템 및 데이터 저장소와 같은 서버 인프라에 접근할 수 있다.

여기서 명심해야할 것은 클라이언트 컴포넌트는 서버 컴포넌트를 import할 수 없다.

이런 구조가 가능한 이유는 children으로 자주 사용하는 ReactNode에 있다.

// ClientComponent.tsx
'use client'
// import ServerComponent from './ServerComponent 이렇게 클라이언트 컴포넌트에서 서버 컴포넌트를 불러올 수 없다.
export default function ClientComponent({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <h1>클라이언트 컴포넌트</h1>
      {children}
    </div>
  )
}

// ServerComponent.tsx
export default function ServerComponent() {
  return <span>서버 컴포넌트</span>
}

// ParentServerComponent.tsx
// 이 컴포넌트는 서버 컴포넌트 or 클라이언트 컴포넌트일 수 있기에 두 컴포넌트 모두 사용할 수 있다.
import ClientComponent from './ClientComponent';
import ServerComponent from './ServerComponent';
export default function ParentServerComponent() {
  return (
    <ClientComponent>
      <ServerComponent/>
    </ClientComponent>
  )
}

서버 컴포넌트

• 요청이 오면 그 순간 서버에서 딱 한 번 실행되기에 상태를 가질 수 없다. 따라서 리액트에서 사용하는 훅을 사용할 수 없다.
• 렌더링 생명주기도 사용할 수 없다.
• effect나 state에 의존하는 Custom hook도 사용할 수 없고, 서버에서 제공할 수 있는 기능만 사용하는 훅은 사용할 수 있다.
• 브라우저에서 실행되지 않으므로 DOM API나 window, document에 접근할 수 없다.
• DB, 파일 시스템 등 서버에 있는 데이터를 async/await으로 접근할 수 있다.
• 다른 서버 컴포넌트나 클라이언트 컴포넌트 렌더링이 가능하다.

클라이언트 컴포넌트

• 브라우저 환경에서만 실행되므로 서버 컴포넌트를 불러오거나, 서버 전용 훅 등을 불러올 수 없다.
• 클라이언트 컴포넌트가 자식으로 서버 컴포넌트를 갖는 구조는 가능하다.

  서버 컴포넌트를 직접 호출하는 것은 브라우저 환경이라 컴포넌트 트리를 생성하는게 불가능하지만, 자식으로 가지면 클라이언트는 이미 만들어진 서버 컴포넌트 트리를 보여주기만 하면 되기 때문에 가능하다.

• 일반적으로 우리가 아는 리액트 컴포넌트와 같고, 상태관리 훅, 브라우저 API를 사용할 수 있다.

공용 컴포넌트

• 이 컴포넌트는 서버와 클라이언트 모두 사용 가능하다.
• 기본적으로 모든 컴포넌트를 공용으로 판단하고 명시적으로 use client를 작성하면 클라이언트 컴포넌트라고 판단한다.

리액트 서버 컴포넌트와 서버 사이드 렌더링

리액트는 기본적으로 클라이언트 사이드 렌더링(CSR)으로 동작한다.

애플리케이션 페이지 진입 시 HTML, 자바스크립트와 모든 데이터가 로드되고 컴포넌트 렌더링이 끝나기 전까지 사용자는 아무런 기능이 없는 빈 화면만 보게 된다.

반면 서버 사이드 렌더링(SSR)은 서버에서 먼저 HTML로 렌더링 한다.

그리고 자바스크립트 번들을 모두 다운로드하고 하이드레이션이 완료되어야 정상적으로 페이지가 동작하게 된다.

그렇다면 리액트 서버 컴포넌트는 서버 사이드 렌더링과 어떻게 다를까?

• 서버 컴포넌트의 코드는 클라이언트로 전달되지 않지만, SSR의 모든 컴포넌트 코드는 자바스크립트 번들에 포함되어 클라이언트로 전송된다.
• 서버 컴포넌트는 클라이언트 상태를 유지하며 refetch 될 수 있다. 그 이유는 HTML이 아닌 특별한 형태로 컴포넌트를 전달하기 때문에 클라이언트 상태를 유지하며 여러번 데이터를 가져오고 리렌더링하여 전달할 수 있다. 하지만 SSR의 경우 HTML로 전달되기 때문에 refetch를 하게 되면 HTML 전체를 리렌더링하므로 클라이언트 상태를 유지할 수 없다.

서버 사이드 렌더링으로 초기 HTML 페이지를 빠르게 보여주고, 서버 컴포넌트로는 클라이언트로 전송되는 자바스크립트 번들 사이즈를 감소시킨다면 사용자에게 훨씬 빠르게 인터렉티브한 페이지를 제공할 수 있다.

Next.js에서 RSC

Next.js 13 App 디렉토리에서는 과거 서버 사이드 렌더링과 정적 페이지 제공을 위해 이용하던 getServerSideProps, getStaticProps, getInitialProps가 /app 디렉토리 내부에서는 삭제됐다.

Fetch API의 확장

그 대신 모든 데이터 요청은 웹에서 제공하는 표준 API인 fetch를 기반으로 이뤄진다.

async function getData() {
  const result = await fetch('https://api.example.com/');

  if (!result.ok) {
    // 이렇게 에러를 던지면 가장 가까운 에러 바운더리에 전달된다.
    throw new Error('데이터 불러오기 실패');
  }
  return result.json();
}

// async 서버 컴포넌트 페이지
export default async function Page() {
  const data = await getData();

  return (
    <main>
      <Children data={data} />
    </main>
  )
}

또한 fetch API를 확장해 같은 서버 컴포넌트 트리 내에서 동일한 요청이 있다면 재요청이 발생하지 않도록 중복 제거했다.

React Query와 비슷하게 fetch 요청에 대한 내용을 서버에서 캐싱하여 클라이언트에서 별도의 요청이 없는 이상 데이터를 최대한 캐싱해서 중복된 요청을 방지한다.

정적 렌더링과 동적 렌더링

Next.js 13에서는 정적인 라우팅은 기본적으로 빌드 타임에 렌더링을 미리 해두고 캐싱해서 재사용할 수 있게 한다.

동적인 라우팅에 대해서는 서버에 매번 요청이 올 때마다 컴포넌트를 렌더링한다.

  // 주소가 정적으로 결정돼 있기 때문에 정적 렌더링으로 동작한다.
  const staticRendering = await fetch('https://jsonplaceholder.typicode.com/posts');
  // no-cache 옵션으로 캐싱하지 않도록 설정해서 동적 렌더링으로 동작한다.
  // Next.js에서 제공하는 {next: {revalidate: 0}} 옵션을 사용해도 동일하게 동작한다.
  // 또한 Next.js에서 제공하는 next.headers나 next/cookie를 사용해도 동적 렌더링으로 동작한다.
  const dynamicRendering = await fetch('https://jsonplaceholder.typicode.com/posts', {cache: 'no-cache'}); 

만약 해당 데이터의 유효한 시간을 정해두고 해당 시간이 지나면 다시 데이터를 불러와 렌더링하려면 revalidate를 사용하면 된다.

// app/page.tsx

// revalidate라는 변수를 선언해서 페이지별로 정의 가능
export const revalidate = 60;

// fetch 옵션으로 제공하는 것도 가능
  const revalidateRendering = await fetch('https://jsonplaceholder.typicode.com/posts', {next: {revalidate: 60}}); 

1. 최초 요청 시 미리 정적으로 캐시한 데이터를 보여준다.
2. 이 캐시된 요청은 revalidate에 선언된 값만큼 유지된다.
3. 만약 해당 시간이 지나도 일단 캐시된 데이터를 보여주지만, 백그라운드에서 다시 데이터를 불러온다.
4. 요청한 작업이 성공적이면 캐시된 데이터를 갱신하고, 그렇지 않다면 과거 데이터를 보여준다.

스트리밍

waterfall 문제를 스트리밍을 활용하면 해결할 수 있다.

모든 컴포넌트를 기다리는 대신, 컴포넌트가 완성되는 대로 클라이언트에 보여주면 사용자는 페이지가 완성될 때까지 기다릴 필요가 없고, 페이지가 로딩 중이라는 인식을 명확하게 심어줄 수 있다.

• 경로에 loading.tsx 생성 loading은 예약어로, 렌더링이 완료되기 전에 보여줄 수 있는 컴포넌트다. 자동으로 다음 구조처럼 Suspense와 같이 배치된다.

  <Layout>
  <Header />
  <SideNav />
  <Suspense fallback={<Loading />}>
    <Page />
  </Suspense>
  </Layout>

또는 Suspense를 직접 배치하면서 더욱 효율적으로 사용할 수 있다.

참고

• 모던 리액트 Deep Dive
• Next.js - caching
• kakaopay - React 18: 리액트 서버 컴포넌트 준비하기
• React 서버 컴포넌트를 사용해야 하는 이유와 방법

SSR렌더링 방식을 지원하는 Next.js에서 App Router를 배포해보는 방식에 대해 알아보려고한다.

SaaS 서비스

SaaS란 Software as a Service의 줄임말로 브라우저를 통해 사용자에게 애플리케이션을 제공하고, 해당 서비스를 사용하면 서비스 유지 관리 방식이나 인프라 관리 방식에 대해 고민할 필요 없이 사용이 가능하다.

주로 이러한 SaaS 서비스는 정적 사이트를 쉽게 배포할 수 있다.

Netlify

대표적으로 Netlify는 프론트엔드 스택(JAMstack)으로만 구성된 정적 애플리케이션을 배포하는 용도로 최적화된 서비스다.

추가 기능

배포외에도 추가 기능을 제공해준다.

• 알림: 배포와 관련된 알림을 제공, 배포 성공 및 실패와 같은 내용들
• 도메인 연결: 별도로 구매한 외부 도메인을 Netlify DNS를 통해 연결 가능
• 서비스 통합(Integrations): 다양한 서비스를 프로젝트와 연계 가능
• 서버리스 함수: 별도의 서버 구축 없이 서버에서 실행할 수 있는 함수 사용 가능
• Identity: 인증이 포함된 웹서비스를 쉽게 처리 가능
• 사용자 초대: 한 번 생성된 팀으로 다른 개발자를 초대해 동시에 관리 가능

가격

기본적으로 무료지만 몇가지 제약 사항이 존재한다.

• 대역폭: 월 대역폭이 최대 100GB로 제한
• 빌드 시간: 빌드에 소비할 수 있는 시간이 최대 300분
• 동시 빌드: 한 번에 한 곳만 빌드 가능

Vercel

Vercel은 Next.js를 비롯한 Turborepo, SWC를 만든 회사이며, 클라우드 플랫폼 서비스다.

Vercel은 Next.js 프로젝트를 별도의 설정 없이 쉽게 배포할 수 있다.

추가 기능

• 알림: 특정 타깃 브랜치에 커밋이나 PR이 발생하면 알림을 보내주는 기능
• 도메인 연결: 별도로 구매한 도메인을 연결해서 사용 가능
• Serverless Function: 서버 없이 함수를 클라우드에 구축해서 실행 가능

  여기서 특이한 점은 Next.js에서 사용하는 app/api도 서버리스 함수로 구분되어 접근 로그나 오류 등을 확인할 수 있다.

• 다양한 템플릿 지원: 별도의 코드 작성 없이 구축할 수 있는 기본적인 웹 사이트를 제공 (블로그, 쇼핑몰 등)

가격

무료로 사용이 가능하지만 약간의 제약이 있다.

• 대역폭: 월 대역폭이 최대 100GB로 제한
• 이미지 최적화: Vercel은 사이트에서 제공해주는 이미지 최적화를 사용하는데, 이 최적화 이미지가 1000개로 제한
• 서버리스 함수: 함수의 총 실행 시간이 100GB로 제한, 함수 실행 시간은 10초 이내로 제한(만약 10초 이상 걸리면 타임아웃 처리)
• 동시 빌드: 동시에 하나만 빌드 가능
• 배포: 하루에 100개로 제한

AWS

Amplify

AWS 기반의 풀스택 애플리케이션을 빠르게 구성할 수 있도록 도와주는 프레임워크다.

Amplify를 이용하면 풀 스택 웹 및 모바일 애플리케이션을 손 쉽게 빌드 및 배포할 수 있다.

또한 서버리스로써 실제 사용한만큼의 비용만 지불하여 가격적인 부담도 덜 수 있다.

1. Amplify Hosting

다음은 실제 AWS Amplify를 통해 배포하는 과정이다.

AWS Amplify 콘솔에 접속하여 Amplify Hosting 시작하기 버튼을 클릭

Next.js 프로젝트 있는 저장소를 선택 후 계속 버튼 클릭

Github에 로그인한 뒤 AWS Amplify에게 접근 권한 허용

배포할 Next.js 프로젝트 Repository 선택

선택이 완료되면 AWS Amplify에서 리포지토리와 브랜치를 선택

앱 이름 확인 후 고급 설정에서 환경 변수가 있으면 추가하고 저장 및 배포 [주의할 점] Next.js로 배포할 경우 환경 변수명 앞에 NEXT_PUBLIC_를 붙여서 사용해야한다.

생성이 완료되면 Amplify가 자동으로 빌드 및 배포 진행 만약 빌드가 실패되면 빌드를 눌러서 들어가면 로그 확인 가능

배포가 완료되면 아래 주소를 클릭 Next.js로 개발한 원티드 클론 사이트 배포

배포가 정상적으로 된 것을 확인

2. Dev 브랜치 추가

Production 단계의 배포가 아닌, 개발환경에서 배포도 관리할 수 있다.

Amplify 애플리케이션 대시보드에서 브랜치 연결 클릭

원하는 브랜치 선택 후 저장 및 배포 (개발 테스트를 위해 develop)

main 브랜치와 같이 CI/CD 파이프라인 동작을 확인 가능

3. 미리 보기

Amplify는 미리 보기 기능을 제공하여, Pull Request 요청을 병합하기 전에 변경 사항을 미리 볼 수 있다.

미리 보기 활성화 버튼을 클릭하면 볼 수 있다

하지만 Github 애플리케이션이 설치 된 상태에서만 가능하다고 한다.

배포 후기

AWS Amplify로 Next.js 13 App Router를 배포해 봤다.

Amplify에 모든 기능을 사용해보진 않았지만 빌드 및 배포할 때 만큼은 어렵지 않게 배포할 수 있었다.

Amplify에서 제공하는 기능과 AWS 서비스들을 함께 이용하면 프로젝트 개발 환경을 쉽게 구축할 수 있어보인다.

정리 정리하자면, 서비스별로 제공하는 기능과 가격을 비교해보고 현재의 상황과 Next.js 버전등을 고려해서 판단해야한다.

한 번 선택한 서비스를 변경하는 것은 쉽지 않기 때문이다.

참고

• Amplify 환경 변수

useState와 useReducer

가장 기본적인 방법은 useState와 useReducer로 상태를 생성하고 관리할 수 있다.

다음은 useState로 useCounter라는 Custom Hook을 만든 코드다.

function useCounter(initCount: number = 0) {
  const [counter, setCounter] = useState(initCount);

  function inc() {
    setCounter(prev => prev + 1); 
  }

  return {counter, inc};
}

function Counter1() {
  const { counter, inc } = useCounter();

  return (
      <>
      <h3>Counter1: {counter}</h3>
      <button onClick={inc}>+</button>
    </>
  )
}

function Counter2() {
  const { counter, inc } = useCounter();

  return (
      <>
      <h3>Counter2: {counter}</h3>
      <button onClick={inc}>+</button>
    </>
  )
}

useCounter라는 훅이 없었다면 각 컴포넌트에 같은 내용을 구현해야한다.

Custom Hook을 통해 코드를 격리하여 함수형 컴포넌트라면 어디서든 손쉽게 재사용 할 수 있다.

useReducer 또한 지역 상태를 관리할 수 있는 훅으로, 실제로 useState는 useReducer로 구현됐다.

type Initializer<T> = T extends any ? T | ((prev: T) => T) : never;

function useStartWithUseReducer<T>(initialState: T) {
  const [state, dispatch] = useReducer(
    (prev: T, action: Initializer<T>) =>
        typeof action === 'function' ? action(prev) : action,
    initiaState,
    )

  return [state, dispatch];
}

useState를 useReducer로 구현한 예제다.

첫 번째 인수는 reducer로 action이 함수면 prev를 인자로 넘겨서 실행하고, 아니면 기존 값 그대로 반환한다.

useReducer 또한 useState로 작성할 수 있다.

function useReducerWithUseState(reducer, initialState, initializer) { 
  const [state, setState] = useState( initializer ? () => initializer(initialState): initialState)

  const dispatch = useCallback(
    (action) => setState((prev) => reducer(prev, action)),
    [reducer],
  )

  return [state, dispatch];
}

약간의 구현상 차이만 있을 뿐, 두 Hook 모두 지역 상태 관리를 위해 만들어졌다.

Hook만 가지고는 상태 관리의 모든 문제를 해결해주지 않는다.

예를 들어, useCounter는 선언될 때마다 새롭게 초기화되어, 컴포넌트별로 상태의 파편화를 만들어버린다.

즉, 지역 상태는 해당 컴포넌트 내에서만 유효하고 서로 다른 컴포넌트에서 하나의 상태를 바라보는게 어렵다.

state 끌어올리기

만약 2개의 서로다른 컴포넌트에서 하나의 상태 값인 counter를 동일하게 바라보기 위해서는 상태를 컴포넌트 밖으로 한 단계 끌어올리는 state 끌어올리기가 있다.

function Counter1({ counter, inc }: { counter: number; inc: () => void }) {
  return (
      <>
      <h3>Counter1: {counter}</h3>
      <button onClick={inc}>+</button>
    </>
  )
}

function Counter2({ counter, inc }: { counter: number; inc: () => void }) {
  return (
      <>
      <h3>Counter2: {counter}</h3>
      <button onClick={inc}>+</button>
    </>
  )
}

function Parent() {
  const { counter, inc } = useCounter();

  return (
    <>
      <Counter1 counter={counter} inc={inc} />
      <Counter2 counter={counter} inc={inc} />
    </>
  )
}

이전에는 각 Counter 컴포넌트마다 useCounter를 사용해서 상태를 관리했었는데, 한 단계 위인 Parent 컴포넌트에서 useCounter를 사용해서 하위 컴포넌트의 props로 제공했다.

이렇게 해줌으로써 하나의 useCounter를 사용해 두 컴포넌트에서 동일한 상태를 관리할 수 있다.

상태 끌어올리기를 통해 문제를 해결할 수 있었지만, 하나의 컴포넌트에서 사용중이던 상태가 다른 컴포넌트에서 동일한 상태로 사용되어야할 경우 부모 컴포넌트로부터 props 형태로 전달 받아야한다는 점은 좋지 못하다.

만약 서로 다른 컴포넌트의 부모가 최상위 컴포넌트일 경우 props로 전달하게 되면 props drilling 이슈가 발생할 수 있다. (컴포넌트 트리를 재설계해야할 수도 있다.)

Props Drilling이란?

Props를 상위 컴포넌트에서 하위 컴포넌트로 전달하는 것을 의미한다.

만약 props로 전달하는 개수가 10개 이상으로 많은 과정을 거치게 되면 해당 props를 추적하기 힘들어지는 문제가 발생하게 된다.

useState의 상태를 바깥으로 분리

리액트에서 제공하는 useState가 아닌, 아예 외부로 counter.ts라는 파일을 만들고 useState와 동일하게 동작하도록 코드를 짜서 직접 상태를 관리하면 어떨까?

이러한 방식은 리액트 환경에서 동작하지 않는다.

코드 상으로 문제가 없지만, 여기서 가장 큰 문제는 상태가 변경됐을 때 컴포넌트가 리렌더링되지 않는다는 점이다.

그럼 useState를 리렌더링하는 역할로 잡고, 상태는 외부 파일에서 관리하면 어떨가?

// counter.ts
export type State = { counter: number };

let state: State = {
  counter: 0,
};

export function get(): State {
  return state;
}

type Initializer<T> = T extends unknown ? T | ((prev: T) => T) : never;

export function set<T>(nextState: Initializer<T>) {
  state = typeof nextState === 'function' ? nextState(state) : nextState;
}

// Counter.tsx
const Counter = () => {
  const state = get();
  const [count, setCount] = useState(state);

  function handleClick() {
    set((prev: State) => {
      const newState = { counter: prev.counter + 1 };
      setCount(newState);
      return newState;
    });
  }
  return (
    <>
      <h1>Counter</h1>
      <h3>{count.counter}</h3>
      <button onClick={handleClick}>+</button>
    </>
  );
};

// Home.tsx
const Home = () => {
  const state = get();
  const [count, setCount] = useState(state);

  function handleClick() {
    set((prev: State) => {
      const newState = { counter: prev.counter + 1 };
      setCount(newState);
      return newState;
    });
  }
  return (
    <>
      <h1>Home</h1>
      <h3>{count.counter}</h3>
      <button onClick={handleClick}>+</button>
      <Counter />
    </>
  );
};

여기서 문제점은 상태가 외부 파일에서 관리되고 있지만, 리렌더링을 위해 각 컴포넌트 내부에 동일한 useState가 존재해 비효율적인 방식이다.

또한 실제로 버튼을 클릭하면 setState로 인해 상태가 변했을 때 리렌더링이 발생해 값이 변하는 것을 볼 수 있고, 같은 상태를 공유하고 있지만 동시에 렌더링이 되지 않는 문제가 발생한다.

useState로 컴포넌트를 리렌더링해서 최신값을 가져오는 방식은 해당 컴포넌트 내에서만 유효하다. 따라서 반대쪽에 있는 다른 컴포넌트에서는 여전히 리렌더링을 일으킬게 없기 때문에 버튼을 클릭해도 다른 컴포넌트는 렌더링이 되지 않는다.

이러한 한계를 통해 함수 외부에서 상태를 참조하고 이를 통해 렌더링까지 일어나려면 다음과 같은 조건이 만족해야한다.

1. window나 global에 있을 필요는 없지만 외부 어딘가에 상태를 두고 여러 컴포넌트가 같이 쓸 수 있어야 한다.
2. 외부에 있는 상태를 사용하는 컴포넌트는 상태의 변경을 알아챌 수 있어야 하고, 상태가 변경될 때마다 리렌더링이 일어나야 한다. 또한 이 상태 감지는 상태를 참조하는 모든 컴포넌트에서 동일하게 작동해야 한다.
3. 상태가 원시 값이 아닌 객체인 경우, 객체안에 현재 사용중이지 않는 값이 변하더라도 리렌더링이 발생해서는 안된다. 예를 들어, {a: 1, b: 2}라는 객체 상태가 있고, 컴포넌트에서 a를 2로 업데이트 했을 때 b만 참조하고 있는 컴포넌트에서는 리렌더링이 일어나면 안된다.

외부 상태 관리 - createStore

위 조건을 만족시키는 외부 상태 관리를 만들어보자.

type Initializer<T> = T extends unknown ? T | ((prev: T) => T) : never;

type Store<State> = {
  get: () => State // 항상 최신 값을 가져옴
  set: (action: Initializer<State>) => State // 기존 useState와 동일한 역할
  subscribe: (callback: () => void) => () => void // 해당 store의 변경을 감지하고 싶은 컴포넌트들을 등록
};

export const createStore = <State>(
  initialState: Initializer<State>,
): Store<State> => {
  // store 내부에서 상태 관리
  let state = typeof initialState !== 'function' ? initialState : initialState();

  // 콜백 함수를 저장하는 곳
  const callbacks = new Set<() => void>();

  const get = () => state;
  const set = (nextState: State | ((prev: State) => State)) => {
    state = typeof nextState === 'function' ? (nextState as (prev: State) => State)(state) : nextState;

    // 값이 변경됐으므로 콜백 목록을 순회하면서 모든 콜백을 실행한다.
    callbacks.forEach((callback) => callback());

    return state;
  }

  // 
  const subscribe = (callback: () => void) => {
    // 콜백 등록
    callbacks.add(callback);

    // 클린업 실행 시 삭제해 반복적으로 추가되는 것 방지
    return () => {
      callbacks.delete(callback);
    }
  }

  return {get, set, subscribe};
}

craeteStore는 자신이 관리해야하는 상태를 내부 변수(state)로 가진 후, get 함수로 해당 변수의 최신 값을 가져올 수 있다.

또한 set 함수로 내부 변수를 최신 값으로 변경할 수 있고, 이 과정에서 등록된 콜백을 모조리 실행함으로써 컴포넌트의 렌더링을 유도한다.

useStore

이제 createStore로 만들어진 store의 값을 참조하고, 이 값에 변경에 따라 컴포넌트 렌더링을 발생시킬 사용자 정의 훅 useStore를 만들어보자.

// useStore.tsx
const useStore = (store: Store<State>) => {
  // 컴포넌트의 렌더링 유도
  const [state, setState] = useState<State>(() => store.get());

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setState(store.get());
    })

    return unsubscribe;
  }, [store])
  return [state, store.set] as const;
}

여기서 중요한 점은 useEffect 안에 작성된 부분이다.

useEffect는 store의 현재 값을 가져와 setState를 subscribe에 콜백 함수로 등록했다.

그 이유는 store 내부에서 값이 변경될 때마다 등록된 모든 callback함수를 실행하고, useStore에서 store 값이 변경되면 useEffect에서 감지하게 된다.

store의 값이 변경될 때마다 state의 값이 변경되는 것을 보장할 수 있다.

또한 클린업 함수를 통해 useEffect의 작동이 끝난 이후에는 콜백에서 해당 함수를 제거해 계속 쌓이는 것을 방지할 수 있다.

// Home.tsx
const store = createStore({ counter: 0 });

const Home = () => {
  const [state, setState] = useStore(store);

  function handleClick() {
    setState(prev => ({ counter: prev.counter + 1 }));
  }

  return (
    <>
      <h1>Home</h1>
      <h3>{state.counter}</h3>
      <button onClick={handleClick}>+</button>
      <Counter store={store} />
    </>
  );
};

// Counter.tsx
const Counter = (props: { store: Store<{ counter: number }> }) => {
  const { store } = props;
  const [state, setState] = useStore(store);

  function handleClick() {
    setState(prev => ({ counter: prev.counter + 1 }));
  }
  return (
    <>
      <h1>Counter</h1>
      <h3>{state.counter}</h3>
      <button onClick={handleClick}>+</button>
    </>
  );
};

실제로 실행해보면 store의 상태가 변경됨과 동시에 두 컴포넌트가 정상적으로 리렌더링 되는 것을 확인할 수 있다.

하지만 여기서도 문제가 발생할 수 있다.

store의 구조가 원시값이면 상관없지만 객체인 경우 일부 값만 변경한다면, 현재는 store의 값이 변경되면 무조건 리렌더링이 발생하게 된다.

useStoreSelector

따라서 useStore에서 원하는 값만 변경됐을 때 리렌더링이 되도록 useStoreSelector Hook으로 수정해보자.

export type State = { counter: number; text: string };

const useStoreSelector = (
  store: Store<State>,
  selector: (state: State) => unknown, // store 값에서 어떤 값을 가져올지 정의하는 함수
) => {
  const [state, setState] = useState(() => selector(store.get()));

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      const value = selector(store.get());
      setState(value);
    });

    return unsubscribe;
  }, [store, selector]);
  return state;
};

이전 useStore와 차이점은 두 번째 인수로 selector라는 함수를 받는다.

setState는 값이 변경되지 않으면 리렌더링을 수행하지 않으므로 store의 값이 변경되더라도 selector(store.get())가 변경되지 않으면 리렌더링이 일어나지 않는다.

// Home.tsx
const store = createStore({ counter: 0, text: 'hi' });

const Home = () => {
  return (
    <>
      <h1>useStoreSelector 사용했을 때</h1>
      <Text store={store} />
      <Counter store={store} />
    </>
  );
};

// Text.tsx
const Text = (props: { store: Store<{ counter: number; text: string }> }) => {
  const { store } = props;
  const text = useStoreSelector(
    store,
    useCallback(state => state.text, []),
  );
  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    store.set(prev => ({ ...prev, text: e.target.value }));
  }

  return (
    <>
      <h1>Text</h1>
      <h3>{text}</h3>
      <input value={text} onChange={handleChange} />
    </>
  );
};

// Counter.tsx
const Counter = (props: {
  store: Store<{ counter: number; text: string }>;
}) => {
  const { store } = props;
  const counter = useStoreSelector(
    store,
    useCallback(state => state.counter, []),
  );

  function handleClick() {
    store.set(prev => ({ ...prev, counter: prev.counter + 1 }));
  }
  return (
    <>
      <h1>Counter</h1>
      <h3>{counter}</h3>
      <button onClick={handleClick}>+</button>
    </>
  );
};

여기서 주의할 점은 selector를 컴포넌트 밖에 선언하거나, 밖에 선언이 안된다면 useCallback을 사용해 참조를 고정시켜줘야한다. 만약 이를 해주지 않으면 컴포넌트가 리렌더링될 때마다 함수도 계속 재생성되어 리렌더링이 발생할 것이다.

이제 select해서 필요한 값만 변경됐을 때 리렌더링이 발생한다.

React 외부 상태 관리 훅을 직접 구현해보면서 값을 어떻게 관리해야하고, 상태의 변경에 대한 추적과 리렌더링이 발생되는 과정에 대해 알아봤습니다.