필요한 라이브러리

기말 과제로 달력 조회 화면을 만들기로 했다!

https://wix.github.io/react-native-calendars/docs/intro

react-native-calendars 라는 라이브러리가 있어서 가져다 쓰기로 하고 우선 필요한 것들 설치 date-fns는 날짜를 표시하기 위해 필요한 라이브러리이다. format을 import해와야하기 때문!

1. npm install --save react-native-calendars
2. npm install date-fns
   

기본 structure

기본적인 화면은 이렇게 구성한다

import React from "react";
import { View } from "react-native";
import { Calendar } from "react-native-calendars";

const CalendarView = (props) => {


  return (
    <View style = {{marginTop: 100}}>
      <Calendar/>
    </View>
  )
}

export default CalendarView;

그리고 MainTabNavigator에도 스크린 추가해서 연결해주면

import CalendarView from '../screens/CalenderView';

 <Nav.Screen name = "Calendar" component={CalendarView} options={{title: 'Calendar'}}/>

✨✨✨짜잔✨✨✨ 새로운 탭이 생기면서 화면 전환이 된다!!

일정 추가

일정이 있거나 특별한 날에 마킹을 추가하고 theme의 Props를 통해 색을 바꿀 수 있다

• 시험이 있는 날과 내 생일에 추가를 해보기

const markedDates = {
    '2022-12-01': { selected: true },  // 내 생일ㅎㅎ
    '2022-12-15': { marked: true },
    '2022-12-16': { marked: true },
    '2022-12-19': { marked: true }
  }
  return (
    <Calendar 
      style={styles.calendar} 
      markedDates={markedDates}
      theme={{
        selectedDayBackgroundColor: 'red',
        arrowColor: 'blue',
        dotColor: 'green',
        todayTextColor: 'yellow',
      }} />
  );

onPress - selectedDay 연결

선택된 날짜에 마킹 표시를 하고 화면에 표시해보기 먼저 const로 선언을 해준다

const [selectedDate, setSelectedDate] = useState(format(new Date(), "yyyy-MM-dd"));

const markedSelectedDates = {
    ...markedDates,       // 기존의 markedDate
    [selectedDate]: {
      selected: true,
      marked: markedDates[selectedDate]?.marked,
    }
  }

그리고 view에 onDayPress => 로그 찍기, 날짜 선택을 하면 이렇게 나온다

<View>
      <Calendar style={styles.calendar} 
        markedDates={markedSelectedDates}
        theme={{
          selectedDayBackgroundColor: 'red',
          arrowColor: '#009688',
          dotColor: '#009688',
          todayTextColor: '#00adf5'
        }} 
        onDayPress={(day) => {
          console.log('selected day', day),       // 선택된 날짜 log 찍기
          setSelectedDate(day.dateString)        // 선택된 날짜 marked
        }} 
      />
      <Text style={styles.text}>{ selectedDate } </Text>        
    </View>

📌 기능들 활용해서 다른 것들도 추가해보기!

• 현재 날짜/시간 표시 - 시간은 _실시간_으로 동적 연결!!
• 선택된 날짜 표시
• 중요 일정 alert

🔗 외부 링크 기능

우선 홈 화면에 버튼을 새로 만들고 이 페이지로 이동하도록 연결해보았다

https://docs.expo.dev/guides/linking/

1. expo install expo-linking

expo-linking 이라는 기능을 활용하기 위해 위 모듈 설치

2. npm install @react-navigation/stack 재설치

그런데 기존의 navigation이랑 충돌이 나는건지.. 자꾸 오류가 나서 stack navigation 다시 설치하고 해주니 잘 된다이유가 뭘까...🤔

그리고 expo guide를 보면 import 하고 사용하라는데 import * as Linking from 'expo-linking'; 이미 expo-linking을 설치해서 그런가 syntax 오류가 난다

아마 둘 중 하나일 듯 싶다...

- expol-linking 설치, stack navigation 재설치 - import 해서 바로 가져다 쓰기

share를 import 하고 쓰니 환경 설정 없이도 url 이동이 된다!!

어쨌든 블로그 화면으로 잘 이동한다!!~

1. react-native-webview 설치 npm install --save react-native-webview

   react-native-webview

2. iframe 설치 npm install react-native-youtube-iframe → 안됨.. npm i react-native-youtube-iframe → 이걸로 실행

   react-native-youtube-iframe

Basic Usage | React Native Youtube iframe

basic usage, props 에서 사용법 확인

• TextInput

TextInput · React Native

이렇게 videoId값으로 연결해서 유튜브 재생 가능!

📌 Google Cloud - API 서비스

Google Cloud

spring.h2.console.enabled=true
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.format_sql=true

http://localhost:8080/h2-console → DB로 접근

로그 중 jdbc url (오늘은 jdbc:h2:mem:43be176b-c8a0-4345-bf9e-6434ddaff4e4) 입력하고 커넥트

controller랑 request 사이에서 연결해주는 service!

domain - repository 연결

Member & dto.PostUserRequest

Rest API - CRUD

modelmapper → dependencieds에 추가, ‘@Bean에 선언

Test PUT OBJECT
PostUserRequest(id=3, userId=12345678, name=홍길동, [email=aaa@hufs.ac.kr](mailto:email=aaa@hufs.ac.kr), address=hufs, password=999, phoneNumber=010-1234-9999)
Hibernate:
select
member0_.id as id1_0_,
member0_.address as address2_0_,
member0_.email as email3_0_,
member0_.name as name4_0_,
member0_.password as password5_0_,
member0_.phone_number as phone_nu6_0_,
member0_.user_id as user_id7_0_
from
users member0_
where
member0_.user_id=?
and member0_.email=?
and member0_.name=?
Hibernate:
update
users
set
address=?,
email=?,
name=?,
password=?,
phone_number=?,
user_id=?
where
id=?

어려운 db의 세계…

Swagger에서 추가/삭제 가능 Usercontroller의 register(등록), update(수정), delete(삭제) swagger에서 사용자 register 하고 USERS - Run 해보면

짜잔

다른 기능들도 확인할 수 있음

AWS는 1년만 무료, Oracle DB는 무료!

Naver

naver client - search controller

{
    "lastBuildDate":"Thu, 24 Nov 2022 09:48:06 +0900",
    "total":1,
    "start":1,
    "display":1,
    "items":[                      // 검색된 데이터
        {
            "title":"롯데호텔서울 도림",
            "link":"https:\/\/www.lottehotel.com\/seoul-hotel\/ko\/dining\/restaurant-toh-lim.html",
            "category":"중식>중식당",
            "description":"",
            "telephone":"",
            "address":"서울특별시 중구 소공동 1",
            "roadAddress":"서울특별시 중구 을지로 30",
            "mapx":"310159",
            "mapy":"551942"
        }
    ]
}

위에 통째로 받아온것 중에 원하는 부분 Parsing 해서 가져오기!

1. naver-dto-SerchLocalRes 생성
2. SearchRequestDto 생성
3. NaverClient에 String → SearchLocalRes
4. SearchService에 String → SearchRequestDto 하고 return new SearchRequestDto();
5. SearchController에 String → SearchRequestDto

1. weather - dto - WeatherDtoRes
2. dto - WeatherRequestDto
3. WeatherClient에 String → WeatherDtoRes
4. WeatherService. String → WeatherRequestDto
5. WeatherController String → WeatherRequestDto

Weather

• Weather는 좀 더 복잡…

{
    "coord": {
    "lon": 126.9778,
    "lat": 37.5683
  },
  "weather": [                     // 리스트
    {
      "id": 803,
      "main": "Clouds",
      "description": "broken clouds",
      "icon": "04d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 279.77,
    "feels_like": 279.77,
    "temp_min": 278.81,
    "temp_max": 282.84,
    "pressure": 1021,
    "humidity": 76
  },
  "visibility": 8000,
  "wind": {
    "speed": 0.51,
    "deg": 330
  },
  "clouds": {
    "all": 75
  },
  "dt": 1669250853,
  "sys": {
    "type": 1,
    "id": 8105,
    "country": "KR",
    "sunrise": 1669242053,
    "sunset": 1669277805
  },
  "timezone": 32400,
  "id": 1835848,
  "name": "Seoul",
  "cod": 200
}

안에 class 6개, 리스트 1개 있음

• 해보기❗️❗️❗️ (화요일까지)

• buildgradle dependencies에 runtimeOnly 'com.h2database:h2' ,

  implementation 'org.springframework.boot:spring-boot-starter-data-jpa’ 추가

• properties에 spring.h2.console.enabled=true 추가

http://localhost:8080/h2-console

info로 돌려서 jdbc:h2:mem:28a555fc-e8ef-46c1-a351-22aa73322769 - 연결

 public String getCurrentWeatherWithGeo(Double lat, Double lon) {
        var weatherReq = new WeatherGeoReq();
        weatherReq.setLat(lat);
        weatherReq.setLon(lon);

        var weatherRes = weatherClient.getCurrentWeather(weatherReq);

        return weatherRes;    // 여기 해결 안돼서 잘라놓음.. weather service

    } 
}

리소스 폴더에 api key 파일 추가

Google Earth

지리 정보로 조회! - WeatherGeoReq

Google Earth

구글어스에서 latitude, longitude 가져와서 지리 정보로 조회!

1. WeatherReq → private String query 삭제
2. WeatherCityReq
3. WeatherGeoReq

네이버 개발자 센터

https://developers.naver.com/docs/common/openapiguide/appregister.md

• 어플리케이션 등록 → client id, client secret 나옴

1. app properties, key 설정
2. Naver Client 추가
3. **SearchLocalReq DTO 추가**
4. naver client - **searchLocal 추가, 구현**
5. searchLocal - **클라이언 아이디 / 클라이언트 시크릿 추가** 
6. **SearchLocalReq - toMultiValueMap 구현**
7. **SearchService 구현**
8. **SearchController 구현**

설명

네이버 검색의 블로그 검색 결과를 XML 형식 또는 JSON 형식으로 반환합니다.

요청 URL

프로토콜

HTTPS

HTTP 메서드

GET

파라미터

파라미터를 쿼리 스트링 형식으로 전달합니다.

참고 사항

API를 요청할 때 다음 예와 같이 HTTP 요청 헤더에 클라이언트 아이디와 클라이언트 시크릿을 추가해야 합니다.

> GET /v1/search/blog.xml?query=%EB%A6%AC%EB%B7%B0&display=10&start=1&sort=sim HTTP/1.1
> Host: openapi.naver.com
> User-Agent: curl/7.49.1
> Accept: */*
> X-Naver-Client-Id: {애플리케이션 등록 시 발급받은 클라이언트 아이디 값}
> X-Naver-Client-Secret: {애플리케이션 등록 시 발급받은 클라이언트 시크릿 값}
>

요청 예

curl  "https://openapi.naver.com/v1/search/blog.xml?query=%EB%A6%AC%EB%B7%B0&display=10&start=1&sort=sim" \
    -H "X-Naver-Client-Id: {애플리케이션 등록 시 발급받은 클라이언트 아이디 값}" \
    -H "X-Naver-Client-Secret: {애플리케이션 등록 시 발급받은 클라이언트 시크릿 값}" -v

swagger에서 search controller 확인!

• “key” : “value” 의 페어 .main.feels_like. 이런 식으로 값 찾아 들어감

• 얘는 배열 형태, weather[index] 로 접근

"weather": [
    {
      "description": "clear sky",
      "icon": "01d",
      "id": 800,
      "main": "Clear"
    }
  ],

main - temperature, weather - main 끄집어내기!

weather.js에 추가

console.log("temperature : " + data.main.temp);
console.log("weather : " + data.weather[0].main);

온도 단위 바꾸기 &units=metric

https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${REACT_APP_WEATHER_KEY}&units=metric

화면 연결

render () {       // 화면 UI
    return (
      <>
        <Text> 날씨 </Text>
        <Text> 온도 </Text>
      </>
    );
  }

this.setState({cond : data.weather[0].main, temp : data.main.temp});

render () {       // 화면 UI

    const {cond,temp} = this.state;           // 위에서 설정한 cond,temp 가져오기
    return (
      <>
        <Text> {temp} </Text>
        <Text> {cond} </Text>
      </>
    );
  }

Weather Conditions

icon 모음

@expo/vector-icons directory

“waether-sunny” → 이 부분 바꿀 수 있으면 맞는 아이콘 그릴 수 있음

const weatherOptions = {
  Clear : {
    iconName : "weather-sunny"
  }

}

<MaterialCommunityIcons name={weatherOptions[cond].iconName} size={24} color="black" />

• 나머지 날씨들도 맵핑해서 쓸 수 있음!

Open Weather Map

https://openweathermap.org/

• My API keys .gitignore 에서

  ### API KEY ###
  application-api-key.properties   // 이부분 복사

  application-api-key.properties resource에 파일 추가

  Call current weather data

• Built-in API request by city name

  https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

• api-key.properties

  openweather.url.weather=https://api.openweathermap.org/data/2.5/weather
  openweather.client.apikey=여기에키값

• UriComponentsBuilder : URL 형태 만들어주는 기능

• RestTemplate : 만들어진 url 쏴주기

클래스는 대문자 시작, 변수/개체는 소문자 시작 /weather/current/{city} /weather/?city= ✅

spring.mvc.pathmatch.matching-strategy=ant_path_matcher
logging.level.root=info 
// info, debug, logging? 등등 설정 가능

UserController - Test Post 에서 info, debug, error, warn 확인 가능 → 로그 컨트롤!

Application Programming Interface

내 소듕한 API key

git에 올릴 때는 주의주의주의 해야함 → 분리해서 관리 ❗️

• OpenWeather

Сurrent weather and forecast - OpenWeatherMap

• git log git diff - log 간의 차이를 보여줌
  

gitignore 에 .env 추가돼있음

1. .env 파일 생성, 키 추가 → REACT_APP_WEATHER_KEY="내 API Key”

babel-plugin-dotenv-import

2. $ npm install babel-plugin-dotenv-import

• babel.config 파일에 추가

"plugins": [
      ["dotenv-import", {
        "moduleName": "@env",
        "path": ".env",
        "blocklist": null,
        "allowlist": null,
        "safe": false,
        "allowUndefined": false
      }]

Location - Expo Documentation

3. npx expo install expo-location 설치
4. screens 에 Weather.js 파일 추가, 코드 작성
   • import * as Location from 'expo-location';

적용 시점 선택 하고 방법 찾아서 쓰기

언제 ? → 화면 켜질 때, onPress, 화면 생성될 때 등

위치 가져오기

Axios - HTTP 클라이언트 라이브러리

Axios

npm install axios

REST - http method (get, post, put, del)

• routes - TapNavigation 에서 Weather import, Nav screen 추가

• 자주 사용되는 생명주기 render(), constructor(), mount

✨✨_ 짜잔 날씨 조회 화면 탭 생김! _ ✨✨

• lat=11&lon=22

{
"base": "stations", 
"clouds": {"all": 11}, 
"cod": 200, 
"coord": 
{"lat": 11, "lon": 22}, "dt": 1669168807, "id": 236178, "main": 
{"feels_like": 294.86, "grnd_level": 958, "humidity": 32, "pressure": 1010, 
"sea_level": 1010, "temp": 295.71, "temp_max": 295.71, "temp_min": 295.71}, 
"name": "Vakaga Prefecture", "sys": {"country": "CF", "sunrise": 1669177885, 
"sunset": 1669219538}, "timezone": 3600, "visibility": 10000, 
"weather": [{"description": "few clouds", "icon": "02n", "id": 801, 
"main": "Clouds"}], "wind": {"deg": 20, "gust": 1.7, "speed": 1.72}}

• lat=${latitude}&lon=&{longitude}

{"base": "stations", "clouds": 
{"all": 20}, "cod": 200, "coord": 
{"lat": 37.3396, "lon": 127.2748}, "dt": 1669168536, "id": 1845275, "main": 
{"feels_like": 284.32, "humidity": 62, "pressure": 1018, "temp": 285.42, 
"temp_max": 285.72, "temp_min": 282.81}, "name": "Chuja-ri", "sys": 
{"country": "KR", "id": 5509, "sunrise": 1669155487, "sunset": 1669191394, 
"type": 1}, "timezone": 32400, "visibility": 10000, "weather": 
[{"description": "haze", "icon": "50d", "id": 721, "main": "Haze"}],
 "wind": {"deg": 40, "speed": 1.54}}

다음 시간에 화면에 display!

<Image
        source={require('../assets/frog-1371919.png')}    // 개구리 이미지 삽입
        style={{width:400, height:400}}
      />

Touchable Opacity - 버튼

• import 해주고

<TouchableOpacity
        style={styles.buttonContainer}                    // 버튼 박스 생성, 스타일은 buttonContainer에서 설정
        onPress={() => navigation.navigate('Layout')}     // 누르면 Layout으로 이동
      >
        <Text style={styles.buttonTest}>Go To Layout</Text>     
      </TouchableOpacity>

const styles = StyleSheet.create({
  buttonContainer:{
    backgroundColor:'black',
    borderRadius:5,
    padding:10,
    margin:20
  },
  buttonTest:{
    fontSize:20,
    color:'#fff'
  }
})

<> ⇒

전체 화면을 기존 <></> 에서 로 바꿔주면 style 적용 가능

const styles에 containter 추가하고 <View style = {styles.container}>

const styles = StyleSheet.create({
  container:{
    flex:1,
    justifyContent:'center',    // 개구리 중앙 정렬
    alignItems:'center',        // 버튼 중앙 정렬
    backgroundColor:'#ebebeb'   // 바탕색 옅은 회색
  }

그리고 이전 버튼은 지워주기

Layout에 ‘Go to home’ 버튼 생성

const {navigation} = props; prop으로 전달받아서 navigation

const Layout = (props) => {
  const {navigation} = props;

<View style={[styles.buttonView]}>
          <Button title="GO TO HOME" 
            onPress={() => navigation.navigate('Home') }/>
        </View>

Tap base navigation

npm install @react-navigation/bottom-tabs

MainStackNavigator 에서 Stack → Nav로 기호 이름 바꾸기

MainTabNavigator 추가하고 App.js에서 연결

나는 왜 화살표가 안뜨지 ➡️ 업데이트 하니까 떴음

• 함수로 필요한 세팅값 정의
  • 스타일 인덱스, 해당스타일 table, 설정 함수 명
    • → 스타일 인덱스 +1 해서 스타일 테이블 가져오고 스타일 설정해줌
    • flexDirection은 요소 4개로 인덱스 3번까지만 있음. 4번 넘어가면 오버플로우
      • 방법1) length 고정 - 최대값 넣고 끝내기
      • 방법2) 넘어가면 0으로 바꾸기

const changeSetting = (value, options, setterfunction) => {
    var targetValue = 0;
    if (value == options.length - 1) { //인덱스 넘어가면
      targetValue = 0;   // 0으로 바꿔버려라 
    } else {
      targetValue = value + 1;
    }
    setterfunction(targetValue);
    console.log(options[targetValue]);
  };

const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
  const justifyContents = [
    'flex-start',
    'flex-end',
    'center',
    'space-between',
    'space-around',
    'space-evenly',
  ];
  const alignItems = ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'];
  const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
  const directions = ['inherit', 'ltr', 'rtl'];

  const [flexDirection, setFlexDirection] = useState(0);

  const hookedStyles = {
    flexDirection: flexDirections[flexDirection],
        // 여기에 추가추가

• 화면 전환!

install instructions

npm install @react-navigation/native

npx expo install react-native-screens react-native-safe-area-context

npm install react-native-screens react-native-safe-area-context

npx pod-install ios : for MacOs

npm install @react-navigation/stack

근데 너무 많아지면 배보다 배꼽이 커지니까 다른 방법 모색하기 시작

Swagger

https://mvnrepository.com/

maven (build tool) → gradle로 바뀜

• springfox boot starter

https://mvnrepository.com/artifact/io.springfox/springfox-boot-starter

• build.gradle - dependencies 에 추가

// [https://mvnrepository.com/artifact/io.springfox/springfox-boot-starter](https://mvnrepository.com/artifact/io.springfox/springfox-boot-starter)
implementation 'io.springfox:springfox-boot-starter:3.0.0'

• 코끼리 아이콘 눌러서 필요한 것들 자동 다운로드
• 그리고 빌드하면 이런 에러 뜸 Spring Boot 버전 2.6에서 일어나는 현상!

  spring boot 2.6.0부터 요청 경로를 ControllerHandler에 매칭시키기 위한 전략의 기본값이 ant_path_matcher 전략 -> path_pattern_parser 전략으로 변경되었기 때문이다.

Caused by: java.lang.NullPointerException: Cannot invoke 
"org.springframework.web.servlet.mvc.condition.
PatternsRequestCondition.getPatterns()" because "this.condition" is null

• 💡 해결 방법 application.properties에 다음 코드 넣기 spring.mvc.pathmatch.matching-strategy=ant_path_matcher 참고: https://stackoverflow.com/questions/72235752/cannot-invoke-org-springframework-web-servlet-mvc-condition-patternsrequestcond

• http://localhost:8080/swagger-ui/ 그리고 다시 빌드하면 이렇게 테스트 페이지 확인 가능 ✨✨✨✨✨짜잔✨✨✨✨✨

  
  

• swagger-annotations 1.5.12 API

내부 공유 목적 - 동일한 테스트, 동일한 문서를 볼 수 있음 (사용자에게 오픈 X)

Release시에는 build gradle에서 다시 삭제하고 배포해야함

Lombok

Lombok(롬복)은 Java 라이브러리로 반복되는 getter, setter, toString 등의 메서드 작성 코드를 줄여주는 코드 다이어트 라이브러리

PostUserRequest - getter setter 지우고 변수만 남기기 → @Data 한 줄로 대체 가능

• build gradle에 추가하고 코끼리

// [https://mvnrepository.com/artifact/org.projectlombok/lombok](https://mvnrepository.com/artifact/org.projectlombok/lombok)
compileOnly 'org.projectlombok:lombok:1.18.24'

• 빌드하면 에러남 - dependency 다시 아래 코드 추가 annotationProcessor 'org.projectlombok:lombok'

• Stable

log

@Slf4j

📌 혼자 실습해볼 것

hello request도 getter, setter 삭제

다른 기능에도 설명 달아보기

• log.info 는 다음 시간에!

• camel-case : DoItYourSelf (서버, 일반 개발자들 선호)
• snake-case : do_it_yourself (js쪽 선호)

phoneNumber - getter & setter & toString 설정

@JsonProperty("phone_number")

@JsonNaming(value = PropertyNamingStrategies.SnakeCaseStrategy.class)

→ post method

User controller

put method

@PutMapping("/put")
public void put(@RequestBody Map<String, Object> requestData) {
    requestData.entrySet().forEach(stringObjectEntry -> {
        System.out.println("key : " + stringObjectEntry.getKey() +
                "value : " + stringObjectEntry.getValue());

reponse method

@PutMapping("put-object-entity")
public ResponseEntity<PostUserRequest> putObjectEntity(@RequestBody PostUserRequest requestData) {

    return  ResponseEntity.status(HttpStatus.CREATED).body(requestData);
}

→ Response 201 : created

@GetMapping("/get")
public PostUserRequest getUser() {
    PostUserRequest user = new PostUserRequest();
    user.setName("tester1234");

    return user;
}

HTML

• 새로운 controller PageController

@Controller
public class PageController {
    @RequestMapping("/main")
    public String main() {
        return "main.html";

    }
}

• resource에 static 폴더 - main.html 만들어주면

짜잔!

• null값 빼고 response

@JsonInclude(JsonInclude.Include.*NON_NULL*)

⚠️ 화살표 디렉토리 수정 rm -rf .git git rm --cached . -rf

get, post, put, delete

기본적으로 많이 쓰는 메서드❗️

get : 서버에서 데이터를 가져올 떄

post : 서버로 데이터를 밀어낼 때

Post

1. URL에 데이터가 포함되지 않아 외부에 노출되지 않는다.
2. 메시지 본문에 데이터를 포함한다.
3. 바이너리 및 대용량 데이터 전송이 가능하다.
   

UserController

• controller에 새로운 java class UserController 추가

@RestController
@RequestMapping("/user")
public class UserController {

    @PostMapping("/post")
    public void post(@RequestBody Map<String, Object> requestData) {

        requestData.entrySet().forEach(stringObjectEntry -> {
            System.out.println("key : " + stringObjectEntry.getKey()
                    + "value : " + stringObjectEntry.getValue());
        });
    }

    @PostMapping("/post-object")
    public void postObject(@RequestBody PostUserRequest requestData) {
        System.out.println("Test POST OBJECT");
        System.out.println(requestData.toString());
    }
}

PostUserRequest

• dto에 새로운 클래스 PostUserRequest 추가

public class PostUserRequest {
    private String id;
    private String name;
    private String email;
    private String address;
    private String password;

    public String getPhoneNumber() {
        return phoneNumber;
    }

    public void setPhoneNumber(String phoneNumber) {
        this.phoneNumber = phoneNumber;
    }

    @Override
    public String toString() {
        return "PostUserRequest{" +
                "id='" + id + '\'' +
                ", name='" + name + '\'' +
                ", email='" + email + '\'' +
                ", address='" + address + '\'' +
                ", password='" + password + '\'' +
                ", phoneNumber='" + phoneNumber + '\'' +
                '}';
    }

    @JsonProperty("phone_number")
    private String phoneNumber;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

}

TalendAPI Test

Talend 에서 request 보내면 짜잔!

Get Mapping

request : ~를 주세요 → get ~ 요청값이 바뀌면 get도 바뀔 수 있어야함

소스 트리 꼬이면 git mv 디렉토리 명령어로 이동 시킬 수 있음 - git mv \main \src

그리고 git status → deleted & renamed 확인 가능

• com.example.Student_에 controller 패키지 추가
• controller에 new class

💡 빨간 글씨에 alt+enter → 필요한 것 자동으로 import 해줌!!

Query RequestParam

http://localhost:8080/greeting/hello?name=친구

(@RequestParam(required = false, defaultValue = "")

@RequestParam(required = false, defaultValue = "1") int level)

map<s, s> 해당 영역을 <Key, Value>로 확인

<name, Inkyung>, <level, 3>

HTTP

https : 보안 영역

• 서버 - 클라이언트 모델
• 무상태 프로토콜
• TCP Protocol 위에서 동작 기본 포트는 80

DTO

클래스로 뭉쳐서 데이터를 받겠다!

Json

: JavaScript Object Notation

• 텍스트로 이루어져 있으므로, 사람과 기계 모두 읽고 쓰기 쉽다.
• 프로그래밍 언어와 플랫폼에 독립적이므로, 서로 다른 시스템간에 객체를 교환하기에 좋다

git checkout 로그의 캐시값 → 해당 로그의 버전으로 돌아감

const Square = () => {
    const sqStyle = {
      width: 50,
      height: 50,
      backgroundColor:randomHexColor(),
    };
    return <View style={sqStyle} />;
  };

  const [squares, setSquares] = useState([Square(), Square(), Square()]);

const randomHexColor = () => {
  return '#000000'.replace(/0/g, () => {
    return (~~(Math.random() * 16)).toString(16);
  });

원하는 것이 있으면 방법 찾아서 적용 (함수)

원하는 것 → 랜덤 색상 상자

• 색상 값은 #000000 ~ #FFFFFF

const randomHexColor = () => {
  return '#000000'.replace(/0/g, "a");
};  // 0을 찾으면 'a'로 바꿔줘

const randomHexColor = () => {
  return '#aaaaaa'.replace(/a/g, () => {
    return "0"
  });
};         // 'a'를 0으로 바꿔줘 , (arrow function)

#000000 : 검은색

#aaaaaa : 회색

(~~Math.random()*16)) .toString(16);

~~ flow : 소수점 버림, 16진수로 자름

arrow function

git log : 커밋 내역 보여줌, 빠져나가려면 q

git branch

git checkout main : 체크아웃

git log → 다시 최신버전으로 복원

<View style={[styles.buttonView]}>
          <Button title="ADD SQUARE" 
            onPress={() => setSquares([...squares, Square()])}/>
        </View>
        <View style={[styles.buttonView]}>
          <Button title="DELETE SQUARE" 
            onPress={() => setSquares(squares.filter((v, i) => i != squares.length-1))}/>

v = variables i = index

인덱스 ≠ lengh-1 이면 필터링해서 숨김

git check out

expo start : pc-mobile 핫스팟으로 연결, 또는 공유기로 연결 → 같은 네트워크, 같은 망 어딘가에 있는 걸 찾음

expo start —tunnel : 학교 pc, 학교 wifi로 연결 → tunnel(터널) 뚫어서 망 거쳐서 연결됨

• onPress : 누를 때 동작하는 핸들러

onPress={() => console.log("Click CHANGE FLEX DIRECTION")}

• flex direction : 방향 제어

• state

const [변경할 변수 이름, 변경하는 함수 이름] = useState(0);

npx expo start

console.log() 실행하려면 npx 실행하기!!!!!!!

Expo Documentation

import - JavaScript | MDN

expo start —tunnel

• git clone 한 경우에는 npm install 해줘야함

컴포넌트 쓸 때마다 필요한거 찾아서 쓰기

• 제일 기본 포맷

import React from "react";

const App = () => {
  return (<>
   <Text>hello~~</Text> //이렇게 하면 제일 위쪽 상단바에 가있ㅅ음ㅜㅜ
  </>); 
}

export default App;

npx expo install expo-constants

• View : UI를 잡아주기 위한 기본 틀!

<View style={{ paddingTop:Constants.statusBarHeight }}></View>

padding-top css와 동일한 요소임

import React from "react";
import { Text, View } from "react-native";

const App = () => {
  return (<>
    <View style={{ paddingTop:Constants.statusBarHeight }}></View>
    <Text>hello~~</Text>

  </>);
}

export default App; //위에 const App이랑 동일한 이름, 이렇게 내보내서 쓸거다!

git status : modified 확인

git log : 이전 작업 내역 확인

git reset —hard : 이전 소스로 복원

create project: view, button

expo init LayoutProps - ‘LayoutProps’ 폴더 생성

github - new repo 생성 ‘Props_201904385’

git remote add origin https://github.com/hufs-mobile/Props_201904385.git
# 에러나면 git remote remove origin 하고 다시
git branch -M main
git push -u origin main

✅  에러나서 git add 하고 커밋 하고 다시 푸시!

git add .
git commit -m "커밋 메세지 작성"
git push -u origin main

• 깃헙에 Props라는 repo 만들고 - LayoutProps 폴더를 연결하는 것이 push

[맥, Mac] 터미널에서 vscode(visual studio code) 열기 설정

→ 설정 해줬음!

code . - 해당 디렉토리의 vscode 열림

App.js → expo start —tunnel → Qr code 나옴

React Native · Learn once, write anywhere

리액트의 StyleSheet → 속성(색, 크기 등등)

<Button></Button>

<Button/>

title은 required!

import React from "react";
import { Button, View, ScrollView, StyleSheet } from "react-native"; //view, scrollview, stylesheet 쓸거임

const App = () => {
  return (<>
    <View style={[styles.container, styles.playingSpace]}>

    </View>
    <ScrollView style={[styles.container]}>
      <View style={[styles.controlSpace]}>
        <View style={[styles.buttonView]}>
          <Button title="1"/>
        </View >
        <View style={[styles.buttonView]}>
          <Button title="2"/>
        </View>
        <View style={[styles.buttonView]}>
          <Button title="3"/>
        </View>
        <View style={[styles.buttonView]}> 
          <Button title="4"/>
        </View>
        <View style={[styles.buttonView]}>
          <Button title="5"/>
        </View>
        <View style={[styles.buttonView]}>
          <Button title="6"/>
        </View>
        <View style={[styles.buttonView]}>
          <Button title="7"/>
        </View>
      </View>
    </ScrollView>

  </>);
}

const styles = StyleSheet.create({  //여기에 스타일 만들고 위에 view에 연결해줘야함
  container: {
    height:'50%' //높이 반반으로
  },
  playingSpace:{
    backgroundColor: 'lightyellow',
    borderColor: 'blue',
    borderWidth: 3
  },
  controlSpace: {
    backgroundColor: '#A5A5A5',
    flexDirection: 'row', 
    flexWrap: 'wrap'
  },
  buttonView: {
    width: '50%',
    padding: 10
  }
});

export default App;

Git

SCM : Source Control Management

• 다른 관리 툴도 많음

1. homebrew, git 설치
2. git config 설정 git config —global [user.name](http://user.name) “이름” git config —global [user.email](http://user.email) “이메일” git config —list
3. git clone “레포 주소 링크”
4. 새로운 레포 생성 web_학번 private, gitignore=java 클론하고 “학번.txt” 파일 생성
5. git status
6. git add 201904385.txt : 깃에 파일 추가
7. git commit vi 창 (command mode) - commit 메세지 작성 후 커밋 가능 i - insert esc :wq enter

git commit -m "커밋메시지" # vim 편집기화면을 건너뛰고 한줄짜리 메시지와 함께 곧바로 커밋할 수 있음

git commit --ammend # 방금 전 올린 commit message를 수정할 수 있음

8. git push : 서버에 넣음
9. git pull : cd test_web 가서 풀 하면 교수님이 만드신 파일 내 폴더에도 생김 - 서버의 변경사항을 내 pc에 적용
10. 다 하고 status 보면 nothing to commit, working tree clean
11. 파일 내용 변경 있으면 다시 git add 하고 푸시

페이스북이 만든 오픈소스 모바일 애플리케이션 프레임워크 Javascript로 iOS와 Android를 동시에 개발할 수 있다.

• 보통은 OS에 맞는 언어로 개발- iOS는 Swift와 Objective-C, Android는 Kotlin, Java

• 하나의 서비스를 위해 iOS와 Android를 따로 개발하면 유지보수 비용과 시간이 많이 필요하다. 이를 해결하기 위해 하이브리드 웹앱, RN, 하이브리드 앱 등 등장

ios/android 소스가 다르면 양쪽이 다 잘 돌아가는지 점검해야함 - 한쪽만 되는 경우 왕왕 양쪽을 다 할 수 있는 언어를 만들자! → React Native!

React Native · Learn once, write anywhere

오픈소스 - 신뢰성, 상용화 가능? / 오픈소스의 라이선스가 무엇인지 확인해야함

ReactNative의 장점

• 컴포넌트 기반으로 재사용성이 뛰어나다
• 리액트 기반이기 때문에 러닝커브가 적다.
• 크로스플랫폼으로 개발하기 때문에 생산성이 좋다.
• 모바일 앱 디버깅이 아닌 자바스크립트 디버깅을 사용한다.
• 따라서, Hot Reloading을 사용할 수 있기 때문에 소스코드 수정 후 다시 빌드해서 확인하는 네이티브 앱 방식과 다르게 실시간으로 확인이 가능하다.

ReactNative의 단점

• 아무래도 네이티브 앱보다는 성능이 떨어질 수밖에 없다.
• 네이티브 브릿지를 통해 자바스크립트 스레드와 연결해서 동작하더라도, 네이티브 방식보다는 성능이 떨어진다.
• 자바스크립트 스레드와 네이티브 스레드는 5ms주기로 네이티브 브릿지를 통해 통신한다.
• 5ms이상 시간이 걸리는 처리를 할 떄는 성능 저하를 경험할 수 있다.
  

Expo

리액트 네이티브를 베이스로 ios, aos, 웹 등을 개발하고 쉽게 빌드, 배포할 수 있게 도와주는 프레임워크!

Expo Documentation

Expo의 장점

• xcode나 안드로이드 스튜디오를 따로 배우지 않고 expo만으로도 앱 개발이 가능. expo가 이 두가지보다 상위버전 이기에, 내부적으로 두가지의 작업을 해낼 수 있다.
• 양쪽 소프트웨어(안드로이드/ios)를 오픈할 필요도, 각기 다른 플랫폼들에서 테스트를 거칠 필요도 없다.
• 윈도우에서 ios 앱을 빌드하는 것이 가능

• 이는 서버로 데이터를 보내고, 서버에서 파일을 가지고 응답할 수 있다는 것@! 앱 하나로 양쪽 소프트웨어를 사용하는 디바이스에서 실행이 가능

• ' over the air updates ' : 앱을 자바스크립트로 작업하고, 내용을 변경할 때 따로 앱스토어에 승인을 요청할 필요가 없음

• 보통 앱 개발 시에는 new버젼을 만들어 앱스토어에 퍼블리쉬 한 후, 인증을 받는 과정을 거쳐야 하지만 expo를 사용할 경우엔 생략됨.

• 또한 자바스크립트로 작업되어 내부적으로 자동 업데이트가 이뤄지기 때문에 직접 수정하고 에러를 고치는 시간을 단축할 수 있음!

Expo 시작하기

• nodejs.org → 들어가서 설치
  • node -v 버전 확인
• create a snack → expo go 에서 qr로 확인

*- expo 설치 * $ npm install expo-cli --global 뭔가 설치가 안돼서 애먹었는데 앞에 $ sudo 붙여서 실행하니까 해결됐음

*- 프로젝트 생성 * expo init 프로젝트이름 blank 선택하고 enter

- expo 실행 해당 폴더 안에 들어가서 expo start --tunnel

• tunnel : 외부 네트워크에서도 캐스트 가능 (와이파이, 5G 등)
• expo start --web : 웹에서도 변동사항 확인 가능

vscode에서 react ES7 설치 폴더 선택

터미널 명령어

ls - 폴더 촤라락 보여줌

cd 폴더명 → 해당 폴더로 이동 / cd.. 상위 폴더로 이동 / cd 폴더명 앞글자 + Tab

pwd 현재 폴더 위치

mkdir

shift + 오른쪽 마우스 열기 → 터미널 열기