yunwon's tech blog

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

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

노마드 코더 강의를 수강하면서 영화 웹을 제작하였다. 영화 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 를 통해 연결되는 컴포넌트 구조들로 인해 너무 많은 계층이 생기고, 그로 인해 컴포넌트 관리가 점점 어려워진 것을 말한다..