yunwon's tech blog

PHP 에 대해서 왜 글을 쓰는가 ? 나도 미지수이다 💫🐘💫 테스트 개발 하는 김에 동작원리나 PHP 기본 문법만 잠깐 훑고 가보려 한다. 문법 부분은 프로젝트에서 사용하는 것만 ! PHP 란? Hypertext Preprocessor C언어를 기반으로 만들어진 서버 측에서 실행되는 서버 사이드 스크립트 언어 이는 동적 웹 페이지를 쉽고 빠르게 만들 수 있도록 해주는 데 목적이 있다. PHP로 작성된 코드를 HTML 코드 안에 추가하면, 웹 서버는 해당 코드를 해석하여 자동으로 HTML 문서를 생성하기에 동적으로 빠르게 HTML 문서를 만들 수 있다. 이같이 PHP는 HTML을 프로그래밍적으로 생성해주고, 데이터베이스와 상호작용하면서 데이터를 저장하고ㆍ표현하는 서버와 브라우저 간의 다리 역할을 한다고 볼..

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 처럼 표현할 수 있기 때문에 용이한..

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 를 통해 연결되는 컴포넌트 구조들로 인해 너무 많은 계층이 생기고, 그로 인해 컴포넌트 관리가 점점 어려워진 것을 말한다..