TIL_240126

라미·2024년 1월 26일

TIL 학습일지

TIL

목록 보기

2/25

JavaScrip / jQuery / Fetch

JavaScript : 웹을 동적으로 움직일 수 있게 한다.
jQuery : html을 선택하여 쉽게 조작할 수 있도록 도와준다.
Fetch : 짧은 코드로 요청을 보내고 받아올 수 있다.

JavaScript

프로그래밍 언어 중 하나, 브라우저가 알아들을 수 있는 언어.
브라우저 → 개발자 도구 → console 창에서 실행 할 수 있다. (모든 브라우저에 console 창 존재)
브라우저에서 console 창 여는 법 (window 기준)
1. F12(단축키) or 브라우저 우클릭 - 검사 → console 창 클릭
2. 개발자도구-console 탭 클릭
js 코드 실습(브라우저)

🤦‍♀️브라우저 콘솔 창에 복사 안 되는 현상 발생

문제상황 : 브라우저 console 창에 실습코드를 붙여넣기 하니까 위와 같은 경고문구가 뜨면서 붙여넣기가 안됨

🙆‍♀️해결완료

해결방법 : 경고문구가 붙여넣기 허용하려면 콘솔창에 'allow pasting' 입력하라고 해서 입력해줬다. allow pastig 입력 후 붙여넣기 정상 작동 확인.

Code Runner(VS Code 확장)

VSCode에서 console.log 찍어서 브라우저 console로 확인하는게 노트북 하나로 하는 지금 너무 답답해서 구글링 해본 결과 VSCode에 'Code Runner' 라는 확장을 설치하면 VSCode 내의 OUTPUT 출력 창에서 바로 확인 할 수 있는 확장이 존재하였다.

Code Runner 설치 (VSCode 마켓)
실행할 파일 Ctrl + alt + n

🙆‍♀️VSCode 내에서 실행 화면

변수 (Variables)

변수 선언과 할당
- 변수를 선언할 때 var, let, const 키워드를 사용한다.
- var: 함수 스코프를 가지며, 중복 선언이 가능하다.
- let: 블록 스코프를 가지며, 중복 선언이 불가능하다.
- const: 블록 스코프를 가지며, 상수로 값을 할당하면 변경할 수 없다.(재할당이 불가능)

JavaScript 변수의 선언과 할당

 var age = 25;
 let name = "John";
 const PI = 3.14;

//var : 중복 선언, 재할당 가능. 
var age = 25;
var age = 20;
age = 30;

//let : 중복선언 x, 재할당 가능
let name = "Jone";
let name = "Bob"; //에러 발생: 'x' has already been declared -> 중복 선언 불가능
name = "Bob"; // 재할당 가능

const PI = 3.14;
PI = 3.19; //ERROR : CONST 는 재 할당 불가능
//const로 선언된 변수는 값은 변경할 수 없지만 객체의 속성은 변경할수 있다.(Object, array,List...)
const myObject = { value: 10 };
myObject.value = 20; //값을 변경하는게 아닌 속성을 변경하는 것이기 때문에 error x
console.log(myObject.value);  // 20

호이스팅
- 변수 및 함수 선언이 스코프의 상단으로 끌어올려지는 동작.
- 선언 전에 변수를 사용해도 error가 발생하지 않지만 값은 'undefined'로 초기화된다.(선언만 끌어올릴 뿐 할당(초기화값)은 호이스팅 하지 않는다)

호이스팅 예시

//변수 호이스팅
console.log(x); // 선언 전에 변수 사용 -> 변수 호이스팅으로 error x 출력 : undefined
var x = 10;
console.log; // 출력 : 10

//호이스팅에 의해 해석된 결과
var x; //변수 선언
console.log(x);
x = 10; //값 할당
conlose.log(x);

//함수 호이스팅 : 함수 선언은 젠체가 끌어올려진다.(함수 표현식은 호이스팅 x)
sayHello(); // "Hello~"    
function sayHello() {
	console.log("Hello~")
}

//호이스팅에 의해 해석 -> 함수선언 전체가 끌어 올려지기 때문에 선언전에 호출해도 정상동작
function sayHello() {
	console.log("Hello~")
}
sayHello();

//함수 표현식의 호이스팅 -> 변수에 함수를 할당하는 형태로 정의되어 error
		sayHello();  // TypeError: sayHello is not a function
		var sayHello = function() {
		console.log("Hello, World!");
		};

연산자 (operators)

종류	사용법	설명
산술 연산자	`+`, `-`, `*`, `/`, `%`	숫자 간의 산술 연산을 수행한다.
문자열 연산자	`+`	문자열을 결합한다.
할당 연산자	`=`, `+=`, `-=`	변수에 값을 할당하거나 수정한다.
비교 연산자	`==`, `===`, `!=`, `!==`, `<`, `>`	값의 비교를 수행한다.
논리 연산자	`&&` (AND), \|\| (OR), `!` (NOT)	논리 연산을 수행한다.
삼항 연산자	`condition ? expr1 : expr2`	조건에 따라 값을 반환한다.
타입 연산자	`typeof`	변수 또는 값의 데이터 타입을 반환한다.

해야할 일

js 반복문, list, 객체 개념 정리,jQuery

Fetch

server 요청 GET / POST

GET방식

정보를 요청할 때 사용되는 HTTP 메서드

데이터를 URL에 첨부하여 전송, URL 끝에 쿼리 문자열을 포함하여 데이터 전달(QueryString)

주로 데이터를 요청하는 용도(읽기,검색)

특징

데이터가 URL에 노출되에 보안에 취약하다

브라우저에서 캐싱이 가능하여 같은 요쳉에 대해 캐시된 응답을 사용 할 수 있다.

URL 길이 제한이 있을 수 있어 큰 데이터를 전송하기 어렵다.

예시
https://example.com/api/data?name=John&age=25
- '?' 기준 앞부분 : 서버주소, 뒷부분 : 전송데이터(name 이라는 이름에 John 이라는 데이터를 전달한다.)
- 전달할 데이터가 여러개라면 '&' 으로 연결한다.

POST방식

받은 정보를 서보로 제출 할 때 사용되는 HTTP 메서드

주로 HTML 폼에서 데이터 전송(회원가입, 로그인, 회원탈퇴 등...)

데이터의 생성, 삭제, 변경이 일어날때 사용

클라이언트에서 서버로 데이터를 전송할 때 사요으 HTTP 요청의 body에 담겨 전송

특징

데이터가 URL에 노출되지 않아 상대적으로 안전하다

브라우저에 캐싱되지 않는다

데이터의 길이제 제한이 없어, 큰 데이터를 전송 할 수 있다.

Fetch 기본 틀

fetch('https://api.example.com/data')
  .then(response => {
    // 네트워크 요청에 대한 응답을 받았을 때 실행되는 코드
    if (!response.ok) {
      throw new Error('네트워크 오류: ' + response.statusText);
    }
    return response.json(); // JSON 형식의 응답을 파싱하여 반환
  })
  .then(data => {
    // 파싱된 데이터를 사용하는 코드
    console.log(data);
  })
  .catch(error => {
    // 네트워크 요청이 실패하거나 응답을 처리하는 도중 에러가 발생한 경우 실행되는 코드
    console.error('에러 발생:', error);
  });