이안의 평일코딩

터미널에서 아래와 같이 입력해준다. npx react-native init 프로젝트명 엔터를 눌려주면 아래와 같이 프로젝트 셋팅이 완료된다.

도커를 사용할 때의 흐름 먼저 도커 CLI에 커맨드를 입력한다. 도커 서버(도커 Daemon)이 그 커맨드를 받아서 그것에 따라 이미지를 생성하든 컨테이너를 실행하든 모든 작업을 하게 된다. docker run hello-world 도커 클라이언트 명령어 입력하면 도커 서버에서 hello-world 이미지가 있는지 확인 후 만약 캐시 보관 장소에 hello-world 이미지가 없다면 도커 허브(이미지들을 보관하는 곳)에서 가져온다. (Pulling from ...) 도커 서버에서 가져온 이미지를 이용해서 프로그램을 실행시켜준다. 하이퍼 바이저(Hypervisor) 가상화 기술이 나오기 전 한대의 서버를 하나의 용도로만 사용하고 남는 서버 공간을 그대로 방치, 하나의 서버에 하나의 운영체제, 프로그램만을 ..

도커란? 컨테이너를 사용하여 응용프로그램을 더 쉽게 만들고, 배포하고, 실행할 수 있도록 설계된 도구이며 컨테이너 기반의 오픈소스 가상화 플랫폼이다. 컨테이너 안에 다양한 프로그램, 실행환경을 컨테이너로 추상화하고 인터페이스를 제공하여 프로그램의 배포 및 관리를 단순하게 해준다. 일반 컨테이너의 개념에서 물건을 손쉽게 운송해주는 것처럼 프로그램을 손쉽게 이동 배포 관리할 수있게 해주며 AWS, Azure, Google Cloud등 어디에서든 실행 가능하다. 도커를 쓰는 이유 결론부터 말하자면 프로그램을 다운 받는 과정을 굉장히 간단하게 만들기 위해서이다. 도커 없이 프로그램 받을 때 서버, 패키지 버전, 운영체제 등에 따라 프로그램 설치하는 과정중에 많은 에러들이 발생하게 되고 설치 과정이 다소 복잡하다..

보통 리액트 네이티브를 첫 입문했을 때 API를 fetch해와서 Movie App을 만들거나 (Pokemon App도 만들긴함 ㅎㅎ) 아니면 CRUD을 첨가한 ToDo App을 만드는데 오늘은 간단하게 To do 앱을 만들어 보도록 하자. 결과물 VScode를 IDE로, Expo CLI를 이용했고 할일을 추가하고 체크하거나 아니면 X 아이콘을 눌려 삭제시키는 간단한 투두앱이다. App.js import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { Text, StyleSheet, View, Dimensions, Platform } from 'react-native'; import uuid fro..

App.js import { StatusBar } from 'expo-status-bar'; import React, {useState} from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; export default function App() { const [OutputText, setOutputText] = useState("Hi there! 👀") function buttonTapped(){ setOutputText("🎉 Welcome to React Native World!") } return ( {OutputText} ); } const styles = StyleSheet.create({ container: { ..

먼저 터미널에서 Expo를 전역으로 설치해줍니다. sudo npm install expo-cli --global 설치 후 프로젝트도 생성해줍니다. expo init 프로젝트명 cd 프로젝트명 expo start 그리고 Expo를 실행시켜줍니다. yarn ios

Styled-Components란? CSS보다 더 강력한 추상화로 자바스크립트를 사용해 스타일을 선언하고 유지보수가 가능하게 해주는 대표적인 CSS-in-JS 라이브러리다. 컴포넌트 단위로 추상화되어 모듈성을 갖는다. CSS는 명시적 정의가 없어서 부모 요소에서 자동으로 상속되는 속성이 있지만 CSS-in-JS의 경우 부모 요소 속성이 상속되지 않으므로 진정한 분리 법칙을 따른다. App.js import "./App.css"; import { Fragment } from "react"; function App() { return ( Hello Hello ); } App.css .button{ border-radius: 50px; padding: 5px; min-width: 120px; color: wh..

Babel이란? 바벨은 자바스크립트 컴파일러로 새로운 방식의 자바스크립트로 개발 후, 배포할 때에는 예전 방식의 자바스크립트로 변환해서 배포하려고 쓴다. 왜 사용할까? 최신 버젼의 자바스크립트가 실행이 안되는 구버젼 웹브라우저를 대응하기 위해서이다. ES6 코드를 ES5 코드로 변환해주는 일에서 리액트의 JSX문법, 타입스크립트, 코드 압축, Proposal 까지 처리해준다. Webpack이란? 웹팩(Webpack)은 모듈을 번들시켜주는 역할을 한다. 빌드라는 과정을 통해 하나의 파일로 만들어 주는데, 빌드란 소스코드 파일을 실행가능한 소프트웨어 산출물로 만드는 과정으로 컴파일, 배포 등의 과정이 있다. 바벨을 사용하려면 Node.js가 되어있어야 하고 터미널에서 웹팩 관련된 것들을 설치해준다. npm ..