yunwon's tech blog

현재 프로젝트가 React Native 하이브리앱으로 제작되면서, 네이티브 코드를 만질 일이 많지는 않지만 후에 커스텀하기 편하도록 RN 코드와 AndroidㆍiOS 간 네이티브 모듈을 제작해보았다. 구현 방식 자체는 어렵지 않다 ! 해당 내용들은 React Native 공식 홈페이지에서 캘린더 모듈을 생성하는 예제를 토대로 작성해보았다. 천천히 알아보자 🚀 안드로이드 네이티브 모듈 (1) 파일 생성 네이티브 모듈을 생성하기 위해 우선 모듈 파일과 패키지 파일을 생성해주어야 한다. android/app/src/main/java/com/your-app-name/ folder 위 경로에 "..Module.java", "...Package.java" 의 형태로 파일을 생성한다. 아래의 예제는 캘린더 모듈을 생..

로그인 구현하는 김에 토큰의 종류도 함께 알아보자! 단순히 "로그인을 하면 발급받는 토큰을 저장해두고, 해당 토큰을 사용하여 사용자의 로그인 상태를 관리한다" 정도로만 알고 있기에 이번 기회에 더 정확히 알고 사용하자는 다짐 .. ✍ JWT JSON Web Token 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰을 의미한다. 자세히 말하면, JSON 포맷을 이용해 사용자에 대한 속성을 저장하는 Claim 기반의 웹 토큰이다. 이는 토큰 자체를 정보로 사용하는 self-contained 방식으로 정보를 안전하게 전달한다. JWT 정보를 request 에 담아 사용자 정보 열람, 수정 등 개인적인 작업을 수행할 수 있도록 한다. 💫 JWT 구조 Header : Signature 서명 값을 만드는..

1. Touchable (1) TouchableHighlight 터치가 되었을 때 색을 어둡게 하거나, underlayColor prop을 활용해 특정 색을 활성화시킨다. (2) TouchableOpacity 사용자가 터치했을 때 래핑된 뷰의 불투명도가 감소해 흐리게 표시된다. (3) TouchableNativeFeedback 터치했을 때 잔물결이 일어난다. 이런 잔물결을 사용자에게 피드백을 준다는 뜻으로 사용된다. (4) TouchableWithoutFeedback 터치했을 때 잔물결이 일어나지 않는다. - Press Event 리액트 네이티브에서 onClick 이벤트와 가장 비슷한 이벤트는 press 이벤트다. import React from 'react'; import { TouchableOpaci..

해당 게시글은 노마드코더의 "Export Default" 영상을 토대로 정리하여 작성하였다. ES 모듈인 import export 에 대해 자세히 다뤄보면서 코드도 깔끔하게 정리하고, 애플리케이션 로딩 속도도 향상시켜보자! Import & Export 간단하게 둘의 개념부터 집고 넘어가보자면, import 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용한다. export 문은 자바스크립트 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용한다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있다. (1) Named Exports 많은 것들을 export / import 하고 싶을 때, Named Exports 를 사용한다. 파일 혹은 모듈이 원하는 만큼 많은 수의 Named Exp..

리액트는 효율적인 UI 구현을 위한 라이브러리다. 이는 따로 내장 클래스가 존재하지 않기에, AJAX 를 구현하려면 자바스크립트 내장객체인 XMLRequest 를 사용하거나, 다른 HTTP Client 를 사용해야 한다. 리액트와 함께 쓰면 좋은 HTTP Client 라이브러리 중에서 노마드 코더 강의를 수강하면서 알게 된 Fetch API 와 axios 에 대해서 정리해보려 한다 💫 AJAX Asynchronous Javascript And XML 자바스크립의 라이브러리 중 하나 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능으로, 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를..

날씨 앱에 이어서 ToDo 앱을 제작하면서, 사용자가 작성한 일정들이 앱을 재시작했을 때에도 남아있기를 ! 하는 마음으로 찾게 된 AsyncStorage 안드로이드에서 SQLite 처럼 React Native 에 내장된 기본 데이터 저장소인 AsyncStorage 에 대해 알아보자 💾 React Native 에서 로컬 데이터베이스를 사용하기 위해서는 아래와 같이 2가지 방법이 있다. SQLite AsyncStorage SQLite 는 안드로이드에서 자주 다루어보았으니 AsyncStorage 에 대해 다뤄보자 💫 (추가로, realm 도 있지만 expo 에서 작동되지 않는다고 한다!) AsyncStorage AsyncStorage 는 React Native 를 위한 key-value 형식의 저장소이다. 이..

날씨 앱을 제작하면서, (사실 이전에도 한번 제작했었지만 👀) API KEY 는 잘 꼭 꼭 숨겨두어야 한다고 보았기에, React Native 앱 제작하면서도 API 연동하는 작업을 보자마자 키 숨기는 방법부터 찾아나섰다. 이틀동안 빨간 창 보게 한 dotenv 에 대해 . . 알아보자 ! 😡 ENV 웹, 앱 개발을 하다보면 API KEY 뿐만 아니라 포트, DB 관련 정보, 등 개발자만 알아야 하는 값, 즉 Github 과 같은 오픈 소스에 올리면 안 되는 값들이 있다. 그 때 그 값들을 저장해 놓는 파일을 .env 에 넣어둔다. .env (environment) 에는 이름에서 알 수 있듯이, 환경 변수들이 들어간다. 여기서 환경변수는 특정 process를 위한 key-value 형태의 변수이다. No..

애플리케이션 만들 때 한번씩은 만든다는 날씨 앱 🌞 ! React Native 학습 중에도 빠지지 않고 등장했다. 늘 그렇듯 OpenWeather API 를 사용하면서, 사용자의 위치를 토대로 날씨 정보를 불러왔다. 여기서 " 사용자의 위치 " 를 받기 위해 expo 가 만든 Location API 를 활용했다. 나름 날씨 앱을 제작하면서 복잡한 (?) 부분이었기에 짚고 넘어가고자 한다. Geolocation 본격적으로 expo 에서 제공하는 location API 에 대해 알아보기 전에, React Native 에서 제공된 (현재는 커뮤니티가 관리하는) geolocation 에 대해 알아보자. 사용하는 방법으로는 아래 코드 블럭과 같이 직접 설치해주거나, navigator.geolocation 을 통해..

노마드 코더 강의를 수강하면서 영화 웹을 제작하였다. 영화 API 를 받아오면서 안드로이드에서도 그랬듯이, 비동기 처리 방식으로 영화 데이터를 받아왔다. 프로젝트 내에서는 Async 와 Await 를 사용하였지만, 비동기 처리 방식에 대해 검색해보니 이전에는 "Promise" 방식을 사용하였다 한다. 하나씩 차근차근 알아보자. 🎢 Promise Promise 는 자바스크립트에서 비동기 처리에 사용되는 객체이다. 여기서 말하는 비동기 처리 방식이란, 코드 실행 후 결과를 기다리지 않고 다음 코드를 계속 진행하는 처리 방식을 이야기한다. 기본적으로 API 를 만들 때 아래와 같이 코드를 작성한다. app.get('/product', (response) => { / ... / }) 하지만 여기서 데이터를 받아..

React 는 페이스북이 만든 사용자 UI 구축을 위한 자바스크립트 라이브러리이다. 하나의 단일 url 을 가지고 SPA(Single Page Application) 으로 사이트를 표현하는 것을 가능케하는 프레임워크이다. 리액트는 대표적으로 아래의 3가지 특징을 가진다. JSX 문법 ✔ Component 기반 Virtual DOM 이 중 JSX 에 대해 자세히 살펴보자. JSX 란? JSX 는 자바스크립트를 홗장한 것으로 리액트에서 특화된 개념이으로, " HTML 문법을 자바스크립트 코드 내부에 쓴 것 "을 말한다. JSX는 리액트 엘리먼트(element)를 생성한다. 리액트에서 JSX 사용이 필수는 아니지만 자바스크립트 코드 안에서 UI 작업을 할 때, 이를 HTML 처럼 표현할 수 있기 때문에 용이한..