Assignment 3 - Release 1.0.0 #32

youngminss · 2022-11-03T19:21:58Z

해결한 이슈

[#30] CSR 환경에서 React-Helmet-Async 를 사용하면서 Open Graph 적용 #31

해결 방법

CSR(Client Side Rendering) 환경에서 동적으로 Meta 데이터를 적용하기
- Create React App(이하, CRA) 와 같은 CSR React 프로젝트는 SSR(Server-Side-Rendering) 도 아니고 Pre-Rendering 도 지원하지 않습니다.
- 말 그대로, 정적인 배포 결과물이기 때문에, 기본적으로 빌드 결과물의 index.html 에 포함되어야 할 Meta 태그를 포함해 <head> 태그 안에 값들을 동적(dynamic) 하게 핸들링 할 수 없습니다.
- 하지만, 이것을 가능케 SSR 까진 아니더라도 Pre-Render 를 지원해주는 라이브러리가 있습니다.
  - React-Snap
  - React-Helmet 또는 React-Helmet-Async

위의 언급한 라이브러리 기반으로 CSR 환경에서 SEO(Search Engine Optimization) 을 적용하는 과정을 잘 정리한 글이 있어 공유합니다. 참고 글 1 참고 글 2

Co-authored-by: 위영민 <youngminieo1005@gmail.com> Co-authored-by: OD <kg-te@naver.com>

Co-authored-by: OD <kg-te@naver.com> Co-authored-by: 위영민 <youngminieo1005@gmail.com>

…ontend-12team/pre-onboarding-7th-2-1-12 into feature/style

… feature/style

…tend-12team/pre-onboarding-7th-2-1-12 into feature/style

…ure/style

…ture/car-list [#22] 차량 목록 조회 필터링 기능 추가 & 차량 목록 페이지 개선

…ture/handleerror [#24] 차량 상세페이지 에러페이지 연결 구현

…ture/before-deploy [#26] 요구사항 1차 구현 완료 후, 디테일 수정

…ture/deploy [#27] workflow 파일 추가

…ture/before-deploy [#30] CSR 환경에서 React-Helmet-Async 를 사용하면서 Open Graph 적용

netlify · 2022-11-03T19:22:07Z

✅ Deploy Preview for zesty-panda-9c4cf6 ready!

Name	Link
🔨 Latest commit	`b527b7a`
🔍 Latest deploy log	https://app.netlify.com/sites/zesty-panda-9c4cf6/deploys/636414dad2c6a5000a0c2e52
😎 Deploy Preview	https://deploy-preview-32--zesty-panda-9c4cf6.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

od-log

수고하셨습니다 👍👍👍

forest-6

LGTM

od-log and others added 30 commits November 2, 2022 03:32

💄 스타일 작업 준비

4790e65

🍱 Car Data Type Definition

cd82b35

🍱 Car GET 응답데이터 타입 정의

53e667f

Co-authored-by: 위영민 <youngminieo1005@gmail.com> Co-authored-by: OD <kg-te@naver.com>

✨ Base Client Requester Instance 생성 & getCars 함수 정의

f2dae79

Co-authored-by: 위영민 <youngminieo1005@gmail.com> Co-authored-by: OD <kg-te@naver.com>

🍱 API 관련 상수 정의

ba8d8bb

Co-authored-by: OD <kg-te@naver.com> Co-authored-by: 위영민 <youngminieo1005@gmail.com>

📚 README 작성

85fb3d6

Co-authored-by: OD <kg-te@naver.com> Co-authored-by: 위영민 <youngminieo1005@gmail.com>

Merge branch 'develop' of https://github.com/wanted-pre-onboarding-fr…

0462eea

…ontend-12team/pre-onboarding-7th-2-1-12 into feature/style

💄 CarList/layout/DetailForm 스타일 적용

8dbb3f8

✨ 공통버튼 컴포넌트 추가

06ddb61

📝 클래스 이름 변경

e56aa62

💄 VehicleDetail, Image UI 작업

37ae072

Merge remote-tracking branch 'refs/remotes/origin/feature/style' into…

a5f927f

… feature/style

🎨 이미지 변수, 이미지 크기변경 변수 Image 컴포넌트 -> CarDetail 컴포넌트 이동

be1d61a

➕ react-icons 라이브러리 추가

34baa31

💄 Nav 컴포넌트 UI 구현

5baefaf

💄 VehicleItem 컴포넌트 UI 구현

bd91228

💄 Header 컴포넌트 UI 구현

ad24b34

🔥 container padding 제거

afbecd1

💄 layout 컴포넌트에 Header 추가

bf3cc2a

💄 CarList 컴포넌트에 Nav, VehicleItem 컴포넌트 추가

6288ecf

Merge branch 'feature/style' of github.com:wanted-pre-onboarding-fron…

69c58fc

…tend-12team/pre-onboarding-7th-2-1-12 into feature/style

🎨 컴포넌트 선언 방식 arrow function으로 변경

fcc5ac8

➖ react-icons 제거

bef2acb

💄 화살표 styled-components로 직접 구현

62e68ed

🍱 뒤로가기 버튼 이미지 추가

ae57d68

💄 뒤로가기 버튼 CSS에서 이미지 파일로 변경

9573864

🎨 이미지 컴포넌트 width, height 값 수정

8744870

🔥 img border 제거

621de7b

Merge pull request #4 from wanted-pre-onboarding-frontend-12team/feat…

8817305

…ure/style

➕ recoil 전역 상태관리 의존성 패키지 설치

06602ff

youngminss and others added 18 commits November 4, 2022 00:00

✨ 차량 목록 데이터 필터링 조회 기능 구현(with. queryStringGenerator 함수)

db6ac5b

Merge pull request #23 from wanted-pre-onboarding-frontend-12team/fea…

4801bf5

…ture/car-list [#22] 차량 목록 조회 필터링 기능 추가 & 차량 목록 페이지 개선

💄 상세페이지 자동차 이미지 사이즈 조절

eb0051a

✨ 잘못된 상세페이지 연결을 처리하기 위한 에러바운더리 처리 코드 작성

5468186

Merge pull request #25 from wanted-pre-onboarding-frontend-12team/fea…

1d38f09

…ture/handleerror [#24] 차량 상세페이지 에러페이지 연결 구현

💄 에러 페이지 레이아웃 스타일 수정

f81c196

🚀 빌드 결과물 Redirect 인식을 위한 _redirects 파일 생성

c243b46

🚀 Base api url env 파일에서 동적으로 불러와서 사용(because. API Key 노출 방지)

174871c

🚀 workflow.yml 파일 추가

40000e1

Merge pull request #28 from wanted-pre-onboarding-frontend-12team/fea…

4744e1b

…ture/before-deploy [#26] 요구사항 1차 구현 완료 후, 디테일 수정

Merge pull request #29 from wanted-pre-onboarding-frontend-12team/fea…

f95c322

…ture/deploy [#27] workflow 파일 추가

Update README.md

69c0f6d

📚 과제 달성 사항 및 해결 방법 추가 및 링크 수정

6c9973b

📚 recoil 기술 스택 추가

7eb18dc

🚀 React-Helmet-Async open graph meta 데이터 변경

5dab263

Merge pull request #31 from wanted-pre-onboarding-frontend-12team/fea…

4f7f505

…ture/before-deploy [#30] CSR 환경에서 React-Helmet-Async 를 사용하면서 Open Graph 적용

🚀 검색엔진 크롤러 모든 페이지 접근 가능 robots.txt 설정

a14309e

➕ react-snap 의존성 패키지 pre-render 를 위해 설치

b527b7a

youngminss added the 🚀 Deploy 배포 관련 작업 label Nov 3, 2022

youngminss requested review from od-log, forest-6, kyunghee47, hopak-e and jong6598 November 3, 2022 19:21

youngminss self-assigned this Nov 3, 2022

jong6598 approved these changes Nov 3, 2022

View reviewed changes

od-log approved these changes Nov 3, 2022

View reviewed changes

forest-6 approved these changes Nov 3, 2022

View reviewed changes

youngminss merged commit e69b530 into main Nov 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Assignment 3 - Release 1.0.0 #32

Assignment 3 - Release 1.0.0 #32

youngminss commented Nov 3, 2022

netlify bot commented Nov 3, 2022 •

edited

od-log left a comment

forest-6 left a comment

Assignment 3 - Release 1.0.0 #32

Assignment 3 - Release 1.0.0 #32

Conversation

youngminss commented Nov 3, 2022

해결한 이슈

해결 방법

netlify bot commented Nov 3, 2022 • edited

✅ Deploy Preview for zesty-panda-9c4cf6 ready!

od-log left a comment

Choose a reason for hiding this comment

forest-6 left a comment

Choose a reason for hiding this comment

netlify bot commented Nov 3, 2022 •

edited