1. Bootstrap 그리드 방식 이해

Grid System

• bootstrap의 그리드 시스템은 flexbox로 구축되어 페이지에 최대 12개의 열을 허용한다.
• 12개의 열을 모두 개별적으로 사용하지 않으려면 열을 함께 그룹화하여 더 넓은 열을 만들 수 있다.

기본 구조

• Container
  • 반응형 고정 너비 Container 제공
  • 그리드 시스템을 사용하기 위해서 .container 클래스가 적용된 컨테이너로 전체 그리드를 감싸야 함
  • 컨테이너는 margin과 padding을 통해 콘텐츠에 여백을 줌
• Row
  • .row 클래스를 사용하여 컨테이너 내부를 행으로 나눔
• Column
  • Row 내부에는 .col 클래스가 적용된 열이 들어감
  • Column은 실제 콘텐츠를 포함하며, Bootstrap은 12개의 가상 열로 그리드 시스템을 구성

2. AJAX (Asynchronous Javascript And XML)

• 정의
  • 비동기 웹 애플리케이션 개발을 위한 기법
  • Javascript를 사용해 서버와 프런트에서 데이터를 교환하고 조작할 수 있게 하여, 웹 페이지를 다시 로드하지 않고도 페이지 일부 업데이트 가능
• 특징
  • 비동기 통신 : 사용자의 작업이 서버와의 통신을 기다리지 않아도 됨
  • JSON 활용
  • 페이지 일부만 업데이트 가능 → 페이지 새로고침 없음 → 사용자 사용성 향상

3. Fetch 함수

• 정의
  • AJAX와 유사한 기능 제공
  • Request-Response를 위한 강력한 방법 제공
• 특징
  • fetch는 Promise를 return하며, 이는 비동기 작업의 성공 또는 실패를 처리하기 위한 콜백 함수를 연결할 수 있음을 의미
  • XMHttpRequest보다 사용하기 쉬운 API 제공