하랑파파꺼

주석 // 한 줄 주석 /** * 여러 줄 주석 **/ /// 문서주석 : 메서드나 클래스 정의 위에 작석하면 dartdoc 과 같은 문서 생성 도구를 통해 문서를 자동으로 생성해줍니다. 변수 dart는 다음과 같은 기본 변수 타입을 제공. - int : 정수 - double : 실수(소숫점) - String : 문자열 - bool : 참 또는 거짓 변수명 앞에 타입을 설정하고, 변수명 뒤에 '=' 기로호 값을 지정. ex) String name = '제니'; int age = 23; double height = 176.5 bool isMale = false; ※ int와 double는 num에 포함 ※ int를 double 타입에 대입 할 수 없음 ※ 타입을 직접 명시하지 ..

#vscode 확장 프로그램 추가 React-Native/React/Redux snippets for es6/es7 vscode-styled-components #vscode 확장 프로그램 추가 React-Native/React/Redux snippets for es6/es7 vscode-styled-components #노드 패키지 매니저를 통해 설치하는 라이브러리, 모듈들의 버전 고정하기 npm config set save-exact=true #프로젝트 생성 react-native init {프로젝트명} #typescript 로 프로젝트 생성 react-native init {프로젝트명} --template typscript #특정 버전으로 프로젝트 생성 react-native init -versio..

#Props 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터 부모 컴포넌트로부터 받는 데이터이므로 자식 컴포넌트에서는 변경이 불가능하다 컴포넌트의 속성과 같음을 의미 #State 한 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용 컴포넌트 안에서 데이터를 변경 할 수 있다 컴포넌트의 상태를 의미

지금까지 개발자로 일하면서 웹개발만해오다 앱을 개발해보고자 알아보던 중 React Natvie와 Flutter에 대해서 알게 되었다. React Native를 먼저 알게되어 책도 사고 유튜브 영상도 보면서 공부를 하던 중에 우연치 않게 Flutter에 대해서 알게 되었다. React Natvie는 지금까지 해왔던 javascript를 기반으로 앱을 만들수 있는 반면, Flutter는 Dart라는 언어를 사용해 앱을 만들어야 한다. 물론 둘 다 장단점이 있지만 일단은 익숙한 javascript를 사용하는 React Natvie로 앱을 만들어보고 그 후에 다시 Flutter로 만들어 보면서 공부를 해봐야 하나 싶다. 공부할 것들이 쌓여만 가는구나...

#절대경로로 컴포넌트 추가 - react-native에서는 컴포넌트를 추가할 때 상대경로 이용 - babel-plugin-root-import 를 이용하면 절대경로 사용 가능 - 설치 npm install --save-dev babel-plugin-root-import - 설정 -> babel.config.js module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ 'babel-plugin-styled-components', [ 'babel-plugin-root-import', { rootPathPrefix: '~', rootPathSuffix: 'src', }, ], ], }; -> tsconfig.json {..

#Styled components - react-native에서 스타일을 적용하는 방법 -> 인라인 방식 -> StyleSheet -> Styled Components - Styled Components를 사용하는 이유 -> react와 react-native에 동일한 스타일 코드를 적용 -> reac-native에서 스타일은 오브젝트 형식으로 사용 => text-align => textAlugn -> 동적으로 변경하는 스타일을 관리하기 쉽다 => props를 사용할 수 있다 -> 배포시 파일용량이 커진다 - Styled Components 설치 npm install --save styled-components npm install --save-dev @types/styled-components -> s..

#typescript - 설치 npm install typescript @types/react @types/react-native --save-dev -> typescript : typescript 라이브러리 -> @types/react : react의 타입이 정의된 파일 정의 파일 -> @types/react-native : react-native의 타입이 정의된 파일 정의 파일 - tsconfig.json -> typescript를 설정하기 위해 tsconfig.json 파일을 프로젝트 root 디렉토리에 생성 -> tsconfig.json 파일에 아래의 내용을 입력 { "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": tru..

#MAC 에서 react-native 개발환경 만들기 1. Homebrew 설치 - Homebrew 설치 확인 및 버전 확인 brew --verion - Homebrew 설치 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2. Nodejs 설치 brew install node node -–version 3. Watchman 설치 brew install watchman watchman –version 4. React Native CLI 설치 npm install -g react-native-cli react-native --version 5. Xcode 설치 App Store를..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // ..

#SingleChildScrollView 단일 widget을 스크롤 할 수 있는 Box 이 위젯은 일반적으로 사용 할 수 있는 단일 Box 가 있을 때 유용함. 참고 : https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html SingleChildScrollView class - widgets library - Dart API A box in which a single widget can be scrolled. This widget is useful when you have a single box that will normally be entirely visible, for example a clock face in a time p..