예를 들어, 1234567을 '1,234,567'로 만들고 싶다면 toLocaleString() 메서드를 사용한다.

const before = 1234567;
const after = target.toLocaleString();

console.log(after); // '1,234,567'
console.log(typeof after); // string

■ String → Number

예를 들어, '1,234,567'을 1234567로 만들고 싶다면, replace() 메서드를 사용하여 쉼표를 없애고 이어 붙여준 다음 parseInt() 메서드를 사용하여 정수로 만들어준다.

const before = '1,234,567';
const after = parseInt(before.replace(/,/g, ''));

console.log(after); // 1234567
console.log(typeof after); // number

📌구글 애널리틱스(Google Analytics) API 호출 방법

여기서는 React.js의 프론트엔드 클라이언트에서 GA에 API를 호출하는 방법을 다룬다.

🧩 API 공식 문서

GA4 이전의 GA3까지는 Reporting API v4에서 API 사용법을 다루었으나, GA4 업데이트되면서 해당 API에 대한 지원이 중단되고, Analytics Data API v1로 대체되었다.

Data API v1에서 사용 가능한 다양한 메서드들과 사용 방법들을 확인할 수 있다.

* 참고로 100% 한글화되지 않았기에, 종종 제목과 내용이 숫자로 되어있는 문서들이 있는데,
  해당 문서는 언어를 'English'로 바꿔서 영어로 확인해야한다는 단점이 있다.

영어가 부담스럽고, 읽어봐도 어떻게 써야하는지 잘 모르겠다면 당신은 잘 오다! 지금부터 한 조각씩 천천히 사용법을 알아볼 것이다.

🧩 기본 보고서: runReport

위의 Data API v1 공식문서에서 기본 보고서 메뉴를 클릭하면 제목도, 내용도 숫자로 나타난다. 아마 한국어로 번역하는 과정에서 오류가 발생했거나, 아직 미완성이거나... 그러한 이유인 듯하다.

번역은 되지 않았더라도, 공식문서를 확인해보면 눈여겨볼만한 내용은 다음과 같다.

• runReport 메서드는 https://analyticsdata.googleapis.com/v1beta/properties/GA4_PROPERTY_ID:runReport에 HTTP POST 요청을 보내서 사용할 수 있고, GA4_PROPERTY_ID 값이 필요하다.
• 보고서를 생성하기 위해서는 dataRanges, dimensions, metrics 항목이 필요하다.

여기까지 봤을 때, GA4_PROPERTY_ID도 dataRanges, dimensions, metrics도 뭔진 모르겠지만 React.js에서 axios를 통해 위의 URL로 dataRanges, dimensions, metrics 데이터가 포함된 POST 요청을 보내면 되겠다는 생각을 할 수 있어야 한다!

문서에서 다른 부분은 차치하더라도 딱 이 부분만큼은 반드시 숙지하도록 한다.

• GA4_PROPERTY_ID
• dataRanges
• dimensions
• metrics

🧩 GA4 Query Explorer (dataRanges, dimensions, metrics)

저렇게 POST 요청을 보내면 어떤 응답이 돌아올까? 물론 공식문서에서도 확인할 수 있지만, 공식문서에서는 응답의 예시를 보여줄 뿐 내가 GA를 연동한 웹사이트에 관한 응답을 보여주진 않는다. 즉, 예시를 보더라도 딱히 와닿지 않을 수 있다.

하지만 GA4 Query Explorer를 사용하면 내 웹사이트에 관한 요청과 응답을 확인할 수 있을 뿐만 아니라, 위의 dataRanges, dimensions, metrics를 어떻게 작성해야 하는지도 직관적으로 보여주고 복사 기능까지 있기 때문에 POST 요청에서의 data 부분은 거의 떠먹여주는 수준이다!

GA4 Query Explorer에 접속하면 아래와 같이 화면이 나올텐데, 이전에 GA를 연동할 때 로그인해둔 계정으로 로그인하면 자동으로 속성을 호출한다.

[Select property]의 'account'를 설정하면 'property'는 자동으로 설정된다. 'start date'와 'end date'는 데이터를 수집할 시작일과 마지막일이다. * 하단에 적혀있듯, 꼭 YYYY-MM-DD와 같은 날짜 형식이 아니더라도    yesterday(어제) 혹은 today(오늘)와 같은 텍스트로도 설정이 가능하다.

'metrics'는 수집하고 싶은 구체적인 데이터들을 의미한다. 필자는 활성화 사용자 수, 조회수, 세션 등을 수집하고자 위와 같이 설정해두었다.

'dimensions'는 데이터들을 나눌 분기점을 의미한다. 예를 들어, date로 설정해두면 날짜별로 데이터들을 표기한다는 것이다.

그 외에는 추가적으로 설정할 수 있는 옵션들인데, 알아보고자 구글의 상세한 설명을 보기 위해 클릭했으나ㅡ... Service Unavailable이 나타나며 아무런 설명도 나타나지 않는다.

하지만 필수 옵션도 아니니, 우선 없이 진행하도록 한다.

'keep empty rows'를 체크한 이유는 다른 블로그에서 GA를 활용할 때 이 부분이 활성화되어 있어야 그래프로 나타냈을 때 오류가 나타나지 않는다고 정보를 얻었기 때문이다.

단순히 데이터만 확인하고 싶고 그래프화하지 않을 것이라면 비활성화 해두어도 무방하다.

속성들에 대한 설정을 마치고 [MAKE REQUEST] 버튼을 누르면!

짜잔~ 이렇게 요청할 때 사용되는 data의 JSON 형식도 확인 및 복사하여 활용할 수 있고, 요청에 따른 응답을 TABLE / JSON 형식으로 확인할 수도 있다!

• GA4_PROPERTY_ID
• ✅ dataRanges
• ✅ dimensions
• ✅ metrics

한 번에 3개의 요구사항이 해결됐다 :0

여기까지 왔을 때, 코드의 형태는 다음과 같다.

// Example.js

import { useEffect } from 'react';
import axios from 'axios';

const Example = () => {
  useEffect(() => {
    axios
      .post(`https://analyticsdata.googleapis.com/v1beta/properties/${GA4_PROPERTY_ID}:runReport`,
            {
             "dimensions": [{ "name":"date" }],
             "metrics": [{ "name":"activeUsers" }, { "name":"screenPageViews" }, { "name":"sessions" }],
             "dateRanges": [{ "startDate":"2024-01-01", "endDate":"today" }],
             "keepEmptyRows": true
            }
      )
      .then((response) => {
        console.log(response);  
      })
      .catch((error) => {
        console.log(error);
      })
  })
}

export default Example;

🧩 GA4 Property ID (GA4_PROPERTY_ID)

GA의 홈 화면에서 좌측 하단의 관리(⚙️) 버튼 ▶ [속성 설정] ▶ [속성 세부정보] ▶ 우측 상단의 '속성 ID'에서 확인할 수 있다! 친절하게 복사버튼도 있으니, 해당 속성 ID를 복사하여 코드에 붙여넣도록 하자 :)

* 하지만 이러한 ID, KEY 값과 같은 데이터들은 노출될 경우 보안상 취약할 수 있기 때문에,    .env 파일에 환경변수로 담아두는 것을 추천한다.

* 필자 역시 REACT_APP_GA4_PROPERTY_ID 라는 환경변수로 .env 파일에 담아두었다.

여기까지 모든 절차를 잘 따라왔다면, 이제 필요한 값들은 대부분 준비가 되었다.

• ✅ GA4_PROPERTY_ID
• ✅ dataRanges
• ✅ dimensions
• ✅ metrics

코드도 아래와 같이 작성되었을 것이다.

// Example.js

import { useEffect } from 'react';
import axios from 'axios';

const Example = () => {
  useEffect(() => {
    axios
      .post(`https://analyticsdata.googleapis.com/v1beta/properties/${process.env.REACT_APP_GA4_PROPERTY_ID}:runReport`,
            {
             "dimensions": [{ "name":"date" }],
             "metrics": [{ "name":"activeUsers" }, { "name":"screenPageViews" }, { "name":"sessions" }],
             "dateRanges": [{ "startDate":"2024-01-01", "endDate":"today" }],
             "keepEmptyRows": true
            }
      )
      .then((response) => {
        console.log(response);  
      })
      .catch((error) => {
        console.log(error);
      })
  })
}

export default Example;

좋다! 이제 runReport를 통해 받은 응답을 확인하기 위해 콘솔창을 딱 열어보면!

🧩 Google API Console (Client ID, Client Secret)

분명 완벽해야했을 내 응답은 어째서 401(Unauthorized) 상태 코드를 보여주는걸까? 다행히 검색을 통해 원인을 알 수 있었는데, 바로 POST 요청에서 access_token을 빼먹었기 때문이다. 즉, API에 요청을 보낼 때 내가 승인이나 인증을 받은 사람인지 증명하지 못했다는 것!

* 무엇을 믿고 데이터를 함부로 주겠나?!

당황하지 않고 Google Cloud API 서비스로 접속한다.

1. 아마 처음 접속했다면 아래와 같이 깨끗한 화면을 볼 수 있을텐데, 화면에 보이는 [프로젝트 만들기]를 클릭하여 우선 프로젝트를 생성해주도록 한다.

2. 프로젝트 이름을 입력하고, [만들기] 버튼을 누른다.

3. 프로젝트를 만드는 데 성공했다면, 좌측 메뉴의 [사용자 인증 정보]에 들어가서 [+ 사용자 인증 정보 만들기]를 클릭,

[OAuth 클라이언트 ID]를 눌러 OAuth 2.0 클라이언트 ID를 하나 만들어주도록 한다.

4. 그러면 동의 화면을 구성해야 한다는 문구가 나타날텐데, [동의 화면 구성] 버튼을 눌러 해당 절차로 이동한다.

5. User Type으로 '외부'를 선택한 후 [만들기] 버튼을 눌러준다.

6. 앱의 이름과 사용자 지원 이메일을 입력한다. 사용자 지원 이메일은 선택할 수 있는게 자신밖에 없어서 그대로 선택해주면 된다. 배포된 React.js의 홈페이지 URL을 '애플리케이션 홈페이지'에 입력하고, '승인된 도메인 1'에는 http://, https://를 제외하고 입력한다.

7. [범위 추가 또는 삭제] 버튼을 클릭하여 .../auth/userinfo.email - 기본 Google 계정의 이메일 주소 확인만 선택한 다음,

[업데이트] 버튼을 눌러 갱신해주고, [저장 후 계속] 버튼으로 다음 절차로 넘어간다.

8. 테스트 사용자는 나 자신의 메일을 입력하여 추가해주고, [저장 후 계속]을 누르면 OAuth 동의 화면 설정이 완료된다!

9. 이제 동의 화면 설정도 완료되었으니, 다시 3.에서 진행하려고 했던 [OAuth 클라이언트 ID] 만들기를 재개하도록 한다. '애플리케이션 유형'은 '웹 애플리케이션'으로 설정하고, 프로젝트의 이름을 입력한다. '승인된 자바스크립트 원본'에는 프로젝트의 배포 URL을 입력하고, '승인된 리디렉션 URI'에는 ①배포 URL, ②http://localhost:port, ③https://developers.google.com/oauthplayground 를 입력하고

[만들기] 버튼을 누르면 OAuth 2.0 클라이언트 ID가 생성된다.

여기서 생성된 클라이언트 ID(OAuth Client ID)와 클라이언트 보안 비밀번호(OAuth Client Secret)은 이후에 사용되므로, JSON 파일을 다운로드 받거나 복사해두도록 한다! * 이후에도 해당 ID를 클릭하여 정보들을 다시 확인할 수 있긴하다.

10. 좌측 메뉴의 [사용 설정된 API 및 서비스] 를 클릭하고, 화면 중앙의 [+ API 및 서비스 사용 설정]을 눌러 API 라이브러리로 이동한다.

11. 'Google Analytics Reporting API', 'Google Analytics Data API'를 검색하여 아래와 같이 생긴 API를 클릭,

[사용] 버튼을 눌러 활성화 시켜준다.

(여기서 [사용]을 누르면 아래와 같이 'API 사용 설정됨'이 우측에 나타나고,
[사용] 버튼이 [관리] 버튼으로 바뀐다)

🧩 OAuth 2.0 PlayGround (Access Token, Refresh Token)

이제 토큰을 받기 위한 세팅은 끝났으니, OAuth 2.0 PlayGround로 이동하여 토큰을 받아보자!

1. 우측 상단의 설정(⚙️)을 눌러, 다른 것은 크게 손댈 것이 없고 'Use your own OAuth credentials' 체크박스를 활성화한 다음, 이전에 생성했던 클라이언트 ID(OAuth Client ID)와 클라이언트 보안 비밀번호(OAuth Client Secret)을 입력해준다. 따로 저장버튼은 보이지 않는데, 하단의 [Close] 버튼을 누르면 자동으로 설정이 저장된다.

2. 왼쪽에 있는 Scope들 중, 하단의 Scope만 선택한 다음 [Authorize APIs] 버튼을 누른다.

3. 그러면 이렇게 Refresh token과 Access token이 생성된다!

여기까지 왔으니, 다시 한 번 header에 Access token을 넣어서 코드를 작성해보면ㅡ * GA4_PROPERTY_ID와 마찬가지로 보안상의 이유로 .env에 환경변수로 담아 작성했다.

// Example.js

import { useEffect } from 'react';
import axios from 'axios';

const Example = () => {
  useEffect(() => {
    axios
      .post(`https://analyticsdata.googleapis.com/v1beta/properties/${process.env.REACT_APP_GA4_PROPERTY_ID}:runReport`,
            {
             "dimensions": [{ "name":"date" }],
             "metrics": [{ "name":"activeUsers" }, { "name":"screenPageViews" }, { "name":"sessions" }],
             "dateRanges": [{ "startDate":"2024-01-01", "endDate":"today" }],
             "keepEmptyRows": true
            },
            {
                  headers: {
                    'Authorization': `Bearer ${process.env.REACT_APP_OAUTH_ACCESS_TOKEN}`
                }
            }
      )
      .then((response) => {
        console.log(response);  
      })
      .catch((error) => {
        console.log(error);
      })
  })
}

export default Example;

두근거리는 마음으로 콘솔창을 열어보니?!

정상적으로 응답이 호출되는 것을 확인할 수 있었다!

다만, Access token만으로는 한계가 있는데 기본적으로 Access token은 만료기간이 존재하기 때문이다. (아래 예시의 경우, 1시간(60분, 3600초) 이후에 Access token이 만료된다는 것)

1시간마다 코드에서 Access token을 교체해줄 수도 없는 노릇이니, 자동적으로 갱신이 되어야하는데 그 때 사용되는 것이 바로 Refresh token이다.

OAuth 2.0 Playground의 설정(⚙️)에서 입력했던 클라이언트 ID(OAuth Client ID)와 클라이언트 보안 비밀번호(OAuth Client Secret), 그리고 3. 에서 생성된 Refresh token이 있다면 Access token을 손쉽게 갱신할 수 있다. * 이번에도 역시 마찬가지로 보안상의 이유로 .env에 환경변수로 담아 작성했다.

axios
  .post('https://accounts.google.com/o/oauth2/token',
        {
           "client_id": `${process.env.REACT_APP_OAUTH_CLIENT_ID}`
             "client_secret": `${process.env.REACT_APP_OAUTH_CLIENT_SECRET}`,
           "refresh_token": `${process.env.REACT_APP_OAUTH_REFRESH_TOKEN}`,
           // "grant_type"은 "refresh_token"으로, 이 코드와 동일하게 작성해주면 된다.
           "grant_type": "refresh_token"
        }
  )
  .then((response) => { console.log(response); }
  .catch((error) => { console.log(error); })

이렇게 작성해두면 response.data.access_token에 갱신된 Access token이 전달되어 응답이 온다!

정리해보자면, ① OAuth Client ID, OAuth Client Secret, Refresh token을 통해 https://accounts.google.com/o/oauth2/token으로 POST 요청을 보내서 갱신된 Access token을 발급 받는다.

② 발급 받은 Access token을 headers에 담아 https://analyticsdata.googleapis.com/v1beta/properties/${process.env.REACT_APP_GA4_PROPERTY_ID}:runReport으로 dataRanges, dimensions, metrics 데이터를 포함하여 POST 요청을 보내면 원하는 결과값이 호출된다는 것!

여기까지 이해하는데 성공했다면 자신을 칭찬해주면 된다! GA4의 이전 버전인 GA3(Universal Analytics, UA)에 관한 글이 검색결과의 주를 이루고 GA4를 연동하는 것까지는 정보가 많아도 API를 실제로 요청하는 것에 대한 내용은 적어서 필자는 거의 1.5일 가까이 GA4를 붙들어매고 이해하려고 애썼다...

어쨌거나! 글을 읽고 고개를 끄덕이며 바로바로 이해가 됐다면 충분히 자부심을 느껴도 된다는 것이다 :)

🧩 최종 코드 정리본

이제 마지막이다. 정리한 내용을 바탕으로 코드를 작성해보자면ㅡ

// Example.js
import { useEffect } from 'react';
import axios from 'axios';

const Example = () => {
    useEffect(() => {
        // 'client_id', 'client_secret', 'refresh_token'을 사용하여 갱신된 'access_token'을 요청한다.
        axios.post('https://accounts.google.com/o/oauth2/token',
            {
                "client_id": `${process.env.REACT_APP_OAUTH_CLIENT_ID}`,
                "client_secret": `${process.env.REACT_APP_OAUTH_CLIENT_SECRET}`,
                "refresh_token": `${process.env.REACT_APP_OAUTH_REFRESH_TOKEN}`,
                "grant_type": "refresh_token"
            }
        )
        .then((response) => {
            // 만약 정상적으로 'access_token'을 받았다면, 기본 보고서(runReport)를 호출하는 요청을 보낸다.
            axios.post(`https://analyticsdata.googleapis.com/v1beta/properties/${process.env.REACT_APP_GA4_PROPERTY_ID}:runReport`,
                // runReport 요청에 필요한 'dimensions', 'metrics', 'dataRanges'를 data에 포함하여 전송한다.
                {
                    "dimensions": [{ "name":"date" }],
                    "metrics": [{ "name":"activeUsers" }, { "name":"screenPageViews" }, { "name":"sessions" }],
                    "dateRanges": [{ "startDate":"2024-01-01", "endDate":"today" }],
                    "keepEmptyRows": true,
                },
                // 이전에 전달받은 'access_token'을 headers에 담는다(인증).
                {
                    headers: {
                        'Authorization': `Bearer ${response.data.access_token}`
                    }
                }
            )
            // 정상적으로 응답을 받았다면, 콘솔창에 runReport의 결과가 나타날 것이다.
            .then((response) => { 
                console.log(response);
            })
            // runReport가 정상적으로 호출되지 않았다면, [REPORT ERROR]라는 문구와 함께 콘솔창에 에러가 보일 것이다.
            .catch((error) => {
                console.log('[REPORT ERROR] ', error);
            })
        })
        // 'access_token'을 호출하는 것에 실패했다면, [TOKEN ERROR]라는 문구와 함께 콘솔창에 에러가 보일 것이다.
        .catch((error) => {
            console.log('[TOKEN ERROR] ', error);
        })
    })
}

이렇게 코드를 작성하면 정상적으로 GA4의 기본 보고서가 응답으로 날아온다 :D

정말 길고 길었다! 이제 보고서 응답도 받았으니, 이것을 야무지게 조리해서 방문자수로 보이게 하거나 도표로 만들어 방문자 통계를 내거나 혹은 방문자들의 다른 데이터를 정리해서 분석하거나 하는 것은 여러분의 몫이니 다양하게 사용해보도록 하자!

📌구글 애널리틱스(Google Analytics)란?

구글 애널리틱스는 2005년부터 구글에서 무료로 제공하기 시작한 서비스로, 웹사이트와 연동시켜두면 웹사이트 이용자들의 유입 경로나 액션, 이벤트 등에 관한 정보들을 수집 및 분석할 수 있도록 해주는 웹 로그분석 툴이다.

2005년에 GA1(Urchin), 2008년에 GA2(Classic), 2013년에 GA3(Universal) 이렇게 3번째 업데이트 이후로 2020년 GA4까지 등장하게 되었다.

📌구글 애널리틱스(Google Analytics) 연동 방법

🧩 구체적인 연동 과정

구글 애널리틱스(GA)로 접속하여 절차에 따라 요구되는 입력사항을 채우고, 프로젝트에 코드를 심어주면 금방 웹사이트와 GA를 연동시킬 수 있다!

1. 위의 링크로 접속하여 GA 관리자로 둘 계정으로 로그인한 다음, [측정 시작] 버튼을 눌러 설정을 시작한다.

2. 계정 이름(필수)란에 관리자명이나 원하는 이름을 자유롭게 입력하고 하단의 옵션을 선택적으로 체크한다. *필자는 기본 체크박스 그대로 진행

3. 이번에도 마찬가지로 프로젝트명이나 원하는 속성 이름을 자유롭게 입력하고 보고 시간대는 '대한민국 / (그리니치 표준시 +09:00) 대한민국 시간'으로, 통화는 '대한민국 원(￦)'으로 설정해주도록 한다.
   * [고급 옵션 보기]를 누르면, 아래와 같이 [유니버셜 애널리틱스 속성 만들기] 칸이 하단에 나타나는데 지금부터 GA에 연동한다면 이전 버전보다는 현재, 차세대 버전을 이용하는 것이 안정적이기에 체크하지 않는 것을 추천한다.

4. 프로젝트와 관련된 업종의 카테고리와 규모를 설정해주도록 한다.

5. 비즈니스 목표를 설정해주도록 한다. 필자는 이용자의 조회수나 유입경로를 분석하기 위해 해당 목표를 선택했으나, 다른 것을 선택한다고 하여 이용할 수 있는 서비스에 차질이 생기는 것도 아니니 마음 편하게 고르면 될 듯하다.

6. 비즈니스 목표를 설정하고 [만들기] 버튼을 누르면 아래와 같은 약관 계약서가 모달로 등장한다. 드롭다운을 열어 국가를 '대한민국'으로 설정하고 체크박스를 누른 뒤 [동의함]을 눌러준다.

7. 웹사이트의 데이터를 수집할 것이기 때문에, 플랫폼 선택에서 '웹'을 선택해준다.

8. 배포한 웹사이트의 URL을 입력하고, 해당 웹사이트의 명칭을 입력한 다음 [스트림 만들기]를 눌러 다음 단계로 넘어간다.
   * 향상된 측정 옵션은 이용자들의 세부 인터랙션 등을 수집하는 데 이용되기 때문에, 불가피한 경우가 아니라면 그대로 활성화된 상태로 진행하도록 한다.

9. 스트림을 만들면 스트림의 세부정보가 나타나면서 상단에 [태그 안내 보기] 버튼이 보일 것이다. 해당 버튼을 눌러서 웹사이트에 설치하는 단계로 넘어간다. 이제 정말 거의 다 왔다!

10. [직접 설치] 탭을 누르면 아래와 같은 코드가 나타나고, 해당 코드를 어디 붙여넣으면 되는지 친절하게 설명까지 해준다.
    React.js의 경우, 프로젝트 내의 public 폴더에 index.html이 기본적으로 내장되어 있다.

11. React.js의 public\index.html 에서 구글의 설명대로 <head> 태그 바로 다음에 붙여넣도록 한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <!-- 이곳에 위의 Google 태그를 삽입해준다 -->
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-TXHDDPB10J"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXX00X');
  </script>
  <!-------------------------------------->
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

12. 웹사이트에 GA 설치가 끝났다! 성공적으로 해당 Google 코드를 삽입해주었다면, 빌드 후 배포환경에 적용하여 [테스트] 버튼을 눌러 코드가 정상적으로 삽입되었는지, GA에서 인식할 수 있는지 확인할 수 있다.
    * '웹사이트에서 Google 태그가 감지되지 않았습니다.' 라는 문구가 나타난다면, 측정 ID(G-XXXXXXX00X)에 오타는 없는지, 코드가 안내된 위치에 입력되어있는지 다시 확인한다.

🧩 연동 후, 데이터 확인 방법

아직은 연동한지 시간이 많이 지나지 않아 데이터가 충분히 쌓이지 않았을 것이다. 이전의 12번 과정에서 웹사이트와 정상적으로 연동되었다고 나왔다면, 차분히 기다릴 일만 남았다.

너무 조바심 내지말고 내일이나 모레 GA의 홈화면에 접속해보면, 페이지 중앙의 그래프에 사용자 데이터가 나타날 것이다 :)

GA4 API를 호출하는 것까지 한 번에 글을 올리고 싶었으나, 절차 하나하나마다 사진을 넣다보니 글이 너무 길어지는 느낌이라 2편에서 다루도록 하겠다!

To be continued... ▶ [React.js] GA4(Google Analytics 4) - ②API 호출하기

// EXAMPLE OF `place`
{
  "navSeq": "0",
  "rpFlag": 16,
  "poiName": "푸른길분수공원",
  "poiId": "---",
  "streetNum": "광주 동구 산수동 358-21",
  "roadName": "광주 동구",
  "centerX": "---",
  "centerY": "---",
  "navX": "---",
  "navY": "---"
}

// XML Code
<a href="https://www.tmap.co.kr/tmap2/mobile/route.jsp?name=${place["poiName"].replace(/\s/g, "")}&lon=${place["navX"]}&lat=${place["navY"]}" class="list-place-navigation">길찾기</a>

ASP(EUC-KR) 코드상에서 위와 같이 <a> 태그의 href 속성이 작성되어 있을때, 웹이나 iOS에서는 poiName인 '푸른길분수공원'이 정상적으로 파라미터로 전달되지만 Android에서는 '%ED%91%B8%EB%A5%B8%EA%B8%B8%EB%B6%84%EC%88%98%EA%B3%B5%EC%9B%90'와 같은 형태로 인코딩되어 정상적으로 장소명이 전달되지 않는 것을 확인할 수 있었다.

비정상적으로 작동될 것이라면, iOS와 Android 둘 다 이러한 문제가 발생했다면 초기에 버그를 발견했을텐데 내 기종이 iOS라 당연히 정상적으로 작동하는 줄 알았다.

ASP, iOS, Android에 대한 이해가 아직 미숙하다보니 구체적으로 어떠한 작동원리 때문에 동일한 파라미터를 iOS와 Android가 각기 다르게 전달받았는지 아직도 잘 모르겠다.

■ 현재상황 기대: [ 출발지 : 현재위치 ], [ 도착지 : 푸른길분수공원 ] 현실: [ 출발지 : 현재위치 ], [ 도착지 : ????????? ]

즉, 원래는 위와 같은 형태로 TMAP의 어플리케이션의 길찾기 기능이 실행되어야 하는데, 도착지를 제대로 전달받지 못했다는 것이다.

약 1시간의 구글링 결과 몇 가지의 해결방법을 시도할 수 있었다. 일단 전제는 한글은 UTF-8로 인코딩해야 제대로 파라미터로 전달될 수 있다는 것이다. 그렇다면 위의 파라미터를 어떻게 EUC-KR 환경에서 UTF-8로 인코딩을 하냐는 것인데...

1. escape()

escape() 메서드는 ASP에서 알파벳과 숫자 및 * , @, - , _ , + , . , / 를 제외한 문자를 모두 16진수 문자로 바꿔주는 메서드로, 쉼표와 세미콜론 같은 문자가 쿠키문자열과의 충돌을 피하기 위해 사용된다고 한다.

ASP 서버 통신에서도 한글을 전달할 때 escape() 메서드를 사용하였기에, 한글깨짐 현상에 대한 일종의 만능 대처법으로 생각하여 이번에도 escape()를 사용하고, 다시 디코딩을 하기 위해 unescape() 메서드도 함께 사용하였으나 Android 환경에서는 여전히 제대로 전달되지 않는 것을 확인했다.

2. URLEncoder.encode()

16진수가 아닌 UTF-8로 인코딩을 하기 위해 찾은 URLEndocer.encode() 메서드를 사용하여

// XML Code
<a href="https://www.tmap.co.kr/tmap2/mobile/route.jsp?name=${URLEncoder.encode(place["poiName"].replace(/\s/g, ""), "UTF-8")}&lon=${place["navX"]}&lat=${place["navY"]}" class="list-place-navigation">길찾기</a>

위와 같이 코드를 작성해주었으나, 콘솔창에서 URLEncoder is not defined라는 에러 문구를 발견할 수 있었고 이에 구글링을 하여 encodeURI()라는 대안을 발견할 수 있었다.

3. encodeURI()

encodeURI() 메서드는 URI의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타낸다. encodeURI() 메서드를 사용하여 한글이 포함된 파라미터를 인코딩하여 전달해줬더니 TMAP 어플리케이션에서도 장소명을 전달받아 정상적으로 한글 장소명을 표기함을 확인할 수 있었다!

▶ encodeURI MDN 공식문서

HTML, VanillaJS와 React로 최근에 이런저런 작업들을 하고 있다가 갑작스레 ASP 작업이 들어와서 적잖이 당황스러운 경험이었던 것 같다.

인코딩도 기본적으로 UTF-8로 작업을 해왔었기에, EUC-KR이라는 새로운 인코딩으로 작업하는 것도 처음이었다.

지금 작성하는 ASP 이슈 말고도 여러가지 버그와 디버깅 과정이 있었고 생각보다 낯설고 험난했다고 생각한다.

하지만 그럼에도 이번 작업에서도 경험한 것은 코딩에 불가능은 없다는 것이다.

여러 경험이 쌓여가면 쌓여갈수록, 불가능해 보이는 것은 내가 아직 해결해보지 못해서이지, 불가능하다고 섣불리 단정지어서는 안된다는 것을 느끼게 되는 것 같다.

기본적으로 흔히 사용하는 type에는 String, int, bool, double 이렇게 4가지가 있다.

void main() {
    String name = '이름'; //string
    int number = 123; //number
    bool boolean = true; //boolean
    double decimal = 10.99; //decimal
}

num이라는 type도 있는데, int와 double을 모두 사용 가능한 type이라고 보면 된다.

void main() {
    num number = 123; //OK
    num decimal = 123.99; //OK
}

2. List

JavaScript의 배열인 Array와 형태가 유사하다. type을 지정하여 선언할 수도 있으며, 일반적으로 var를 통해 선언한다.

void main() {
    var numbers = [1, 2, 3, 4];
    // List<int> numbers = [1, 2, 3, 4]; 와 동일하다.
}

var로 선언하더라도 자동으로 List<type>으로 인식하기 때문에 문제없다.

.add() 매서드를 통해 List에 요소를 추가할 수도 있다.

void main() {
    var numbers = [1, 2, 3, 4];
    numbers.add(1);

    print(numbers); //[1, 2, 3, 4, 1]
}

이뿐만 아니라, 놀랍게도 Dart에는 List내에서 조건문으로 데이터를 추가할 수 있다.

void main() {
    var giveMeFive = true;
    var numbers = [
        1,
        2,
        3,
        4,
        if (giveMeFive) 5,
    ];

    print(numbers); //[1, 2, 3, 4, 5]
}

위의 예시를 들어, true 값을 할당한 giveMeFive는 항상 참이므로, if조건문에 부합된다. 그렇기에 List의 마지막 요소로 5가 추가되고 콘솔에 나타나게 되는 것이다.

이를 Collection If라고 부른다.

if문과 함께 List에 사용되는 문법이 있으니, 바로 for문이다.

void main() {
    var subscribers = ['John', 'Eric', 'Anna'];
    var viewers = [
        'Tom',
        'Cindy',
        for (var subscriber in subscribers) '★$subscriber',
    ]

    print(viewers); //[Tom, Cindy, ★John, ★Eric, ★Anna]
}

이렇게 List에 for문을 적용하여 요소로 추가하는 것도 가능하다.

이를 Collection For이라 부른다.

3. String Interpolation

Collection For의 예시 코드를 보면서 뜬금없이 $기호가 나타났다. $기호는 변수값을 사용하게 해주는 것으로, 다음과 같이 활용할 수 있다.

void main() {
    var name = '소설';
    var age = 26;
    var message = '안녕하세요, 제 이름은 \'$name\'입니다. 저는 2년 뒤면 ${age + 2}살이 됩니다.';

    print(message); //안녕하세요, 제 이름은 '소설'입니다. 저는 2년 뒤면 28살이 됩니다.
}

이런식으로 말이다!

String을 사용하기 위해 '', ""를 사용하다보면 문장 중간에 '', ""를 넣었을 때

이런식으로 원치 않는 끊김을 마주할 수 있다.

그럴 때 위의 예시와 같이 \를 사용하여 탈출시키면 끊기지 않고 정상적으로 문장을 마칠 수 있다.

4. Map

Map은 JavaScript의 Object와 굉장히 유사하다. List와 마찬가지로 var를 통해 선언하더라도 자동으로 Map으로 인식한다.

void main() {
    var player = {            // Map<String, Object> player = { 과 같다.
        'name': '소설',
        'exp': 25.97,
        'superpower': false,
    }

    Map<int, bool> example = {
        1: true,
        2: false,
        3: true,
    }
}

예시를 보면 알겠지만, Map<type, type>으로 선언을 할 수 있다. ＊ Dart는 모두 객체로 이루어져 있기 때문에, Dart에서의 Object라는 type은 any와 같다.

5. Set

Set은 Dart의 독특한 type으로, 유니크한 요소들로 구성되는 하나의 세트를 나타낸다. {}안에 변수들을 입력하여 var로 선언할 수 있으며, Set<type>으로 직접 선언해줄 수도 있다.

void main() {
    var numbers = {1, 2, 3, 4}; // Set<int> numbers = {1, 2, 3, 4}; 와 같다.
    numbers.add(1);
    numbers.add(1);
    numbers.add(1);
    numbers.add(1);
    numbers.add(1);

    print(numbers); // {1, 2, 3, 4}
}

.add() 매서드로 요소들을 추가하였음에도 불구하고 최초의 값이 변경되지 않았음을 알 수 있다.

Dart에서는 JavaScript와 다른 점들이 제법 존재하는데, void main()을 작성해줘야 코드가 실행될 수 있다는 점, print를 사용하여 기존의 JavaScript에서의 console과 유사하게 콘솔 출력을 할 수 있다는 것이다. 그리고 코드가 끝날 때마다 반드시 ;(세미콜론)이 찍혀야 에러가 나지 않는다.

void main() {
    print('Hello World!');
}

여전히 주니어 개발자지만 이게 얼마만의 Hello World란 말인가, 후후... 괜히 학생때로 돌아간 것 같아 기분이 굉장히 묘하다.

2. 변수 만들기

일반적인 변수 선언 방법에는 크게 var, type, dynamic, final 이렇게 4가지가 있다.

1) var

• 관습적으로 함수나 매서드 내부에 지역 변수를 선언할 때 사용된다.
• 선언과 할당이 동시에 이뤄진 경우, 할당에 사용된 type과 동일한 type에 한하여 재할당이 가능하다.
• 예를 들어, '한글'(String)을 할당하고 123(int)를 할당하는 것은 불가능하다.

void main() {
    var name = '소설';
    name = 'snow';
}

2) type

• class에서 변수나 property를 선언할 때 사용된다.
• type이 지정되어 있으므로 다른 type의 재할당은 불가능하다.

void main() {
    String name = '소설';
    name = 'snow';
}

3) dynamic

• 여러가지 타입을 가질 수 있는 변수에 쓰는 키워드다.
• 선언과 할당을 따로하는 var 선언을 통해서도 가능하다.

// dynamic
void main() {
    dynamic name = '소설';
    name = 123;
}

// var
void main() {
    var name;
    name = '소설';
    name = 123;
}

4) final

• JavaScript의 const 선언과 동일하다. 재선언, 재할당이 불가한 선언이다.
• type과 함께 선언할 수 있으나, 할당된 값으로 type을 알아서 유추해주기 때문에 굳이 type을 선언해주지 않아도 된다.

void main() {
    final kor = '소설';
    final String eng = 'snow';
}

3. 추가 선언문

1) late

• late 선언은 var이나 final앞에 선행하여 작성할 수 있는 선언문으로, 초기 값 없이 변수를 선언할 수 있도록 해주며 이후에 원하는 시점에 할당할 수 있게 한다.
• 할당이 이뤄지지 않는 초기의 선언만으로는 print로 접근할 수 없다.

void main() {
    late final name;
    print(name); //ERROR, 불가능

    late final name;
    name = '소설';
    print(name); //가능
}

2) const

• Compitle-Time Constant를 만들어주는 선언문이다. 컴파일할 때 알고 있는 값에 사용하는 선언, 즉 앱스토어에 앱 코드를 넘기기 전에 개발자가 아는 값에 한하여 사용하는 선언이다.
• final과 마찬가지로 재할당, 재선언이 불가능하다.
• API로부터 받아온다거나 사용자가 입력해야하는 예측 불가능한 값에 대해서는 final이나 var를 사용하는 것이 적절하다.

void main() {
    const name = '소설'; //OK
    name = 'snow'; //ERROR, 불가능

    const name = fetchData(); //ERROR, 불가능

    //예를 들어, 아래와 같이 활용이 가능할 것이다.
    const max_user_coin = 10000;
}

4. Null Safety

Null Safety란, 데이터가 null이 될 수 있음을 명시하여 null이 무차별적으로 원치 않는 곳에서 참조되지 않도록 방지해주는 것을 의미한다.

기존의 선언과 동일하지만, type뒤에 ?를 붙여서 null값을 가질 수 있다는 것을 명시할 수 있다.

void main() {
    String name = '소설';
    name = null; //ERROR, 불가능

    String? name = '소설';
    name = null; //가능
}

단, 이렇게 null값을 가질 수 있다고 명시한 경우 null이 아닌 값을 가졌을 때에 한하여 코드가 돌아가도록 하는 것이 바람직하다.

void main() {

    String? name = '소설';

    if ( name != null ) {
        name.isEmpty;
    }

    // 이 주석을 기준으로 위와 아래의 코드는 동일하게 작동한다.

    name?.isEmpty;

}

• Dart는 구글 개발자들이 만든 객체 지향 언어로, UI(User Interface)를 만드는 데에 최적화되어 있다.

• Flutter로 앱을 개발하는데 기초가 되는 언어이며, 다양하고 많은 플랫폼에 컴파일이 가능하다는 장점이 있다.

〈 Dart와 다른 언어들 간의 유사성 〉

▶ Dart 의 구체적인 장점

• 기본적으로 개발을 할 때는 AOT(Ahead-Of-Time) 컴파일을 접한다. 코드를 작성하고 빌드를 하고 컴파일을 하는 순서를 따른다는 것이다. 이러한 경우, 개발 중일 때 즉각적으로 변화한 부분을 확인하고 싶다면 계속해서 컴파일 과정을 처음부터 끝까지 반복해야하기 때문에 비효율적이다.

• Dart는 Dart VM(Dart Virtual Machine)을 통해 JIT(Just-In-Time) 을 지원한다. 개발을 하는 과정에서 느리긴하지만, 실시간으로 변화된 부분을 확인할 수 있다. 개발이 끝나면 AOT를 기반으로 실제 기계어로 변환하여 Linux, MAC, iOS, PC 등 여러 플랫폼에 사용될 수 있도록 컴파일이 진행된다.

   ▶ 즉, 개발 환경에서는 즉각적인 피드백을 받을 수 있고,         배포 환경에서는 기계어로 컴파일되어 빠르게 동작하는 이점을 모두 챙길 수 있다는 것

• Null Safety 를 제공한다. 개발 과정에서 개발자가 null 값을 참조해버리면 많은 문제가 발생하는데, 이에 대한 안전장치를 도입한 언어다.

// JavaScript
function Example () {
    return (
        <>
              <div className="box-01"></div>
              <div className="box-02"></div>
              <div className="box-03"></div>
        </>
    );
}

export default Example;

/* CSS */
.box-01 {
    width: 40px;
    height: 40px;
    background-color: red;
}

.box-02 {
    width: 40px;
    height: 40px;
    background-color: yellow;
}

.box-03 {
    width: 40px;
    height: 40px;
    background-color: green;
}

box-01, box-02, box-03 모두 background-color 속성이 모두 다른 색으로 설정되어 있다. 만약 box-01, box-02, box-03 세 가지 태그 모두 같은 색으로 구성되어야 한다면 어떨까?

단순히 background-color 속성을 같은 색으로 설정하면 된다고 생각할 수 있지만, background-color: red;, background-color: red;, background-color: red; ... 이와 같이 작성을 해두면 나중에 속성을 변경해야할 일이 생겼을 때 모두 하드코딩으로 수정해야한다.

그렇기에 변수를 만들어 속성에 할당해두는 편이 나중에 유지/보수하는 데에 훨씬 수월할 것이다 :) 그때 사용할 수 있는 방법이 바로 :root 다!

:root는 최상단의 전역 스타일링인 index.css에 작성하면 모든 페이지, 컴포넌트에 쓸 수 있다.

// CSS index.css
:root {
    --backgroundColor: #000000;
}

이렇게 작성해두면 이후 다른 CSS 파일에서 작성할 때, attribute: var(value name); 형식으로 적어주면 된다. 앞선 예시와 :root 사용방법을 활용하여 표현하면 아래와 같은 CSS 코드가 될 것이다.

/* CSS */
.box-01 {
    width: 40px;
    height: 40px;
    background-color: var(--backgroundColor);
}

.box-02 {
    width: 40px;
    height: 40px;
    background-color: var(--backgroundColor);
}

.box-03 {
    width: 40px;
    height: 40px;
    background-color: var(--backgroundColor);
}

이렇게 해두면 나중에 최상단인 index.css에서 --backgroundColor의 값만 수정해주면 해당 값을 적용한 다른 모든 컴포넌트나 엘리먼트를 동시에 수정할 수 있다 :)

매번 하드코딩으로 바꿔가던 나를 되돌아보며.. 앞으로 :root를 사용하여 효율적인 스타일링을 해보자!

// 전체화면 활성화
function openFullScreen() {
  if (document.documentElement.requestFullscreen) {
    document.documentElement.requestFullscreen();
  } else if (document.documentElement.mozRequestFullScreen) {
    /* Firefox */
    document.documentElement.mozRequestFullScreen();
  } else if (document.documentElement.webkitRequestFullscreen) {
    /* Chrome, Safari and Opera */
    document.documentElement.webkitRequestFullscreen();
  } else if (document.documentElement.msRequestFullscreen) {
    /* IE/Edge */
    document.documentElement.msRequestFullscreen();
  }
}

// 전체화면 비활성화
function closeFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    /* IE/Edge */
    document.msExitFullscreen();
  }
}

이렇게 스크립트 내에 openFullScreen 함수와 closeFullScreen 함수를 작성해준 다음, onClick 메서드를 사용하여 함수를 호출할 수 있도록 코드를 작성하면 된다.

function Example() {
  return (
    <>
      <button className="full-screen-button" onClick={() => openFullScreen()}>
        OPEN
      </button>
      <button className="close-screen-button" onClick={() => closeFullScreen()}>
        CLOSE
      </button>
    </>
  );
}

export default Example;

OPEN 버튼을 클릭하면 전체화면이 활성화 되고, CLOSE 버튼을 클릭하면 전체화면이 비활성화 된다.

모바일에서는 작동하지 않으며, 태블릿의 경우에도 Safari에 한하여 작동하였다. Chrome은 전체화면이 아예 작동하지 않는다 :(

Mobile: Chrome (X), Safari (X) Tablet: Chrome (X), Safari (O)

Codepen 의 코드를 참고하여 실제로 사용해보고 정리해보았다!

import { ReactComponent as Arrow } from "../assets/arrow.svg";

<Arrow
  className="back-button"
  stroke="#e10098"
  onClick={() => goToPrevPage()}
  onKeyUp={(event) =>
    event.key === "Enter" || event.key === " "
      ? goToPrevPage()
      : ""
 }
 tabIndex="0"
/>

위의 예시는 arrow.svg 이미지 파일을 Arrow 라는 컴포넌트 형식으로 return되는 JSX 코드 내부의 원하는 위치에 끼워 넣어주고, tabIndex 속성을 부여한 코드다.

기존에 Arrow는 button 태그가 아니기 때문에 Tab 키를 눌러도 포커싱되지 않는다. 하지만 tabIndex를 부여함으로써 결과적으로 Tab 으로 포커스가 가능해졌다.

마우스를 움직이지 않고도 Tab 으로 포커스를 Arrow로 옮긴 다음 Enter 키를 누르는 것만으로 이전 페이지로 가는 goToPrevPage() 함수를 실행시킬 수 있다 :)

tabIndex 속성에는 꼭 0만 부여되는 것이 아니다! 정리하자면 다음과 같다.

tabIndex="0" //상호작용하지 않는 태그에도 포커스 이동 기능 설정 tabIndex="-1" //상호작용이 되는 태그에도 포커스 이동 기능 제거 tabIndex="1" //포커스 순서를 정하여 1부터 순서대로 이동하도록 설정

이전에는 Tab으로 포커스를 필요한 곳에 이동시키는 것이 왜 중요한지 몰랐는데, 웹 접근성의 관점에서 굉장히 중요하다는 것을 알게 되었다 :0

/* FOCUS CSS ONLY  */
:focus-visible {
  /* Remove Default Focus Style */
  outline: none;
  /* Custon Focus Styles */
  outline-color: rgb(80, 150, 255);
  outline-style: solid;
  outline-width: 8px;
}

■ Stack Overflow

✴︎ 글을 쓰기에 앞서, 문제를 해결하고 보니 Double Emit Issue 라기보다는 Double On Issue 라고 보는 것이 가깝지 않나 생각이 듭니다.

구글링 결과 해당 현상을 Emit Events Twice 로 부르는 경우가 많아 편의상 제목에 Emit 도 추가하였습니다 :)

✓ Double Emit/On 현상 확인

socket.io를 활용하여 웹 채팅 어플리케이션을 만들던 중, 의도치 않게 채팅이 두 번 수신되는 현상을 확인했다.

위의 사진처럼 각각의 사용자가 전송버튼을 한 번만 눌렀음에도 불구하고 메세지의 수신은 두 번 이뤄지는 것을 발견할 수 있었다.

socket.io를 활용한 코드는 아래와 같다.

#Client Side

//전송버튼을 눌렀을 때 실행되는 sendMessage 함수
const sendMessage = async () => {
  let messageData;
  if (message !== '') {
    messageData = {
      room: room,
      author: name,
      message: message,
      time: String(new Date(Date.now()).getHours()).padStart(2, '0')
          + ':' + String(new Date(Date.now()).getMinutes()).padStart(2, '0'),
    }
  }

  //socket.emit 메서드를 통해 Client > Server로 데이터를 전송
  await socket.emit('send_message', messageData);
  setMessageList((list) => [...list, messageData]);
}

useEffect(() => {
  //socket.on 메서드를 통해 Server > Client로 데이터를 수신
  socket.on('receive_message', (data) => {
    setMessageList((list) => [...list, data]);
  })
}, [socket])

#Server Side

io.on('connection', (socket) => {
  //socket.on 메서드를 통해 Client > Server로 데이터를 수신
  socket.on('send_message', (data) => {
    console.log(data);
    //socket.emit 메서드를 통해 Server > Client로 데이터를 전송
    socket.to(data.room).emit('receive_message', data);
  })
})

코드에서 socket.emit이나 socket.on 메서드가 중복되어 작성되어 있는 곳은 없었다.

✓ Double Emit/On 원인 분석

Server Side의 코드를 여러모로 수정해보았지만 좀처럼 해결되지 않아서, 이번엔 Client Side에서 console을 이용하여 문제 발생 지점을 찾고자 하였다.

가능성이 높은 useEffect 내부에 console을 찍어보았다.

그 결과, 처음에 채팅방을 들어갔을 때는 socket.on 메서드가 실행되지 않고 이외의 부분만 useEffect에 의해 동작하는 것을 알 수 있다.

하지만!

메세지를 보내면 이처럼 socket.on 메서드가 두 번 실행되면서 현재 메세지 리스트에 수신한 메세지를 두 번 입력하는 것을 볼 수 있다.

Server Side 의 socket.emit 코드에 console을 찍어보았지만, 해당 코드에서는 console이 중복으로 출력되지 않았으니... 아무래도 useEffect 내부에 뭔가 조치를 취해줘야 할 것 같다.

✓ Double Emit/On 문제 해결

다행히 구글링을 통해 Stack Overflow 에서 그 답을 찾을 수 있었다! ( 검색을 생활화합시다... :D )

요컨대, useEffect 내부에 socket.on 메서드에 이어 socket.off 메서드를 통해 socket.io의 리스너가 꺼지도록 return 문을 작성해주어야 한다는 것이다.

그리하여 useEffect 내부에 위와 같이 return 문을 통해 socket.off 메서드가 실행되도록 코드를 추가해주었다.

새로고침을 하고 다시 메세지를 보내보았다.

드디어! 정상적으로 메세지가 한 번만 수신되고, 출력되는 것을 확인할 수 있었다.

✦  후일담

socket.io 튜토리얼 영상 댓글에도 해당 문제에 관한 얘기가 있어서 확인해보니 useEffect 로 더블 렌더링 현상을 마주한 경우 useMemo 를 사용해보라는 글이었다.

하지만 useMemo 를 사용했음에도 해당 현상이 좀처럼 고쳐지질 않아서 당황하고 있었을 찰나, 구글링을 통해 해결 방법을 찾을 수 있어서 다행이었다 :)

이전 프로젝트에서 다룰까 했다가 멈췄던 socket.io 를 직접 다뤄보고 메세지가 정상적으로 송수신되는 것을 확인해보니 기분이 묘하다.

성장했다는 느낌?!

아직 코린이이긴 하지만! 어제보다 성장한 오늘, 오늘보다 성장한 내일을 마주하다보면 언젠가 스스로를 많이 성장했다고 느낄 수 있을 것이라 믿는다.

예를 들어 오전 9시 5분이라고 가정하면 09:05 와 같은, 즉 00:00 형식으로 표기되는 것이 일반적인데 실제로 작동상에서는 9:5 로 표기되었다.

시간의 길이를 측정하여 2자리 미만일 경우 앞에 0을 물리적으로 추가해주는 함수를 짜고있던 찰나! String.prototype.padStart() 라는 편리한 메서드를 발견했다.

▶ MDN 공식문서 : padStart() MDN Web Docs

사용방법은 다음과 같다. 기본적으로 padStart() 메서드는 String 타입에만 동작하며, padStart()의 인자로 자릿수, 입력할 문자열을 넣어주면 된다.

예를 들어, String 타입의 변수 letter 가 있다고 가정하고 (const letter = '1';) 출력하고 싶은 결과가 001 이라면, letter.padStart(3, '0') 과 같이 사용해주면 된다! 해석하자면 length가 3이 될 때까지 '0'을 넣겠다는 것이다.

꼭 String 타입의 숫자가 아니어도 되며, 두 번째 인자인 문자열을 입력하지 않고 실행하면 공백이 입력된다.

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"

위에서 시간에 포함될 데이터에 new Date(Date.now()).getHours() 을 담아주었는데, getHours()를 통해 출력되는 값은 Number 타입이다. 그렇기에 아래와 같은 TypeError 가 발생한다.

그래서! 앞에 String()을 붙여 출력되는 값을 String 타입으로 바꿔준 후, padStart() 메서드를 사용하면 정상적으로 작동하는 것을 확인할 수 있다.

직접 함수를 만들어서 value, targetLength, filler 를 인자로 받고 공간을 채울 수도 있었겠지만... 역시 메서드는 알면 알수록 편리하다는 생각이 든다 :0

검색해서 조금 알아보니, submit은 href, replace와 마찬가지로 페이지를 이동시키는 기능이 자체적으로 내장되어 있는 듯하다.

이렇듯 원치 않는 이벤트가 발생할 때, 해당 이벤트를 중지할 수 있는 방법이 바로 event.preventDefault() 메서드다. 이 메서드에 대한 공식 문서는 여기 통해 확인할 수 있다.

나의 경우를 천천히 풀어보자면, 다음과 같다.

function Example() {
  function action(event) {
    console.log('Hello World!'); 
  };

  return
  (
      <>
      <form onSubmit={(event) => action(event)}>
        <input type='text' name='name' placeholder='Enter your name.' />
        <button type='submit' />
      </form>
    </>
  )
};

export default Example;

Example이라는 컴포넌트 내부에 <form> 태그가 있고, <button>을 누르면 action 함수가 실행되어 콘솔 창에 'Hello World!'가 입력되는 구조다.

허나, action 함수가 실행되고 해당 화면에 고정되어 있었으면 좋겠는데, 이 상태로는 계속 페이지가 새로고침될 것이다.

이때 event.preventDefault() 메서드를 사용하면 새로고침을 쉽게 방지할 수 있다. 나머지 코드들은 그대로 두고, 실행되는 함수 내부에 event.preventDefault()를 작성해주면 된다.

function Example() {
  function action(event) {
    //----------***----------//
    event.preventDefault();
    //----------***----------//
    console.log('Hello World!'); 
  };

  return
  (
      <>
      <form onSubmit={(event) => action(event)}>
        <input type='text' name='name' placeholder='Enter your name.' />
        <button type='submit' />
      </form>
    </>
  )
};

export default Example;

위와 같이 실행되는 함수 내부에 작성해주면 페이지가 더 이상 새로고침되지 않는다!

그걸 가능하게 해주는 것이 바로 CSS의 animation 기능이다.

애니메이션(animation) 이란?

CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 주는 기능으로, 다음의 하위 속성을 갖는다. #MDN 애니메이션 공식 문서

• animation-name (en-US) : 이 애니메이션의 중간 상태를 지정한다. 중간 상태는 @keyframes 규칙을 이용하여 기술한다.

• animation-delay : 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지를 지정한다.

• animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정한다.

• animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정한다.

• animation-iteration-count (en-US) : 애니메이션이 몇 번 반복될지 지정한다. infinite로 지정하여 무한히 반복하는 것도 가능하다.

• animation-play-state (en-US) : 애니메이션을 멈추거나 다시 시작할 수 있다.

• animation-timing-function (en-US) : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정한다.

• animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.

애니메이션(animation) 사용하기

example.js

function Example() {
  return (
    <>
      <div className='example_container'>Container</div>
    </>
  )
}

example.css

.example_container {
  display: flex;
  width: 10px;
  height: 10px;
  animation-name: fade-in;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

example.js에는 클래스명이 'example_container'인 <div> 엘리먼트가 있다. example.css에는 'example_container' 클래스에 대한 속성이 명시되어 있다.

그리고 그 아래의 @keyframes를 통해 애니메이션의 이름과 효과를 설정할 수 있다.

@keyframes 애니메이션 이름 {
  from {
    애니메이션이 시작될 때의 속성
  }
  to {
      애니메이션이 끝날 때의 속성
  }
}

이렇게 말이다!

example.css를 풀어보자면, 'example_container' 클래스에 대해 @keyframes로 명시된 'fade-in' 애니메이션을 적용하고, 애니메이션은 animation-duration으로 설정된 0.75초 동안 진행되도록 한다. 그리고 animation-fill-mode속성을 forwards로 설정하여 애니메이션이 끝나면 끝난 그대로 상태를 유지하도록 하겠다는 것을 의미한다.

즉, example.css에 의해 'example_container'는 처음에는 투명도가 0이었다가 0.75초 동안 투명도가 1로 바뀌는 애니메이션이 등장하고, 투명도가 1인 상태로 끝나 그 상태를 유지하게 된다.

CSS 선택자를 사용하지 않고서도 자체적으로 CSS를 적용가능하게 해주는 애니메이션(animation)에 대해 알아보았다 :)

setTimeout()은 function, code, delay를 매개변수로 받는다.

setTimeout(() => { //function
    console.log('Hello World!'); //code
}, 1000) //delay

위와 같은 형태로 작성할 수 있는데, delay에 해당하는 시간이 만료되면 function이나 code를 실행하는 메서드다.

여기서 delay는 밀리초 단위로, 위의 예시의 경우 1000ms = 1s 즉, 1초의 지연 이후에 console.log('Hello World!')를 실행하게 된다.

개인 포트폴리오 페이지를 제작하면서 특정 엘리먼트나 컴포넌트가 몇 초의 시간지연 이후에 렌더링 되면 좋겠다고 생각했고, 다음과 같이 코드를 작성했었다.

function Example() {
  return (
    <>
    {setTimeout(() => {
          <div>Hello World!</div>
    }, 1000)}
    </>
  )
};

export default Example;

Compiled Successfully! 라는 문구가 등장하며 컴파일 에러를 마주하진 않았으나, 1초 뒤에 등장하길 바랬던 Hello World! 는 어디가고 delay에 작성해둔 숫자만 표시됐다.

setTimeout()이 작동하지 않는 이유

setTimeout()은 JavaScript 함수로, 콜백 되는 함수 역시 일반적인 JavaScript 함수이어야한다. 내가 작성한 코드는 일반적인 함수가 아니라 JSX 태그를 반환하는 코드이기 때문에 정상적으로 작동하지 않는 것이었다.

setTimeout()을 활용한 렌더링 지연

그렇다면 렌더링되는 코드 안에 직접적으로 setTimeout()을 사용하여 렌더링을 지연할 수는 없다는 얘긴데, 방법이 없을까? 생각하던 중 setTimeout()을 렌더링 바깥에 지정해주고, useState와 useEffect를 사용하여 상태의 변환을 간접적으로 활용해보는건 어떨까하는 생각이 들었다.

//01
import React, { useState, useEffect } from 'react';

function Example() {
  //02
  const [show, setShow] = useState(false);

  //03
  useEffect(() => {
    setTimeout(() => {
      setShow(true);
    }, 1000)
  }, [])

  return (
    <>
    //04
    {show && (
     <div>Hello World!</div>
     )}
    </>
  )
}

export default Example;

차근차근 코드를 살펴보도록 하자!

01

useState와 useEffect를 사용하기 위해 react로부터 가져와 import 해준다.

02

초기의 상태가 false인 show라는 변수와 해당 변수의 상태를 변경하는 상태변경함수 setShow를 useState를 사용하여 선언해준다.

03

useEffect를 사용하여 setTimeout()을 설정해준다. 위의 예시에서는 1000ms, 즉 1초 뒤에 show의 상태가 setShow 상태변경함수를 통해 true가 된다. show가 조건에 따라 true가 됐다가 false가 되는 것을 원한다면, 다음과 같이 작성하면 된다.

useEffect(() => {
  if (조건) {
      setTimeout(() => {
      상태변경함수(true);
    }, delay)
  } else {
    상태변경함수(false);
}, [])

이렇게 작성해주면 조건에 따라 true와 false를 넘나드는 show를 만들 수 있고, 이를 통해 사용자의 상호작용에 의해 렌더링될 때마다 시간지연을 줄 수 있다.

04

&& 연산자를 통해 둘 다 참인 경우에 렌더링 되도록 한다. JSX 태그의 경우, 빈 태그를 포함하여 모든 태그는 기본적으로 true값을 지닌다. 즉, {show && <div>Hello World!</div>}에서 JSX 태그에 해당하는 <div>Hello World!</div>는 항상 true이다.

1) show가 true이면 ‣ true && true가 되어      && 연산의 결과가 true이므로 Hello World! 가 정상적으로 출력되고, 2) show가 false이면 ‣ false && true가 되어      && 연산의 결과가 false이므로 Hello World! 가 출력되지 않는 것이다.

이렇게 setTimeout()을 활용한 렌더링 지연에 대해 알아보았다! useState, useEffect에 대한 개념도 어느 정도 갖춰져 있어야 하니 잘 모르겠다면 꼭 검색을 해서 사용방법을 되새겨보도록 하자 :)

✴︎ 잘못된 정보나 표기 오류가 있는 경우 의견이나 피드백 모두 환영합니다.

: Level.1

• 정답률

: 45%

• 문제:

: 성격 유형 검사하기 #2022 KAKAO TECH INTERNSHIP

• 풀이 시간:

: 16m

• 설명:

: 나만의 카카오 성격 유형 검사지를 만들려고 합니다. 성격 유형 검사는 다음과 같은 4개 지표로 성격 유형을 구분합니다. 성격은 각 지표에서 두 유형 중 하나로 결정됩니다.

검사지에는 총 n개의 질문이 있고, 각 질문에는 아래와 같은 7개의 선택지가 있습니다.

• 매우 비동의
• 비동의
• 약간 비동의
• 모르겠음
• 약간 동의
• 동의
• 매우 동의

각 질문은 1가지 지표로 성격 유형 점수를 판단합니다.

예를 들어, 어떤 한 질문에서 4번 지표로 아래 표처럼 점수를 매길 수 있습니다.

이때 검사자가 질문에서 약간 동의 선택지를 선택할 경우 어피치형(A) 성격 유형 1점을 받게 됩니다. 만약 검사자가 매우 비동의 선택지를 선택할 경우 네오형(N) 성격 유형 3점을 받게 됩니다.

위 예시처럼 네오형이 비동의, 어피치형이 동의인 경우만 주어지지 않고, 질문에 따라 네오형이 동의, 어피치형이 비동의인 경우도 주어질 수 있습니다. 하지만 각 선택지는 고정적인 크기의 점수를 가지고 있습니다.

• 매우 동의나 매우 비동의 선택지를 선택하면 3점을 얻습니다.
• 동의나 비동의 선택지를 선택하면 2점을 얻습니다.
• 약간 동의나 약간 비동의 선택지를 선택하면 1점을 얻습니다.
• 모르겠음 선택지를 선택하면 점수를 얻지 않습니다.

검사 결과는 모든 질문의 성격 유형 점수를 더하여 각 지표에서 더 높은 점수를 받은 성격 유형이 검사자의 성격 유형이라고 판단합니다. 단, 하나의 지표에서 각 성격 유형 점수가 같으면, 두 성격 유형 중 사전 순으로 빠른 성격 유형을 검사자의 성격 유형이라고 판단합니다.

질문마다 판단하는 지표를 담은 1차원 문자열 배열 survey와 검사자가 각 질문마다 선택한 선택지를 담은 1차원 정수 배열 choices가 매개변수로 주어집니다. 이때, 검사자의 성격 유형 검사 결과를 지표 번호 순서대로 return 하도록 solution 함수를 완성해주세요.

• 제한사항:

• 1 ≤ survey의 길이 ( = n) ≤ 1,000
  • survey의 원소는 "RT", "TR", "FC", "CF", "MJ", "JM", "AN", "NA" 중 하나입니다.
  • survey[i]의 첫 번째 캐릭터는 i+1번 질문의 비동의 관련 선택지를 선택하면 받는 성격 유형을 의미합니다.
  • survey[i]의 두 번째 캐릭터는 i+1번 질문의 동의 관련 선택지를 선택하면 받는 성격 유형을 의미합니다.
• choices의 길이 = survey의 길이
  • choices[i]는 검사자가 선택한 i+1번째 질문의 선택지를 의미합니다.
  • 1 ≤ choices의 원소 ≤ 7

• 입출력 예:

• 입출력 예 설명:

• 입출력 예 #1

  1번 질문의 점수 배치는 아래 표와 같습니다.

  선택지	성격 유형 점수
  매우 비동의	어피치형 3점
  비동의	어피치형 2점
  약간 비동의	어피치형 1점
  모르겠음	어떤 성격 유형도 점수를 얻지 않습니다
  약간 동의	네오형 1점
  동의	네오형 2점
  매우 동의	네오형 3점
  1번 질문에서는 지문의 예시와 다르게 비동의 관련 선택지를 선택하면 어피치형(A) 성격 유형의 점수를 얻고, 동의 관련 선택지를 선택하면 네오형(N) 성격 유형의 점수를 얻습니다.
  1번 질문에서 검사자는 약간 동의 선택지를 선택했으므로 네오형(N) 성격 유형 점수 1점을 얻게 됩니다.

  2번 질문의 점수 배치는 아래 표와 같습니다.

  선택지	성격 유형 점수
  매우 비동의	콘형 3점
  비동의	콘형 2점
  약간 비동의	콘형 1점
  모르겠음	어떤 성격 유형도 점수를 얻지 않습니다
  약간 동의	프로도형 1점
  동의	프로도형 2점
  매우 동의	프로도형 3점
  2번 질문에서 검사자는 약간 비동의 선택지를 선택했으므로 콘형(C) 성격 유형 점수 1점을 얻게 됩니다.

  3번 질문의 점수 배치는 아래 표와 같습니다.

  선택지	성격 유형 점수
  매우 비동의	무지형 3점
  비동의	무지형 2점
  약간 비동의	무지형 1점
  모르겠음	어떤 성격 유형도 점수를 얻지 않습니다
  약간 동의	제이지형 1점
  동의	제이지형 2점
  매우 동의	제이지형 3점
  3번 질문에서 검사자는 비동의 선택지를 선택했으므로 무지형(M) 성격 유형 점수 2점을 얻게 됩니다.

  4번 질문의 점수 배치는 아래 표와 같습니다.

  선택지	성격 유형 점수
  매우 비동의	라이언형 3점
  비동의	라이언형 2점
  약간 비동의	라이언형 1점
  모르겠음	어떤 성격 유형도 점수를 얻지 않습니다
  약간 동의	튜브형 1점
  동의	튜브형 2점
  매우 동의	튜브형 3점
  4번 질문에서 검사자는 매우 동의 선택지를 선택했으므로 튜브형(T) 성격 유형 점수 3점을 얻게 됩니다.

  5번 질문의 점수 배치는 아래 표와 같습니다.

  선택지	성격 유형 점수
  매우 비동의	네오형 3점
  비동의	네오형 2점
  약간 비동의	네오형 1점
  모르겠음	어떤 성격 유형도 점수를 얻지 않습니다
  약간 동의	어피치형 1점
  동의	어피치형 2점
  매우 동의	어피치형 3점
  5번 질문에서 검사자는 약간 동의 선택지를 선택했으므로 어피치형(A) 성격 유형 점수 1점을 얻게 됩니다.

  1번부터 5번까지 질문의 성격 유형 점수를 합치면 아래 표와 같습니다.

  지표 번호	성격 유형	점수	성격 유형	점수
  1번 지표	라이언형(R)	0	튜브형(T)	3
  2번 지표	콘형(C)	1	프로도형(F)	0
  3번 지표	제이지형(J)	0	무지형(M)	2
  4번 지표	어피치형(A)	1	네오형(N)	1
  각 지표에서 더 점수가 높은 T,C,M이 성격 유형입니다.
  하지만, 4번 지표는 1점으로 동일한 점수입니다. 따라서, 4번 지표의 성격 유형은 사전순으로 빠른 A입니다.

  따라서 "TCMA"를 return 해야 합니다.

• 입출력 예 #2

  1번부터 3번까지 질문의 성격 유형 점수를 합치면 아래 표와 같습니다.

  지표 번호	성격 유형	점수	성격 유형	점수
  1번 지표	라이언형(R)	6	튜브형(T)	1
  2번 지표	콘형(C)	0	프로도형(F)	0
  3번 지표	제이지형(J)	0	무지형(M)	0
  4번 지표	어피치형(A)	0	네오형(N)	0
  1번 지표는 튜브형(T)보다 라이언형(R)의 점수가 더 높습니다. 따라서 첫 번째 지표의 성격 유형은 R입니다.
  하지만, 2, 3, 4번 지표는 모두 0점으로 동일한 점수입니다. 따라서 2, 3, 4번 지표의 성격 유형은 사전순으로 빠른 C, J, A입니다.

  따라서 "RCJA"를 return 해야 합니다.

• 작성 답안:

solution.js

function solution(survey, choices) {
    let score = { "R": 0, "T": 0,
                  "C": 0, "F": 0,
                  "J": 0, "M": 0,
                  "A": 0, "N": 0};
    let character = [];

    let board = survey.map((value) => value.split(""));

    for(i=0; i < board.length; i++) {
        if (choices[i] <= 3) score[board[i][0]] += (4 - choices[i]);
        if (choices[i] >= 5) score[board[i][1]] += (choices[i] - 4);
    }

    score["R"] >= score["T"] ? character.push("R") : character.push("T");
    score["C"] >= score["F"] ? character.push("C") : character.push("F");
    score["J"] >= score["M"] ? character.push("J") : character.push("M");
    score["A"] >= score["N"] ? character.push("A") : character.push("N");

    return character.join("");
}

• 다른 답안:

solution.js

{}

객체를 활용하니 문제 접근이 생각보다 수월하고, 시간도 얼마 걸리지 않았다.

내일 코딩 테스트를 앞두고 풀어본 연습문제가 금방 풀려버려서 자신감이 생기면서도 이 문제가 쉬웠던 건 아닐까 내일 어려우면 어쩌지하고 다시금 두려워지기도 한다.

하지만 부딪치지 않으면 넘을 수 없다. 내일의 코테... 물론 잘 치면 좋겠지만 지더라도 졌잘싸가 되길 바래본다 :0

: Level.1

• 정답률

: 49%

• 문제:

: 문자열 나누기

• 설명:

: 문자열 s가 입력되었을 때 다음 규칙을 따라서 이 문자열을 여러 문자열로 분해하려고 합니다.

• 먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다.
• 이제 이 문자열을 왼쪽에서 오른쪽으로 읽어나가면서, x와 x가 아닌 다른 글자들이 나온 횟수를 각각 셉니다. 처음으로 두 횟수가 같아지는 순간 멈추고, 지금까지 읽은 문자열을 분리합니다.
• s에서 분리한 문자열을 빼고 남은 부분에 대해서 이 과정을 반복합니다. 남은 부분이 없다면 종료합니다.
• 만약 두 횟수가 다른 상태에서 더 이상 읽을 글자가 없다면, 역시 지금까지 읽은 문자열을 분리하고, 종료합니다.

문자열 s가 매개변수로 주어질 때, 위 과정과 같이 문자열들로 분해하고, 분해한 문자열의 개수를 return 하는 함수 solution을 완성하세요.

• 제한사항:

• 1 ≤ s의 길이 ≤ 10,000
• s는 영어 소문자로만 이루어져 있습니다.

  • 입출력 예:

  s	result
  "banana"	3
  "abracadabra"	6
  "aaabbaccccabba"	3

• 입출력 예 설명:

• 입출력 예 #1 s="banana"인 경우 ba - na - na와 같이 분해됩니다.

• 입출력 예 #2 s="abracadabra"인 경우 ab - ra - ca - da - br - a와 같이 분해됩니다.

• 입출력 예 #3 s="aaabbaccccabba"인 경우 aaabbacc - ccab - ba와 같이 분해됩니다.

• 작성 답안:

solution.js

function solution(s) {
    let result = [];
    let compare = { "x": 0, "y": 0 };

    let letters = s.split("");
    let start;
    for (i=0; i < letters.length; i++){
        if (compare.x === 0) start = letters[i];

        if (letters[i] === start) compare.x += 1;
        else compare.y += 1;

        result.push(letters[i]);

        if (compare.x === compare.y) {
            result.push(".");
            compare.x = 0;
            compare.y = 0;
        }
    }

    result = result.join("").split(".").filter((x) => x);

    return result.length;
}

• 다른 답안:

solution.js

{}

시간이 얼마 걸리지 않았고, 비교적 적은 조건문을 사용한 것 같다. 그리고 무엇보다 테스트 케이스들을 한 번에 통과한게 너무 상쾌하다! 기존에 제공되는 테스트 케이스들은 통과하지만, 매번 제출 후 테스트 케이스들에서 막히는 게 너무 스트레스였는데 이번엔 무사 통과해서 다행이다 :)

다른 답안들을 확인해봤지만 시간 복잡도나 코드 양이 비슷했다. 나름 괜찮게 코드를 짰다는 반증이 아닐까?!

: Level.1

• 정답률

: 55%

• 문제:

: 카드 뭉치

• 설명:

: 코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다.

원하는 카드 뭉치에서 카드를 순서대로 한 장씩 사용합니다. 한 번 사용한 카드는 다시 사용할 수 없습니다. 카드를 사용하지 않고 다음 카드로 넘어갈 수 없습니다. 기존에 주어진 카드 뭉치의 단어 순서는 바꿀 수 없습니다. 예를 들어 첫 번째 카드 뭉치에 순서대로 ["i", "drink", "water"], 두 번째 카드 뭉치에 순서대로 ["want", "to"]가 적혀있을 때 ["i", "want", "to", "drink", "water"] 순서의 단어 배열을 만들려고 한다면 첫 번째 카드 뭉치에서 "i"를 사용한 후 두 번째 카드 뭉치에서 "want"와 "to"를 사용하고 첫 번째 카드뭉치에 "drink"와 "water"를 차례대로 사용하면 원하는 순서의 단어 배열을 만들 수 있습니다.

문자열로 이루어진 배열 cards1, cards2와 원하는 단어 배열 goal이 매개변수로 주어질 때, cards1과 cards2에 적힌 단어들로 goal를 만들 있다면 "Yes"를, 만들 수 없다면 "No"를 return하는 solution 함수를 완성해주세요.

• 제한사항:

• 1 ≤ cards1의 길이, cards2의 길이 ≤ 10
  • 1 ≤ cards1[i]의 길이, cards2[i]의 길이 ≤ 10
  • cards1과 cards2에는 서로 다른 단어만 존재합니다.
• 2 ≤ goal의 길이 ≤ cards1의 길이 + cards2의 길이
  • 1 ≤ goal[i]의 길이 ≤ 10
  • goal의 원소는 cards1과 cards2의 원소들로만 이루어져 있습니다.
• cards1, cards2, goal의 문자열들은 모두 알파벳 소문자로만 이루어져 있습니다.

  • 입출력 예:

  cards1	cards2	goal	result
  ["i", "drink", "water"]	["want", "to"]	["i", "want", "to", "drink", "water"]	"Yes"
  ["i", "water", "drink"]	["want", "to"]	["i", "want", "to", "drink", "water"]	"No"

• 입출력 예 설명:

• 입출력 예 #1 문제 예시와 같습니다.

• 입출력 예 #2 cards1에서 "i"를 사용하고 cards2에서 "want"와 "to"를 사용하여 "i want to"까지는 만들 수 있지만 "water"가 "drink"보다 먼저 사용되어야 하기 때문에 해당 문장을 완성시킬 수 없습니다. 따라서 "No"를 반환합니다.

• 작성 답안:

solution.js

function solution(cards1, cards2, goal) {
      //배열 arr1 과 배열 arr2 가 동일한지 비교하는 함수를 작성한다.
    const equals = (arr1, arr2) => {
        return arr1.length === arr2.length && arr1.every((v, i) => v === arr2[i]);
    }

    //goal에서 cards1의 원소와 일치하는 원소들을 색출해내고,
    //일치하는 원소들이 cards1의 몇 번째 인덱스에 해당하는지를 담아낸 checkCards1을 만든다.
    let checkCards1 = goal.filter((card) =>
                                  cards1.includes(card)).map((card) => 
                                                             cards1.indexOf(card));
      //cards1의 원소들을 인덱스로 매핑하고,
    //cards1에는 있는 원소가 goal에서는 사용되지 않았을 수 있다.
    //따라서, checkCards1.length <= cards1.length 이므로 checkCards1의 길이만큼 자른다.
    let indexCards1 = cards1.map((card, index) => index).slice(0, checkCards1.length);
    //checkCards1과 indexCards1이 동일한지 판단하는 변수 check1을 선언하고 할당한다.
    let check1 = equals(checkCards1, indexCards1);

      //cards2 역시 cards1과 마찬가지로 정리한다.
    let checkCards2 = goal.filter((card) =>
                                  cards2.includes(card)).map((card) =>
                                                             cards2.indexOf(card));
    let indexCards2 = cards2.map((card, index) => index).slice(0, checkCards2.length);
    let check2 = equals(checkCards2, indexCards2);

      //check1과 check2가 모두 true일 경우 "Yes"를 반환한다.
    if (check1 && check2) return "Yes";

      //이외에는 "No"를 반환한다.
    return "No";
}

• 다른 답안:

solution.js

function solution(cards1, cards2, goal) {

    for(const card of goal) {
        if (cards1[0] === card) cards1.shift();
        else if (cards2[0] === card) cards2.shift();
        else return "No"
    }

    return "Yes";
}

다른 답안을 보고 입이 쩍 벌어졌다 :0 어떻게 이렇게 간단하게 작성할 수 있단말인가... 코드 양도 적고, 테스트 케이스 실행결과 출력 속도도 0.20ms 가량 차이난다.

자기객관화를 조금 해보자면, 배열과 배열을 비교하거나 배열을 탐색함에 있어서 너무 물리적으로 접근하는 것 같다. (하나하나 다 파헤쳐보는 느낌... 그러니 불필요한 시간이 더 걸리는 기분)

모범 답안들을 참고하면서 이런 접근도 가능하다는 것을 계속해서 학습해나가야 할 것 같다.

세상엔 알고리즘 강자가 정말 많구나... 새삼 느낀다.

: Level.1

• 정답률

: 37%

• 문제:

: 개인정보 수집 유효기간 #2023 KAKAO BLIND RECRUITMENT

• 설명:

: 고객의 약관 동의를 얻어서 수집된 1~n번으로 분류되는 개인정보 n개가 있습니다. 약관 종류는 여러 가지 있으며 각 약관마다 개인정보 보관 유효기간이 정해져 있습니다. 당신은 각 개인정보가 어떤 약관으로 수집됐는지 알고 있습니다. 수집된 개인정보는 유효기간 전까지만 보관 가능하며, 유효기간이 지났다면 반드시 파기해야 합니다.

예를 들어, A라는 약관의 유효기간이 12 달이고, 2021년 1월 5일에 수집된 개인정보가 A약관으로 수집되었다면 해당 개인정보는 2022년 1월 4일까지 보관 가능하며 2022년 1월 5일부터 파기해야 할 개인정보입니다. 당신은 오늘 날짜로 파기해야 할 개인정보 번호들을 구하려 합니다.

모든 달은 28일까지 있다고 가정합니다.

다음은 오늘 날짜가 2022.05.19일 때의 예시입니다.

• 첫 번째 개인정보는 A약관에 의해 2021년 11월 1일까지 보관 가능하며, 유효기간이 지났으므로 파기해야 할 개인정보입니다.
• 두 번째 개인정보는 B약관에 의해 2022년 6월 28일까지 보관 가능하며, 유효기간이 지나지 않았으므로 아직 보관 가능합니다.
• 세 번째 개인정보는 C약관에 의해 2022년 5월 18일까지 보관 가능하며, 유효기간이 지났으므로 파기해야 할 개인정보입니다.
• 네 번째 개인정보는 C약관에 의해 2022년 5월 19일까지 보관 가능하며, 유효기간이 지나지 않았으므로 아직 보관 가능합니다.

따라서 파기해야 할 개인정보 번호는 [1, 3]입니다.

오늘 날짜를 의미하는 문자열 today, 약관의 유효기간을 담은 1차원 문자열 배열 terms와 수집된 개인정보의 정보를 담은 1차원 문자열 배열 privacies가 매개변수로 주어집니다. 이때 파기해야 할 개인정보의 번호를 오름차순으로 1차원 정수 배열에 담아 return 하도록 solution 함수를 완성해 주세요.

• 제한사항:

• today는 "YYYY.MM.DD" 형태로 오늘 날짜를 나타냅니다.
• 1 ≤ terms의 길이 ≤ 20
  • terms의 원소는 "약관 종류 유효기간" 형태의 약관 종류와 유효기간을 공백 하나로 구분한 문자열입니다.
  • 약관 종류는 A~Z중 알파벳 대문자 하나이며, terms 배열에서 약관 종류는 중복되지 않습니다.
  • 유효기간은 개인정보를 보관할 수 있는 달 수를 나타내는 정수이며, 1 이상 100 이하입니다.
• 1 ≤ privacies의 길이 ≤ 100
  • privacies[i]는 i+1번 개인정보의 수집 일자와 약관 종류를 나타냅니다.
  • privacies의 원소는 "날짜 약관 종류" 형태의 날짜와 약관 종류를 공백 하나로 구분한 문자열입니다.
  • 날짜는 "YYYY.MM.DD" 형태의 개인정보가 수집된 날짜를 나타내며, today 이전의 날짜만 주어집니다.
  • privacies의 약관 종류는 항상 terms에 나타난 약관 종류만 주어집니다.
• today와 privacies에 등장하는 날짜의 YYYY는 연도, MM은 월, DD는 일을 나타내며 점(.) 하나로 구분되어 있습니다.
  • 2000 ≤ YYYY ≤ 2022
  • 1 ≤ MM ≤ 12
  • MM이 한 자릿수인 경우 앞에 0이 붙습니다.
  • 1 ≤ DD ≤ 28
  • DD가 한 자릿수인 경우 앞에 0이 붙습니다.
• 파기해야 할 개인정보가 하나 이상 존재하는 입력만 주어집니다.

  • 입출력 예:

  today	terms	privacies	result
  "2022.05.19"	["A 6", "B 12", "C 3"]	["2021.05.02 A", "2021.07.01 B", "2022.02.19 C", "2022.02.20 C"]	[1, 3]
  "2020.01.01"	["Z 3", "D 5"]	["2019.01.01 D", "2019.11.15 Z", "2019.08.02 D", "2019.07.01 D", "2018.12.28 Z"]	[1, 4, 5]

• 입출력 예 설명:

• 입출력 예 #1 문제 예시와 같습니다.

• 입출력 예 #2

• 오늘 날짜는 2020년 1월 1일입니다.

  • 첫 번째 개인정보는 D약관에 의해 2019년 5월 28일까지 보관 가능하며, 유효기간이 지났으므로 파기해야 할 개인정보입니다.
  • 두 번째 개인정보는 Z약관에 의해 2020년 2월 14일까지 보관 가능하며, 유효기간이 지나지 않았으므로 아직 보관 가능합니다.
  • 세 번째 개인정보는 D약관에 의해 2020년 1월 1일까지 보관 가능하며, 유효기간이 지나지 않았으므로 아직 보관 가능합니다.
  • 네 번째 개인정보는 D약관에 의해 2019년 11월 28일까지 보관 가능하며, 유효기간이 지났으므로 파기해야 할 개인정보입니다.
  • 다섯 번째 개인정보는 Z약관에 의해 2019년 3월 27일까지 보관 가능하며, 유효기간이 지났으므로 파기해야 할 개인정보입니다.

• 작성 답안:

solution.js

function solution(today, terms, privacies) {
    let result = [];

    let rules = {}; //{ "A": 6, "B": 12, "C": 3 }
    terms.map((term) => rules[term.split(" ")[0]] = Number(term.split(" ")[1]));

    let list = []; //[ ["2021.05.02","A"],["2021.07.01","B"],["2022.02.19","C"],["2022.02.20","C"] ]
    privacies.map((privacy) => list.push(privacy.split(" ")));

    result = list.map((item, index) => {
             //["2021.05.02","A"] => [ ["2021", "05", "02"], "A" ]
                let splitDate = item[0].split("."); //["2022", "03", "01"]

                splitDate[2] = String(Number(splitDate[2]) - 1); //["2022", "03", "0"]
                if(Number(splitDate[2]) < 1) {
                    splitDate[1] = String(Number(splitDate[1]) - 1); //["2022", "02", "0"]
                    splitDate[2] = "28";                             //["2022", "02", "28"]
                }

                splitDate[1] = String(Number(splitDate[1]) + rules[item[1]]); //["2022", "24", "28"]
                if(Number(splitDate[1] > 12)) {
                    splitDate[0] = String(Number(splitDate[0]) + Math.trunc(splitDate[1] / 12)); //["2024", "24", "28"]
                    splitDate[1] = String(Number(splitDate[1]) - Math.trunc(splitDate[1] / 12) * 12); //["2024", "00", "28"]
                }
                if(Number(splitDate[1]) === 0) {
                    splitDate[0] = String(Number(splitDate[0]) - 1);
                    splitDate[1] = "12";
                }

                splitDate = splitDate.map((each) => {
                    if(each.length < 2) each = "0" + each;
                    return each;
                })

                let joinDate = splitDate.join("."); //"2021.11.01"
                // return joinDate;

                if(new Date(joinDate) < new Date(today)) return index + 1;
            })

    result = result.filter((el) => el);

    return result;
}

• 새로 작성한 답안:

solution.js

{}

다소 물리적으로 접근한 느낌이 없지 않아 있지만, 그래도 일단은 풀었다는 데에 의의를 두려고 한다!

다른 답안을 참고하는 것도 학습에 도움이 될 수 있지만 어제처럼 스스로 최적화하고 시간을 줄이는 것이 몸에 더 와닿는 느낌이다.

이 코드도 굉장히... 굉장히 길고 복잡하지만 조금 더 간단하게 만들고 불필요한 조건문들을 간결화하면서 코드를 정리해봐야겠다.

기본으로 제공되는 테스트들은 모두 쉽게 통과했지만, 개인정보 수집 월 + 유효기간이 12의 배수일 때 계산 이후의 월이 0이 되면서 테스트 케이스에서 많이 막혔다.

경우의 수에 대한 시야를 조금 더 늘릴 필요가 있을 것 같다 :0