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

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

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

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

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

1. 폰트 변경

형관팬 표시 된 곳만 사용 

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으로 

메인화면 구축

const pizza : const + 변수 이미지url 

주석처리 확인

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'

const about = 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2FaboutImage.png?alt=media&token=13e1c4f6-b802-4975-9773-e305fc7475c4'

 

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을 사용해야 될듯