웹 개발/NextJS
-
[Next.js] kakao 인앱 user-agent 감지웹 개발/NextJS 2021. 12. 27. 13:24
1. 문제상황 카카오톡으로 전송된 링크를 인 앱으로 열었을 때 기능이 제대로 동작하지 않은 경우가 있다. 구글 로그인 기능도 마찬가지! 2. 해결방법 강제로 사이트를 외부 브라우저로 열도록 하는 방법도 있지만 안정적인 방법을 찾지 못했다. 사용자가 혼란스러울 경우를 대비해, 카카오톡 인앱 브라우저일 경우 사용자가 구글 로그인을 시도한다면 alert로 안내문구를 띄우기로 했다. 3. 해결 과정 _ 카카오톡 브라우저에 대한 user-agent 감지 - 카카오톡 인앱에는 userAgent에 KAKAOTALK 문구가 포함되어있다. Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0 KAKAOTALK - useEffect에서 navigator 객체를 통..
-
[NextJS] NextJS 특징 및 프로젝트 시작웹 개발/NextJS 2021. 4. 24. 19:03
NextJS의 특징 1) 컴파일과 번들링이 자동으로 된다. 2) 자동 리프레시 기능으로 수정하면 화면에 바로 반영된다. 3) 서버사이드 렌더링이 지원된다. 4) next.js의 페이지는 pages 폴더 내 js, jsx, ts, tsx 파일에서 내보내진 react component이다. pages/about.js -> /about로 접근가능 pages/posts/[id].js -> pages/posts/1, pages/posts/2... [dynamic routes] 5) next.js는 public이라는 폴더 아래에 정적 파일을 제공한다. 기본 URL ( /) 에서 시작하는 코드에서 내부 파일을 참조 할 수 있다. NextJS 프로젝트 생성 및 실행 1) nextJS 프로젝트 생성 npx create-..