본문 바로가기
728x90
728x90

경일/React4

[React-native/Expo]Expo에서 Kakao(카카오) 로그인 구현(Webview) 0. 목차 1. 개요 2. Front-end 3. Back-end 1. 개요 Dodol 프로젝트를 진행하면서 가장 많이 고생했던 부분인 카카오 로그인에 대해 포스팅 해보려 한다. 기존의 Web에서 구현 할 때는 Rest API를 이용해서, 어렵지 않게 구현 할 수 있었지만, Native 환경에서는 sdk를 이용하여 구현한다는 점을 깨달았다. 문제는 expo 환경에서는 위의 방식을 사용할 수가 없었다. 구글링을 통해 블로그 하나를 발견 할 수 있었고, 해당 블로그 내용과 직접 구현을 해보면서 알게된 조금 더 상세한 내용을 적어보려한다. 참고한 블로그 2. Front-end 위에서 expo환경에서는 sdk 사용이 불가능 하다고 적었다. 그리고 우리가 결국 사용한 방식은 기존에 사용했던 방식, 즉 rest A.. 2022. 6. 8.
[React] router & redux 0. 목차 1. 개요 2. router 3. redux 1. 개요 이전 node.js 프로젝트때 hash(#)를 이용해서 주소값을 변경하고 그에 따른 화면을 보여주는 작업을 했었다. hash 뒤의 값이 바뀔 때 마다, 그걸 확인하고 그에따른 화면을 만들어주는 작업을 했었는데, 리액트에서는 react-router-dom을 통해 이를 쉽게 구현할 수 있다. .. 진짜 쉬운지는 사실 잘 모르겠다.. 그리고 useContext 와 reducer 이용해 상태를 전역에서 관리할수 있게끔 해주는 작업을 redux 와 redux와react 를 연결해주는 라이브러리인 react-redux를 이용해서 해보려 한다. 2. router 우선 세팅을 해보자. $ npm install react-router-dom 그리고 사용할.. 2022. 5. 3.
[React] state, event, 조건에 따른 render 0. 목차 1. 개요 2. state 3. event 4. 조건에 따른 render 1. 개요 어제에 이어서 react 기초 개념에 대한 내용이다. state,event 그리고 ternary operator를 이용해 조건에 따른 render를 하는 방법에 대해 공부했다. 2. state 어제 공식문서를 보고 따라 쳐보긴 했지만 정확한 개념이 이해가 안돼서 state에 대한 내용을 정리하지 못했는데, 오늘 수업을 통해 state 와 조금 친해진 기분이다. 우선, state가 뭔지 정확하게 개념을 정리하는게 중요할 것 같다. react 에서 state란, component 안에 저장 되어 있는 데이터이다. 어제 정리했던 props 와는 분명한 차이가 있다. props는 부모 컴포넌트로 부터 자식 컴포넌트에게.. 2022. 4. 13.
[React] 첫걸음(JSX, Babel, Component, Props) 0. 목차 1. 개요 2. React 세팅 3. Component 4. Props 1. 개요 드디어 리액트다. 개발 공부를 시작하기 전에도 이미 몇번 들어본적 있고, 프론트 쪽에서 가장 핫한 기술 중 하나이다보니, 걱정도 되고, 설레기도 한다. 천천히 해보려고 한다. 우선 리액트가 뭐하는 앤지 알아봐야 할듯 하다. 리액트 공식 홈페이지에 들어가보면 리액트는 라이브러리 입니다 라고 소개가 되어있고, 공식홈페이지를 제외한 다른 곳에서는 리액트는 프레임워크 입니다 라고 소개가 되어있다. 음.. 사실 프레임워크라고 칭하는게 의미상 맞긴 한듯한데, 만든 사람들이 라이브러린데요 ㅡㅡ 라고 하는데 아님 프레임워크임 이라고 하는 것도 좀.. 애매하다. 결론은 뭐라 불러도 상관없을듯 하긴 하다. 프레임워크는 디렉토리 구.. 2022. 4. 13.
728x90
728x90