yunwon's tech blog

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..