단순하게 서버에게서 데이터를 요청하고 요청 받는 것은 React Query로 간단하게 구현할 수 있다.  이제 변화가 필요하다. 단순하게 서버에서 데이터를 받는것 뿐 아니라 네트워크 성능, 렌더링 부분도 신경을 써야겠다는 생각이 들었다.  Request Waterfalls요청 폭포수, 앞선 요청이 완료되어야지 다음 요청을 진행할 수 있는 것을 말한다. | -> Markup | -> JS | -> CSS// ... 다음과 같이 React 같은 코드에서는 Markup ( HTML 로드 )가 되고 JS 로드를 하고 CSS 같은 부분들이 로드가 이루어 진다. 해당 플로우 자체는 HTML 파일에서 JS 파일을 불러와야지 전체적인 코드가 실행되고 그 과정에서 root div에서 렌더링이발생하면서 CSS..

끝이 다가오고 있다. 네이버, 카카오, 구글을 구현하고 이번엔 애플 로그인을 구현할 계획이다.  작업 환경은 iOS ( Macbook )이다.  환경 설정 환경을 설치하는 것은 따로 올리지 않으려고 했지만 첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 올린다.공식 사이트에서 without Framework에서 내용을 보고 설치하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 구성이 끝나면 바로 애플 로그인 라이브러리를 설치하였다. yarn add @invertase/react-native-apple-authentication 설치가 끝나면 iOS환경에서도 로그인이 필요하므로 npx pod-install 명령어를 바로 사용해서 pod 라..

어드민 페이지를 개발할 때 가장 많이 사용하는 요소가 아마 Table일 것 같다. 그동안은 table을 table 태그를 사용해서 개발하지 않았다. 테두리 관련된 작업이나, 요소를 구현할 때 colspan 등을 사용하는 방법보단 div 태그를 활용해서 만드는게 더 간단하다고 생각했기 때문이다.  어드민 한정된 요소라면 상관없을텐데, 클라이언트 페이지에서 표를 사용하는 경우도 있을텐데 시맨틱한 구조로 개발하는 것이 SEO 측면에서도 좋을 것이다. 또한 rowspan, colspan을 사용할 때도 div로 만든다면 flex 옵션 등을 사용해서 추가 설정을 줘야한다.  이렇다보니 테이블을 어떤 방식으로 만드는 것이 좋을지 여러가지 생각을 해봤다. 어쩌면 이런 고민이 의미가 없을 수 있는게 antd나 mater..

Expo가 아닌 React Native cli 환경에서 네이버 구글 로그인을 구현하려고 한다. 카카오 로그인 또는 네이버 로그인이 필요한 분은 각 링크를 참고해도 좋다.  작업 환경은 iOS ( Macbook )으로 작업했다.  환경 설치 환경을 통일하면 아무래도 오류가 줄어들 것이기 때문에 시작부터 함께하자. 공식 사이트의 without Framework에서 내용을 보고 설치하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 구성이 끝나면 구글 로그인 라이브러리를 설치한다. yarn add @react-native-google-signin/google-signin 설치가 끝나면 iOS 환경 설정을 위해서 pod 라이브러리를 설치한다. npx p..

네이버와 카카오를 각각 로그인하는 기능을 구현하였다. 이번엔 네이버와 카카오 같이 설정하는 방법에 대해서 진행하겠다.  반드시 Naver와 Kakao 연동하는 것을 선행적으로 진행하고 해당 글을 봐주시길 바랍니다.  작업 환경은 iOS ( Macbook )입니다.  환경 설치이미 Naver와 Kakao 로그인을 진행했다면 추가로 작업할 필요가 없습니다. 마지막으로 해당 글을 참고해서 연동을 하지 않으셨다면 돌아가서 연동 후 해당 글을 봐주시기 바랍니다.  각각 개발 환경 자체는 세팅하지 않고 바로 둘을 연동하기 위한 설정만 진행합니다.  환경 설정 1. LSApplicationQueriesSchemes 설정 LSApplicationQueriesSchemes naversearchapp naversear..

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 ..

Expo가 아닌 React Native cli 환경에서 SNS로그인 기능을 구현해야하는데, 생각보다 다양한 오류들이 있고 한번에된 케이스가 없어서 다른 공유해주신 분들 처럼 나도 나의 방법을 공유하려고 한다. ( 누군가에게 도움이 되길... )  작업 환경은 iOS( Macbook )으로 작업했다. 환경 설치 환경을 설치하는 것은 따로 올리지 않으려고 했지만 첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 올린다. 공식 사이트에서 without Framework에서 내용을 보고 설치하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 구성이 끝나면 바로 카카오 로그인 라이브러리를 설치하였다. yarn add @react-native-seou..

ssr를 사용하는 이유 중 큰 부분으로 metadata를 꼽을 수 있을 것 같다. title부터 og태그까지 서버로부터 받아온 데이터를 metadata에 넣어주면서 동적으로 변경하기 위해서이다.  Next.js에서는 아주 간단하게 이런 기능들을 제공하는데, 해당 기능은 Server Components에서만 지원하는 기능으로 metadata와 generateMetadata가 거기에 해당하는 속성들로 간단하게 metadata를 변경할 수 있다.  metadatalayout나 page에서 export 하면 적용할 수 있다. export const metadata = { title: "...", description: "...",} 가장 기본적인 기능으로 페이지별로 정적으로 metadata를 설정할 수 있다..