이안의 평일코딩

데이터 바인딩 데이터 바인딩은 Vue의 실시간 자동 렌더링이 가능하게 해준다. object 자료로 데이터를 저장해준다. { 데이터명 : 데이터값 } {{ 데이터명 }}를 넣어주면 값을 불러와준다. 아이폰12 프로 {{ price1 }} 만원 아이폰12 미니 {{ price2 }} 만원 속성 속성을 데이터바인딩 해줄 때는 : 를 넣어준다. :속성 = "데이터명" (아래의 예시에서 :style="style1"으로 쓰였다) 아이폰12 프로 {{ price1 }} 만원 HTML 태그안의 내용을 데이터바인딩 할때는 {{데이터명}}을 넣어주고 속성을 데이터바인딩 할 때는 :속성="데이터명"을 넣는다. 즉 아래의 코드에서 위는 틀리고 이미지 속성을 가져올 때는 :src=""를 사용해야 데이터바인딩이 된다. // X ..

Vue란? Vue.js는 컴포넌트(Component) 기반의 SPA(Single Page Application)를 구축할 수 있게 해주는 프론트엔드 프레임워크이다. 컴포넌트는 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹 페이지 내의 다양한 UI 요소로 재사용 가능하도록 구조화 한 것이고, SPA는 단일 페이지 어플리케이션으로 하나의 페이지 안에서 필요한 영역 부분만 로딩 되는 형태를 가리키며 빠른 페이지 변환과 적은 트래픽 양이 사용된다는 장점이 있다. React와의 차이점 (출처: 코딩애플) 조건문을 쓸 때 React에서는 tenary operator, && ||, if else enum .. 등이 있지만 vue는 vue-if, v-else만 있다. 반복문을 쓸 때 React에서는 {map}, ..

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