분류 전체보기

리액트 네이티브에 네이버 맵 넣기

리액트 네이티브에서 네이버 맵 사용 방법 react-native-nmap 을 통해 쉽게 네이버 맵을 React-Native 모바일 앱에 붙일 수 있다. 선행 조건 1: 네이버 클라우드 콘솔 API 키 발급 네이버 클라우드 콘솔에서 API 키를 발급받아야 한다. 클라이언트 API 키 입력하기 android/app/src/main/AndroidManifest.xml 파일에 위와 같이 키를 입력해주면 된다. 선행 조건 2: Gradle 의존성 추가 android/build.gradle 파일에 아래와 같은 의존성을 추가해주어야 한다. allprojects { repositories { // 다른 maven 의존성들 ... google() jcenter() // 네이버 지도 저장소 maven { url '..

자바스크립트 라이브러리 Axios 란?

Axios 란? Javascript 진영에서 사용되는 Promise를 기반으로 한 HTTP 클라이언트이다. Isomorphic 한 라이브러리이다. 간단하게, 서버 사이드와 클라이언트 사이드 두 곳에서 모두 정상적으로 작동한다. 서버 사이드에서는 node.js 의 네이티브 http 모듈을 사용한다. 클라이언트 사이드에서는 XMLHttpRequests API 를 사용한다. 특징 브라우저에서 XMLHttpRequests 를 사용한다. 서버에서 http 모듈을 사용한다. Promise API 를 지원한다. 요청, 응답 인터셉터를 지원한다. 요청, 응답 데이터 변환을 지원한다. 요청을 취소할 수 있다. JSON 데이터에 대한 자동 변환이 가능하다. 클라이언트 사이드에서 XSRF 에 대한 방어를 지원한다. 인터셉터..

React-Native 리덕스 리액트 실무 사용 패턴

초기 구성하기 스토어 만들기 루트 경로에 redux_store 디렉토리를 생성하고 index.ts 파일을 생성한다. import { configureStore } from "@reduxjs/toolkit"; import { useDispatch } from "react-redux"; import rootReducer from "./reducer"; const store = configureStore({ reducer: rootReducer, // flipper 와 연동하기 위해서 미들웨어를 사용 middleware: (getDefaultMiddleware) => { if (__DEV__) { const createDebugger = require("redux-flipper").default; return..

React Effect Hook 이란?

Effect Hook 이란? 함수형 컴포넌트에서 사이드 이펙트를 만들 수 있도록 해주는 리액트 훅이다. useEffect() 와 같은 함수를 이용해 만들 수 있다. 기본적으로 DOM 리랜더링이 일어날 때마다 사이드 이펙트가 작동하며 컴포넌트가 화면에서 사라지면 return 에 작성해둔 clean up 함수가 실행된다. 두번째 파라미터에 배열로 state 값의 인자를 주면, 해당 값이 바뀌어 리랜더링이 될 때만 사이드 이펙트가 동작한다. 기존 클래스형 컴포넌트 라이프 사이클에서 componentDidMount 가 가지던 효과와 비슷하다. Effect Hook 과거와 현재 비교하기 카운트가 증가할 때마다, useEffect() 의 사이드이펙트에 의해 title 도 함께 수정되는 예제를 작성해본 것이다. 예전..

Socket.io 소켓 IO 란?

Socket.io 란? 소켓통신을 잘 모른다면 이 게시글을 먼저 읽고 오자. 실시간 양방향 통신을 구현하기 위해 가장 많이 사용되는 라이브러리이다. 다양한 언어로 구현되어 있는 구현체가 있으며, 이름처럼 주로 웹소켓을 이용한 소켓 통신을 하지만, 웹브라우저 지원이 되지 않거나 다양한 네트워크 문제가 존재하는 경우 폴링 방식으로 통신하기도 한다. 공식문서 본문 중... Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server. Diagram of a communication between a server and a client. It is bui..

리액트 컴포넌트 밖 변수 선언의 의미 (Feat. 리액트에서 절대 하면 안되는 것 1가지)

리액트에서 절대 하면 안되는 것 리액트에서 절대 하면 안되는 것이 하나 있다. 컴포넌트 함수 밖에 let 으로 변수 선언을 하면 절대 안 된다. 잘못된 코드 // import 생략 ... let count = 1; function WrongComponent() { const [_, setCount] = useState(1); const onClick = useCallback(() => { setCount(count++); }, []); return count: {count}; } export default WrongComponent; 문제 생각해보기 위처럼 코드를 작성하면, 위 컴포넌트를 페이지당 1개 쓸 때는 크게 문제가 없을 수도 있지만, 컴포넌트 밖 중복되는 이름의 let 변수가 있을 때 해당 변수..

웹소켓 (WebSocket) 이란?

개요 웹소켓 통신이란 무엇인지 알아보자. 웹소켓 요약 웹 소켓은 사용자의 브라우저와 서버 간 양방향 인터렉티브 통신 세션을 열 수 있게 해주는 기술이다. 클라이언트는 실시간으로 서버에 메세지를 보낼 수 있고, 폴링방식 없이도 서버로 부터 이벤트에 기반한 (event-driven) 응답을 받을 수 있다. 웹소켓 연결은 유닉스 스타일의 소켓 표준과 비슷하지만, 둘은 연관성이 없다. 역사 웹소켓은 TCP 기반 소켓 API 를 대체할 목적으로 HTML5 사양에서 TCPConnection 으로 처음 참조되었다. 웹소켓과 HTTP 비교 웹 소켓 통신은 웹에서 가장 범용적으로 쓰이는 HTTP 와 주로 비교된다. HTTP 로도 풀링을 통해 소켓 통신과 비슷한 구현을 할 수 있지만, 그 성능이 현저히 떨어진다. 차이점 ..

리프레시 토큰 (refresh token) 을 사용하는 이유를 알아보자

개요 앱이나 웹에서 인증을 구현할 때 token 을 같이 보내는 방식으로 구현하는 경우가 많다. 단, 그럴 때 인증 토큰 외에 refresh token 이라는 것을 함께 보내기도 한다. 이렇게 하는 이유는 뭘까? 리프레시 토큰 (refresh token) 을 사용하는 이유 access token 의 취약점 access token 과 같은 모든 토큰에는 탈취라는 취약점이 존재한다. 탈취를 방지하기 위해 보통 access token 은 짧은 유효기간 (ex. 30분) 을 가지고 있다. 만일 유효기간이 존재하지 않는다면, 해커는 한번 탈취한 계정의 토큰을 평생 이용할 수 있을 것이다. 이렇게 토큰에 유효기간을 주는 것은 보안적으로는 장점이지만, 일반 이용자는 토큰이 만료될 때마다 다시 ID 와 패스워드를 인증..

리덕스 툴킷 (Redux toolkit) 이란?

리덕스 툴킷(Redux toolkit) 이란? 리덕스를 있는 그대로 활용하려면, 매우 많은 보일러 플레이트 코드를 작성해야 한다. 또한, 너무 자유도가 높아서 다양한 형식으로 사용할 수 있다. 리덕스 툴킷은 리덕스의 보일러 플레이트 코드를 줄이고 표준을 강제해 Best Practice 의 형태로 사용하기 위해 탄생한 라이브러리이다. 툴킷 없는 리덕스 사용의 복잡함과 툴킷의 필요성 리덕스 작성의 일반적인 사이클은 이렇다. 액션 정의 -> 액션 함수 정의 -> 액션의 구체적 행위인 리듀서 정의 위 세가지의 코드를 작성해야 1개의 액션이 생성되는 것이다. 또한 다양한 이유로 부가 라이브러리가 사용된다. 불변성을 지키기 위한 immer 라이브러리 store 값을 효율적으로 핸들링하고, 불필요한 렌더링을 막기 위..

리액트 네이티브(React Native) 에서 사용하는 스토리지 저장소 알아보기

리액트 네이티브(react native) 에서 사용하는 저장소의 종류 리액트 네이티브에서는 값을 저장하기 위해 Redux, React Native Config, Async Storage, Encrypted Storage 와 같은 저장소를 사용할 수 있다. Redux Javascript Redux 라이브러리에 의해 제공되는 저장소. 주로 현재 앱의 상태를 저장한다. 앱을 껐다 켜면 지워진다. 앱을 껐다 켜면 사라지기 때문에 어느정도 보안성도 있다. 데이터를 불러올 때의 성능은 가장 좋다. React Native Config Node.js 라이브러리에 의해 제공되는 저장소. .env 파일을 이용하여, 주로 API 서버 주소와 같은 설정 변수를 저장한다. 이 정보는 변하지 않고, 파일에 저장되기 때문에 당연히..

react-native-config 란? + 안드로이드 세팅 방법

react-native-config 란? react-native 에서 사용하는 설정 변수(Config variables)들을 관리할 수 있는 패키지이다. 사용법 프로젝트의 ROOT 경로에 설정 변수를 저장할 .env 파일을 생성한다. API_URL=http://10.0.2.2:3105 위는 백엔드 API 서버 주소를 설정 변수로 관리한다고 가정한 것이다. 안드로이드 에뮬레이터의 경우 localhost 대신 10.0.2.2 라는 주소를 사용하니 유의하자! IOS 에서는 다시 바꾸어주어야 한다. react-native-config 패키지를 설치한다. npm install react-native-config 소스코드 상에서 import 후 Config.변수명 으로 이용할 수 있다. // Axios call e..

리액트 네이티브 앱이 바로 꺼지거나, 로그가 남지 않을 때 디버깅 방법

문제 react-native 앱을 실행시켰을 때 다음과 같은 현상이 일어나며 앱이 작동하지 않는다. 앱이 바로 꺼진다. 아무런 로그 메세지도 보여주지 않으며 그냥 앱이 작동하지 않는다. 해결 android 의 경우에는 android studio 에서 제공하는 Logcat 을 이용하는 것이 좋다. ios 의 경우에는 xcode 를 이용하는 것이 좋다. 이 때, 계속 Metro 와 같은 react native 전용 도구로 디버깅을 하려고 하면 답이 안 나온다.