[ week 1 ] 웹 기초 지식 한번에 훑어보기

안녕하세요, 김데이 입니다 :)
이전 글에서 코드잇 Node.js 백엔드 과정 수강신청 과정에 대해 설명 해 드렸습니다. 
 
제가 이 수강신청을 너무 늦게 하는 바람에 3일치 강의를 혼자 독학(?) 하게 되었는데요, 
다행이도 기존에 알고 있던 개발 지식에 대한 복습이기도 했고, 코드잇에서 해당 부분에 대한 강의도 제공 해 주셔서 어렵지 않게 수업 진도를 따라 갈 수 있었습니다. 
 
그래서 오늘은 어제 부랴부랴 들었던 웹 기초 지식 내용에 대해 정리해 보려고 합니다.
 

- 수강 일자 : (미수강, 코드잇 인강 복습)
- 공부 일자 : 2025.9.22 
- 수강 정보 : [토픽] 웹 개발 기초 지식 - 전편 

 

---

 

1. 웹 기초

1) 웹 사이트 3대장
: 웹 사이트를 구성하는 요소는 다양하겠지만, 우리가 눈으로 보는 부분의 주요 요소로는 [ HTML / CSS / JavaScript ] 가 있습니다.
 
- HTML : 웹 사이트를 구현하는 기본 뼈대가 되어주는 요소로, 일반 텍스트부터 이미지, 링크 등 화면으로 보이는 모든 요소의 구성을 HTML을 이용해 표현합니다.
- CSS : 웹 사이트를 예쁘게 꾸며주는 요소, '.css' 라는 확장자를 가진 Style Sheet 를 이용하여 HTML 요소에 색을 입히거나, 보기좋게 배치하는 등의 작업을 합니다. CSS의 설정이 다양해 지면서 최근에는 사용자의 반응에 따른 액션 효과는 CSS로도 일부 가능 해 졌습니다.
- JavaScript : 웹 사이트에 동적인 요소를 추가할 때 사용하는 언어로, 특정 요소를 눌렀을때 팝업창이 나오는 등 여러 기능과 효과를 사용할수 있게 해 줍니다. JavaScript는 단일로도 사용이 가능하지만, React / Vue 등 여러 프레임워크를 사용하면 더욱 쉽고 구조적으로 웹사이트를 제작할 수 있습니다.
 
 
 

2. 서버 & 클라이언트

1) IP와 DNS
 - IP : 간혹 와이파이나 프린트 등 컴퓨터와 부가기기를 연결할 때 [192.0.0.1] 과 같은 형식을 사용하기도 하는데요, 이처럼 0~255 숫자를 나열하여 사용하는 웹사이트가 가지고 있는 고유 주소를 의미합니다.  
 - DNS : 사람들이 IP주소를 하나하나 다 외우면서 사용할 수 없다보니, 우리가 알 수 있는 문자로 웹 사이트 주소를 사용하고 있습니다. 이러한 문자 주소 즉 도메인을 IP 주소와 연결해 주는 방식을 DNS라고 합니다. 
 
2) 정적 웹페이지, 동적 웹페이지
 - 정적 웹페이지 : 초기에 모든 정보를 서버로 부터 모두 받아 화면에 구현하는 방식으로, 어떠한 사용자가 접속하더라도 동일한 페이지를 보게 되는 구성 방식을 말합니다. 
 - 동적 웹페이지 : 사용자의 요청에 따라 그때마다 데이터를 불러와 화면으로 보여주는 웹페이지 형식으로, 쇼핑몰이나 유튜브처럼 개인별 알고리즘을 기반으로 하거나, 구글 지도처럼 사용자의 요청에 따라 그 때마다 홈페이지가 다르게 구성되는 것을 말합니다.
 
 
 

3. 데이터베이스

 1) 데이터베이스란?
  우리가 흔히 알고 있는 엑셀처럼 테이블을 이용하여 다양한 정보를 저장하는 "저장소"를 의미합니다. 동시에 많은 사용자가 접속해 데이터를 추가/검색/수정/삭제할 수 있도록 관리하는 전문 저장소 시스템이죠. 쇼핑몰의 경우 [사용자 / 물품 정보 / 배송 정보]등이 있을 수 있고 , 커뮤니티의 경우 [사용자 정보 / 그룹 정보] 등이 DB 정보로 저장됩니다. 
 
 2) 데이터 베이스의 종류
 - SQL (관계형 데이터베이스) : "관계형 데이터베이스"는 여러 테이블 서로 연동되어 관리되는 형태를 말합니다.
예를 들어 학생 테이블로는 [이름, 학번, 학과]를 사용하고, 수강 테이블로는 [학번, 과목코드] 넣게되면 [학번]이라는 고유의 키로 각각의 데이터가 연동됩니다. 이런 식으로 특정 키값 하나로 여러 DB의 데이터를 확인할 수 있는 형식을 관계형 데이터베이스라고 합니다. 
 - NoSQL : 위에서 말한 관계형 데이터베이스를 제외한 나머지, 비관계형 데이터베이스를 말합니다. NoSQL은 DB가 관계에 얽메이지 않고 운영되기 때문에 초기 생성 이후 추가/삭제 등 수정 작업이 용이하고, 빠르게 확장 할 수있는등 유연한 구조를 가지고 있습니다. 
 
 
 

4. API 와 JSON

1) API
 - API 란? 
API(Application Programming Interface)는 프로그램끼리 서로 데이터를 주고받거나 기능을 사용할 수 있도록 정해둔 약속입니다. 예를 들어, 웹사이트에서 날씨 정보를 표시할 때, 직접 기상청 데이터를 수집하는 게 아니라 날씨 API를 호출해 필요한 데이터만 받아올 수 있습니다.

 - API 프로토콜 종류 
   GET(조회) : 저장 된 정보를 DB에서 받아 옴 
   POST(생성) : 새로운 정보를 DB에 저장함
   PUT / PATCH(업데이트) : 저장 된 정보에 대해 일부 혹은 전체 정보를 업데이트 함 
   DELETE(삭제) : 저장 된 정보 중 선택한 정보를 DB에서 지움    
 
2) JSON란?
서버와 클라이언트(웹 브라우저)가 데이터를 주고 받을때 사용하는 방식으로, 초기에는 JavaScript에서 DB 정보를 사용하기 위해 만들어졌지만 현재는 대부분의 언어에서 해당 방식을 사용하고 있습니다. 
 
 

---

 

 
아는 내용이 많을 줄 알았는데, 제가 모르는 파트까지 설명이 나오면서 초집중 해서 강의를 들었던것 같아요. 역시 배움에는 끝이 없다는 생각이 듭니다 ㅋㅋ 
 
다음 포스팅은 자바스크립트 기초에 대해 공부한 내용 공유 드리겠습니다 😉