전체 글 (768) 썸네일형 리스트형 React Native cli Naver & Kakao 연동하기 네이버와 카카오를 각각 로그인하는 기능을 구현하였다. 이번엔 네이버와 카카오 같이 설정하는 방법에 대해서 진행하겠다. 반드시 Naver와 Kakao 연동하는 것을 선행적으로 진행하고 해당 글을 봐주시길 바랍니다. 작업 환경은 iOS ( Macbook )입니다. 환경 설치이미 Naver와 Kakao 로그인을 진행했다면 추가로 작업할 필요가 없습니다. 마지막으로 해당 글을 참고해서 연동을 하지 않으셨다면 돌아가서 연동 후 해당 글을 봐주시기 바랍니다. 각각 개발 환경 자체는 세팅하지 않고 바로 둘을 연동하기 위한 설정만 진행합니다. 환경 설정 1. LSApplicationQueriesSchemes 설정 LSApplicationQueriesSchemes naversearchapp naversear.. React Native cli Naver 로그인 연동하기 Expo가 아닌 React Native cli 환경에서 네이버 로그인을 구현하려고 한다. 카카오 로그인이 필요한 사람은 다음 링크를 참고해도 좋다. 작업 환경은 iOS ( Macbook ) 환경이다. 환경 설치첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 개발 환경도 함께 올린다. 공식 사이트에서 without Framework의 내용을 보고 설치를 진행하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 설치가 끝나면 네이버 로그인 라이브러리를 설치한다. yarn add @react-native-seoul/naver-login 설치가 끝나면 iOS 환경 설정을 위해서 pod 라이브러리를 설치해줘야 한다. npx pod-install .. React Native cli Kakao 로그인 연동하기 Expo가 아닌 React Native cli 환경에서 SNS로그인 기능을 구현해야하는데, 생각보다 다양한 오류들이 있고 한번에된 케이스가 없어서 다른 공유해주신 분들 처럼 나도 나의 방법을 공유하려고 한다. ( 누군가에게 도움이 되길... ) 작업 환경은 iOS( Macbook )으로 작업했다. 환경 설치 환경을 설치하는 것은 따로 올리지 않으려고 했지만 첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 올린다. 공식 사이트에서 without Framework에서 내용을 보고 설치하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 구성이 끝나면 바로 카카오 로그인 라이브러리를 설치하였다. yarn add @react-native-seou.. Next.js metadata ssr를 사용하는 이유 중 큰 부분으로 metadata를 꼽을 수 있을 것 같다. title부터 og태그까지 서버로부터 받아온 데이터를 metadata에 넣어주면서 동적으로 변경하기 위해서이다. Next.js에서는 아주 간단하게 이런 기능들을 제공하는데, 해당 기능은 Server Components에서만 지원하는 기능으로 metadata와 generateMetadata가 거기에 해당하는 속성들로 간단하게 metadata를 변경할 수 있다. metadatalayout나 page에서 export 하면 적용할 수 있다. export const metadata = { title: "...", description: "...",} 가장 기본적인 기능으로 페이지별로 정적으로 metadata를 설정할 수 있다.. Next.js Loading.js & Suspense Next.js에서 Loading.js 파일이나 Suspense에 대한 중요성을 크게 생각하지 않았다. 하지만 ssr의 특징을 테스트를 통해서 보니 확실하게 이해가 되었다. ssr의 장점이자 단점 사용자가 홈페이지를 접속했을 때 HTML엔 이미 데이터가 담긴 채로 전달되기 때문에 초기 렌더링 속도가 빠르다고 할 수 있다. ※ csr은? csr의 경우에는 홈페이지에 접속하면 뼈대만 있는 HTML 파일을 보내주고 이후 다시 서버로부터 데이터를 요청하기 때문에 초기 렌더링 속도가 느리다고 할 수 있다. 이러한 장점은 크롤러 봇이 HTML을 빠르게 읽을 수 있기 때문에 SEO에 좋게 작용될 수 있다. 하지만 서버 데이터를 ssr로 별다른 처리 없이 가지고 온다면 문제가 발생할 수 있다. 서버에서 넘어오는 데이.. Next.js Layout.js UI를 공유하기 위해서 사용하는 layout 파일이다. 부모 경로에서 만들어둔 layout 파일은 부모의 자식 경로에 모두 적용이 된다. /main/board 경로가 구성되어 있다고 했을 때, board 페이지가 렌더링되면 main의 layout이 렌더링되고board의 layout 마지막으로 page가 렌더링된다. root 경로에 있는 layout ( root layout ) 은 반드시 있어야 하며 html 태그나 body 태그를 포함해야 한다. 기본적으론 Server Component지만 'use client' 옵션을 준다면 Client Component로 구성될 수 있다. layout을 통해 현재 선택된 레이아웃의 경로를 알기 위해서는 useSelectedLayoutSegment 또는 useSe.. Next.js Atomic Design Pattern 그 모시깽한 모시깽 Next.js 환경으로 프로젝트를 진행할 때 React의 ssr버전이라고 생각했지만 생각보다 많은 고전을 경험하고 있다. not-found 처리부터 시작해서 client, server 컴포넌트의 모시깽한 관계... Atomic Design Pattern에 빠져있는 지금 Next.js에서 어떤 방법으로하면 잘 사용할 수 있을지 고민해봤다. 개발 환경 개요.글쓴이가 사용(?)하던 디자인 패턴은 Container Presenter 패턴을 시작으로 Compound 패턴 그리고 현재 Atomic 패턴으로 왔다. 초기 디자인 패턴이라는 것은 하나의 개발 환경에 무조건 하나의 디자인 패턴을 사용해야 한다는 강박이 있었다. 그러다보니 지금까지도 개발하면서 충분히 만족할 수 없는 개발 환경을 구성하게 된 것 같다. .. JavaScript defer & async html 파일에서 스크립트의 실행 순서는 위에서부터 읽어온다. 그렇기 때문에 대부분의 스크립트 파일을 body 제일 마지막에 넣어주는 방식으로 처리한다. // ... 이렇게 사용하는 이유는 script 태그에 있는 코드가 html 코드에 영향을 받아서 실행되기 때문에 먼저 script가 로드되고 html 코드가 불러와지면 오류가 발생할 수 있다. head에 있는 querySelector가 실행되는 시점에는 div.test가 로드되지 않았기 때문에 아무것도 불러오지 못한다. 그런 상태에서 ele 관련 속성을 사용하면 오류가 발생하는 것이다. 하지만 script 태그 내부에서 적어주는 방식이 아닌 파일을 가지고 오거나 외부 플러그인을 가지고 오는 경우 head에 작성해도 문제.. 이전 1 2 3 4 5 6 7 ··· 96 다음
