일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 랜덤넘버
- Java
- 스프링부트
- 자바스크립트
- Javscript
- GoogleMaps
- Hook
- 구글맵스
- TypeScript
- button
- nodejs
- fragment
- React
- Kotlin
- 오버라이딩
- 코틀린
- array
- stylesheet
- 안드로이드
- TextView
- SpringBoot
- Android
- 리액트
- JavaScript
- RecyclerView
- npm
- scrollview
- JS
- Linux
- 랜덤번호
- Today
- Total
목록전체 글 (169)
타닥타닥 개발자의 일상
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/wgNY4/btrvqjan1ot/VgE5CGbylJRkeYVNhycyik/img.jpg)
아이콘 참고 사이트 https://oblador.github.io/react-native-vector-icons/ react-native-vector-icons directory oblador.github.io 프로젝트 생성 npx react-native init sample16 --template react-native-template-typescript 필요한 부분 install npm i react-native-paper checkbox를 만들기 위해서는 android>app>build.gradle 부분을 수정해야한다. (제일 마지막 한줄 코드만 추가됨) build.gradle apply plugin: "com.android.application" import com.android.build.Out..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Gt3Ln/btrvnVOSIGx/Us2ZTvEIX3Do4TZ4UUW3T0/img.jpg)
프로젝트 생성후 아래의 설치문을 입력해서 radiobutton을 import한다. 설치문 npm i react-native-flexi-radio-button --save 설치문을 입력한뒤 생성된 node_modules>react-navtive-flexi-readio-button>lib를 방문하여 radioButton.js와 radioGroup.js를 편집해준다. radioButton.js import React, { Component } from 'react' import PropTypes from 'prop-types' import { StyleSheet, View, Text, TouchableWithoutFeedback } from 'react-native'; export default class R..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/K1QTk/btrvbgfeVq4/H70ajaPksL3yIyvkaf21ck/img.jpg)
프로젝트 생성후 입력해야 하는 설치문 npm install react-native-picker-select npm install @react-native-picker/picker npm install watcher npm install react-native-svg@9 App.tsx import React, { useState } from "react"; import { Button, View } from "react-native"; import RNPickerSelect from 'react-native-picker-select' const values = [ {label:'Football', value:'축구'}, {label:'Baseball', value:'야구'}, {label:'Hockey',..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/beC6cf/btrvoQzqVB6/9EiQ1wxXRx83zmKdlbvY10/img.jpg)
App.tsx import React, { useState } from "react"; import { Button, Text, TextInput, View } from "react-native"; let glTag:String //사용되지 않는 함수 function MyFunc(props:any){ console.log(props.name) props.setText('Money') return {props.name} } export default function App(){ const [ inputTextValue, setInputTextValue ] =useState("") const [text,setText] = useState("") //setInputTextValue에 text값을 입력하는 함수..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cPitYM/btru8u4WZh4/ZzzNImTkY4iRVaCdhh7O1k/img.jpg)
따로 생성해야될 폴더나 파일은 없다. App.tsx import React, { useState } from "react"; import { Alert, FlatList, Image, ScrollView, SectionList, StyleSheet, Text, TextInput, View } from "react-native"; //scrollView,Image,TextInput export default function App(){ return( Hello World ) } App.tsx 구현시 안드로이드 화면 App.tsx import React, { useState } from "react"; import { Alert, FlatList, Image, ScrollView, SectionList, S..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cKaWHr/btru3NqtfZf/qF4DrkTC7a9ADzBJkZ6kU0/img.jpg)
특별히 생성하는 파일이나 폴더는 없다. App.tsx import React, { useState } from "react"; import { Button, Text, View } from "react-native"; /* class App extends React.Component{ constructor(props:any){ super(props) this.state = { count:0 } } render() { return( You clicked{ this.state.count } times this.setState({count: this.state.count+1})}/> ) } } export default App */ const App =() =>{ const[count,setCount] = u..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/J9TFZ/btru6MZdYhG/pJKxs6oLInyaYeKDWvypF0/img.jpg)
Export / Import로 모듈 구현하기 src 폴더 생성 > src 폴더 안에 screens 폴더 생성 > screens 폴더 안에 NamedExportModuel.tsx/NamedImportModuel.tsx 생성 NamedExportModule.tsx import React from "react" import { Text, View } from "react-native" //변수 const sampleVar = "sample variable" //함수 const sampleFunc = () => "sampleFunc() 호출함" //number=소수+정수 const sampleNumFunc = (num1:number,num2:number) => (num1*num2) //Object == json..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cxGk8n/btruWjKBbQ4/92drMjPhMXDlkCmQBbD4lK/img.png)
npx react-native init (프로젝트명) --template react-native-template-typescript 위의 명령어로 구현된 프로젝트가 생성되면 좌측 콘솔에 cd 프로젝트명 npm start 우측 콘솔에 cd 프로젝트명 npm run android 입력하여 설정 완료하기 위에 명시된대로 순서대로 입력하면 콘솔창이 아래와 같아진다. 생성된 프로젝트 폴더에 있는 App.tsx 파일 열고 아래와 같이 입력한다음 저장해보자. import React from "react" import {SafeAreaView, Text} from "react-native" /* export default function App(){ //상수 const str:String = 'Hello World' ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bXCAWj/btruW9OtCTN/rWYfh8BfljnxsK10hn42fk/img.png)
폴더 및 파일구성 코딩 하기 전 AndroidManifest.xml / build.gradle 파일을 수정해 사전 설정을 완료해야한다. 사전설정 AndroidManifest.xml build.gradle(:app) plugins { id 'com.android.application' id 'kotlin-android' } android { compileSdk 32 defaultConfig { applicationId "com.example.mydocument" minSdk 21 targetSdk 32 versionCode 1 versionName "1.0" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" } buildTypes { ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cn9rbq/btrupJoIuVu/fVon6tEEPFywVzG9iPS5JK/img.png)
기본적 세팅은 아래글 https://developerson.tistory.com/114 페이징은 아래글을 참고해서 만든 게시판이다. https://developerson.tistory.com/116 별도의 설명 없이 우선 코드만 백업할 예정. 이제 이걸 이해하는건 온전히 내 몫이다. 이해가 될때까지 계속 보는수 밖엔 없겠지 Spring Boot 스프링 부트를 이용한 백엔드 폴더 및 파일 구조 DatabaseConfig.java package mul.camp.a; import javax.sql.DataSource; import org.apache.ibatis.session.SqlSessionFactory; import org.mybatis.spring.SqlSessionFactoryBean; import ..