Dev/Javascript

[JS] JQuery / JSON(기초)

syuare 2025. 3. 21. 17:21

 

JQuery

오픈 소스 기반의 Javascript 라이브러리

  • 쉽게 말해 사용하기 쉽게 다른 사람들이 만들어둔 Javascript 라는 의미

JQuery를 이용하기 위해서는 JQuery 라이브러리를 코드에 추가해야 사용할 수 있다.

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

오늘 사용해본 JQuery

  • $('id').toggle();  -> 토글 기능
  • let a = $('a').val -> id 'a' 변수에 값 넣기
  • $('id').append();  -> 값 붙여넣기
  • let a = ` ` (백틱) -> 문자열에 변수 포함할 때 사용
  • ${a} -> 문자열에 넣을 변수 a 값
  • console.log() -> 괄호 안의 내용을 콘솔창에 출력할 때 쓰는 명령어

*백틱(`) 은 무엇이고 왜 사용할까?

백틱(`)이란? 숫자 1 왼쪽에 있는 입력 키 (흔히 shift를 같이 사용할 경우 (~)물결표가 입력되는 키를 의미함)

 

JS에서 문자열을 표현할 때는 " " 혹은 ' ' 를 사용하는데, 변수를 문자열에 포함하고자 하려면 " " / ' ' 를 이용하여 문자열을 열고 닫은 후 (+) 기호를 사용하여 포함할 수 있다.

 

다만 변수가 적을 때는 크게 상관없으나 많아질 경우 작성을 조금 더 편하게 사용하기 위해 백틱을 사용

const city = "seoul";
const name = "Syuare"
const age = 20;

// 일반적인 문자열
console.log("저는 " + city + " 에 살고 있구요, 이름은 " + name + ", 나이는 " + age + " 살 입니다.");

// (`) 사용 문자열
console.log(`저는 ${city} 에 살고 있구요, 이름은 ${name}, 나이는 ${age} 살 입니다.`);

 

JSON

JavaScript Object Notation (직역) 자바스크립트 객체 표기법

  • 데이터를 쉽게 교환하거나 저장하기 위한 텍스트 가반의 데이터 교환 표준
  • 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식
  • 쉽게 생각하면 데이터 덩어리를 의미함
    • 택배를 예시로 들어보면
    • 상자(JSON)에 물건과 보내는 사람, 받는 사람 등의 필요한 정보(데이터)를 담아 택배(네트워크)를 보내는 것(데이터 주고 받는 것)으로 볼 수 있다.
더보기

(예시) 택배를 보낼때 필요한 정보는?

  • 보내는 사람 이름 / 주소 / 연락처
  • 받는 사람 이름 / 주소 / 연락처
  • 물건

택배를 보내려면 1) 상자에 물건을 넣고 2) 보내는 사람, 받는 사람 정보를 적고 보낸다.

이 때 상자가 JSON에 해당한다. 즉 원하는 것을 보내고 받는데 사용하는 데이터 덩어리를 의미

 

{
"받는 사람" : {
                      "이름" : "철수", 
                      "주소" : "대한민국 서울특별시 광진구 철수 집",
                      "연락처" : "010-1234-5678"
                    },
"보내는 사람" : {
                        "이름" : "영희",
                        "주소" : "대한민국 서울특별시 성동구 영희네 집",
                        "연락처" : ["010-9876-5432", "02-523-6789"]
                       }
}

 

JSON의 구조 (형태)

Key: Value > 딕셔너리 형 (사전처럼 이름(key)와 그 이름에 맞는 설명(value)가 한 쌍인 형태)

  • key에는 항상 문자열이 온다. JSON에서 문자열은 항상 " "로 값을 입력해야 한다.
  • value에는 숫자(Number), 문자열(String), 참거짓(boolean), 객체({}), 배열([]), null(빈 값)이 올 수 있다. (기본 자료형)
  • key와 value는 클론(:)으로 구분
  • 객체는 {}로 묶어서 표현
    • 객체란? key-value 쌍의 집합을 의미함.
    • {} 안에는 key-value쌍 만 올 수 있음
  • 배열은 []로 묶어서 표현 
    • value에 올 수 있는 값이 올 수 있음
  • value에 데이터 값을 나열하고 싶을 때는 쉼표(,) 사용
var jsObject = {
    key: 'value',
    Key2: 100,
    'weird-key': true,
    anotherkey: {
        keya: 1,
        keyb: 2
    },
    anotherkey2: [val1, val2]
}