이안의 평일코딩

Clone 먼저 팀 프로젝트로 진행 중인 코드들을 나의 로컬 데스크톱으로 옮겨 올 때는 clone을 한다. git clone https://github.com/ianlee92/project.git git clone git@github.com:ianlee92/project.git Remote 레퍼지토리를 확인할 때 사용한다. (예: git@github.com:ianlee92/project.git) git remote -v Branch 현재 branch를 확인할 때 사용한다. (예: master, main 등) git branch Pull 깃에 Push하기 전에는 매번 새로운 업데이트 된 코드들을 pull을 통해 로컬(내 데스크톱)로 불러온다. git pull Add, Commit, Push add를 통해 ..

색상 assets/colors라는 폴더를 만들어 colors.js 파일을 생성한다. const colors = { black: '#000000', gray: '#666666', blue: '#1C215D', } export default colors; 자신이 원하는 색상을 넣어주고 export한 다음 import해서 사용하면 간단하게 StyleSheet에서 적용가능하다. import colors from './assets/colors/colors'; const App....... const styles = StyleSheet.create({ sectionTitle: { fontSize: 24, fontWeight: '600', color: colors.blue, fontFamily: 'OpenSans-B..

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

보통 리액트 네이티브를 첫 입문했을 때 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 ..