토피넛라떼조아

CSR 방식의 React, 한 장의 html 리액트는 CSR(client-side-rendering) 방식의 웹 렌더링이 이루어진다.SPA(single-page-application)는 UX에 도움이 되지만 SEO 관점에서는 단점 투성이다.말 그대로 단일 페이지이기 때문에 HTML 한 장만 존재하기 때문에 메인을 제외하고 갈아끼우는 페이지들은 검색 엔진에 적용시키기 어렵다. SPA === CSR 이라고는 할 수 없지만 결이 비슷하기 때문에 특수한 작업을 하지 않는다면 거의 맞는 말이 된다. react는 SPA이자 CSR이다.CSR이면 SEO 관리가 힘들다.  아무튼 cra로 생성한 react 프로젝트는 SPA + CSR이기 때문에 가장 상위의 index.html에서 head를 관리하게 된다.저번에 og를..

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

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에 등록된 환경변수를 넣어준다.   로컬에서 지도가 잘 동작하는 것을 볼 수 있다.(우측 상단 버튼은 새로고침을 위해 그냥 ..

프로젝트를 진행하면서 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으로 구현되어 있는데, 이건..

이번에는 생성했던 프로젝트를 Github 저장소에 올릴 것이다.  저번에 개발에 필요한 프로그램들을 설치하고, React Native 프로젝트를 생성하고 안드로이드 스튜디오의 가상 디바이스에 연결하는 것까지 해보았다. 근데 이 프로젝트를 로컬에 둔다면 다른 곳에서 개발을 이어서 할 수 없기 때문에 어느 곳에서나 같은 환경으로 개발을 할 수 있도록 github 저장소에 프로젝트를 올리려고 한다. 깃 설치 일단 깃을 설치해야 한다. 나는 git bash를 사용한다. 얘도 리눅스 명령어를 윈도우에서 쓸 수 있게 해준다.아래 링크에서 간단하게 windows 버전으로 설치하면 된다. Git git-scm.com설치가 끝나고 cmd에서 git만 쳐서 확인하면 이렇게 설명이 나오는데 그럼 잘 깔린 것이다.  새 저장..

예전에 싸피에서 프로젝트로 했던 안드로이드 애플리케이션을 앱 등록 직전에 싸피를 졸업하면서 흐지부지 된 적이 있었다. 앱스토어에 내 앱을 등록한 경험이 없다는 것이 조금 아쉬워서 오늘부터 아무 앱이나 만들어서 앱 스토어에 심사, 등록을 목표로 달려보려고 한다.  오늘은 그 첫 번째로 개발환경 설정에 대해 끄적여보겠다. 나는 React Native로 개발을 할 것이고 vscode와 android studio를 사용할 것이다. React Native 개발은 expo cli와 react-native-cli 개발로 나뉘는데, 예전에 정리해둔 내용으로 따로 포스팅을 하겠다. 그리고 난 IOS는 잠시 뒤로 미뤄두고 안드로이드 애플리케이션을 개발할 생각이다.일단 개발에 필요한 프로그램들을 모두 설치해주자. 필요한 파..