Dico\'s_footPrint.log

[SEO] 삭제된 페이지 구글 검색에서 완전히 제거하기 (인덱싱 삭제)

Tue, 01 Jul 2025 15:02:19 GMT

배경

준비중인 상태를 알려주던 /coming_soon 이라는 페이지가 더 이상 사용되지 않게 되어 페이지를 내린상태였다. 정확히는 추후 재사용을 염두에 두고 라우팅은 보존한 채, 다음 조치들을 취해놓은 상태였다:

robots.txt에서 크롤링 차단 (Disallow: /coming_soon 명시)
페이지에 직접 접근 시 middleware를 사용해 404로 리다이렉트
태그 적용

3중 차단을 해두었으니 철저히 진입을 막고 있을거란 믿음이 있었지만... 그럼에도 불구하고 페이지는 구글에서 여전히 인덱싱 되고 있다는 리포트를 받았다 🫠

원인

알고 보니 오히려 robots.txt에서 해당 페이지를 Disallow 처리하면 Googlebot이 페이지 자체에 접근할 수 없기 때문에 설정해둔 noindex, nofollow 태그를 읽지 못한다고 한다. 결국 중복 차단으로 인해 기존에 인덱싱된 페이지가 계속 남아 있게 되는 문제가 발생할 수 있는 것이다!

즉, *noindex를 제대로 적용하려면 robots.txt에서 Disallow를 제거하고, 일시적으로 페이지 접근을 허용한 뒤 다시 삭제요청을 해야한다. *

해결방법

1. robots.txt에서 해당 페이지의 Disallow 제거

# 삭제
# Disallow: /coming_soon

2. 페이지에 noindex, nofollow 유지

3. middleware로 페이지 직접 접근 시 404 반환 유지

export function middleware(request: NextRequest) {
  // ...생략
  if (request.nextUrl.pathname === '/coming_soon') {
    return Response.redirect(new URL(`/${locale}/404`, request.nextUrl.href));
  }
  return NextResponse.rewrite(request.nextUrl);
}

4. Google Search Console에서 URL 삭제 요청

1) Google Search Console 접속 > 삭제 메뉴 진입 > 임시 삭제 항목 탭 > 새 요청 버튼 클릭 > 일시적으로 URL 삭제 탭 > URL 입력 > 이 URL만 삭제 혹은 이 접두어가 포함된 모든 URL 삭제 선택 > 다음 클릭

2) URL 확인 후 요청 제출 클릭

💡fyi. 삭제 제출 시 임시로 6개월간 삭제되며, 이후 Googlebot이 페이지를 다시 크롤링했을 때 noindex 처리된 페이지로 인식되면 완전 삭제됨.

Reference

Search Console 도움말 > URL 완전히 삭제하기 Google 검색 센터 > Google에 URL 재크롤링 요청하기

[SEO] Google Search Console 활용하기 (a.k.a GSC와 함께한 삽질기록)

Thu, 15 May 2025 06:25:18 GMT

배너 이미지 출처: https://www.trailblaze.marketing/blog/google-search-console

구글 서치 콘솔에서는 도메인을 등록하면 문제가 생길때마다 관련 이슈를 메일로 보내주는데, 경험했던 구글 서치 콘솔 에러들을 유형별로 정리 해보았다:

적절한 표준 태그가 포함된 대체 페이지

여기서 "적절한 표준 태그가 포함된 대체 페이지"란 canonical tag를 말한다.

*Canonical Tag: *

웹사이트에서 형식으로 사용되는 HTML 태그로, 유사하거나 중복된 콘텐츠를 가진 여러 URL이 있을 때, 구글에게 "이 URL이 원본(또는 선호되는) 버전이다"라고 알려주는 페이지다.

예를 들어,

다국어를 지원하지만 모든 페이지가 완벽히 번역되지 않아 여러 페이지가 동일한 컨텐츠를 보여주고 있을 때
동일한 제품이 여러 카테고리에 있어 다른 URL로 접근 가능할 때
모바일과 데스크톱 버전의 페이지가 별도로 있을 때
매개변수가 다른 URL들이 동일한 콘텐츠를 제공할 때 (예: ?color=red, ?size=large 등)

이런 경우 정규화 태그를 사용하여 구글에게 "이 여러 URL 중에서 이 URL이 대표 URL이다"라고 알려주는 목적으로 사용된다.

🤔 그래서... canonical tag가 뭘 어쨌다는 거죠??

부연 설명을 하자면, 위 서비스의 경우 10여개의 언어를 지원하는 '다국어'서비스이다. 따라서 언어별로 URL이 각각 생겨나게 되는데, URL이 다르면 구글에서는 모두 다른 페이지로 인식을 한다. (ex. www.abc.com/en-US/promotion -> 영어 페이지, www.abc.com/ko-KR/promotion -> 한국어 페이지) 그런데 완벽하게 번역이 적용된 페이지도 있고, 현재 번역작업이 진행중이라 백업 언어인 영어로 표기되는 페이지들도 다수 있었던 것! 구글의 봇의 입장에서는 URL만 다를뿐, 영어로 된 내용이 같으니 중복페이지로 인식을 했던 것이다!💡 그래서 이렇게 피치못하게 URL이 다른 중복이나 유사 페이지가 생기는 경우에는 구글에게 선호되는 버전을 canonical 태그로 알려주는 것이 중요하다.⭐️⭐️⭐️

다시 돌아와서, 구글 서치콘솔에서 "적절한 표준 태그가 포함된 대체 페이지"라는 메일이 올때는 다음 중 하나일 가능성이 높다:

구글이 canonical 태그를 인식하고 있다는 의미 이미 canonical tag를 올바르게 설정해 놓았고, 구글은 이것을 인식해서 지정한 대로 원본 URL을 보고 있다는 의미로, _긍정적인 신호_이다.
구글이 자체적으로 canonical을 결정했다는 의미 canonical tag를 설정하지 않았거나, 설정을 했더라도 구글이 다른 페이지를 더 적절한 원본이라 판단해 자체적으로 canonical을 결정했다는 의미이다. _만약 설정한 caconical tag를 완전히 무시하고 다른 페이지를 선택했다면 웹사이트의 구조나 canonical tag 설정부분을 재검토해볼 필요가 있다. _

(이 부분부터 보여지는 재검사 프로세스는 모든 이슈 공통) 수정 작업이 완료되었다면 수정 결과 확인 버튼으로 재검사 요청을 할 수 있다. 재검사가 시작되면 유효성 검사 상태:시작됨 이 보여진다.

검사가 시작되면 아래 메일을 보내주고,

그리고 정상적으로 반영이 되었다면 반영결과를 알려주는 메일을 구글 서치 콘솔에서 보내준다.

{도메인}에서 리뷰 스니펫 구조화된 데이터 문제가 감지됨

위 이슈는 헤더에 스키마로 넣었던 review rating 정보가 구글이 지정한 rating 범위를 벗어났을 때 나타났다.

지정했던 평점: 10점 만점
구글 평점: 5점 만점

// LD+JSON (schema) 중 해당부분 추출
 {
      '@context': 'https://schema.org',
      '@type': 'Product',
      name: `${partnerName}`,
      aggregateRating: {
        '@type': 'AggregateRating',
        ratingValue: `${
          !reviewData?.ratings.overall || reviewData?.ratings.overall === 0
            ? 1
            : reviewData?.ratings.overall / 2
        }`, // 구글이 인정하는 평점은 5.0 만점이므로 2로 나누어 준다. 값이 없거나 0인 경우 1로 처리 (default: 10점 만점)
        reviewCount: `${
          Number(reviewData?.serviceDetails.reviewCount || 0) === 0
            ? 1
            : Number(reviewData?.serviceDetails.reviewCount || 1)
        }`, // 리뷰 수가 0인 경우 1로 처리
      },
    },

💡 ratingValue와 reviewCount 등록 조건:

ratingValue: 최대 5이하의 점수 reviewCount: 최소 1개 이상

그래서 1/2값으로 변환된 평점으로 수정해서 다시 검사를 실행한 결과, 정상적으로 반영이 되었다!

제품 스니펫 (Product Rich Snippet)

정식 명칭은 "Product Rich Snippet". 흔히 알고 있는 스키마 마크업과도 일맥상통한다. 스키마 마크업이 Google에 의해 인식되면 제품 스니펫(가격·재고 등)이 검색 결과에 노출되는 것! 즉, 스키마는 마크업, 스니펫은 결과물!

🤔 근데...제품 스니펫을 꼭 넣어야 하나요?

결론부터 말하자면, "아니요, '꼭' 넣을 필요는 없습니다." 하지만 클릭전환율을 하나라도 올리고 싶다면, "네, 넣으세요."

제품 스니펫을 넣어야겠다는 생각이 닿은 데에는 이런 플로우가 있었다: ➡️ 검색결과에서 클릭하고 싶은 페이지란 어떤 페이지일까? ➡️ 정보를 얻기 위한 검색이라면, 신뢰도가 높고 사용자가 많은 페이지를 클릭 하지 않을까? ➡️ 그럼 어떤 검색결과가 신뢰도가 높아보이고, 사용자가 많아 보일까? ➡️ 검색결과에 정보가 더 많이 보여지게 해야겠다!

이런 이유로 타사이트의 리뷰와 평점을 남기는 커뮤니티 서비스의 성격상, 별점과 리뷰수를 검색결과에 보여줄 수 있을 것이란 결론이 났던 것이다.

스니펫으로 또 뭘 보여줄 수 있죠? - 구글 공식 가이드라인

리뷰 수 & 평점 제품 스니펫이 적용된 검색결과 예시(*아래 사진은 본문의 서비스와 무관 합니다) 🔽:

스니펫을 설정해서 배포하더라도 실제 검색결과에 노출이 되기 까지는 시간이 N주 ~ 1달가량 소요되는데, 잘 적용이 되고나면 Google Search Console의 사이드바에도 해당 메뉴가 생겨난다. 아래와 같이 사이드바에 못보던 메뉴가 생겼다면, 적어도 구글이 인지를 했다는 것!

페이지 색인이 생성되지 않는 새로운 이유

페이지가 색인(a.k.a 인덱싱)되지 않는 이유는 다양하다. Google Search Console의 색인 생성 보고서에서는 어떤 이유로 페이지가 색인이 되지 않는 지를 보여준다.

보안상의 이유(ex. 로그인이 되어야 볼 수 있는 페이지)나 모종의 이유로 임시로 사용자 유입을 막아야 한다면 여러가지 방법으로 페이지 색인을 막을 수 있다.

의도와는 상관없이 Google Search Console에서는 (어떠한 기준이나 주기로 이메일을 보내주는 지 정확히 알 수는 없지만) 페이지 미노출이 의도된 액션이 아닐 걸 우려해서 주기적으로 이메일로 노티를 준다. 이번에도 색인이 생성되지 않았다며 이메일을 받았고, 위 경우는 의도된 색인방지 조치가 있었기 때문이었다:

미노출 페이지 색인 방지하기

Sitemap에서 페이지 제거
robots.txt에 Disallow: {경로} 표기
URL로 직접 접근 시 404 페이지 혹은 메인 페이지로 리라우팅 될 수 있게 미들웨어 설정 (선택)
페이지태그 내부에 메타태그 넣어주기

이 중에서도 2번 혹은 4번 때문에 받은 이슈 메일으로 보여졌는데 심각하지 않은 문제라고 한다. (정말 영향을 크게 미치는 심각한 문제는 "심각"이라는 표현이 그대로 사용된다😅)

자세한 내용을 보니 해당 페이지는 위의 페이지 색인 방지하기 4가지 방법이 모두 적용된 페이지였는데, 추후 재사용 될 경우를 위해서 페이지 자체는 삭제하지 않았다보니, URL이 살아있는 걸로 판단해 위와 같은 경고를 보낸 것으로 보여진다.

그래서 무시하고 넘어갈 수도 있었겠지만, 가능한 추가조치를 모색하다가 이미 색인된 내역 안에서 삭제를 요청하는 삭제 기능을 사용해보았다:

적용 결과는 TBC...

참고: Google 검색 센터 - 구조화된 리뷰 스니펫 데이터 가이드

[SEO] 이걸로 AI한테 우리 서비스를 학습시킬 수 있다구요?: llms.txt 적용기

Tue, 13 May 2025 15:13:23 GMT

배너 이미지 출처: https://derivatex.agency/seo/llms-txt-seo-ai-search

요즘 AI 크롤러를 제어할 수 있다고 하는 llms.txt 가 화제가 되면서, "우리 콘텐츠도 AI 학습에 쓰이고 있을까?" 라는 고민을 해보았다. 정말로 llms.txt가 도움이 될까? 궁금증을 갖고 직접 도입하며 실험해보았다 💡

그 전에, 나처럼 백지상태였던 개발자들을 위해 아주 아주 간단히 llms.txt에 대한 간략한 정보를 짚고 넘어가려고 한다:

📌 llms.txt란?

llms.txt는 웹사이트 루트 디렉토리에 두는 Markdown 형식의 파일
GPT, Claude, Gemini 같은 LLM(혹은 Large Language Model, AI)이 사이트의 구조나 핵심 콘텐츠를 더 잘 이해하도록 돕는 목적
robots.txt가 검색 엔진(SEO)용이라면, llms.txt는 AI 모델용

🔧 llms.txt 샘플

# 프로젝트 또는 사이트 이름

> 이 사이트에 대한 간단한 요약 설명입니다.

## 문서

- [사용자 가이드](https://example.com/guide.md): 사이트 사용 방법에 대한 자세한 설명
- [API 문서](https://example.com/api.md): API 엔드포인트 및 사용법

## 예제

- [샘플 코드](https://example.com/sample-code.md): 주요 기능을 보여주는 코드 예제

## 선택 사항

- [추가 자료](https://example.com/additional.md): 참고할 수 있는 추가적인 자료

요약 + 핵심 문서 링크만 제공해도 충분, 전체 sitemap을 다 넣을 필요는 없음
핵심은 LLM이 따라가기 쉬운 구조를 만들고 주요 진입점만 안내해주는 것
더 알아보고 싶다면? llms.txt에 관한 표준을 제안하는 문서 참고

🤔 공식 표준인가요?

❌ 도입을 독려하는 중이지만 아직 표준은 아니다.
✅ 그러나 점차 도입되는 중

🏢 그럼 llms.txt는 누가 참고하나요?

Anthropic (Claude), Stripe, Mintlify, Cursor 등의 기술 기업들이 사용중
- Anthropic의 llms.txt 파일 보기
llms.txt 사용 사이트 목록: directory.llmstxt.cloud

🤖 GPT도 llms.txt를 참고하나요?

❌ 직접적으로는 참고하지 않음. 2023년까지의 공개된 웹/문서 기반 학습하는 중
✅ 실시간 크롤링이나 자동 분석은 하지 않지만, 사용자가 llms.txt 내용이나 llms.txt의 URL을 붙여주면 문맥 이해에는 활용 가능.

🧩 활용 시나리오 / 해볼 수 있는 일?

우리 서비스나 제품 문서를 LLM 친화적으로 만들고 싶을 때
개발자 문서, API 문서, 가이드 페이지 등이 대상
특히 AI 기반 검색, 챗봇, RAG 구조에 사용하는 서비스라면 적극 고려해볼 만함
AI가 우리 콘텐츠를 더 잘 이해하도록 도와줄 수 있는 간단하고 실용적인 방법
프론트와 백 모두 아래 관점에서 llms.txt를 지원하는 게 좋다:
- 프론트는 문서 구조와 UX 관점
- 백엔드는 자동화와 배포 관점

🧑‍💻 프론트엔드

어떤 문서를 LLM에 노출할지 결정하거나 문서 링크 구조를 설계하는 데 관여
주요 문서 경로 선정 (/blog, /partners, etc.)
링크 구조와 문서 포맷 구성
Next.js는 루트가 아닌 public 폴더 하위에 llms.txt 파일 추가하기

robots.txt 파일에 llms.txt 의 위치를 명시하는 것도 좋은 방법!

robots.txt는 이렇게:

User-agent: *
Disallow: /private/

# LLMs 규칙은 아래 참고
Sitemap: https://yourdomain.com/llms.txt

🧑‍💻 백엔드

llms.txt를 빌드 시 자동 생성하거나 배포 경로에 포함하는 로직 구현 가능
RAG, AI 문서 검색 API를 도입하는 경우 백엔드에서 문서 소스와 연동하는 역할 필요 (AI가 버전별 정보를 학습하는 데에 도움이 됨)
llms.txt 자동 생성/업데이트 스크립트 작성 추천
정적 파일 서버에 /llms.txt 노출
AI 인덱싱용 API 구축 시 연결

👀 llms.txt 는 어떻게 보나요?

올바른 위치에 설정이 되었다면 {도메인}/llms.txt에 접근이 되는 지 브라우저에서 확인!

⛑️ llms.txt를 적용했다면? What’s next?

AI에게 학습할 수 있도록 주소 알려주기! (현재는 AI에게 직접 제출할 수 있는 포멧이 없음)

*예시 - ChatGPT * 2. 이걸 기억해줘 라고 요청하기!

하지만....😓

현재(2025년 5월 기준)로서는 Claude 조차도 영구적으로 학습을 하거나 자동으로 학습하지는 않는 것으로 보여짐.
AI들이 공통적으로 주장하는 바는 llms.txt 파일의 URL을 직접 제공하면 읽어와서 안내하는 것 정도는 가능.
웹사이트에 대해 물어보면 대부분 검색된 결과를 기반으로 안내를 해주기 때문에 llms.txt 상의 내용이 우선순위로 보여지지는 않음.
실제로 {도메인명}/llms.txt 경로로 Production에 파일을 추가해서 배포한 다음, AI를 학습시켰지만, 새로운 대화를 요청해 해당 서비스에 대해 물었을 때는 검색된 결과에 더 유사한 내용을 안내해주었다.

✅ 결론

_(아직까지는) 결국 사이트의 SEO나 블로그 등을 개선해서 검색 엔진에 잘 노출되게 하는 것이 가장 좋은 방법! _

Reference

[SEO] 수치화할 수 있는 개발자가 되자: 프론트엔드를 위한 GA4 / GTM 왕초보 가이드라인

Tue, 29 Apr 2025 13:54:48 GMT

배너 이미지 출처: https://www.gunotes.com/ga4-gtm

프론트엔드 개발자라면 어렵지 않게 마케팅측에서 GTM이나 GA 세팅 요청을 받게 된다. 셋업에서 더 나아가 GA에서 수집된 데이터를 활용, 분석할 줄 아는 프론트엔드 개발자가 되어보고자, 개발자를 위한 GA4/GTM 사용 가이드를 작성해보았다 :)

GA4 이벤트 종류

GA4의 이벤트는 크게 4종류로 나눌 수 있는데, 개별 프로젝트의 성격에 따라 필요한 이벤트를 취사선택 할 것!

자동 수집 이벤트 (Automatically collected events)

앱/웹에는 각각 GA4 연동 시 자동으로 수집되는 이벤트들이 있다. 애널리틱스 자동 수집 이벤트 공식문서를 참고하면 각 이벤트가 트리거 되는 시점과 매개변수를 확인할 수 있다.

향상된 이벤트 (Enhanced events)

코드 변경 없이 웹 데이터 스트림 옵션 설정만으로 내 컨텐츠와 유저와의 상호작용을 측정할 수 있다. 향상된 측정 이벤트 공식문서에서 데이터 스트림 설정 방법을 확인할 수 있다.

커스텀 이벤트 (Custom events)

미리 정의된 이벤트들 중에 어디에도 속하지 않는 액션을 분석하고 싶다면, 커스텀 이벤트를 생성해 수집할 수 있다. 상세한 내용은 커스텀 이벤트 공식문서참고.

Dimensions & Metrics

GA4에서 수집된 이벤트, 매개변수, 사용자 속성 등 모든 데이터는 Dimensions 와 Metrics라는 항목으로 보고서를 생성하는 데에 사용할 수 있다.

❓그렇다면 Dimensions는 뭐고, Metrics는 또 뭘까?

Dimensions:

*"누가(who)", "무엇을(what)", "어디에서(where)"**에 해당하는 데이터 측정기준

Metrics:

*"얼마나(how many)"**에 해당하는 데이터 측정항목

좀 더 개발자스럽게 재표현해보자면, Metrics는 number 타입 데이터이고, Dimensions는 number 타입을 제외한 그 외 모든 타입의 데이터가 된다. 실제로 Metrics는 숫자형 데이터'만' 받을 수 있다. 숫자가 아닌 데이터를 Metrics로 등록하면 가차없이 '0'이 나온다.

Ex. 결제 금액은 Metric, 결제된 상품은 Dimension

자동 수집 이벤트로 수집되는 이벤트와 매개변수는 보고서에서 기본적으로 dimensions와 metrics로 사용할 수 있게 추가되어 있다. 하지만 커스텀 이벤트(혹은 커스텀 매개변수도!)의 경우에는 직접 추가를 해줘야한다. 그래야지만 보고서에서 원하는 커스텀 이벤트를 dimensions와 metrics로 사용할 수가 있다.

커스텀 이벤트 직접 Dimensions & Metrics로 등록하기

커스텀 이벤트를 보고서에서 보고 싶다면 Custom Definitions에서 직접 Dimensions와 Metrics로 등록하는 단계를 '반드시' 거쳐야한다. 이걸 모르고 이벤트를 등록해놓고는 GA4에서는 보이지를 않아서 마냥 이벤트가 안쌓여서 그렇겠거니.. 하며 허송세월한 시간이 적지 않다 🫠

Custom Definitions 등록 방법: Admin(좌측 사이드바 하단 톱니바퀴 아이콘 클릭) 페이지 👉 Data Display의 Custom definitions 페이지 👉 Custom metrics 탭(혹은 Custom dimensions)으로 이동 👉 Create custom metric 버튼 클릭

💡REMINDER 만약 스트링 타입의 데이터를 보내고 싶다면, Custom dimensions로 정의해줘야 한다. 나는 실수로 모든 타입을 Custom metrics에 등록하는 바람에 변경이 필요했다ㅠㅠ

그런데 Custom metrics와 Custom dimensions는 한 번 등록하면 삭제하는 기능이 없으므로 하려면 살짝 이름을 바꿔서 수정해두는 꼼수를 쓸 수밖에 없다고 한다. 혹은 우측의 점 세개 모양 아이콘을 눌러 Archive를 하면 다시 새로운 항목으로 등록이 가능하다.

불필요한 데이터 필터링 하기

수집된 데이터에서 내부 트래픽 혹은 개발용 트래픽을 제외하고 싶다면 필터링 메뉴로 필터 조건을 추가하면 된다.

공식영상가이드

개발용 트래픽 제외

Admin 페이지 👉 Data Filters 👉 Create data filter 버튼 클릭 👉 Developer traffic 타입 선택 및 옵션 설정 👉 Create 버튼 클릭

Filter state 종류:

Testing : 데이터는 보고서에 표시되나 "Test data filter name=Developer traffic" 이라는 dimension으로 식별 가능

Active : 완전 필터링 되어 보고서에 표시되지 않음

Inactive : 필터링 기능 비활성화

내부 트래픽 제외

내부 트래픽 제외 옵션을 등록하는 방법은 기본적으로 개발용 트래픽을 등록하는 방법과 동일하다. 다만, IP 주소를 등록해줘야 한다.

내부 IP 등록하는 방법:

Admin 페이지 👉 Data streams 👉 등록된 Stream 선택 👉 Configure tag settings 선택 👉 Show more로 메뉴 더보기 👉 Define internal traffic 선택 👉 Create 버튼 클릭 👉 IP address is in range (CIDR notation) 선택 (IP 복수 등록 옵션)

[SEO] Next.js SEO 최적화 실전 적용기

Tue, 08 Apr 2025 13:57:52 GMT

💡 글을 시작하며

이 글은 Next.js 13 버전 Pages Router기반으로 만든 다국어 웹 서비스에 직접 SEO전략들을 적용해보며 검색 결과 개선과정을 정리한 경험 기록입니다. 다양한 검색 엔진이 있지만, 이 글은 Google검색에 초점이 맞춰져 있습니다.
실제 서비스에서 마주한 문제들을 하나씩 해결해가며 가설 세우고, 적용하고, 데이터로 검증하는 과정을 담았습니다.

저 역시도 아직 가설-검증-실패or성공-또 다른 가설..(반복)의 과정을 반복하며 시행착오를 겪는 중이라 여전히 완벽한 정답이 아닐 수 있으니, 혹시 잘못된 부분이 보이거나 더 좋은 방법이 있다면 댓글로 피드백 주시면 감사하겠습니다 🙇‍♀️

SEO가 낯설거나 실무 적용이 막막한 분들께, 이 글이 조금이나마 도움이 되길 바랍니다!

지난날 시도했던 SEO 최적화 전략들

1. SSR 기반 파트너 상세 페이지 컨텐츠 확장

📌 필요한 정보, 충분히 보여주고 있을까?

우리 서비스는 여러 사이트(이하 머천트)를 소개하는 중개형 플랫폼이에요. 각 머천트마다 고유한 상세 페이지가 있었지만, 처음엔 콘텐츠가 너무 빈약하다고 느꼈어요. 단순히 이름, 로고, 링크 몇 개만으로는 유입도 어렵고, 들어온 유저도 금방 나가버릴 것 같았거든요.

마침 마케팅 팀에서 머천트별로 정보를 잘 정리한 Word 파일 자료를 갖고 있었고, “이걸 그냥 상세 페이지에 넣어보자!”는 게 저희의 출발점이었어요. 한 줄이라도 더 보여주면 검색에도 걸릴 확률이 높아지고, 정보성 페이지로서의 신뢰도도 올라갈 테니까요.

그런데 문제는 양이 너무 많다는 거였죠. '스크롤이 너무 길어져도 괜찮을까?' 라는 고민도 잠깐 있었지만, 정보 제공이 핵심인 페이지라면, 오히려 길어지는 게 장점이 될 수도 있겠다고 판단했어요.

그래서 선택한 방식은:

Word(.docx) 파일을 .mdx 포맷으로 변환할 수 있는 스크립트를 작성하고,
변환된 .mdx 파일을 next-mdx-remote를 사용해 SSR 기반 Component로 렌더링,
그 결과물을 상세 페이지에 그대로 노출시키는 구조로 구성했어요.

덕분에 각 머천트 페이지에는 실제로 유의미한 검색 텍스트들이 다수 포함되게 되었고, 페이지 자체도 "정보가 많은 곳"으로서 역할을 하게 되었습니다!

🎯 검색에서 잘 걸리는 키워드 전략적으로 넣기!

SEO 콘텐츠를 작성할 때 가장 먼저 고민해야 하는 건 사용자가 실제로 어떤 키워드로 검색해서 들어 오는지일텐데요, 저희는 이걸 파악하기 위해 'Ahrefs'라는 SEO 분석 툴을 사용하고 있어요. 유입된 Organic Keyword(자연 검색 키워드) 데이터를 확인할 수 있어서, 해당 키워드를 기반으로 콘텐츠를 조금씩 조금씩 보완해왔어요.

예를 들어, 특정 머천트 페이지에 "서비스명 + 위치", "서비스명 후기" 같은 키워드로 유입이 발생하고 있었다면, 해당 키워드를 페이지 내에 자연스럽게 포함시키는 식이었어요.

그렇지만 꼭 생각한 키워드로만 유입되는 건 아니었어요. 예상하지 못했던 키워드로도 유입이 발생하는 경우가 있었고, 그럴 땐 ‘검색 수요가 있다는 거니까 내용을 더 보완해보자’는 식으로 접근했어요.

무엇보다 중요한 점은, 단순히 키워드를 채워 넣기 보다는 검색 의도에 맞는 정보를 맥락에 맞게 자연스럽게 녹여내는 것이 가장 중요하다는 생각이 듭니다!⭐️ 그래야 의미 있는 사용자가 페이지에 머무는 시간(Dwell Time)이 길어지고, 이 역시 컨텐츠의 품질 지표로 작용해 SEO에도 좋은 영향을 주기 때문이에요.

2. JSON-LD 기반 구조화 데이터 적용 (Rich Snippets 노출 목표)

📦 스키마도 종류가 많던데, 뭘 써야 하지?

스키마 적용은 검색 결과를 좀 더 풍부하게 보여주는 것을 목표로 하고 있어요. 구글에서는 스키마를 어떻게 작성해야 하는 지에 대해 공식 가이드라인도 제공하고 있답니다: 👉 Google 검색에서 지원하는 구조화된 데이터 마크업

적용하는 스키마의 type에 따라 검색 결과에서 미리보기 형태로 노출되는 요소들이 달라지기 때문에, 서비스의 성격에 따라 스키마를 선별해서 적용하는 것이 중요하다는 생각이 듭니다.

저희 서비스에서는 아래의 스키마 타입들을 적용했어요:

Organization / WebSite: 브랜드나 사이트 자체에 대한 정보를 검색엔진에 명확히 전달하기 위해
BreadcrumbList: 블로그 콘텐츠나 카테고리 구조가 있는 페이지에 적용해서, 자연스럽게 사이트 회유(다른 페이지 탐색) 가능성을 높이고, 시각적으로 검색 결과를 더 풍성하고 신뢰감 있어 보이게 하기 위해
FAQPage: 자주 묻는 질문을 FAQ 형태로 스키마에 포함시켜, 검색 결과에서 사용자의 궁금증을 미리 풀어주기 위해

🚨 짚고갈 점! 구조화 데이터를 적용했다고 해서, "반드시" 검색 결과에 리치 스니펫이 노출되는 것은 아닙니다. 구글은 구조화 데이터를 단순히 "참고용"으로 활용할 뿐, 실제로 노출할지 여부는 자체 알고리즘의 판단에 따라 결정한다고 해요.

예를 들어 FAQPage 스키마를 넣었더라도, 페이지 콘텐츠의 품질이나 주제의 적절성, 사용자 만족도 등 여러 기준을 종합적으로 고려해 구글이 판단하기에 "리치 스니펫으로 노출할 가치가 있다"고 생각해야지만 실제 검색 결과에 반영됩니다.

그래서 스키마를 넣는 것만으로 끝이 아니라, 페이지 자체의 콘텐츠 품질, 메타 정보, 유저 행동 데이터 등과 함께 총체적으로 관리하는 게 중요합니다💡

🔧 직접 짤까, 라이브러리를 쓸까?

SEO를 개선하면서 Next.js 프로젝트에서 정말 효자같은 라이브러리가 하나 있었는데요, 바로 next-seo입니다. (이후 내용에서도 종종 등장할 예정이라, 여기서는 간단히만 언급하고 넘어갈게요 👀)

next-seo에서도 JSON-LD 스키마를 위한 컴포넌트를 제공하기 때문에 next-seo를 통해 주입할 지, 아니면 직접 작성을 할 지도 고민이 되었어요.

< next-seo로 삽입하기 >

import { FAQPageJsonLd } from 'next-seo'

< 직접 삽입하기 >

※ 구조화 데이터는

디렉토리 구조: public

public에는 무엇을 넣어야 하는 걸까? 그럼 src에는?
도통 기준이 확실하게 잡히지를 않아서 나름의 기준을 세워보았다.

public 폴더의 역할은 static한 파일들을 모으는 곳. static하다는 의미는 단순히 '정적'이라는 뜻만 있는 것이 아니라 entry point로써의 역할을 수행하는 것들을 의미함.

이미지나 로 지정된 index.js는 public 디렉토리 하위에 있지만, index.js를 통해 import 되는 App.js 파일은 src디렉토리 하위에 있는 것을 알 수 있다.

Class의 멤버변수

아래와 같이 constructor() 함수 내부에 멤버 변수(ex.this.$target)를 선언하면, 해당 클래스로 생성되는 모든 인스턴스가 멤버변수를 사용할 수 있게된다. 상속!

반면, var, let, const로 선언하는 변수는 상속되지 않는다. 로컬로만 사용가능.

class App {
  constructor({ $target }) {
    this.$target = $target; //멤버변수는 Class에서만 쓰인다. 
    this.setState();
  }

  setState(){
    this.render();
  }

  render () {
    //인자를 전달할 때 키값을 고정해서 변수이름을 유지한다.
    new MainPage({ $target: this.$target })
  }
}

render() 함수 내부에서도 멤버변수로 접근해서 key-value로 저장한 객체를 인자로 전달한다. 이때 $target 이라는 key로 전달되는 value는 클래스마다 재할당 해줄 수 있기 때문에 재사용성이 올라간다.

Reference

https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955

[TypeScript] nodemon, ts-node 모듈 설치하기

Wed, 19 May 2021 16:47:54 GMT

*본 포스팅은 React와 TypeScript가 설치되었다는 가정하에 작성되었습니다 :)

+PLUS: CRA로 React와 TypeScript 설치하는 방법

일반적으로 타입스크립트로 코드를 작성할 경우, 실행 시 2-step이 필요하다.

Step 1. TypeScript => JavaScript 컴파일 tsc practice.ts Step 2. 컴파일 된 JavaScript 실행 node practice.js

하지만 Live compile을 세팅하면 매번 컴파일을 해야하는 번거로움을 덜 수 있다. 타입스크립트로 개발 시 Live compile 환경 세팅하는 방법을 알아보자❗️

ts-node 설치하기

CLI에서 입력: npm install ts-node --save-dev

nodemon 설치하기

CLI에서 입력: npm install nodemon --save-dev

package.json 에서 script 추가:
 "scripts": {
    "start": "npm run build:live",
    "build": "tsc -p .",
    "build:live": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts"
  }


  이 때, 경로를 나타내는 `src/**/*.ts`는 node_modules나 package.json이 설치된 위치를 기준으로 기재한다. 
  위 예제는 package.json와 src가 같은 디렉토리 내에 위치하고, src 하위의 모든 ts확장자를 가진 파일을 컴파일할 것을 뜻한다.
  `src/index.ts`는 진입점이 되는 파일을 의미한다.




  정상적으로 설치가 되었다면 package.json은 다음과 같이 보여진다:
  ```js
  {
//생략
    "scripts": {
      "start": "npm run build:live",
      "build": "tsc -p .",
      "build:live": "nodemon --watch '*.ts' --exec 'ts-node' practice.ts",
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
      "nodemon": "^2.0.7",
      "ts-node": "^9.1.1",
      "typescript": "^4.2.4"
    }
}

이제 npm start로 실행을 시키면,

타입스크립트 파일을 수정할 때마다 실시간으로 compile된 결과를 보여주는 것을 확인할 수 있다❗️😃

Reference

https://radlohead.gitbook.io/typescript-deep-dive/nodejs https://create-react-app.dev/docs/adding-typescript/

[Algorithm/JavaScript] 비밀지도

Wed, 21 Apr 2021 16:19:49 GMT

Programmers Level.1 Question Review 🧩

문제출처: https://programmers.co.kr/learn/courses/30/lessons/17681

문제

문제 보러가기

제출 답안

function solution(n, arr1, arr2) {
  //이진수 변환 + 모자란 숫자자리만큼 앞에 '0' 붙이기 + 한 글자 단위로 쪼개기
    let newArr1 = arr1.map(v => (v.toString(2).padStart(n, 0).split('')));
    let newArr2 = arr2.map(v => (v.toString(2).padStart(n, 0).split('')));

  //이중배열을 순회하면서 1과 0 중 하나라도 1이 있다면 1 반환
  //#은 1로, 0은 공백으로 치환 + 배열의 글자 합쳐서 하나의 문자열로 반환
    return newArr1.map((arr, i) => {
        return arr.map((letter, j) => String(letter | newArr2[i][j]).replace(/1/g, '#').replace(/0/g, ' '));
    }).map(arr => arr.join(''));
}

오늘의 Lesson

비트 연산자(|)는 OR 조건과 유사하다. 반면 비트 연산자(|) 는 boolean이 아니라 십진수를 반환한다. (1|0) 이면 1이 true이기 때문에 1을 반환. (or은 하나라도 true이면 true값을 바로 반환하기 때문에) JS비트연산자 설명 동영상 비트연산자 참고 자료
padStart()는 특정 문자를 원하는 길이만큼 문자열 '앞'에 더해준다. '뒤쪽'에 더해져야 한다면 padEnd()메서드를 사용할 수 있다. padStart() MDN padEnd() MDN
정규표현식에서 숫자는 특수문자도 아니고, 문자 그대로 해석되어야 하는 대상이 아니기 때문에 백슬래시(\)는 사용하지 않는다. 그냥 /1/g 면 1을 찾아준다. 정규표현식 MDN

비트 연산자가 사용된 다른 사람의 풀이:

function solution(n, arr1, arr2) {
  return arr1.map((v, i) => addZero(n, (v | arr2[i]).toString(2)).replace(/1|0/g, a => +a ? '#' : ' '));
}

const addZero = (n, s) => { return '0'.repeat(n - s.length) + s; } ```

[Algorithm/JavaScript] 신규 아이디 추천

Tue, 20 Apr 2021 17:33:39 GMT

Programmers Level.1 Question Review ✏️

문제출처: https://programmers.co.kr/learn/courses/30/lessons/72410

문제

문제 보러가기

1단계 new_id의 모든 대문자를 대응되는 소문자로 치환합니다.

2단계 new_id에서 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모든 문자를 제거합니다.
3단계 new_id에서 마침표(.)가 2번 이상 연속된 부분을 하나의 마침표(.)로 치환합니다.
4단계 new_id에서 마침표(.)가 처음이나 끝에 위치한다면 제거합니다.
5단계 new_id가 빈 문자열이라면, new_id에 "a"를 대입합니다.
6단계 new_id의 길이가 16자 이상이면, new_id의 첫 15개의 문자를 제외한 나머지 문자들을 모두 제거합니다. 만약 제거 후 마침표(.)가 new_id의 끝에 위치한다면 끝에 위치한 마침표(.) 문자를 제거합니다.
7단계 new_id의 길이가 2자 이하라면, new_id의 마지막 문자를 new_id의 길이가 3이 될 때까지 반복해서 끝에 붙입니다.

제출답안

function solution(new_id) {
    //1단계, 2단계
    new_id = new_id.toLowerCase().replace(/[^a-z\d\-\_\.]/g, "");
    //3단계
    new_id = new_id.replace(/\.+\./g, '.');
    //4단계 - / 는 or을 나타냄
    new_id = new_id.replace(/^\.|\.$/g, "");
    //5단계
    if(new_id === '') new_id = "a";
    //6단계
    if(new_id.length >= 16) {
        //ew_id = new_id.replace(/a-z/g, "")
        new_id = new_id.slice(0, 15).replace(/\.$/g, '');
    //7단계
    }
    if(new_id.length <= 2) {
            const lastLetter = new_id[new_id.length - 1];
            const requiredCount = 3 - new_id.length;
            for(let i = 0; i < requiredCount; i++){
                new_id += lastLetter;
            }
    }
    return new_id;
}

오늘의 Lesson

대괄호([]) 안의 조건을 찾는다. (a-z는 문자열,d는 숫자 찾기)
캐럿(^)을 쓰면 !를 사용하는 것과 같이 불일치조건을 반환하게 된다.
캐럿(^)의 또 다른 의미는 가장 첫번째 자리가 된다. 즉, ^\.은 가장 첫번째 자리에 .가 있는 지를 확인하는 것.
반면$는 마지막 자리를 체크. 즉, \.$는 마지막 자리에 .가 있는 지를 확인하는 것.
|는 OR 연산자의 역할.
+를 사용해서 연속되는 문자를 검색할 수 있다.
\s는 공백을 의미한다.
연속 검색은{최소, 최대} 로 표현된다. 예)\.{3,}은 .이 3개 이상 (연속해서)오는 경우 전부를 검색. \.{3, 6}은 .이 3개 이상 6개 이하로 오는 경우 전부를 검색.

[ETC] 기술 문서 읽기

Wed, 07 Apr 2021 07:33:09 GMT

📜 매일 읽는 기술문서 업데이트 하기✏️

2021년 4월

7일 (수): React 적용 가이드 - React와 Redux / 네이버 D2 블로그 React 적용 가이드 - React작동방법 / 네이버 D2 블로그 'React와 Redux'에서는 create-react-app으로 리액트를 시작하는 방법(개발환경구축), 폴더구조와 각 폴더가 하는 역할에 대한 가이드, 미들웨어와 비동기 처리, 디버깅 도구 등의 사용 가이드를 제공한다. 그리고 Redux 사용 시 state가 변경되는 과정과 브라우저에서 이벤트를 받아 뷰를 변경하는 과정을 설명한다. 'React작동방법'에서는 Virtual DOM과 이벤트 시스템에 관해 설명한다. DOM을 렌더링 하는 과정과 브라우저가 이벤트를 처리하는 방법에 대해 설명한다. 📝 : 리액트가 작동되는 원리에 대해 자세히 설명하고 있어 리액트를 보다 깊이있게 이해하는 데에 도움이 될 것 같다. 그런데 아직 리액트로 코드를 작성해본 경험이 많이 없어서 본문을 완전히 이해하기에는 무리가 있었다. 코딩을 병행하면서 관련된 내용을 다시 보면 학습에 큰 도움이 될 것 같다.
8일 (목): 리액트 useEffect: 개발자가 알아야 할 네가지 팁 / Toast UI Weekly Picks 리액트 훅인 useEffect를 사용할 때에 개발자가 유의해야 할 점을 4가지로 나누어 제시한다. 요약본 - 제이슨의 포스팅😃 📝 : useEffect를 학습한 후 사용할 때에 다시 읽어볼 것!
9일 (금): [번역] 심층 분석: React Hook은 실제로 어떻게 동작할까? React Hook 사용시에는 "최상위에서만 호출", "오직 React 함수 내에서만 호출"이라는 규칙을 따라야 하는데, 이러한 규칙이 필요한 이유에 대해 React Hook이 작동되는 원리를 제시한다. 그 과정에서 리액트 훅 안에서 클로저(Closure)가 어떤 역할을 하는지를 중심으로 Hook의 내부 동작원리를 단계별로 설명한다. 📝 : 리액트 사용방법을 익히는 것이 아니라 동작원리를 익혀야지만 리액트를 제대로 사용한다고 할 수 있을 것이다. 리액트 훅 사용에 앞서서 꼼꼼히 여러 번 읽어볼 필요가 있는 글.
12일 (월): 팀 문화의 탄생 / 우아한 형제들 기술 블로그
Keep* : 잘하고 있는 점. 계속 했으면 좋겠다 싶은 점.
Problem *: 뭔가 문제가 있다 싶은 점. 변화가 필요한 점.
Try *: 잘하고 있는 것을 더 잘하기 위해서, 문제가 있는 점을 해결하기 위해서 우리가 시도해 볼 것들 (이 중에서 2, 3개를 골라 Action 아이템으로 만들고, 실제로 수행해보기) 주석에는 '무엇'이 아니라 '왜'를 적기. 📝 : 팀 프로젝트를 시작한 지 2주차에 접어들면서 어떻게하면 팀 프로젝트를 더 잘 할 수 있을까에 대한 고민이 더해졌다. 우아한 형제들에서 추구하는 팀 문화는 무엇인지 알아보면서 그들이 채택한 방법들 중 우리의 상황에도 적용해볼 수 있는 것들을 골라 시도해보아야겠다는 생각을 했다.
13월 (화): styled-components 를 사용하는 8가지 이유 -번역 React로 CSS를 사용하는 방법 중 가장 많이 채택되는 방법은 Styled-component 라이브러리를 사용하는 방법이다. 왜 Styled-component가 가장 많은 관심을 받는지 그 이유를 CSS-in-JS에 초점을 맞춰 설명한 글. 같이 참고하면 좋은 글: Styled-component 네이밍 컨벤션 팁 CSS-in-JS란? 📝 : 생각해보면 미션 구현에 급급해서 간단히 사용방법만 익히고 Styled-component를 쓰고 있었는데, 어떤 장점을 가졌는지, 왜 쓰는지에 대한 고민은 해본적이 없었는데 생각을 해보게 만드는 글이었다.
14일 (수): deploy 브랜치 전략 활용 방법 / 당근마켓 팀블로그 팀 프로젝트처럼 여러 사람이 함께 개발을 할 때, 차례를 기다리지 않고 테스트 서버에서 각자 개발한 feature를 어떻게 테스팅 할 수 있는지 'deploy 브랜치'라는 브랜치 관리 전략을 제시한다. 📝 : 배포는 아직 친숙하지 않은 영역이라 생각해보지 못했던 부분인데 협업을 할 때 git으로 생길 수 있는 문제들은 정말 무궁무진하다는 생각이 든다. deploy 브랜치 전략이라는 게 있단 걸 알게 되었으니 추후 협업 시 도움이 될 것이라 예상해본다.
19일 (월): HTTP 응답코드 메소드 정리 GET, POST, PUT, PATCH, DELETE, TRACE, OPTIONS HTTP 응답코드에 대해 보기 쉽게 정리되어 있는 문서. 📝 : 서버에 데이터를 요청하는 부분의 미션의 필수조건이 되어가면서 http 요청/응답코드에 대한 지식이 필요함을 느끼고있다. 북마크하고 필요할 때마다 볼 것!
20일 (화): 나는 프론트엔드를 안다고 말할 수 있을까? 프론트엔드 개발자를 어떻게 정의할 수 있을지, 어디까지가 프론트엔드 개발자의 역할이고 어디까지가 퍼블리셔의 역할인지, 내 앎의 깊이는 어디까지인지를 생각해보게 만드는 글이다. 📝 : 그동안 당연하게만 생각해왔었던 부분들에 대해 질문을 던져보게 하는 글. 철학적인 관점에서도 프로그래밍을 바라볼 수 있다는 것이 흥미로웠고, 팀원들과 함께 각자의 감상평을 나눠볼 수 있어 흥미로웠다.
21일 (수): 왜 React와 서버 사이드 렌더링인가? React가 '왜' 좋은 프레임워크인지, 이전에는 불가능하던 '무엇'을 가능하게 했는지에 대한 배경과, React가 채택한 서버사이드 렌더링의 장점을 함께 설명한다. 📝 : 당연히 알아야만 할 것 같지만 사실 리액트 이전에 사용되던 프레임워크들을 사용한 경험이 전무한 상태에서 리액트부터 학습하다보니 리액트만의 강점이 무엇인지, 무엇이 리액트를 만들게 했는지 몸소 느끼기가 어려운 것 같다. 빠르게 변화해온 프론트엔드의 흐름을 모두 상세히 알기는 어렵겠지만 현재 사용하는 프레임워크의 탄생배경을 이해하는 데에 도움이 되는 글이었다.
22일 (목): useEffect 완벽 가이드 “컴포넌트의 랜더링 안에 있는 모든 함수는 (이벤트 핸들러, 이펙트, 타임아웃이나 그 안에서 호출되는 API 등) 랜더(render)가 호출될 때 정의된 props와 state 값을 잡아둔다. 하나의 랜더링 스코프 안에서 props와 state는 변하지 않은 값으로 남아있다.” 사전에 잡아둔 값이 아니라 최신의 값을 쓰고 싶다면, 제일 쉬운 방법은 ref를 이용하는 것! 📝 : 리액트를 사용한다면 반드시 한번쯤 꼭 읽어봐야할 문서! 리액트가 작동되는 원리와 방법을 이해하기 쉽게 설명하기 때문에 초보자가 읽으면서 학습하기에도 적당하다. 다만 아티클의 길이가 굉장하고 본문에 링크가 걸린 다른 아티클들의 양도 적지 않아서 한번에 다 읽기는 어려우므로 틈틈이 읽을 것. 기억하면 좋을 중요정보들이 많다.
23일 (금): 글자 4개로 리액트 컴포넌트를 최적화하는 방법 useState()의 인자로 화살표함수(() =>)를 넘겨줌으로써 불필요한 연산을 줄이고 리액트 함수 컴포넌트의 성능을 향상시키는 '지연초기화' 방법을 소개한다.
지연초기화*: 직접적인 값 대신 함수를 useState()의 인자로 넘기는 것. 지연 초기화는 상태가 최초로 생성될 때만 실행되고, 이후 발생하는 리렌더링에서는 실행되지 않는다. 하지만 단순한 원시값이거나 이미 계산된 변수인 경우 오히려 매번 함수를 만드는 비용이 발생하므로 부적절. _비용이 큰 계산_에 적절하다. 📝 : useState()을 사용할 때 늘 인자로 직접적인 값만을 전달했었는데, "함수"를 전달할 수 있을 것이라는 생각을 해보지 못했었는데, 이렇게 컴포넌트를 최적화할 수 있다니 신기하게 느껴졌다. 화살표함수가 암묵적으로 값을 반환한다는 점 또한 알게 되었다. 최초 렌더링 시에만 값을 찾아야 하는 경우에 유용하게 사용할 수 있을 것 같다.
26일 (월): 자바스크립트는 무엇으로 구성되어있을까? JS를 공부한다면 반드시 알아야 하는 개념들을 정리해둔 문서. 📝 : JS를 사용하는 프론트엔드 개발자로 면접을 보게 된다면 반드시 설명할 수 있어야 하는 개념들이라는 생각이 든다. 과연 나는 할 수 있을까? 기본중의 기본이지만 막상 입밖으로 자연스레 나오지 않는..이런 개념들에 대해 내가 할 수 있는 답변들을 정리해야 할 필요가 있다 정말.
28일 (수): 잘가, 클린 코드 / Overreacted 중복 코드를 제거하려고 팀원들의 동의없이 코드를 수정했다 겪었던 일화를 소개하면서 무조건적으로 클린 코드를 추구하는 것이 능사는 아님을 전달해준다. 클린코드를 배우되, 얽메이지는 말자. 📝 : 약간의 강박처럼 미션을 할 때도 늘 클린코드를 짜야한다는 생각이 있는데, 클린코드가 무조건 좋은 게 아니라니... 충격까지는 아니지만 새로운 관점으로 생각해보게 하는 계기가 되었다. 클린코드의 정의도 사실 모호하지만 무엇보다 '클린코드' < '협업' 이라는 생각이 다시 한 번 들었다.
29일(목) & 30일(금): 애자일 방법론 현대 소프트웨어 개발에서 강조하는 '애자일 방법론'의 장점과 진행방법을 구체적이고 다양하게 제시한다. 애자일이 추구하는 가치: "처음부터 완벽한 계획"이 아닌 "간소한 계획과 유연한 대처" 📝 : 개발공부를 하게되면 꼭 한번은 들어보는 용어가 '애자일'이지만 이게 정확히 뭘 의미하는지, 어떻게 실행해야 하는지는 알지 못했었다. 알고보니 코쿼에서 당연한듯 해온 칸반이나 스크럼이 애자일 방식의 하나였으니 나도 모르게 어느정도 애자일 방법론을 동기들과 해온거구나.. 라는 생각을 했다. 추상적으로만 생각했던 개념이 머릿속에서 좀 더 명확해졌고, 실행방법들이 구체적으로 정리되어 있어서 참고하며 다음 협업 시 추가로 적용할 수 있는 부분들을 실행해보면 좋을 것 같다.

2021년 5월

3일 (월): React 이해하기 / 마켓컬리 Tech Blog React의 간단한 소개부터 useReducer, useMemo까지 속성으로 리액트를 소개하는 아티클. hook에 대해 좀 더 깊이있게 알아보기 위해서는 여기 블로그도 추천! 📝 : 이제 본격적으로 React의 여러가지 hook을 사용해야 하는 때가 와버렸기 때문에 입문용으로 어떤 hook이 있는지 알아보기에 괜찮음.
4일 (화): 리액트 최적화 요약집 리액트에서 렌더링이 되는 대표적인 조건 5가지:
state 변경이 있을 때
부모 컴포넌트가 렌더링 될 때
새로운 props이 들어올 때
shouldComponentUpdate에서 true가 반환될 때
forceUpdate가 실행될 때
useCallback* & useMemo를 사용하는 이유와 사용시 장점과 함께 리액트 앱을 최적화 하는 방법을 소개한다. 📝 : hook 사용법을 익히기에도 시간이 부족해서 최적화는 생각지도 못했었다. 그래도 최종적으로는 최적화 또한 고려해야 할테니 그 때 다시 들여다본다면 리팩토링 시 큰 도움이 될 것 같다는 생각을 했다.
6일 (목): flexbox로 만들 수 있는 10가지 레이아웃 / 네이버 D2 블로그 CSS flex의 속성을 어떻게 사용해야 하는지 flex가 필요한 구체적인 상황과 코드예시, UI까지 포함해 자세히 알려주는 아주 멋진 flex 사용가이드 :) 📝 : flex박스는 쉬운 듯해서 자주 쓰지만 정작 속성들을 자세히 알고 쓰지는 못했던 것 같다(물론 머릿속에 지우개가 들어있어 돌아서면 잊어버리는 탓도 있다). 늘 주먹구구식으로 필요할때만 급하게 검색해서 쓰곤 했는데, 정리가 아주 잘 되어있는 자료가 생겨서 자주 찾게 될 것 같다.
10일 (월) react-transition-group으로 router간 animation구현하기 react-transition-group이라는 모듈을 React router를 사용하면서 transition 애니메이션에 적용하는 예시를 들어 설명한다. 또 다른 animation 모듈: React Spring 📝 : 역시나 리액트에도 손쉽게 애니메이션을 적용할 수 있게 하는 툴이 많다. 아직 라우터를 지정하기 전이지만 라우터를 적용하면서 애니메이션을 구현해야 할 일이 온다면 유용하게 쓰일 것 같다. 일단은 Styled-component부터 마스터하는 걸로... 😬
11일 (화) 깊은 복사와 얕은 복사에 대한 심도있는 이야기 / WATCHA
*<얕은 복사>** Array.prototype.slice() : 중첩구조까지는 복사를 제대로 할 수 없다. Spread Operator(...) : 복사하려는 객체가 iterable 이라면 복사가능. 그러나 중첩구조는 복사 불가능.
*<깊은 복사> ** JSON.parse(JSON.stringify(arr)) : 중첩구조 복사 가능. 객체 순환을 통해 값을 옮겨담는 과정이 아니라, 문자열로 변환하면서 데이터 타입이 "원시값"의 형태로 변하기 때문. => 자바스크립트의 모든 복사 방식은 사실 깊은 복사를 수행할 수 없다. 내부적으로 그렇게 모델링 되어있기 때문에 사용자의 편의를 위해 일부 라이브러리들이 그 역할을 대신한다. 깊은 복사를 하기 전에 과연 깊은 복사가 그렇게 필요한 것인지 아키텍처 관점에서 다시 한 번 생각해봐야 한다. 📝 : 얕은 복사와 깊은 복사에 대해서는 어렴풋이 알고 있었지만 자바스크립트가 실제로 깊은 복사를 할 수 없게 만들어졌다는 것은 처음 알게 된 사실이었다. 그냥 사용할 것이 아니라 다소 사소하게 느껴질 지 모르지만 차이를 알고 사용하는 것이 중요할 것 같다.
12일 (수) 이벤트 리스너 캐시를 이용한 React 성능 향상 / toast UI 이벤트 핸들러 함수가 매 render마다 새롭게 생성되어 새로운 메모리 공간을 차지하게 되는 문제에 대한 해결책을 제시한다. 📝 : 최근에 리액트 데이터 캐싱에 대해 관심이 생겨서 미션에도 useMemo()를 적용해보려고 공부하는 중이다. 고르는 데에 시간이 꽤나 쏟으면서 나름대로 신중히 고른 포스팅이었지만 예시가 클래스로 구현되어 있기도 하고 내가 알고싶던 부분과는 차이가 좀 있어서 아쉽게도 그다지 와닿지는 않았던 것 같다. 그치만 언젠가 여러개의 이벤트리스너를 참조할 일이 있다면 성능을 고려하면서 적용해볼 수 있을 것 같다는 생각을 했다.
13일 (목) 리액트 어플리케이션 구조 - 아토믹 디자인 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages) 단위로 UI 요소들을 나누어 효과적인 인터페이스 시스템을 만드는 디자인 모델을 소개한다. 📝 : 이전에 스노우님한테 코드 리뷰를 받으면서 '아토믹 디자인'을 처음 알게 되었다. MVC디자인 패턴이 익숙하기도 했고, 아직은 한번도 프로젝트에 아토믹 디자인을 적용해본 적이 없어서 아토믹 디자인의 장단점은 어떨지 궁금해진다. 다음 리액트 프로젝트에서는 아토믹 디자인으로 재사용성을 높여봐야겠다.
17일 (월) 우리가 TypeScript로 갈아탄 이유 / 레드윗러 타입스크립트의 안정성을 중심으로 타입스크립트 사용을 도입하게 된 배경과 그 이유를 설명한다. 📝 : 타입스크립트를 이제 막 배우기 시작한 입장에서 JS와 비교해 어떤 장단점이 있는지, 어떤 점을 보완해줄 수 있는지를 알게되는 것이 의미가 있었다.

[React.JS] React 개발환경 구축하기

Mon, 05 Apr 2021 09:15:31 GMT

create-react-app으로 셋업하기

facebook에서 제공하는 create-react-app 툴을 사용하면 손쉽게 리액트 개발환경을 구축할 수 있다. ▶︎ create-react-app 사용안내 페이지 링크

설치 방법

프로젝트 폴더를 생성(mkdir [폴더명])
*프로젝트 폴더로 이동(cd [폴더명]) *
npx create-react-app [프로젝트명] 로 해당 폴더에서 create-react-app 설치 이번에는 강의의 폴더구조와 일치하는 폴더구조를 만들기 위해 뒤에 --scripts-version 1.1.5라는 부분을 더했지만 생략가능하다. 설치가 성공적으로 완료되면 아래와 같은 메세지가 나온다.😃
프로젝트 폴더로 이동한 후 npm start로 실행한다. 이 때부터 변경을 감지해서 최신사항을 보여주게 되므로 위 명령어를 입력한 터미널은 실행된 상태로 유지해야한다. (종료는 command + c)

localhost:3000에서 React가 실행된 것을 확인할 수 있다!

구조 살펴보기

create-react-app이 만들어주는 폴더 구조는 아래와 같다. package.json파일 내용: npm start로 실행이 가능하고, 현재는 보여지지 않지만 npm build를 입력하면 번들링 된 파일을 확인할 수 있게 된다.

public 폴더: 웹서버가 궁극적으로 서버역할을 하게 되는 루트 폴더(root folder)이다. 수정가능한 파일들을 가지고 있으며, script 파일들은 src폴더 하위에 추가되어 있다. menifest.json파일은 앱에서 사용되는 메타 데이터들이 정의되어 있다. 그 외에 registerServiceWorker.js파일은 스크립트 파일을 미리 캐싱하는 역할을 하고, App.test.js파일은 원하는 단위(ex. 컴포넌트)별로 테스팅할 수 있게 해준다.

폴더나누기 (추천)

이 섹션의 내용은 'React 적용 가이드 - React와 Redux' 포스팅에서 발췌한 내용입니다.

1. Action 폴더

애플리케이션에서 사용하는 명령어(action type)와 API 통신과 같은 작업을 하는 액션 메서드(action creator)를 모아 둔 폴더. 비즈니스 로직을 주로 액션 메서드에 개발하기 때문에 액션 메서드는 컴포넌트의 재활용을 높이고 코드를 관리하는 데 중요한 역할을 한다. 액션 메서드에서는 리듀서(reducer)로 데이터 생성을 요청한다.

2. Component 폴더

React 컴포넌트로 구성된 폴더. 보통 도메인 별로 구분한다. ex. 하위 폴더이름: footer, header, todolist, etc. 컴포넌트 폴더는 다시 컨테이너 컴포넌트(container component)와 프레젠테이션 컴포넌트(presentational component)를 구분해서 개발한다.

I. 컨테이너 컴포넌트(container component)

여러 개의 프레젠테이션 컴포넌트로 구성돼 있으며, 데이터나 공통으로 관리해야 하는 객체, 컴포넌트 간의 인터랙션 등을 관리하는 컴포넌트다. UI 컴포넌트인 프레젠테이션 컴포넌트를 컨테이너 컴포넌트에서 관리한다고 생각하면 된다.

II. 프레젠테이션 컴포넌트(presentational component)

프레젠테이션 컴포넌트는 일반적으로 알고 있는 UI 컴포넌트라 생각하면 된다.

더 자세한 내용은 여기참고.

3. Reducer 폴더

리듀서는 액션 메서드에서 변경한 상태를 받아 기존의 상태를 새로운 상태로 변경하는 일을 한다. reducer 폴더는 action 폴더와 같이 하나로 만들기도 하지만 도메인별로 구분해 만들기도 한다. 리듀서는 스토어(store)를 새로 변경하는데, 입력받는 state와 반환하는 state가 항상 같은 순수 함수로 구현돼 있다. 그렇기 때문에 Redux로 이전의 state를 추적해 시간 여행을 하는 도구를 만들 수 있다.

4. Store 폴더

store 폴더에는 index.js 파일 하나만 있으며, 주로 미들웨어를 설정하는 일을 한다. 비동기 통신을 사용하기 위에 redux-thunk 라이브러리를 설정하거나, state의 변경 내역을 관리하기 위해 react-router-redux 라이브러리를 추가하거나, 디버깅을 위해 react-devtool을 설정하는 일을 주로 한다.

Reference

https://github.com/facebook/create-react-app https://www.udemy.com/course/react-the-complete-guide-incl-redux/learn/lecture/8090848#overview https://d2.naver.com/helloworld/1848131#ch3-1 https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.c26mmyryu

[JavaScript] Local Storage 사용하기

Thu, 18 Mar 2021 10:12:02 GMT

localStorage

로컬 스토리지는 HTML5에서 추가된 저장소로 브라우저에 위치한다. 간단한 키와 값을 저장할 수 있고, 로컬 스토리지에 저장된 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있다. 로컬 스토리지는 window 객체 안에 들어있고, 'Storage'객체를 상속받기 때문에 메소드를 사용할 수 있다.

데이터 저장하기

Syntax: localStorage.setItem('키', '값');

로컬 스토리지에 데이터를 저장할 때 쓰인다. key-value 순서대로 인자를 받으며, 값으로는 string, boolean, number, null, undefined 등을 저장할 수 있지만 모두 문자열로 변환된다. key도 문자열로 변환된다.

위 문법처럼 key-value 형식으로 풀어서 여러 개를 저장할 수도 있지만, 객체를 통째로 저장하려면 JSON.stringify()를 사용해 객체를 그대로 문자열화 해주어야 한다.

❗️ 브라우저에서 저장된 내역 보기❗️

크롬 개발자도구 열기 → Application 탭 → 왼쪽 메뉴에서 Storage > Local Storage 클릭

//Ex.
//*store은 객체를 요소로 가지고 있는 배열. 코드는 생략되었으니 아래 브라우저 화면 참조.
const setStorageItem: (name, item) => localStorage.setItem(name, JSON.stringify(item))
setStorageItem('store', store);

데이터 조회하기(가져오기)

Syntax: localStorage.getItem('키');

localStorage.setItem('키', '값');로 저장된 데이터는 key와 위 메소드를 사용해서 가져올 수 있다. JSON.stringify()를 통해 객체형식으로 저장했다면, 조회 역시 JSON.parse()를 해주어야한다.

Reference

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

[Brainstorming] 자생사업 "잇다" 플랫폼 만들기

Mon, 15 Mar 2021 02:59:36 GMT

기획

목적

모티브는 KBS 프로그램, '동행'. 스토리텔링 + 판매플랫폼 구축 '동행' 공식사이트
1차 산업에 종사하면서 상품성이 있는 제품들을 생산하고 있지만 소비자와의 접점이 없어 생활고가 있는 사람들에게 판매 플랫폼을 제공한다. 주문을 받을 수 있는 시스템을 만들어서 소비자와 직접적인 거래가 가능할 수 있는 판매루트를 구축해준다.
현대적인 웹사이트에 사용되는 기능들을 직접 구현해보는 경험을 가진다.

주요 기능

장바구니 기능 ✅ 선택된 아이템을 로컬 스토리지(혹은 캐시 스토리지)에 저장한다. ✅ 추가된 아이템들의 누적된 금액을 보여준다.
클릭 시 관련 페이지로 전환 기능 ✅ 제품 클릭 시 상세 페이지로 전환 ✅ 브랜드 이야기 클릭 시 소개 페이지로 전환
UI에 애니메이션 적용 ✅ 장바구니 아이콘 클릭 시 장바구니에 담긴 내용(반쪽짜리 장바구니 페이지)이 toggle된다.
제품 검색 기능 (디바운스, 스로틀 기능 적용해보기)
반응형 사이트로 만들기

구현 순서

Backend

Express 서버 구축

Frontend

home페이지 만들기 1) header - 슬로건 + 플랫폼 소개 2) body - 판매중인 제품들을 한눈에 볼 수 있는 섹션
브랜드 이야기 페이지 만들기
장바구니 토글 페이지 만들기

주의 사항

querySelector, querySelectorAll등의 직접적인 메소드 사용은 안된다. 유사하게 동작하는 트리탐색 함수를 직접 구현하기.

UI

< 홈 페이지 >

< 제품 소개 페이지 >

< 브랜드 스토리 페이지 >

저장소

'잇다' 플랫폼 repository

[JavaScript] Prototype 핵심내용 이해하기

Fri, 12 Mar 2021 12:03:57 GMT

자바스크립트는 '프로토타입 기반 언어'

자바스크립트는 흔히 프로토타입 기반 언어(prototype-based language)라 불린다. 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미다. 프로토타입 객체도 다시 상위 프로토타입으로부터 상속받을 수 있고, 그 상위 프로토타입 객체도 마찬가지이므로 프로토타입 체인(prototype chain)이라 부른다.

사실 생성자함수는 인스턴스에 메소드와 속성을 상속해준 뒤에도 여전히 해당 메소드와 속성을 가지고 있다. 따라서 "상속" 보다는 "behavior delegation"혹은 "위임"의 개념에 더욱 가깝다.

상속되는 속성과 메소드들은 각 객체에 정의되어 있는 것이 아니라, 생성자함수의 prototype이라는 속성에 정의되어 있다. 즉, 객체 인스턴스가 생성자함수와 연결되는 것이 아니라 생성자함수의 prototype과 연결되는 것이다!

Constructor, prototype, instance

Constructor와 prototype, 그리고 객체 instance의 관계를 도식화하면 아래와 같다.

어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면

Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스(instance)가 생성된다.
이때 instance에서는 __proto__라는 프로퍼티가 자동으로 부여되는데,
이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조한다.
__proto__프로퍼티는 생략 가능하도록 구현돼 있기 때문에 생성자 함수의 prototype에 어떤 메서드나 프로퍼티가 있다면 인스턴스에서도 마치 자신의 것처럼 해당 메서드나 프로퍼티에 접근할 수 있게 된다.

//ex.
const arr = [1, 2]

arr는 생성자함수 Array()의 instance이다. 그리고 Object()는 Array()의 constructor이다.

Dunder proto

__proto__: Dunder proto; exposes the value of the internal [[Prototype]] of an object. For objects created using an object literal, this value is Object.prototype. For objects created using array literals, this value is Array.prototype. For functions, this value is Function.prototype. -MDN

ES5.1 *명세에는 __proto__가 아니라 *[[prototype]]이라는 명칭으로 정의돼 있습니다. __proto__라는 프로퍼티는 사실 브라우저들이 [[prototype]]을 구현한 대상에 지나지 않았습니다. ** ... **ES6에서는 이를 브라우저에서 동작하는 레거시 코드에 대한 호환성 유지 차원에서 정식으로 인정하기 시작했습니다. 다만 어디까지나 브라우저에서의 호환성을 고려한 지원일 뿐 권장되는 방식은 아니며, 브라우저가 아닌 다른 환경에서는 얼마든지 이 방식이 지원되지 않을 가능성이 열려있습니다. -코어자바스크립트

Dunder proto(__proto__) 프로퍼티는 생성자 함수의 프로퍼티를 가리킨다. 생성자 함수의 인스턴스가 생성될 때마다 다른 프로퍼티 & 메소드와 함께 dunder proto 도 인스턴스에 복사된다. 학습목적으로 이해는 하되, 실무에서 사용하지는 말 것❗️ 대신에 Object.getPrototypeOf() 혹은 Object.create()를 이용하기.

//만일 'john'객체가 생성자함수'Person'의 인스턴스라면, 
john.__proto__ === Person.prototype      //true

프로퍼티 위임(상속)

본격적으로 자바스트립트에서 프로퍼티를 위임하는 방법을 알아보자!

new 생성자함수();

첫번째는new키워드를 이용해 인스턴스를 생성하는 방법이다.

new constructor[([arguments])]

아래의 예시를 통해 이를 시각화 해보고자 한다.

//생성자함수 Person
const Person = function (name, yearOfBirth, job) {
  this.name = name;
  this.yearOfBirth = yearOfBirth;
  this.job = job;
};

Person.prototype.calculateAge = function () {
  console.log(2016 - this.yearOfBirth);
};

Person.prototype.lastName = "Smith";

//Person의 인스턴스 john
const john = new Person("John", 1990, "teacher");

위 예시에서는 new 키워드를 이용해 인스턴스인 john을 생성했다. 아래와 같이 개발자도구의 console은 prototype 연쇄를 보다 직관적으로 보여준다.

인스턴스는 부모객체 혹은 생성자함수의 prototype 객체에 접근할 수 있기 때문에 일치하는 프로퍼티명이 나올 때까지, 혹은 연쇄가 끝날 때까지 prototype 연쇄를 따라 올라간다.

/*lastName은 Person.prototype에 위치한 프로퍼티이다.*/
console.log(john.lastName);       //Smith

최상위 prototype 연쇄는 내장객체인 Object.prototype이다. 따라서 연쇄가 끝나는 지점 또한 Object.prototype이다. +PLUS:Object.prototype.__proto__;는 null을 반환한다. 만일 연쇄 끝에 이르러서도 원하는 프로퍼티가 발견되지 않으면 undefined를 반환한다.

console.log(john.age);            //undefined

john객체는 Object.prototype 의 hasOwnProperty() 메소드 또한 사용할 수 있는데, 이것은 특정 프로퍼티가 john객체 내부에 존재하는지, 아니면 상위 prototype 객체에 존재하는지를 구분한다.

/*job은 john내부에 위치한 프로퍼티이다.*/
john.hasOwnProperty('job');       //true

/*lastName은 Person.prototype에 위치한 프로퍼티이다.*/
john.hasOwnProperty('lastName');  //false

Object.create();

prototype을 상속받는 방법에는 new키워드를 이용해 인스턴스를 생성하는 방법 이외에도, Object.create()를 이용하는 방법이 있다.

Object.create(proto[, propertiesObject])

new키워드를 이용하면 생성자함수의 prototype 프로퍼티를 그대로 상속받지만, Object.create()를 이용해 객체 생성 시, 1) 빈 객체{}를 반환한다. 2) Object.create()의 인자로 들어오는 것이 생성되는 빈 객체의 prototype이 된다. 즉, 어떤 객체가 prototype이 되어야 하는 지 정확히 지정하는 것이 가능하다! 복잡하게 얽힌 prototype 연쇄도 보다 간단하게 만들 수 있다는 장점이 있어 가장 많이 쓰이는 방법이다.

const personProto = {
  calculateAge: function () {
    console.log(2016 - this.yearOfBirth);
  },
};

/*객체 john 생성*/
const john = Object.create(personProto);
john.name = "John";
john.yearOfBirth = 1990;
john.job = "teacher";

/*객체 jane 생성 - 두번째 매개변수 주목!*/
const jane = Object.create(personProto, {
  name: { value: "Jane" },
  yearOfBirth: { value: 1969 },
  job: { value: "designer" },
});

john은 Object.create()의 첫번째 인자인 personProto에서 직접적으로 prototype을 상속받는다. 그리고 나머지 프로퍼티들은 동적으로 생성하여 추가하였다.

반면,jane은 필요한 프로퍼티들을 가진 객체를 **Object.create()의 두번째 인자로 전달받았다. 이 때 주의할 점은, **값을 {}으로 감싸야한다는 점이다.

console 창을 통해 확인해보면 두 객체 모두 같은 동일한 prototype을 가진 객체가 되었음을 알 수 있다.

john.calculateAge();       //26
jane.calculateAge();       //47

prototype은 가족이다?! 👨‍👩‍👧

프로토타입을 설명하는 자료는 다양하게 있지만, 그 중에서도 가장 기억에 남으면서도 이해가 쏙쏙 되었던 것이 'Family-oriented Prototype' 컨셉이라, 여기서 잠깐 되짚어보고 가려고 한다!

Prototype을 가족관계에 비유하면,

모든 생성자함수는 아내이다. prototype(남편)의 입장에서constructor메소드는 아내를 가리킨다.

모든 prototype객체는 남편이다. 인스턴스(자녀)의 입장에서 __proto__는 아빠를 가리킨다.
남편과 아내는 1:1로 매칭되어있다.
생성자함수로 만들어진 인스턴스는 자녀다.
모든 자녀는 아빠(prototype객체)로부터 속성을 빌려쓸 수 있다.

예를 들어 아래와 같이Dog이라는 생성자 함수가 있다고 하자.

//생성자함수 = 엄마
function Dog() {
  this.name = "Freddie";
  this.color = "brown";
  this.numLegs =4; 
}

//Dog의 인스턴스 = 자녀 
let hound = new Dog();

생성자함수인 Dog은 엄마가된다. 엄마로 인해 만들어진 hound인스턴스는 자녀가 된다. 그리고 Dog과 동시에 생겨난 Dog.prototype은 Dog의 남편이자 hound의 아빠가 되는 것이다.

만일 hound가 원하는 속성을 자기 내부에 가지고 있지 않다면, 아빠인 Dog.prototype은 hound에게 자신의 속성들을 빌려줄 것이다!

prototype 지정과 constructor

생성자함수명.prototype = {constructor: 생성자함수명}

위 비유에서 쓰인 예제를 통해 설명을 이어가자면, Dog의 인스턴스인 hound는 새로운 빈 객체로 생겨나는 동시에 Dog내부에서 this.__로 정의된 속성들을 할당받게 된다.

앞서 언급되었던 것처럼 아내와 남편은 1:1매칭이므로, 모든 함수는 prototype객체를 내장한 채로 태어난다. 생성자함수 Dog도 prototype객체(남편)를 갖고 있으며,hound는 자신의 아빠인 Dog.prototype에 접근할 수 있게 된다.

우리가 Dog의 모든 인스턴스들이 사용할 수 있도록 생성자함수에 속성을 추가하고자 할 때,

Dog.prototype.bark = "wuff";

간단히 위와 같이 추가할 수도 있지만, 여러 개의 속성을 한꺼번에 추가할 때에는 새로운 객체를 prototype에 할당하는 방법도 있다.

Dog.prototype = {
  hasTail: "Yes", 
  eat: function() {
    console.log("nom nom nom");
  },
  describe: function() {
    console.log("My name is " + this.name);
  }
};

그런데 사실 이 방법은 아래와 같이 기존 constructor속성을 지워버리는 부작용이 있다.

Dog.prototype.constructor;   //function Object(){...} (Uh-oh❗️🤭)

prototype.constructor라면 prototype객체의 아내를 가리키게 되는 격인데, 반환값은 Dog이 아니라 Object(){...}가 되어있다! 이건 명백히 옳지않은 반환값이므로 객체 내부에 constructor: 생성자함수명 이라는 코드를 추가해야지만 constructor 속성의 의도치 않은 변화를 바로잡을 수가 있다.

객체를 prototype에 할당할 때에는, constructor: 생성자함수명;코드를 포함시킨다.

Dog.prototype = {
  constructor: Dog,  //<--***************다시 원래대로 돌려놓기*****************
  hasTail: "Yes", 
  eat: function() {
    console.log("nom nom nom");
  },
  describe: function() {
    console.log("My name is " + this.name);
  }
};

Dog.prototype.constructor;    //function Dog(){...}   (😊)

subtype.prototype = Object.create(supertype.prototype); 그리고 subtype.prototype.constructor = subtype;

subtype은 자식이 되는 객체를 가리킨다. supertype은 부모가 되는 객체를 가리킨다.

아래와 같이 subtype.prototype = Object.create(supertype.prototype);를 통해 객체들을 prototype chain(프로토타입 연쇄; 여기서는 부모-자식객체 간 프로퍼티 위임을 받을 수 있는 관계성을 말함)으로 연결해줄 수 있다.

/*supertype:Animal, subtype:Dog*/
Dog.prototype = Object.create(Animal.prototype);

/*supertype:Dog, subtype:beagle*/
let beagle = new Dog();

특이한 점은, 한 객체가 다른 객체에게 prototype을 위임할 때 supertype객체의 constructor속성이 함께 위임된다는 것이다. 따라서 override 된 constructor속성을 subtype.prototype.constructor = subtype;으로 반드시 정정해줘야 한다.⭐️⭐️⭐️

그래서 현재상태에서는 beagle인스턴스가 constructor로 Dog생성자함수의 상위객체인 Animal 을 가리키고 있는 것을 확인할 수 있다.

console.log(beagle.constructor);    //function Animal(){...}

여기서 다시 family-oriented prototype이론을 적용해보자면, beagle 은 Dog의 자녀가 된다. 그리고 Dog은 Animal.prototype의 자녀가 된다.

beagle은 constructor라는 속성이 없기 때문에 beagle.constructor가 값을 반환할 수 있는 이유는 beagle이 아빠인 Dog.prototype객체로부터 속성을 빌려올 수 있기 때문이다.

따라서 원래대로라면 beagle.constructor는 외할머니(Animal)가 아닌 엄마(Dog)를 반환하는 것이 맞다!!

그러니 인위적이지만 우리는 다시 Dog.prototype의 아내을 Dog으로 되돌려줄 필요가 있다❗️

/*prototype.constructor에 올바른 값 할당하기*/
Dog.prototype.constructor = Dog;    
console.log(beagle.constructor);    //function Dog(){...}  짜잔!원래대로 돌아왔다👍

prototype 과 this

생성자함수명.call(this);

하위계층의 객체들이 공통의 속성을 갖고 있으면서도 각각의 고유한 속성을 갖고 있는 경우, 생성자함수명.call(this);로 중복되는 코드를 대체할 수 있다.

예를 들어,

function Carrier (name){
  this.name = name;                           //<-name
}

Carrier.prototype.move = function () {        //<-move
  console.log("move");
};

function Vehicle (name, wheels) {
  this.name = name;                           //<-name 반복 
  this.numOfWheels = wheels;
}

Vehicle.prototype.move = function () {        //<-move 반복
  console.log("move");
}

Vehicle.prototype.hasWheels = function () {
  console.log("Yes, it has wheels.");
}

var helicopter = new Carrier("Black Hawk");
var car = new Vehicle("Hummer", 4);

이런 코드가 있다고 하자. 생성자함수인 Carrier 와Vehicle은 각자 helicopter와 car라는 인스턴스를 가지고 있다. 아래 그림처럼 두 인스턴스는 모두 name과 move라는 속성을 가지고 있다. (편의상 move도 가지고 있다고 하였다. 정확히 말하면 move 는 가지고 있지 않지만 사용할 수 있다.)

하지만 현재는name과 move를 정의하는 코드가 반복되고 있다. 자세히보면 Carrier가 가지고 있는 모든 속성들은 Vehicle이 가지고 있기때문에, Vehicle은 Carrier로부터 필요한 속성을 상속받으면 된다!

*Carrier(상위객체) > Vehicle(하위객체) *

중복되는 코드 this.name = name;은 Carrier.call(this, name);로 변경한다. Carrier.call(this, name); 내부의 this를 알기 위해서는 이 코드를 가지고 있는Vehicle이 실행된 방법을 찾아야한다. new키워드로 실행된 Vehicle의 this는 Vehicle의 인스턴스인 car가 된다.

그리고 move의 경우, 게시글 상단의 Object.create() 부분에서 설명했던 것처럼 1)Vehicle.prototype.move를 삭제하고Vehicle.prototype = Object.create(Carrier.prototype);로 Vehicle의 prototype을 Carrier.prototype으로 지정해준다. 2) prototype 객체가 대체되면서 사라진 constructor속성은 다시 Vehicle.prototype.constructor = Vehicle;로 재할당 해준다. 이 방법으로는 move속성을 위임할 수 있다.

위 방법들을 적용해 코드를 정정하면 다음과 같다:

function Carrier (name){
  this.name = name;
}

Carrier.prototype.move = function () {
  console.log("move");
};

function Vehicle (name, wheels) {
  Carrier.call(this, name);                
  //.call(this); 로 대체 
  this.numOfWheels = wheels;
}

Vehicle.prototype = Object.create(Carrier.prototype);
Vehicle.prototype.constructor = Vehicle;
//Carrier.prototype을 vehicle.prototype의 prototype으로 지정해주기!!
//바뀐 constructor 속성은 올바르게 재할당해주기!!

Vehicle.prototype.hasWheels = function () {
  console.log("Yes, it has wheels.");
}

var helicopter = new Carrier("Black Hawk");
var car = new Vehicle("Hummer", 4);

결과적으로 중복되는 코드를 없앴음에도helicopter와 car는 전부 정정 전과 동일하게 생성이 되었다!!

Remember...

prototype위임 프로세스를 알아보는 과정에서 constructor속성을 다루기는 했지만, 가급적 constructor메소드나 __proto__는 사용하지 않아야 한다.(사용하지 말 것!) 앞서 설명한 것처럼 의도치않은 변경으로 혼선을 야기할 가능성도 있을 뿐더러, 이제는 type 확인에Array.isArray()나 typeof등의 메소드로 대체할 수 있기 때문이다. 무분별한 사용은 독이 된다!!

Reference

*본 포스팅은 아래 사이트들을 참고 및 인용하여 작성되었습니다. 학습단계로 잘못된 정보가 있을 수 있습니다. 잘못된 부분에 대해 알려주시면 곧바로 정정하도록 하겠습니다 😊 https://velog.io/@jakeseo_me/2019-05-03-1005-%EC%9E%91%EC%84%B1%EB%90%A8-evjv7dy8vh https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype 정재남, 『코어 자바스크립트 - 핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍』, 위키북스(2019)

Dico\'s_footPrint.log

[SEO] 삭제된 페이지 구글 검색에서 완전히 제거하기 (인덱싱 삭제)

배경

원인

해결방법

Reference

[SEO] Google Search Console 활용하기 (a.k.a GSC와 함께한 삽질기록)

적절한 표준 태그가 포함된 대체 페이지

*Canonical Tag: *

🤔 그래서... canonical tag가 뭘 어쨌다는 거죠??

{도메인}에서 리뷰 스니펫 구조화된 데이터 문제가 감지됨

💡 ratingValue와 reviewCount 등록 조건:

제품 스니펫 (Product Rich Snippet)

🤔 근데...제품 스니펫을 꼭 넣어야 하나요?

페이지 색인이 생성되지 않는 새로운 이유

미노출 페이지 색인 방지하기

[SEO] 이걸로 AI한테 우리 서비스를 학습시킬 수 있다구요?: llms.txt 적용기

📌 llms.txt란?

🔧 llms.txt 샘플

🤔 공식 표준인가요?

🏢 그럼 llms.txt는 누가 참고하나요?

🤖 GPT도 llms.txt를 참고하나요?

🧩 활용 시나리오 / 해볼 수 있는 일?

🧑‍💻 프론트엔드

🧑‍💻 백엔드

👀 llms.txt 는 어떻게 보나요?

⛑️ llms.txt를 적용했다면? What’s next?

하지만....😓

✅ 결론

Reference

[SEO] 수치화할 수 있는 개발자가 되자: 프론트엔드를 위한 GA4 / GTM 왕초보 가이드라인

GA4 이벤트 종류

자동 수집 이벤트 (Automatically collected events)

향상된 이벤트 (Enhanced events)

추천 이벤트 (Recommended events)

커스텀 이벤트 (Custom events)

Dimensions & Metrics

커스텀 이벤트 직접 Dimensions & Metrics로 등록하기

불필요한 데이터 필터링 하기

개발용 트래픽 제외

내부 트래픽 제외

[SEO] Next.js SEO 최적화 실전 적용기

💡 글을 시작하며

지난날 시도했던 SEO 최적화 전략들

1. SSR 기반 파트너 상세 페이지 컨텐츠 확장

📌 필요한 정보, 충분히 보여주고 있을까?

🎯 검색에서 잘 걸리는 키워드 전략적으로 넣기!

2. JSON-LD 기반 구조화 데이터 적용 (Rich Snippets 노출 목표)

📦 스키마도 종류가 많던데, 뭘 써야 하지?

🔧 직접 짤까, 라이브러리를 쓸까?

< next-seo로 삽입하기 >

< 직접 삽입하기 >

디렉토리 구조: public

Class의 멤버변수

Reference

[TypeScript] nodemon, ts-node 모듈 설치하기

ts-node 설치하기

nodemon 설치하기

Reference

[Algorithm/JavaScript] 비밀지도

문제

문제 보러가기

제출 답안

오늘의 Lesson

[Algorithm/JavaScript] 신규 아이디 추천

문제

문제 보러가기

제출답안

오늘의 Lesson

[ETC] 기술 문서 읽기

📜 매일 읽는 기술문서 업데이트 하기✏️

2021년 4월

2021년 5월

[React.JS] React 개발환경 구축하기

create-react-app으로 셋업하기

설치 방법

구조 살펴보기

폴더나누기 (추천)

1. Action 폴더

2. Component 폴더

Canonical Tag:

❗️ 브라우저에서 저장된 내역 보기❗️