프론트엔드4 0055. 실전 FE 개발 배우기12 - 웹소켓 연결하기, 실시간 데이터 받기, 로그아웃(Bearer 토큰) 섹션 2. 서버 API 연동하기 8강. 웹소켓 연결하기 1) 웹소켓 기반 라이브러리 요청-응답 방식이 아니라 실시간 양방향 통신 가능 기존 : app → axios → 응답 소켓 : 한 번만 연결을 맺으면 연결이 끊어지기 전까지 실시간으로 가능. 서버에서 먼저 보내줄 수도 있다. 대신, 배터리 소모가 있다. npm i socket.io-client 웹소켓 라이브러리 설치 2) Custom hooks 자주 쓰는 것은 hook으로 만든다. Custom hook에 익숙해져야 한다. import { io, Socket } from 'socket.io-client'; import Config from 'react-native-config'; let socket: Socket | undefined; const us.. 2024. 2. 7. 0054. 실전 FE 개발 배우기11 - accessToken과 refreshToken, EncryptedStorage와 AsyncStorage 사용하기 섹션 2. 서버 API와 연동하기 7강. accessToken과 refreshToken 로그인을 하고 나면 서버개발자가 프론트 개발자에게 name, email, accessToken, refreshToken 등을 줄 것이다. dispatch( userSlice.actions.setUser({ name: response.data.data.name, email: response.data.data.email, accessToken: response.data.data.accessToken, refreshToken: response.data.data.refreshToken, }), ); 위의 규격대로 data를 받기로 한 약속인 것이다. 통신할 때 token을 넣어 줘야 서버가 내가 누군지를 알 수 있다. App.. 2024. 2. 6. 0052. 실전 FE 개발 배우기9 - 서버 API 연동, axios로 서버에 요청, back-end 서버 켜기, 로딩창, react-native-config 섹션 2. 서버 API와 연동하기 1강. axios로 서버에 요청 보내기 1) back-end 서버 켜기 back-end와 연결함 cd C:\Users\fortr\food-delivery-app-master\food-delivery-app-master\back back-end 서버가 있는 폴더로 이동 npm i 필요한 패키지 설치 npm start 이러면 서버에 연결된 것 2) axios 설치 npm i axios axios 설치 후에는 npm package기 때문에 run-android를 다시 해야 한다. 서버 요청은 요즘 axios는 좀 덜 쓰는 추세이다. (ky나 got으로 넘어가는 추세이나 react-native와 호환 여부가 불투명해서 axios가 안전하다.) 장점 : axios 하나만 써도 클.. 2024. 2. 5. 0014. Front-end 공부하기5 - State and Lifecycle(★중요★), React Developer Tools 섹션 6. State and Lifecycle 1강. State와 Lifecycle의 정의 State는 리액트의 핵심 개념, 완벽하게 이해될 때까지 들을 것 1) State State : 상태 = 리액트 Component의 상태 = 리액트 Component의 데이터 = 리액트 Component의 변경 가능한 데이터 개발자가 정의한다. 주의점! : 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함! 관련 없는 값까지 state에 포함시키면 불필요한 경우에 컴포넌트가 다시 렌더링 되어 성능을 저하시킬 수 있음 state는 따로 복잡한 형태가 있는 것이 아니라 그냥 하나의 JavaScript 객체이다. 이렇게 정의된 state는 정의 이후 일반적인 JavaScript 변수를 다루듯이 직접 수정.. 2023. 12. 15. 이전 1 다음
