배움을 기록으로

코딩 테스트시 자주 틀리는 부분 정리

• int형의 범위는 21(10의 9승)억이므로, 21억이 넘어갈 시, long형(10의 18승) 사용
  • https://www.acmicpc.net/problem/16953
  • https://www.acmicpc.net/problem/2012

• DFS는 재귀함수 사용하는게 간단함, 스택 사용시에는 PUSH할 때 출력하고, 끝에 도달했을 때 POP(flag사용)
  • https://www.acmicpc.net/problem/1260

• 재귀 or 백트래킹시, 순열이 아닌 조합 케이스인 경우 index값을 시작값으로 해야 시간초과 발생 X
  • https://www.acmicpc.net/problem/14889

제이쿼리로 개발시, $(document).ready 나 $(window).load 함수를 자주 사용하게 되는데

두 함수의 차이점과 각각 언제 사용해야 하는지를 정리하고자 한다.

1. 웹 브라우저의 HTML 문서 렌더링 과정

'브라우저는 HTML 파일을 어떤 순서로 읽어올까?'

1. 사용자가 웹 페이지 방문
2. 웹 브라우저가 웹 문서를 읽기 시작
3. DOM 생성
4. ready 메소드 실행
5. 이미지를 포함한 요소들이 로드
6. load 메소드 실행
7. 페이지 로딩 완료

2. $(document).ready 와 $(window).load 차이

1.1.  $(document).ready

• 외부 리소스, 이미지와는 상관없이 브라우저가 DOM(document object model) 트리 생성 직후, 실행되는 콜백함수
• 중복 사용이 가능하고, 선언한 순서대로 실행
• 모든 리소스가 로드될 때까지 기다리고 동작하면 비효율적이므로, 일반적인 스크립트 동작은 ready에서 실행한다.
  
  

1.2.  $(window).load

• 페이지의 모든 요소(css, js, image ..)들이 로드된 이후에 호출되는 콜백함수
• 한 페이지에 하나의 함수만 적용된다. (가장 나중에 호출된 함수만 적용)
• 리소스 정보에 따른 이벤트 분기가 필요한 경우 사용한다.
  • 예시: 이미지 크기에 따른 분기 동작이 필요한 경우
    
    

1.3.  정리

• ready는 사용자에게 보여지는 화면이 그려지기전, load는 그려진 후에 실행
• DOM 생성 -> $(document).ready() -> 이미지를 포함한 요소들이 로드 -> $(window).load()
• ready는 중복 가능, load는 중복 불가

'다음 소스는 어떤 순서로 실행될까?'

<script type="text/javascript">
$(window).load(function() {
	console.log('1');
});

$(window).on('load', function () {
	console.log('2');
});

$(document).ready(function() {
	console.log('3');
});

$(document).ready(function() {
	console.log('4');
});
</script>

• 실행순서 : 3 > 4 > 2
• $(window).load() 와 $(window).on('load', function() {})은 같다.
• load()는 마지막 하나만 실행
• $(document).ready() 와 $(function(){})은 같다.

References

https://truecode-95.tistory.com/30

https://ojtiger.com/179

6. HTTP 상태코드

6.1. 상태코드

• 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능
  
  • 1xx (Information): 요청이 수신되어 처리중
  • 2xx (Successful): 요청 정상 처리
  • 3xx (Redirection): 요청을 완료하려면 추가 행동이 필요 (리다이렉션)
  • 4xx (Client Error): 클라이언트 오류, 잘못된 문법 등으로 서버가 요청을 수행할 수 없음
  • 5xx (Server Error): 서버 오류, 서버가 정상 요청을 처리하지 못함

'HTTP 상태코드 값을 전부 외워야 할까?'

• 클라이언트는 상위 코드로 해석해서 처리
• 미래에 새로운 상태 코드가 추가되어도 클라이언트를 변경하지 않아도 됨
• 예)
  • 289 -> 2xx (요청이 성공 했구나~)
  • 455 -> 4xx (클라이언트에서 잘못 요청했구나~)
  • 598 -> 5xx (서버쪽에 오류가 있구나~)

'리다이렉션(Redirection)이란?'

• 웹 브라우저는 3xx 응답의 결과에 Location 헤더가 있으면, Location 위치로 자동 이동 (리다이렉트)
• 흐름
  1. 요청 (/notice)
  2. 응답 (Location: /new-notice)
  3. Location URL로 자동 리다이렉트
  4. 요청 (/new-notice)
  5. 응답 (200 OK)
• 종류
  • 영구 리다이렉션 (특정 리소스의 URI가 영구적으로 이동)
    • 보통 URL 주소가 변경된 경우, 이전 URL로 들어오는 유입에 대해 변경된 주소로 리다이렉션하여 처리 
    • 예) /main -> /home
  • 일시 리다이렉션 (일시적인 변경)
    • 요청 처리 후, 다른 페이지로 이동시키는 경우로, 클라이언트의 중복 요청을 방지한다.
    • 클라이언트의 URL이 리다이렉트된 URL로 변경된다. (새로고침시 중복 요청 방지)
    • PRG: Post / Redirect / Get
    • 예) 주문요청 (Post) > 주문 완료페이지로 리다이렉션(Redirect) > 주문 완료페이지 이동 (Get)
            (주문 요청을 여러 번 하더라도, 주문완료 페이지만 GET으로 호출됨.)
  • 특수 리다이렉션
    • 결과 대신 클라이언트에 있는 캐시를 사용

[ 1xx (Informational)  ]

• 요청이 수신되어 처리중인 상태
• 거의 사용하지 않는다.
  
  

[ 2xx (Successful)  ]

• 클라이언트의 요청을 성공적으로 처리
• 종류
  • 200 OK (요청 성공)
  • 201 Created (요청 성공해서 새로운 리소스가 생성됨)
  • 202 Accepted (요청이 접수되었으나 처리가 완료되지 않았음)
    • 배치 처리 같은 곳에서 사용
    • 예) 배치 요청 접수 성공 후, 1시간 뒤에 배치 프로세스가 요청을 처리하는 경우
  • 204 No Content (서버가 요청을 성공적으로 수행했지만, 응답 페이로드 본문에 보낼 데이터가 없음)
    • 저장 후에 아무 내용이 없어도 된다.
    • 보통 저장 후에 같은 화면을 유지해야 하는 경우 사용
    • 결과 내용이 없어도 204 메시지(2xx)만으로 성공을 인식할 수 있는 경우

[ 3xx (Redirection)  ]

• 요청을 완료하기 위해 유저 에이전트의 추가 조치 필요
• 종류
  • 300 Multiple Choices (안쓴다)
  • 301 Moved Permanently
    • 영구 리다이렉션
    • 리다이렉트시 요청 메서드가 GET으로 변하고, 본문이 제거될 수 있음
      (POST로 요청해도,  GET으로 리다이렉트)
  • 302 Found
    • 리다이렉트시 요청 메서드가 GET으로 변하고, 본문이 제거될 수 있음
      (원래 스펙은 메서드 유지지만, 통상적으로 GET으로 변경됨)
  • 303 See Other
    • 302와 기능은 같음
    • 리다이렉트시 요청 메서드가 GET으로 변경
  • 304 Not Modifield
    • 캐시 목적으로 사용
    • 리소스가 수정되지 않았음을 알려주고, 클라이언트에 저장된 캐시를 재사용하도록한다 (캐시로 리다이렉트)
    • 응답에 메시지 바디를 포함하면 안된다. (로컬 캐시를 사용해야 하므로)
    • 조건부 GET, HEAD 요청시 사용
  • 307 Temporary Redirect
    • 302와 기능은 같음
    • 리다이렉트시 요청 메서드와 본문 유지
  • 308 Permanent Redirect
    • 301과 기능은 같음 (영구 리다이렉션)
    • 리다이렉트시 요청 메서드와 동일하게 분문 유지 (POST로 요청했을때 POST로 리다이렉트)
      
      
      

'302, 307, 303 상태코드는 서로 비슷한데 뭘 써야할까?'

• 302, 307, 303
  • 302 Found: GET으로 변할 수 있음 (May)
  • 307 Temporary Redirect: 메서드가 변하면 안됨 (유지)
  • 303 See Other: 메서드가 GET으로 변경 (변경)
• 히스토리
  • 처음 302 스펙의 의도는 HTTP 메서드를 유지하는 것
  • 하지만 통상적으로 브라우저에서 GET으로 바꿔서 사용하였음
  • 그래서 기존에 영향을 안주면서 명확한 상태코드인 307, 303이 등장 (301 대용으로 308도 등장)
• 이미 많은 애플리케이션들이 302를 기본값으로 사용하므로 GET으로 변해도 302를 사용하여도 큰 문제 없음

[ 4xx (Client Error)  ]

• 클라이언트의 요청에 잘못된 문법 등으로 서버가 요청을 수행할 수 없음
• 클라이언트가 이미 잘못된 요청, 데이터를 보내고 있기 때문에, 똑같이 재시도를 하면 실패함 (5xx와 차이점)
• 종류
  •  
  • 400 Bad Request (클라이언트가 잘못된 요청을 해서 서버가 요청을 처리할 수 없음)
    • 요청 구분, 메시지 등 오류
    • 클라이언트는 요청 내용을 검토해서 다시 보내야함
    • 예) 요청 파라미터가 잘못되거나 API 스펙이 맞지 않을때
           (필수 요청 파라미터 누락, 미성년자 주류 구매, 로그인시 비밀번호 틀린 경우)
  • 401 Unauthorized (클라이언트가 해당 리소스에 대한 인증이 필요함)
    • 해당 리소스에 유효한 인증 자격 증명이 없기 때문에 요청이 적용되지 않은 경우
    • 401 오류 발생시 응답에 WWW-Authenticate 헤더와 함께 인증 방법을 설명
    • 예) 사용자가 로그인되지 않은 경우
  • 403 Forbidden (서버가 요청을 이해했지만 승인을 거부함)
    • 주로 인증 자격 증명은 있지만(인증), 접근 권한이 불충분한 경우(인가)
    • 401 오류 발생시 응답에 WWW-Authenticate 헤더와 함께 인증 방법을 설명
    • 예) 일반 사용자가 로그인하여(인증), 관리자 등급의 리소스에 접근하는 경우(인가)
  • 404 Not Found
    • 요청 리소스를 찾을 수 없음
    • 클라이언트가 권한이 부족한 리소스에 접근할 때(403 케이스), 해당 리소스를 숨기고 싶을때 사용하기도 함
    • 예) 잘못된 URL 요청 (www.naverrr.com)

[ 5xx (Server Error)  ]

• 서버 오류
• 서버에 문제가 있기 때문에 재시도하면 성공할 수도 있음 (복구가 되거나 등, 400에러와 차이점)
• 종류
  • 500 Internal Server Error (서버 문제로 오류 발생, 애매하면 500 오류)
    • 서버 내부 문제로 오류 발생
    • 예) 서버 사용량 폭주로 서비스가 일시 중단, 문법적 오류 (NullPointException), DB 접속 실패 등
  • 503 Service Unavailable (서비스 이용 불가)
    • 서버가 일시적인 과부하 또는 예정된 작업으로 잠시 요청을 처리할 수 없음
    • Retry-After 헤더 필드로 얼마뒤에 복구되는지 보낼 수도 있음

References

https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC

https://developer.mozilla.org/ko/docs/Web/HTTP/Status/401