전체 글
-
<TIL> axios 사용 중에 있었던 일- Trello(6)TIL 2020. 3. 23. 21:13
서버와 통신을 할 때에는 유저 인증 해주는 token을 넣는 Authorization (headers 안에 위치해있다.)가 있습니다. 웹으로 할 때에는 cookie에 token을 넣어주고 요청을 할 때 headers에 withCredentials 옵션을 true로 설정하면 cookie안에 들어있는 token의 값이 자동으로 Authorization안에 넣어서 서버에 요청을 보냈습니다. 모바일에서는 서버와 통신을 할 때에는 token같은 값을 AsyncStorage에 넣습니다. 그 token은 요청을 할때마다 headers에 Authorization을 추가해서 token값을 넣어줘야 하는데 이번에 요청할 때 마다 그 값을 읽지 못하는 에러가 발생하였습니다. 그래서 서버에서 확인해보니 클라이언트 받은 헤더안..
-
<TIL> React-Native 로그인 플로우, 중첩 router - Trello(5)TIL 2020. 3. 20. 21:46
1. 로그인 플로우 App.js에서 AsyncSotrage에 저장된 토큰이 있는지 확인 로그인 화면 거치지 않고 로그인, 회원가입 할 수 있는 바로 메인 화면으로 이동 페이지로 이동 맨 상위 페이지 App.js import React, { Component } from 'react'; import 'react-native-gesture-handler'; import { AsyncStorage } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { createDrawerNavig..
-
<TIL> 로그인, 회원가입 화면 구현 - Trello(4)TIL 2020. 3. 19. 23:37
오늘은 로그인 , 회원가입 페이지를 구현하다가 새로 알게 된 것들에 대해 작성을 하겠습니다. 1. 에뮬레이터에서는 컴퓨터 로컬에서 돌리는 서버와 연결하려면 (127.0.0.1) IP주소말고 (10.0.2.2)로 변경해야 합니다. 처음에는 http://localhost:port로 연결을 시도 했지만 NetWork Error만 발생하고 서버에는 들어가지도 않는 상황이 발생하였습니다. 이러한 경우에는 IP 주소를 10.0.2.2 로 변경하여 http://10.0.2.2:port로 연결하면 작동이 됩니다. 관려 stackover flow : https://stackoverflow.com/questions/5528850/how-do-you-connect-localhost-in-the-android-emulator..
-
<TIL> 로그인 화면 만들기 - Trello(3)카테고리 없음 2020. 3. 16. 22:00
로그인하지 않은 상태에서 어플리케이션에 들어가면 맨 처음으로 보이는 화면은 총 3개 입니다. 로그인 , 회원가입 페이지를 분기 처리하는 처음화면 로그인 화면 회원가입 화면 1. 첫 화면 맨 상단에 이름 밑에는 로그인 화면 이동 버튼과 회원 가입 이동 버튼이 필요합니다. 각자 다른 component를 이루고 있기 때문에 App .js에서 router를 구현하였습니다. import React, { Component } from 'react'; import 'react-native-gesture-handler'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-na..
-
<TIL> module 설정 - Trello(2)TIL 2020. 3. 14. 20:52
6버전 이전에는 install을 하면 " react native link" 명령어를 사용하여 연결해야 했지만 6버전 이후부터는 link를 안해줘도 자동으로 link가 된다! 1. 사용 해야 할 router moudle npm install react-native-gesture-handler npm install react-native-safe-area-context npm install @react-native-community/masked-view npm install @react-navigation/drawer npm install @react-navigation/bottom-tabs npm install @react-navigation/native npm install @react-navigatio..
-
<TIL> react-native emulator에 화면 띄우기 - Trello(1)TIL 2020. 3. 14. 01:32
1. react-native cli , expo cli 어떤 것을...? 간단한 어플리케이션을 만들 예정이라 무거운 expo보다는 react-native cli를 사용하기로 하였다. 2. hello world 출력해보기 안드로이드 에뮽레이터로 창 띄우는데 이틀 걸렸다..ㅜ react-native에 나와 있는 방식과 거의 동일하게 진행하였습니다. (mac 환경에서 android 만드는 방법을 사용하였습니다.) 1. 기본적으로 설치해야 할 것 일단 homebrew를 설치하였습니다. => https://brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew.sh brew 설치가 완료되면 밑의 명령어를 실행하여 node와 ..
-
axios 와 fetch의 다른 점자료 정리 2020. 2. 29. 16:19
fetch 보다 axios가 사용이 더 간편하다고 듣게 되었고 이번에 한 번 사용해보기로 하면서 다른 점을 찾아보았습니다. fetch랑 axios랑 다른 점 내장함수 fetch와 모듈 axios fetch는 내장되어 있는 기본 함수이기 때문에 따로 모듈을 설치할 필요가 없었다 . 하지만 axios는 모듈을 설치해서 사용하는 곳 마다 불러 와야 했다. json으로 변환 fetch에서 get을 통하여 데이터를 가져오게 된다면 json 형식으로 데이터를 서버에서 보내기 때문에 가져온 데이터는 json을 풀어줘야 한다.하지만 axios를 통해 데이터를 가져오게 된다면 따로 json으로 묶여진 데이터를 변환해주지 않아도 된다. 왜냐하면 axios는 알아서 다 풍어주기 때문이다. 메소드를 쓰는 위치 ..
-
Sequelize 1 : N 관계 설정, Cascade 적용자료 정리 2020. 2. 26. 16:18
db에 테이블사이 관계가 이어져 있는 경우가 있을 수 있습니다. 이 데이터베이스의 테이블 같은 경우에는 users 테이블은 boards 테이블과 1 : N의 관계를 가지고 있고 boards는 containers와 1 : N, containers와 cards는 1 : N의 관계를 가지고 있습니다. 이러한 관계를 가진 테이블은 hasonMany container.associate = function (models) { container.belongsTo(models.board, { foreignKey: 'boardId', targetKey: 'id', onDelete: 'cascade' }); //하위 테이블의 옵션에 속성을 넣어 줘야 한다. container.hasMany(models.card, { for..