[정터디] TIL 2일차

자바스크립트를 배우는 이유

1. 유저의 Painpoint를 해결하기 위해
2. 서비스를 만든다.
3. 서비스를 만들기 위해
4. 웹 개발을 배운다.
5. 웹 개발하기 위해
6. 자바스크립트를 배운다.

결론 : 유저의 Painpoint를 해결하기 위해서 JS를 배운다.

JS 기초 문법

• 변수 선언 : 3단계를 거쳐 생성되는 변수
  • 선언 → 초기화 → 할당
    • 변수를 변수 객체에 등록 → 변수를 메모리에 할당하고, undefined로 초기화 → undefined 로 초기화된 변수에 실제로 값을 할당
• var
  • 변수명에 데이터를 재할당, 동일한 변수명으로 재선언 가능하다.

  // 이 문제의 결과를 다 같이 생각해봐요.
  var x = 12;
  var y = 18;
  var sum = x + y;
  
  console.log(sum); // 1번
  
  var x = 2;
  
  console.log(sum) // 2번
  

  • 정답 확인2번의 정답은 30입니다.JS에서 sum이 30으로 유지되는 이유는 sum 변수가 x 와 y의 값을 더한 결과를 저장했기 때문입니다.
  • var x = 12; var y = 18; var x = 2; var sum = x + y; console.log(sum) // 20
  • 왜 그런 결과가 나올까요? 저도 이번 기회에 논리적으로 생각하지 않음을 반성했습니다.
  • 1번의 정답은 30입니다.
  • 함수 레벨 스코프
    • 함수 내부에 선언된 함수만 지역변수로 한정하고, 함수 밖에서 선언한 var 변수는 전역변수로 간주해 외부에서도 접근이 가능하는 데, 이로 인해 문제가 발생할 수 있다.
    • 의도치 않는 변수값 변경, 코드 예측이 어려워짐.
  • var 키워드 생략 가능.
  • 중복 선언 허용
• const , let
  • 코드 평가 시점에 선언만 진행되므로, 변수의 할당문이 실행되기 전 참조가 불가능.

  console.log(a);
  const a = 1;
  
  // 실행결과
  리퍼런스 에러 발생. 
  

  • 블록 레벨 스코프
    • 코드 블록 내에서 접근 가능한 스코프
    • 변수에 한정적으로 접근이 가능하므로, 예측 가능한 범위 내에서 변수 변경이 일어남
  • const
    • 수정이 불가능한 ‘상수 변수’ 를 선언할 때 사용
    • 무조건 값을 할당
  • let
    • 재할당이 가능한 변수 타입
    • 값을 할당하지 않아도 생성 가능.
• 그렇다면 왜 var 키워드를 아직까지 사용하는 것일까?
  • 용어 정리
  • 호이스팅 : 모든 선언문이 스코프의 선두로 옮겨진 것처럼 동작하는 특성 ****
  • 레거시 코드 지원
    • 역사적인 이유
      • var 키워드는 JS 초기부터 존재한 변수 선언 방식. let과 const가 도입되기 이전에 작성된 코드에서는 모두 var를 사용. 따라서 오래된 코드베이스나 라이브러리에서는 여전히 var를 볼 수 있다.
    • 호환성
      • 이미 존재하는 대규모 레거시 코드베이스에서 let이나 const로 전환하는 것은 상당한 작업 + 기존코드에서 var를 let이나 const로 무분별하게 바꾸는 것은 새로운 버그를 초래할 위험도 있다.
    • 함수 스코프 사용
      • var의 함수 스코프 특성을 활용. 함수 내에서 전역적으로 접근 가능한 변수를 설정할 떄.
    • 기존 개발자 습관, 교육 자료 및 책
    • 호이스팅 활용
      • 변수 호이스팅을 이용한 특정 동작이 필요한 경우 ( 예 : 아주 간단한 스크립트나 초기화 코드) var이 좀 더 직관적일 수 있다.
    • 기타 등등..

실습

// 블록 스코프 예제
if (true) {
	var a = 10;
	let b = 20;
}
console.log(a); // 10;
console.log(b); // ReferenceError: b is not defined

var x = 1;
var x = 2; // 정상 동작

let y = 1;
let y = 2; // SyntaxError: Identifier 'y' has already been declared

참고한 블로그 ← click

예외 상황 Exception

• 런타임 때 발생할 수 있는 의도치 않은 상황을 뜻한다.
• 흐름 제어 시 발생할 수 있는 예외 상황이므로, 이를 이해하여 코드 레벨에서 대응해야 한다. (handling : 대응한다. control : 예상하고 직접 조작한다.)
• 예외 상황을 핸들링 하지 않는다면 ( 대응하지 않는다면) 기능이 동작하지 않거나, 어플리케이션이 shout down 될 수 있다.
• 예외 원인
  • 코드레벨에서의 문제
    • ECMAScript Error : JS 언어에서 발생하는 에러 타입
      • RangeError : 값이 집합에 없거나, 허용범위가 아닐 때
      • ReferenceError : 존재하지 않는 변수 참조시
      • SyntaxError : 문법을 지키지 않았을 때
      • TypeError : 값이 기대한 자료형이 아니여서 연산이 불가능할 때
    • DOMException : Web API 레벨에서 발생하는 에러 타입
      • NetworkError : 네트워크 에러 발생시
      • AbortError : 작업이 중단되었을 때
      • TimeoutError : 작업 시간이 초과되었을 때
    • 그 외 예외
      • 개발자도 예상치 못한 예외 상황
      • 개발자가 직접 예외 상황을 예상하여 핸들링 할 수 있다.
      • JS 에러 객체를 사용하여 직접 에러를 정의내리고 핸들링할 수 있다.
  • 하드웨어, 디바이스의 문제
  • 라이브러리 손상
  • 사용자의 실수 ,…. 등

서버 - 클라이언트 통신

• 웹 서버
  • 정적 페이지에 대응
    • 정적 페이지란 화면의 내용 or 데이터 등의 변동이 없는 페이지
  • 동적 페이지에 대한 처리는 직접 처리하지 않고 웹 어플리케이션 서버에 전달
• 웹 어플리케이션 서버와 데이터베이스
  • 웹 어플리케이션 서버는 동적 페이지를 처리.
  • 필요한 데이터 연산을 위해 데이터 베이스와 연결되어 있으며, 데이터 조회, 수정, 삭제에 대한 처리를 요청
  • 데이터 베이스란 데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체

API

• 소프트웨어 간의 상호작용을 가능하게 하는 인터페이스
• 중간에서 양쪽에 있는 친구들을 중재 or 매개체가 되어주는 역할
• 예시
  • 요청을 보낸다. → 해당 형식에 맞춰 응답을 반환한다.
  • 이를 통해 개발자는 다른 애플리케이션의 내부 구현을 알 필요 없이, 정해진 방식으로 요청을 보내고 필요한 기능이나 데이터를 사용할 수 있다.

REST API 란?

• 웹 (=인터넷 망 속에 가상 공간) 개발자
• = 인터넷을 돌아다니기 위한 규악을 지켜야 한다.
• HTTP를 지켜야 한다.
  • HTTP 란 월드 와이드 웹에서 데이터를 주고 받기 위한 프로토콜. 웹 브라우저와 웹 서버 간의 통신을 가능하게 하며, 클라이언트가 서버에 요청을 보내고, 서버가 이에 대한 응답을 반환하는 방식으로 작동.
  • HTTP 의 동작 방식
    • 요청(Request)
      • HTTP 메서드 ( GET, POST, PUT, DELETE)
        • 요청의 성격을 정의 (조회, 등록, 수정, 삭제)
      • URL
        • 요청할 리소스의 경로를 나타냄
      • 헤더(Header)
        • 요청에 대한 부가 정보를 포함함.
          • ex)
      • 본문(Body)
        • POST나 PUT 요청과 같이 데이터를 전송할 떄 사용
    • 응답(Response) : 서버가 클라이언트의 요청에 대해 응답을 반환
      • 상태코드
        • 요청에 대한 서버의 처리 결과
        • ex) 200 ok 404 Not Found
      • 헤더(Header)
        • 응답에 대한 메타데이터를 포함.
      • 본문(Body)
        • 요청된 리소스의 데이터가 포함.
• 따라서 REST API 란 HTTP 규약을 잘 따른 API
  • REST API URL 규칙
    1. 소문자 o 대문자 x
    2. 언더바 대신 하이픈
    3. 마지막에 / 포함 x
    4. 행위를 포함하지 않는다.
    5. ex) POST 라는 말은 메서드에 포함되어 있다.
    6. 파일 확장자 포함 x
    7. 복수형을 쓴다.
• 더 나아가 RESTFUL API 란 HTTP 규약을 매우매우 잘 따른 API

AJAX 알아보기 ← click

Ajax 는 서버의 API 를 호출하기 위한 도구로 사용될 수 있다.