토피넛라떼조아

[Open Graph] 메타 태그로 오픈 그래프 사용하기 (feat. 카카오톡 링크 공유 시 미리보기)

내가 만들고 있는 모바일 청첩장을 카톡에 보내보았다.너무 단출하게 나오고 Summary도 마음에 들지 않았다. 그래서 어떻게 하면 저걸 이쁘게 꾸밀 수 있을 지 찾아보았다.답은 오픈 그래프(Open Graph)였다. SEO 관련한 자료에서 많이 보이던 놈인데 이게 여기서 쓰이는 건지 이번에 처음 알게 되었다. 갈 길이 멀다.  오픈 그래프는 카톡과 같은 SNS에서 웹 사이트의 컨텐츠를 요약해서 표시하는 정보이다. SNS에서 링크를 공유하게 되면 해당 링크에 포함된 오픈 그래프를 나타내 준다.심지어 오픈 그래프 형식도 플랫폼마다 달라서 본인이 원하는 곳에 적용하려면 이곳저곳 찾아봐야 한다. 아무튼 나는 카톡에 링크를 넣었을 떄 미리보기가 제대로 나오길 원했기에 관련해서 조금 알아보았다. 적용은 아주 간단하..

vercel에 한글 도메인 적용하기

vercel에서는 기본적으로 한글 도메인을 지원하지 않는다.  한글 도메인 퓨니코드 변환기를 치면 여러가지가 나온다. 이렇게 유니코드를 퓨니코드로 바꾼 뒤에 적용하면 vercel에서도 한글 도메인을 사용할 수 있다. 등록이 잘 되었다. 주소를 입력하여 들어가면 내가 올린 프로젝트가 잘 보인다. 혹시 구입한 한글 도메인을 vercel에서 사용하지 못하고 있는 분들에게 도움이 되길 바란다.

모바일 웹에서 모달을 사용하면서 마주했던 문제에 대해 정리를 해두려 한다.두 가지 문제가 있었는데, 모달을 띄웠을 때 뒷배경이 스크롤 되는 문제와 뒤로 가기 시 브라우저가 닫혀버리는 문제이다. 스크롤 동작 막기뒷 배경이 스클로 되는 문제는 웹에서도 자주 다루기 때문에 간단하게 넘어가겠다. 이벤트 버블링으로 인해 스크롤 이벤트가 body까지 전달되어 스크롤이 되는 현상으로 body에서 이를 제어해주기만 하면 된다.{isOpen && } 예를 들어 open state를 통해 렌더되는 모달이 있다 가정한다. (handleModalOpen은 setOpen 제어 함수이다.)open이 true가 될 때 body의 스크롤 동작을 막아주고, false가 될 때 다시 열어주면 될 것 같다. useEffect(() => ..

카카오 맵을 쓰면서 커스텀해야 할 부분이 너무 많은 것 같다. 내가 고생했던 부분과 해결방법들에 대해 공유해보려한다. 난 간단한 기능만 넣을 생각이었는데 구현은 그리 간단하지 않았다.   일단 내가 원하는 기능을 정리하면 이랬다.내가 원하는 장소를 지도에 포함시키고, 마커로 표시한다.마커 위에 인포를 붙인다.모바일에서 동작하길 기대하기 때문에 맵의 이동은 막는다.(static형식의 지도)대신 맵 영역에서 기존 스와이프 동작은 유지한다.마커와 인포에 클릭 이벤트를 붙인다. 여기까지 봤을 때 굉장히 심플하다. 그냥 맵 넣고 공식 문서에서 제공된 소스로 뚝딱 해결할 줄 알았다. 난 리액트를 사용하여 개발했기 때문에 react-kakao-map-sdk를 사용했다." data-og-host="react-kakao..

이번에 내 모바일 청첩장을 React로 간단하게 웹을 제작하고 있다.그 중에 식장 지도를 카카오 맵을 이용해서 넣고 있었는데, 여기 사용되는 key를 env에 숨겨서 올렸다. // .envREACT_APP_KAKAOMAP_KEY={my kakao api key} 이렇게 루트에 .env를 만들어서 키를 넣어주고 .gitignore에 .env를 포함시켰다. 사실 api key는 스크립트에 들어가는 순간 노출될 수 밖에 없지만 이렇게 숨기는 게 암묵적인 룰이라 나도 넣어 봤다. // imdex.htmlhead 스크립트에 %REACT_APP_KAKAOMAP_KEY% 이렇게 넣어주면 .env에 등록된 환경변수를 넣어준다.   로컬에서 지도가 잘 동작하는 것을 볼 수 있다.(우측 상단 버튼은 새로고침을 위해 그냥 ..

오늘은 구간합을 구할 때 효율적인 세그먼트 트리에 대해 알아보겠다. 1차원 배열로 표현이 가능해서 생각보다 간단하게 구현할 수 있고, 단계별로 이해하면 크게 어렵지 않게 이해할 수 있다. 모든 알고리즘이나 자료구조는 코드를 암기하는 것 보다 구조와 동작을 이해하는 것이 더 중요하다. 세그먼트 트리를 한 단계씩 파헤쳐보자. 세그먼트 트리 (Segment Tree)? 일단 세그먼트 트리를 먼저 알아보자.세그먼트 트리는 특정 구간의 합, 곱과 같은 연산을 포함하여 최댓값, 최솟값을 구하는 용도로 사용하는 자료구조이다. 비슷한 자료구조로 구간 합과 비슷하지만 시간복잡도도 우수하고 업데이트에도 용이하다. 세그먼트 트리를 이해하기 쉽게 몇 가지 특징을 먼저 알아보자. 그 다음 세그먼트 트리로 구간합을 구해보자.특징..

지난 포스팅을 통해 DFS를 알아보았으니 형제 탐색법인 BFS를 알아보겠다.BFS 또한 DFS처럼 트리나 그래프를 순회하는 기본 방법 중 하나이다. BFS (Breadth First Search)? BFS는 너비 우선 탐색이다. 시작 노드부터 가까운 노드들을 모두 살펴본 뒤 그 다음 노드들을 탐색한다. 단순하게 생각해서 파원에서 파장이 퍼져나가는 모양을 생각하면 얼추 비슷하다. 특징과 장단점- 연결된 모든 노드를 탐색할 수 있다.- 방문 노드를 기억하고 재방문하지 않는다.- DFS가 스택을 활용하는 것과 다르게 보통 큐를 활용한다.- 최단경로 탐색에 적절하다. 해를 찾고나면 다음 해는 찾을 필요가 없기 때문이다.- 논리 구조가 간단하다.- 해가 깊은 곳에 있으면 탐색에 오랜 시간이 걸릴 수 있다.  BF..

알고리즘 풀이를 놓은 지 시간이 좀 흐르니까 자신만만하던 문제들도 쉽게 풀지 못하는 지경에 이르렀다. 아무래도 정리를 하면서 이해를 하는 시간을 한 번 더 가져야 할 것 같아서 문제 풀이에 기본이 되는 알고리즘들을 다시 코드를 작성하면서 복기해보려고 한다.  자 가장 쉬운 그래프 탐색법인 DFS부터 알아보자수많은 트리, 그래프를 순회하는 방법 중 기본이 되는 알고리즘이다. DFS (Depth First Search)? 이름부터 깊이를 우선하여 서치한다는 의미를 담고 있다. 시작부터 끝까지 '깊이'를 우선하여 탐색한다. 처음에는 깊이를 우선한다는 게 이해가 잘 되지 않을 수 있다. 쉽게 이해하기 위해 미로를 탐험한다고 가정해보자. 무수히 많은 갈림길이 존재할 것이다. 이런 미로를 모두 정복하기 위해 한 방..

프로젝트를 진행하면서 import 구문이 불필요하게 길어지는 것 같아서 자주 불리는 디렉터리 주소를 alias로 설정해서 사용하기로 결정했다.  코드가 조금 더 깔끔해지길 바라면서 RN 프로젝트에서 path alias 설정하는 방법에 대해서 알아보았다.일단 필요한 라이브러리를 받아준다.npm install -D babel-plugin-module-resolver 내 프로젝트 구조는 아래와 같다....src ㅏcomonents ㅏscreens ㅏhooks ㅏ... ㄴutils ㄴ styles.tsApp.tsx.eslint.ts.gitignore.yarnrc.yml.prettierrc.js babel.config.jspackage.jsonpackage-lock.jsonREADME.mdtsconfig.j..

이제 본격적으로 프로젝트를 진행하여야 한다. 먼저 구조를 살펴보고 개발에 필요한 라이브러리를 프로젝트에 설치하려고 한다. 내 입맛대로 컴포넌트 구조도 미리 잡아둘거다. 기본 구조 내 맘대로 다듬기 일단 react-native init으로 프로젝트를 만들면 다음과 같은 기본 구조를 가지고 있다. 리액트와 흡사한 것 같다. 다른 점으로 android와 ios 폴더가 생성되는데, 이는 각 OS에 맞게 빌드하거나 배포할 때 쓰인다. 나는 가볍게 무시해주고 바깥에서 작업을 할거다. 가장 처음 시작되는 파일은 index.js이다. 여기서 App.tsx 컴포넌트를 렌더링 해준다. App.tsx는 이렇게 생겼다. 실행했을 때 에뮬레이터 첫 화면에 보이는 코드이다. 스타일이 StyleSheet으로 구현되어 있는데, 이건..