👦 내일배움캠프/TIL(Today I Learned)

TIL_220419_1

한 번 정주행 했던 웹개발 강의를 다시 복습하는 주간.

어제 오늘을 기준으로 완강을 목표로 한다.

배웠던 내용이긴 하지만, 다시금 들으면서 내 것으로 만들어 가는 중.

휘둘리지 말고 나의 페이스를 유지하며 나아가보자.

무엇을 느꼈는가.

복습을 하면 할 수록 나의 현재 지표를 알 수 있었다.

배웠던 내용임에도 불구하고 연습문제 조차 시간을 들여 해결할 수 있었다.

시간이 무슨 문제인가 하겠지만, 그만큼 나는 아직 이 코드에 숙달되어 있지 않다는 것을 알 수 있다.

그래도 현저하게 이해하고 쓰고 넘어가는 과정이 짧아지고 2주차 과정이 끝나면서 빠짐없이 혼자서 해결할 수 있었다.

처음에는 되려 멘땅에 해딩하는 것이 무모하다고 생각했지만, 되려 좋은 경험이 되었다는 것을 몸소 증명했다.

모르더라도 일단 코드 하나 하나를 입혀가며 오류를 발견하고 그 오류를 해결하기 위해 구글링으로 시간을 투자했던 기억.

코드의 형태를 보며 어떤 식의 흐름인지 눈으로 익히고, 완전히 이해가 안되더라도 어떤 부분이 문제였음을 발견했던 기억.

그리고 지금 이 순간 복습하며 다시 이해하는 이 과정 속에서 나는 제대로 이해하는 경험을 하고 있다.

배우는 방법이 달랐지만, 내 것으로 만드는 데 큰 도움을 준 경험들

해보고자 했던 마음으로 비롯된 자신감

잊지 말고 이어가자.

[오늘 하루 필기식 배운 내용 기록하기]

jQuery, Ajax

jQuery 를 이용해 Javascript 로 html 을 쉽게 제어

Ajax 를 이용해 다시 서버에 데이터를 요청

간단한 홀짝 버튼

<!--    count 가 0 일때    -->
let count = 0
// 클릭 시 count 가 1씩 증가한다
function hey(){
    count += 1
    // 조건 : count 값에 2로 나누어 0일 때 짝수이면 짝수
    if (count % 2 == 0) {
        alert('짝수입니다!')
    // 조건 : 그렇지 않으면 홀수
    } else {
        alert('홀수입니다!')
    }
}

jQuery 란?

HTML의 요소를 조작하는, 편리한 Javascript 를 미리 작성해둔 것. 라이브러리!

- CSS 의 라이브러리. 부트스트랩!!

jQuery 는 전문 개발자들이 미리 짜둔 코드를 사용하는 것이기 때문에 사용하기 전 항상 임포트가 필수!!

jQuery 와 Javascript 비교

Javascript

document.getElementById("element").style.display = "none";

jQuery

$('#element').hide();

Javascript 의 길고 복잡한 반면에 jQuery 를 통해 직관적으로 사용할 수 있는 것을 볼 수 있다.

jQuery CDN 임포트

https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

<head> 와 </head> 사이에 script 추가

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

jQuery CSS 차이

CSS 는 선택자를 class 로 지정

jQuery 는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 지정

jQuery 짜리몽땅

- 인풋박스

id 값을 불러오고[ .val(); ] 입력하기[ .val('_내용입력_'); ] 위한 명령어 $('#_id 값_')

- 박스 숨기기/보이기

$('#_id 값_').hide() / $('#_id 값_').show()

- 추가

$('#_id 값_').append('_값_')

-- let temp_html 의 변수에 백틱( ` ) 값을 추가 `<button>나는 버튼이다</button>`

-- let temp_html = `<button>나는 버튼이다</button>`

-- 백틱 안의 값은 아직 html의 역할을 할 수가 없다. jQuery 로 불러와(.append) 줌으로써 역할을 부여한다.

-- $('#_id 값_').append(temp_html)

.includes()

문자열이 특정 문자열을 포함하는지 확인하는 매서드

string.includes( searchString, length )

searchString : 검색할 문자열로 필수 요소. 대소문자를 구분

length : 검색을 시작할 위치. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 함

.split()

문자열을 분할하는 메서드

string.split( separator, limit )

separator : 분할의 기준 예를 들어 @ 를 기준으로 분할할 때는 '_@_'

limit : 최대 분할 개수. 선택 사항으로, 값을 정하지 않으면 전체를 다 분할

JQuery 연습 내 것으로 만들기 성공적

-- 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기

function q1() {
    if ($('#input-q1').val() == '') {
        alert('입력하세요!')
    }
    else {
        alert($('#input-q1').val())
    }
}

-- 버튼을 눌렀을 때 '@' 와 '.' 을 생략한 도메인만 띄우기

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

-- 이름을 입력하면 아래 추가하기

function q3() {
    let name_text = $('#input-q3').val()
    let temp_html = `<li>${name_text}</li>`
    if ($('#input-q3').val() == ''){
        alert('이름을 입력하세요!')
    }
    else {
        $('#names-q3').append(temp_html)
    }
}

-- 입력한 내용 지우기

function q3_remove() {
    $('#names-q3').empty()
}

JSON : JavaScript Object Notation

데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식

-- javascript에서 객체를 만들 때 사용하는 표현식을 의미

-- JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용

-- JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법

출처: https://usefultoknow.tistory.com/15 [UsefulToKnow]

JSON 의 특징

-- 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용

-- 자바스크립트 객체 표기법과 아주 유사

-- 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객채로 변환할 수 있는 이점

-- JSON 문서 형식은 자바스크립트 객체의 형식을 기반

-- 자바스크립트의 문법과 굉장히 유사하지만 텍스트 형식

-- 다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있음

-- 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공

출처: https://usefultoknow.tistory.com/15 [UsefulToKnow]

JSON 의 문법

출처: https://usefultoknow.tistory.com/15 [UsefulToKnow]

GET / POST 요청 이해하기

클라이언트가 요청하는 타입

- GET : 통상적으로 데이터 조회(Read)를 요청할 때

-- 예) 영화 목록 조회

- POST : 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때

-- 예) 회원가입, 회원탈퇴, 비밀번호 수정

Ajax 연습하기

function q1() {
    $('#names-q1').empty(); // 구문이 매번 돌아갈 때 내용을 지워준다.
    $.ajax({
        type: "GET", // 불러오기 뭐를?
        // url 데이터 정보를!
        url: "<http://spartacodingclub.shop/sparta_api/seoulair>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 = '' // 추가할 데이터를 html 로 구현하기 위해 변수 지정

                if (gu_mise > 70) { // 조건을 걸어 해당하는 값만 효과를 적용시킨다.
                    temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>` // bad 클래스에 폰트 색깔 빨간색 적용
                } else {
                    temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                }

                $('#names-q1').append(temp_html); // html 로 추가
            }
        }
    })
}

Ajax 활용

let url = response['url'] // 가져올 지정값 이름, 변수 지정
let msg = response['msg']

$('#img-rtan').attr('src',url) // 이미지 바꾸기
$('#text-rtan').text(msg) // 텍스트 바꾸기

이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);

텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

'👦 내일배움캠프 > TIL(Today I Learned)' 카테고리의 다른 글

TIL_220422_미니 팀 프로젝트 (0)	2023.01.01
TIL_220421_미니 팀 프로젝트 (1)	2023.01.01
TIL_220420_ 미니 팀 프로젝트 (1)	2023.01.01
TIL_220419_2 (0)	2023.01.01
TIL_220418 (1)	2023.01.01

Contents

새소식

인기 검색어

TIL_220419_1

[오늘 하루 필기식 배운 내용 기록하기]

'👦 내일배움캠프 > TIL(Today I Learned)' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바