프로그래밍 공부 노트

카카오톡으로 특정 링크를 공유하면 사진처럼 썸네일과 해당 링크에대한 간단한 정보가 보여진다. 내가 만들고있는 프로젝트를 다른사람에게 공유할때도 Meta Tag, OG(Open Graph: 오픈 그래프) 관련 설정을하면 링크 공유시 보여질 썸네일과 내용을 설정할 수 있다. 맨처음부터 정확한 썸네일과 내용을 입력했다면 상관없지만 잘못된 이미지나 오타로 내용이 잘못 노출되는 경우 수정하고 재배포를 하여 수정이 가능하다. Line(라인)과 같은 채팅앱은 Meta Tag, OG(Open Graph: 오픈 그래프) 수정 후 다시 링크를 공유하면 변경된 내용으로 썸네일과 이미지가 제대로 표시되지만 KakaoTalk(카카오톡)의 경우에는 문제가 되는 사진과 내용을 그대로 계속 노출하는 문제가 발생했다. https://developers.kakao.com/tool/debugger/sharing 찾아보니 KakaoTalk(카카오톡)의 경우에는 1시간에서 24시간까지 카카오톡 채팅창 또는 카카오스토리에 공유된 소셜정보를 OG(Open Graph: 오픈 그래프) 프로토콜을 통해 파싱하고 캐시한다고 한다. 카카오 개발자센터로 들어가 해당 캐싱된 내용을 디버그로 확인하고 잘못된 정보가 캐싱되어있다면 캐싱된 정보를 초기화화하고 문제가 발생한 이미지나 내용을 수정한 후 링크를 다시 공유하면 수정된 정보가 제대로 적용되어 채팅창에서 공유가 되는것을 확인할 수 있다.

리액트에서 페이지 이동 즉, 라우터를 사용하기 위해서는 react-router-dom 모듈 패키지를 설치를 해야한다. 리액트 라우터 설치 $ npm install react-router-dom react-router 도 설치해야 하지만, react-router-dom 패키지 내부에 react-router가 함께 설치되기 때문에  react-router-dom만 설치하면 된다. 여기서 한가지 알아야 할 점은 리액트에서 라우터는 실제로 페이지가 바뀌는것이 아닌 가상으로 바뀌는것으로 웹브라우저가 해당 페이지가 변경되었는지 인식하지 못 할 수 있다. 페이지 이동을 위해서 사용되는 라우팅 방법에는 몇가지가 있다.  그 중에서 많이 사용되는  BrowserRouter, HashRouter, Route, Link 에 대해서 공부해 봤다. 라우팅을 사용하기 위해서는  import { BrowserRouter , HashRouter , Route , Link } from 'react-router-dom' ; 해당 코드를 import 해야한다. import 한것들에 대해서 간단히 말하면 BrowserRouter와 HashRouter는 라우터 기능을 사용하게 해주는 큰 틀과 같은 역할을 하며 Route는 경로를 지정하고 해당 경로에 대한 출력 화면 즉, 컴포넌트를 설정할 수 있다. 마지막으로 Link는 a 태그와 같이 설정한 경로에대한 컴포넌트를 불러오도록 도와준다. import React from 'react' import { BrowserRouter , HashRouter , Route , Link } from 'react-router-dom' ; import LoginPage from './components/LoginPage' ; import MainPage from './components/MainPage' ; import RegisterPage from './...