yunwon's tech blog

애플리케이션 만들 때 한번씩은 만든다는 날씨 앱 🌞 ! 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 처럼 표현할 수 있기 때문에 용이한..

Hook 은 React 버전 16.8 부터 새로 추가된 React 요소이다. Hook을 이용하여 기존 클래스 바탕의 코드를 작성할 필요 없이, state 값과 여러 React 의 기능을 사용할 수 있다. 이에 대해 차근차근 알아보자. 🌊 등장배경 React Hooks 는 2018년 React Conf 에서 처음 발표되었다. 발표 당시 리액트가 겪는 가장 큰 3가지 문제점은 다음과 같다. Wrapping Hell Too many Components Class Component 첫번째 문제점인 Wrapping Hall 은 High Order Component 나 Children props 를 통해 연결되는 컴포넌트 구조들로 인해 너무 많은 계층이 생기고, 그로 인해 컴포넌트 관리가 점점 어려워진 것을 말한다..

리액트 네이티브 앱에서 사용할 수 있는 유용한 UI 컴포넌트 라이브러리들 중에서, 현재 진행 중인 프로젝트에서 사용되는 React Native Paper 에 대해서 짧막하게 정리하는 시간을 가지려 한다. 설명에 들어가기에 앞서 다양한 컴포넌트 라이브러리들 중 현 트랜드를 잘 반영하여 보여주는 이미지를 가져왔다. 위 통계 자료에서 볼 수 있듯이 근 1년간 React Native Paper 는 꾸준한 상승세를 보여왔다. 리액트 네이티브를 위한 디자인 라이브러리로 공식 문서도 잘 정리되어있고, 사용자의 수도 많아서 사용에 무리는 없을 듯 하다. React Native Paper 본격적으로 알아보자. 이는 Material Design 가이드 라인을 따르는 크로스 플랫폼 UI 컴포넌트 라이브러리다. 번들 크기를 ..

React Native 코드 분석을 본격적으로 시작하면서 처음 마주한 WebView 에 대해서 조사하면서 배워간 내용들에 대해 정리해려 한다 . . 🐱‍🏍 우선 WebView 자체가 ReactNative 에서 제공하는 것이 아니라, react-native-webview 패키지에서 제공된다 ! 하나씩 차근차근 알아보자 WebView 란? 이미 존재하는 웹 페이지를 앱으로 옮겨 보여주는 것 WebView 설치하기 WebView 를 사용하기 위해서는 WebView 를 import 해주어야 한다. 기존에는 React Native core 에 있었지만, React Natvie 가 core 에서 빼버렸기에 따로 설치를 해주어야 한다. 프로젝트 디렉토리 내에서 아래 두 명령어를 실행시켜주면 제대로 설치된다. $ np..

이전 글에서 다룬 네트워크 오류 해결을 위해 삽질한 과정 중 하나 cmd 창에 명령어를 치면서 Window 상에서는 내 뜻대로 동작하지 않는 것을 뒤늦게서야 알아채고 설치한 choco 🍫 에 대한 기록! 패키지를 설치 / 관리하는 툴을 운영체제별로 정리하면 Mac : Homebrew Ubuntu : apt-get CentOS : yum 윈도우는 위와 같은 역할로 choco 가 존재한다! choco 를 알기 전까지는 아래와 같은 오류를 반복해 마주쳤다. /* cmd */ 'sudo'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. /* powershell */ sudo : 'sudo' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인..

리액트 네이티브 프로젝트 중 마주한 위대한 오류에 대한 글이기에 검은 로고로 준비해보았다 . . 보여져야 하는 페이지가 보이지 않는 원인이 리액트 자체의 문제인줄 알고 명령어들과 삽질했던 시간들에 대한 기록 . . 😈 장장 이틀 동안 내 눈앞에 보였던 오류 (이틀이라 하니 짧아보이지만 정말 이천년같이 길었다) localhost:PORT/net::ERR_CONNECTION_REFUSED WebView 내에 넣어둔 url 에 접속 시에 접속이 거부된다는 메시지! 필자의 경우 해결할 수 있던 방법은 아니지만 다른 이들이 리액트 네이티브 자체의 문제라면, 해당 오류를 마주했을 때 대처할 수 있는 방법들에 대해 정리하려 한다. 1. 'npm start' 해당 명령어를 VSCode 내 default shell (/..

안드로이드 개발자 외길인생을 걷고자 했지만 인생은 내 뜻대로 되지 않기에 이번 리액트 네이티브 프로젝트를 진행하면서 (미래의 내가 리액트 네이티브 개발자가 될 수도 있으니까) 배워나가는 내용 하나씩 정리해나가려 한다. 1. Github 프로젝트 받아오기 $ git clone [저장소 URL] 2. 프로젝트 폴더로 이동 $ cd [폴더 이름] 3. npm 설치 npm 은 자바스크립트를 위한 패키지 매니저로, React.js, React native 모두 npm 을 통해 설치ㆍ제거할 수 있다. npm 은 node.js 의 패키지 관리자이기에, 이를 사용하기 위해 node.js 를 설치해야 한다. 아래 페이지에서 자신의 운영체제에 맞는 버전을 설치하면 된다. https://nodejs.org/ko/downlo..

우선 라이징 프로그래머 3기 수료 자! 축! 🎉✨ 5월 27일 서버 수업 시작 8월 27일 실전 프로젝트 종료 9월 9일 수료식 을 끝으로 13주간 교육 여정이 막을 내렸다! 나름(?) 짧은 시간 동안 교육을 통해 많은 걸 배워갈 수 있어 좋았던 기억을 가득 담아 후기까지 작성해보려 한다. 1. 라이징 프로그래머란? 간단하게 말하면 서울형 청년 인턴 직무 캠프의 일환으로 진행되어, 유튜버 컴공선배 그리고 소프트스퀘어드 에서 주관한 프로그램이며! 기존 과정과 같은 앱 런칭이 아닌 실력 있는 '개발자' 직무 전문성에 초점이 맞춰져 과정은 진행된다. 또한 해당 3개월간 과정 이후에는 인턴 및 취업 연계의 기회가 주어진다. 또한 수료생에 한하여 다음과 같은 혜택도 있다! ✨ 프로그래밍 외주 수행 기회 제공 ✨ ..