회사일과 결혼식 준비라는 시간때문에 쉬고 있었던 웹개발을 새해도 됫겠다 다시 시작 해볼라고 한다.

 

저번에 들었던 스파르타코딩클럽 웹개발 종합반 재수강을 하면서 감을 다시 감을 익히고 코딩 로드맵이 

 

새로 생긴거 같아서 웹개발 종합반 재수강 후 웹개발 플러스 수강 예정이다. 

 

웹개발 코딩 로드맵

 

 

확실히 재수강을 하니 저번보다는 알아 듣는 속도가 빨라져서 숙제나 연습하기 속도가 빨라진거 같다.

 

몇가지만 정리하고 빨리 2주차 재수강 들으러 가야겠다.

 

 

1. 폰트 변경

 

 

전체 폰트 변경
구글 폰트 https://fonts.google.com/specimen/Jua?subset=korean&query=Woowahan+Brothers&noto.script=Kore#styles

 

 

형관팬 표시 된 곳만 사용 

 

 

 

 

 

2. 백그라운드 이미지 설정

 

background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url();
background-position: center 10%;
background-size: cover;

linear-gradient : 백그라운드 이미지 밝기 설정 

background-position: center 설정 후 % 값으로 사진 위아래 위치 고를수 있음

 

 

 

3. 약간의 모바일처리 

 

width: 95%;
max-width: 500px;

화면 폭 500px 전에는 95%로 맞추다가, 넘으면 500px으로 

 

 

 

메인화면 구축

 

 

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, ScrollView, Image, TouchableOpacity } from 'react-native';

react 도구상자 사용

ScrollView : 메인화면 위아래 스크롤 기능

horizontal={true} 추가시 왼쪽 오른쪽 스크롤기능 기본값은 true

 

TouchableOpacity : 버튼 구현

const pizza : const + 변수 이미지url 

 

 

 

주석처리 확인

export default function App() {
  return (
    <ScrollView style={styles.container}>
     
        <Text style={styles.textStyle}>나만의 꿀팁</Text>
        {/*이미지값은 밑에 width와 height를 넣어줘야지 화면에 나타남*/}
        <Image style={styles.mainImage} source={{uri:main}}/>
       
        <ScrollView style={styles.mybutton} horizontal={true}>
           {/*horizontal 기본값이 true 옆으로 스크롤 기능*/}
        <TouchableOpacity style={styles.button01}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
        <TouchableOpacity style={styles.button02}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
        <TouchableOpacity style={styles.button03}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
        <TouchableOpacity style={styles.button04}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
        </ScrollView>

        {/*보통 이미지 텍스트 같이 있는 뭉터기를 card라고 함 */}
        <View style={styles.pizzaContainer}>
          <View style={styles.pizzacard}>
          <Image style={styles.pizzaimage} source={{uri:pizza}}/>
          <View style={styles.cardText}>
            <Text style={styles.cardTitle}>먹다 남은 피자를 촉촉하게!</Text>
            <Text style={styles.cardDesc} numberOfLines={3}>먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text>
            {/* numberOfLines={3} 세줄만 표현하고 싶다 나머지는 ...  */}
            <Text style={styles.cardDate}>2020.09.09</Text>
          </View>
        {/*전체적으로 감싸는 테그는 무조건 View 사용 */}
          </View>

         
        </View>

       
       
     

     
        <StatusBar style="light" />
     

    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
   
    backgroundColor: '#fff',
   
   
  },
 
 
  textStyle: {
    fontSize : 20,
    fontWeight : "700",
    marginTop : 50,
    marginLeft: 20,
 
  },
  mainImage: {
   
    width:'90%',
   
    height:200,
   
    borderRadius:10,
    marginTop:20,
    marginBottom:20,
    alignSelf:"center"
  },
 
  mybutton: {
   
    margintop:20,
    marginLeft:10,
    height:60,
   
   
   

  },
  button01: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#ffd700",
    borderColor:"#fff",
    borderRadius:15,
    margin:7,
   
   
  },
  button02: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#FFA07A",
    borderColor:"#fff",
    borderRadius:15,
    margin:7
  },
  button03: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#B0E0E6",
    borderColor:"#fff",
    borderRadius:15,
    margin:7
  },
  button04: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#FF69B4",
    borderColor:"#fff",
    borderRadius:15,
    margin:7
  },
  middleButtonText: {
    color:"#fff",
    alignSelf:"center",//text 가운데정렬
    fontWeight: "700",
  },
    pizzaContainer: {
      marginTop:10,
      marginLeft:10
  },
   
 
    pizzacard:{
      flex:1,
      //컨텐츠들을 가로로 나열 row
      //세로로 나열은 column <- 디폴트 값임
      flexDirection:"row",
      margin:10,
      borderBottomWidth:0.5,
      borderBottomColor:"#eee", //박스 밑에만 줄긋기
      paddingBottom:10
 
  },
    pizzaimage: {
      flex:1, //flex 1/3
      width:100, //100, 100 정사각형
      height:100,
      borderRadius:10,

  },
  cardText: {
    flex:2, //flex 2/3
    flexDirection:"column", // 세로로 구현해야되니 column
    marginLeft:10,
  },
  cardTitle: {
    fontSize:20,
    fontWeight:"700"
  },
  cardDesc: {
    fontSize:15
  },
  cardDate: {
    fontSize:10,
    color:"#A6A6A6",
  }
 
   
   
 
   

   
 

});

 

import React from 'react';
import MainPage from './pages/MainPage';
import AboutPage from './pages/AboutPage';
export default function App() {
 
  //return (<MainPage/>)
  return (<AboutPage/>)
 
}
 
 
 
 
App.js파일에 이렇게 넣어주면
Mainpage는 주석처리 되고 
AboutPage 파일 불러 올수있음
반대로 AboutPage 주석처리하고 
Mainpage 주석처리 해제시 Mainpage파일 불러 올수있음
 
 
 
 
2주차 숙제
 
 

 

AboutPage.js에 똑같이 만들기

 

import React from 'react'
import {SafeAreaView,View,Text,StyleSheet,Image,TouchableOpacity} from 'react-native'

 

export default function AboutPage(){
  return (
  <SafeAreaView style={styles.container}>
   
    <View style={styles.itemcontainer}>
    <Text style={styles.title}>HI! 스파르타코딩 앱개발 반에 오신것을 환영합니다</Text>
    </View>
    <View style={styles.item1}>
    <Image style={styles.mainImage} source={{uri:about}}/>
    <Text style={styles.card1}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
    <Text style={styles.card2}>꼭 완주하셔서 꼭 여러분것으로 만들어가시길 바랍니다</Text>
    <TouchableOpacity style={styles.middleButton04}><Text style={styles.ButtonText}>여러분의 인스타계정</Text></TouchableOpacity>
    </View>

 

  </SafeAreaView>)

 

}
const styles = StyleSheet.create({
    container: {
      //앱의 배경 색
      flex : 1,
      backgroundColor: '#00008b',
     
    },
    itemcontainer:
    {
       
        justifyContent:'center',
       
       

 

    },

 

    title: {
   
      //폰트 사이즈
      fontSize: 31,
      //폰트 두께
      fontWeight: '500',
      //위 공간으로 부터 이격
      marginTop:70,
      //왼쪽 공간으로 부터 이격
     
      color : '#fff',
      textAlign: 'left',
      alignSelf: 'center'
     
     
    },

 

   
    item1: {
       
       
        backgroundColor:'#fff',
        width:250,
        height:440,
        alignContent:'center',
        margin:50,
        marginTop:70,
        borderRadius:20,
        alignItems:'center'
       

 

    },

 

    mainImage: {

 

        width:130,
        height:130,
        alignSelf:'center',
        marginTop:60,
        borderRadius:20,
    },

 

    card1 : {
        fontSize:17,
        textAlign:'center',
        fontWeight: '700',
    },
    card2 : {
        fontSize:12,
        textAlign:'center',
        marginTop:20,
        fontWeight: '600',

 

    },
    middleButton04:{
        width:160,
        height:50,
        padding:15,
        backgroundColor:"#fdc453",
        borderColor:"deeppink",
        borderRadius:15,
        marginTop : 20,
       
       
    },

 

    ButtonText : {
        color : '#fff',
      textAlign: 'center',
      alignSelf: 'center'
    }
})
 

1. ajax 활용 (서울시 날씨 데이터)

 

function q1() {
  $('#names-q1').empty()
  $.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    data: {},
    success: function (response) {
      let rows = response['RealtimeCityAir']['row']
      for (let i= 0; i < rows.length; i++) {
        let gu_name = rows[i]['MSRSTE_NM']
        let gu_mise = rows[i]['IDEX_MVL']

        let temp_html = ``
        //<li class="bad">${gu_name} : ${gu_mise}</li> 처음에는 넣어주고 밑에 if문 설정 완료 되면 공간 비우기

        if (gu_mise > 40) {
           temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
        } else {
           temp_html = `<li>${gu_name} : ${gu_mise}</li>`

        }

        $('#names-q1').append(temp_html)

      }

    }
  })
}

//$('#names-q1').empty() 기존꺼 지우고 새로 업데이트

 

 

 

$('#names-q1').empty()

.empty()

해당 코드를 맨 윗줄에 둘 경우 .ajax 콜하기 전에 지우고 콜함 없으면 누적되면서 쌓임

기존꺼 지우고 새로 업데이트

 

 

 

 

let rows = response['RealtimeCityAir']['row']
for (let i= 0; i < rows.length; i++) {
  let gu_name = rows[i]['MSRSTE_NM']
  let gu_mise = rows[i]['IDEX_MVL']

위치같은거 참고해서 넣으면 될듯

 

 

let temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`

 

let temp_html = ``

<li class="bad">${gu_name} : ${gu_mise}</li> 처음에는 넣어주고 if문 설정 완료 되면 공간 비우기

if, else 앞에 let도 지우기

 

 

 

if (gu_mise > 40) {
   temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
   temp_html = `<li>${gu_name} : ${gu_mise}</li>`

gu-mise 값이 만약에 40 보다 크면 class="bad"(text 빨간색 표시) 가 되고

그게 아니면 검정으로 표시

 

 

 

 

2. ajax 활용 (서울시 따릉이 데이터)

 

function q1() {
    $('#names-q1').empty()
     $.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulbike",
    data: {},
    success: function (response) {
        let rows = response['getStationList']['row']
        for (let i = 0; i<rows.length; i++) {
            let name = rows[i]['stationName']
            let rack = rows[i]['rackTotCnt']
            let bike = rows[i]['parkingBikeTotCnt']

            let temp_html = ``

            if (bike < 5){
                temp_html = `<tr class="urgent">
                            <td>${name}</td>
                            <td>${rack}</td>
                            <td>${bike}</td>
                        </tr>`

            } else {
                temp_html = `<tr>
                            <td>${name}</td>
                            <td>${rack}</td>
                            <td>${bike}</td>
                        </tr>`

            }
        $(`#names-q1`).append(temp_html)


        }


    }
  })
}

 

 

 

 

3. ajax 활용 (api 이용)

 

function q1() {
  $.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/rtan",
    data: {},
    success: function(response){
        let url = response['url'];
        let msg = response['msg'];
        
        $("#img-rtan").attr("src", url);
        $("#text-rtan").text(msg);
      }
    })
}

 

 

  • 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
  • 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

 

 

4. ajax 활용 (2주차 최종 과제)

 

 

실시간 서울시 온도

 

 

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
        data: {},
        success: function (response) {
            let templ = response['temp'];
            $("#temp").text(templ);

        }
    })
})

 

 

<p>현재기온 : <span id="temp">0.00</span>도</p>

span으로 묶어서 앞에 0.00만 바뀌도록 설정

jQuery + Javascript의 조합을 연습

 

1. 

function q1() {


    // 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
    // 2. 만약 입력값이 빈칸이면 if(입력값=='')
    // 3. alert('입력하세요!') 띄우기
    // 4. alert(입력값) 띄우기

    let inputText = $('#input-q1').val()

    if (inputText==''){
        alert('입력하세요!')
    }
    else {
        alert(inputText)
    }

    
}

 

 

2.

function q2() {
    // 1. input-q2 값을 가져온다.
    // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
    // 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
    // 4. alert(도메인 값);으로 띄우기
    // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기

   let inputEmail = $('#input-q2').val()
    if (inputEmail.includes('@')) {
        alert(inputEmail.split('@')[1].split('.')[0])
    }
    else {
        alert('이메일이 아닙니다.')
    }

console창에서 .split 나눈 후 ( inputEmail.split('@')[1].split('.')[0] ) 적용하면 좋은거 같음


let inputEmail = 'abc@gmail.com'

inputEmail.split('@')
(2) ['abc', 'gmail.com']

inputEmail.split('@')[1]
'gmail.com'

inputEmail.split('@')[1].split('.')[0]
'gmail'

 

 

3-1.

function q3() {
    // 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
    // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
    // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)

    let inputPush = $('#input-q3').val();
    let temp_html = `<li>${inputPush}</li>`;
    $('#names-q3').append(temp_html);

}

 

3-2.

 

function q3_remove() {
    // 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)

    $('#names-q3').empty()
}

1) 배열에서 특정 원소 개수 구하기 - map 함수를 사용해서 해결하기

답안)

let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']


let count = 0;
fruit_list.map((f)=>{
    if(f == "딸기") count += 1
})

console.log(count)

 

내가 했던 방식

let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']


function sum(num1, num2) {
    let count = 0;

    num1.map(item => {
        if (item === num2) count++;
    });
    return count;
}
console.log(`count : ${sum(fruit_list, '딸기')}`);

 

똑같이 답은 2로 나오지만 내가 했던방식은 function 함수를 사용

코드가 답안보다 길고 알아보기 힘든듯 하다.

 

 

 

2)

filter 함수로 '포도'만 들어 있는 podo_list 리스트 구현해보기

답안)

 

let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

let podo_list = fruit_list.filter((f)=>{
return f == '포도'
})

console.log(podo_list) //['포도','포도','포도']

 

내가 했던 방식

 

let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']

let podo_list = fruit_list.filter(fruit_list => fruit_list === '포도');

console.log(podo_list)

 

역시나 내가 했던방식은 간결하지 못하다.

답안도 그렇듯 (f) 사용하고 return을 사용해야 될듯

 

 

 

+ Recent posts