로메오의 블로그

React 목록 import React, {Component} from 'react'; import {View, Text, StyleSheet, Button} from 'react-native'; interface State { name: string; age: 0; } export default class App extends Component { state: State = { name: '', age: 0, }; render() { return ( {this.state.name} { this.setState({ name: 'hello', }); }} /> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'c..

React 목록 react-native navigation 설치 $ npm install @react-navigation/native --save $ npm install react-native-screens react-native-safe-area-context --save $ npm install @react-navigation/native-stack --save $ npm install @react-navigation/bottom-tabs --save 파일생성 $ mkdir navigation $ mkdir navigation/screens $ touch navigation/MainNavigation.tsx $ touch navigation/screens/HomeScreen.tsx $ touch n..

React 목록 react-native navigation 설치 $ npm install @react-navigation/native --save $ npm install react-native-screens react-native-safe-area-context --save $ npm install @react-navigation/native-stack --save iOS 모듈 설치 $ cd ios $ pod install $ cd .. Android 모듈 설치 ... import android.os.Bundle; public class MainActivity extends ReactActivity { ... @Override protected void onCreate(Bundle savedInstan..

React 목록 App.tsx import React from 'react'; import { SafeAreaView, StatusBar, StyleSheet, Text, useColorScheme, View, } from 'react-native'; import {Colors} from 'react-native/Libraries/NewAppScreen'; const App = () => { const isDarkMode = useColorScheme() === 'dark'; const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; return ( Restaurant App Explore Restau..

React 목록 react-native-cli 삭제 $ sudo npm uninstall -g react-native-cli 기존에 설치된 react-native-cli를 삭제합니다. Node, Watchman, JDK, Ruby 설치 $ brew install node $ brew install watchman $ brew tap homebrew/cask-versions $ brew install --cask zulu11 $ brew tap AdoptOpenJDK/openjdk $ brew install --cask adoptopenjdk8 $ rvm install "ruby-2.7.5" $ sudo gem install cocoapods 프로젝트 생성 및 실행 $ cd my/project/folder..

React Native [React Native] 프로젝트 생성하기 (2019년 기준) [React Native] 프로젝트 생성하기 (2022년 기준) [React Native] Plugin 설치/삭제하기 [React Native] Codepush 설치하기 [Appcenter] [React Native] Codepush module 설치 [Appcenter] [React Native] Codepush deployment key 설정 [Appcenter] [React Native] Codepush 배포하기 [Appcenter deployment] [React Native] Stack navigation 사용하기 (2019년 기준) [React Native] Stack navigation 사용하기 (2022..

VUE.JS 목록 css/_variables.scss $color: rgb(178, 133, 133); VUE.JS 목록

Figma 목록 Text를 선택해서 Add auto layout 합니다. 간격을 수정할수 있습니다. 서체와 크기를 변경하고 마지막 줄을 선택해서 command + d로 3개 복제합니다. 3개를 선택하고 새로운 auto layout으로 묶어주고, 가로로 배열합니다. 내용을 수정하고 간격도 변경해봅니다. auto layout 정렬을 수정하고 사이즈를 줄였는데 text가 줄바꿈 되지 않습니다. 각 텍스트를 선택해서 가로가 hug content로 되어 있는것을 fill container로 변경합니다. 제목과 이름을 선택해서 auto layout으로 합치고 간격을 수정합니다. frame1의 높이를 hug content로 설정하고 fill 과 padding을 설정합니다. 이미지와 frame1을 선택하고 add au..

Figma 목록 Asset 가져오기 Community에서 ios 15 UI kit을 검색합니다. Drafts에 복제되었습니다. Drafts에서 확인 가능합니다. Assets에서 status를 검색해서 마우스 오른쪽 클릭 Shift + 2를 눌러 ios Status 디자인 을 확인 할 수 있습니다. Layer 탭에서 선택된 컴포넌트를 확인 할 수 있습니다. 해당 프레임을 선택하고 Command + c 복사합니다. 내 파일에서 Page를 추가하고 붙여넣기 합니다. 같은 방법으로 몇가지 프레임을 더 가져옵니다. 프레임을 모두 선택해서 Tidy up을 선택합니다. 프레임간 간격을 동일하게 맞추고, 커서를 이용해 수정할 수 있습니다. 원형 표시자로 순서 변경도 가능합니다. 캔버스 사이즈 설정 프레임에서 Desig..

VUE.JS 목록 주석 scss // 한줄 주석 : css 파일에 표시되지 않음 /* 여러줄 주석 : css 파일에 표시됨 */ css @charset "UTF-8"; /* 여러줄 주석 *//*# sourceMappingURL=index.css.map */ 변수 scss $gray: #333; $white: #fff; body {background: $gray; color: $white} css body { background: #333; color: #fff; }/*# sourceMappingURL=index.css.map */ 선택자 html 테스트 1 테스트 2 테스트 3 scss .list { color: red; ul { border: 1px solid red; > li { background:..

VUE.JS 목록 VScode 확장 프로그램 설치 ... "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/", "savePathReplacementPairs": null } ] ... 프로젝트 폴더 구조 폴더 구조를 위와 같이 만듭니다. hello 자동 컴파일 $color: red; body { background: $color } index.scss 파일에 코딩하고 저장하면 Live Scss Compliler가 css 파일을 생성해줍니다. VUE.JS 목록

VUE.JS 목록 pinia 설치 확인 Quasar cli로 프로젝트 생성시 pinia 옵션을 추가했습니다. stores/counter-store.ts import { defineStore } from 'pinia' export const counterStore = defineStore('main', { state: () => ({ counter: 0, name: 'romeoh' }), getters: { doubleCount: state => { return state.counter * 2 } }, actions: { reset () { this.counter = 0 }, addOne () { this.counter++ } } }) store 파일을 생성합니다. pinia 사용하기 hello {{ na..

VUE.JS 목록 Style & Identity https://quasar.dev/style/typography hello shadow Layout https://quasar.dev/layout/grid/introduction-to-flexbox col col col Alignment 가로정렬 One of two cols One of two cols 세로정렬 One of three cols One of three cols VUE.JS 목록

VUE.JS 목록 부모, 자식 콤포넌트간 데이터 공유를 위하여 사용함 parentComponent.vue childComponent.vue {{ text }} VUE.JS 목록

VUE.JS 목록 quasar/cli 설치 $ sudo npm install -g @quasar/cli 프로젝트 생성 $ npm init quasar Need to install the following packages: create-quasar Ok to proceed? (y) .d88888b. d88P" "Y88b 888 888 888 888 888 888 8888b. .d8888b 8888b. 888d888 888 888 888 888 "88b 88K "88b 888P" 888 Y8b 888 888 888 .d888888 "Y8888b. .d888888 888 Y88b.Y8b88P Y88b 888 888 888 X88 888 888 888 "Y888888" "Y88888 "Y888888 88888P..

VUE.JS 목록 https://quasar.dev/ Quasar Framework - Build high-performance VueJS user interfaces in record time Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive websites, PWA, SSR, Mobile and Desktop apps, all from the same codebase. Sensible people choose Vue. Productive people choose Quasar. Be both. quasar.dev Quasar 설치 $ npm install qu..

VUE.JS 목록 Test Reactive {{ username }} 이름 변경 제품명: {{ item }}, 가격: {{ price }} 제품 변경 VUE.JS 목록

VUE.JS 목록 Option 방식 Test Option 증가 Composition 방식 Test Composition 증가 script-setup 방식 Test Setup 증가 Child 콤포넌트 Option 방식 TestOption.vue Test Option 증가 TestOptionItem.vue Test Option Item name: {{ name }} age: {{ age }} birth: {{ birth }} Composition 방식 TestComposition.vue Test Composition 증가 TestCompositionItem.vue Test Composition Item name: {{ name }} age: {{ age }} birth: {{ birth }} Setup 방식..

VUE.JS 목록 Volar는 VSCode에서 구문 강조 표시, typescript 지원, 템플릿 표현식 및 구성 요소를 도와줘서 코딩을 편리하게 해줍니다. 지금 Vetur가 설치되어 있어서 Vetur로 경고가 표시됩니다. Vetur 비활성화 기존에 Vetur를 사용했다면 VSCode에서 Vetur를 해당 프로젝트에서만 비활성화 해줍니다. (다른 프로젝트에서는 사용할 수 있음) Vetur를 비활성화하면 .vue 파일 코드에 색상을 표시하지 않습니다. Volar 설치 Volar를 검색해서 두개의 플러그인을 설치합니다. 사용 안함으로 변경했다가 현재 프로젝트에서만 사용할 수 있도록 설정합니다. .vue 파일이 다시 색상이 표시됩니다. eslint 설정 코드에 노란색 줄 표시가 되어 있습니다. command ..

VUE.JS 목록 Vuetify 설치 $ cd vite-test $ vue add vuetify ? Choose a preset: Vuetify 2 - Configure Vue CLI (advanced) Vuetify 2 - Vue CLI (recommended) Vuetify 2 - Prototype (rapid development) ❯ Vuetify 3 - Vite (preview) Vuetify 3 - Vue CLI (preview) Vuetify 3 - Vite 용으로 설치합니다. 2022년 9월 5일 현재 Beta 1.0 입니다. 서버구동 $ npm run dev VUE.JS 목록