KDT 유비온 코딩 강의 11일차 [Git 실습 로컬 서버 활용 확장 프로그램과 CS모델 설명]

KDT 유비온 코딩 강의 11일차 | Git 실습 로컬 서버 활용 확장 프로그램과 CS모델 설명
KDT 국비 강의 재직자 전형으로 신청 후 작성하는 기록지입니다!

 

📌 도입

오늘은 로컬 서버 활용과 확장 프로그램 등 다양한 경험과 지식을 배웠는데요!
점점 실제 개발 환경에 가까워지는 느낌이 들어서 흥미로웠습니다 😊

오늘 다룬 주요 내용은 세 가지였어요.

• HTML 변경사항 실시간 반영을 위한 Live Server 확장 설치
• 수정 내용을 자동으로 웹에 반영하는 방법
• 클라이언트-서버 구조의 개념 연결

 

 

🔌 STEP 1. Live Preview 확장 프로그램 설치하기

지난 시간까지는 VSCode에서 수정하고 파일을 저장한 뒤 브라우저에서 새로고침을 해야 변경된 내용을 확인할 수 있었는데요.

 

 

오늘은 이 불편함을 해소해주는 확장 프로그램을 배웠어요!

설치 방법은 이렇습니다.

1. 왼쪽 메뉴바에서 네모 4개 아이콘 클릭
2. EXTENSIONS : MARKETPLACE에서 Live Server 검색
3. 오른쪽 파란색 Install 버튼 클릭

저는 Live Server 말고 Live Preview로 진행해봤어요!
설치 후 VSCode 화면에서 파일로 돌아와서 오른쪽 하단의 Go Live 버튼을 누르면,
알림이 올라오면서 Port : 5500으로 창이 열리게 됩니다.

 

 

🌐 STEP 2. 로컬 서버 주소 방식의 변화

기존에는 파일을 웹 브라우저로 직접 여는 방식이었는데요.

기존 방식 주소 형식 :
file:///C:/Users/user/vibecoding/index.html

Live Preview 설치 후 주소 형식 :
http://127.0.0.1:5500/index.html

단순히 파일을 여는 것에서, 로컬 서버에 접속해서 조회하는 방식으로 바뀐 거예요.
기가 막히네요. 하나를 배웠는데도 아직까지는 즐겁습니다 😄

이 차이가 중요한 이유는, 실제 웹 서버에서 동작하는 방식과 동일한 환경으로 테스트할 수 있기 때문이에요.
나중에 배포 환경에서 생길 수 있는 문제를 미리 잡을 수 있다는 장점이 있어요.

 

 

✏️ STEP 3. 실시간 수정 확인해보기

그래서 제 이름을 gang으로 바꿔봤어요.
아래 이미지와 같이 VSCode에서 수정하고 저장하니

 

 

새로고침 없이도 브라우저에서 바로 반영된 것을 확인할 수 있었습니다!

 

 

💡 STEP 4. 클라이언트-서버 모델 (CS모델) 이해하기

오늘 중요하게 배운 개념은 클라이언트-서버 모델이었어요.

클라이언트 : 서비스를 요청하는 사용자 측 장치 또는 소프트웨어
서버 : 요청을 받아 처리하고 응답을 제공하는 장치 또는 소프트웨어

클라이언트-서버 모델의 핵심은 클라이언트가 서버에 요청을 보내고,
서버가 이를 처리하여 응답을 반환하는 네트워크 구조예요.
웹 브라우저(클라이언트)와 웹 서버 간의 HTTP 통신이 대표적인 예시라고 합니다.

동작 원리는 이렇습니다.

• 요청-응답 사이클 : 클라이언트가 서버로 HTTP/HTTPS 요청을 전송하면, 서버가 요청을 처리하고 결과를 응답해요.
• 비연결성 : HTTP는 기본적으로 요청 후 연결이 종료돼요.
• 확장성 : 서버는 다수의 클라이언트 요청을 동시에 처리할 수 있어요.

활용 예시로는 웹 서비스, API 통신, 데이터베이스 등이 있다고 합니다.

강사님께서 쉽게 설명해 주신 예시는 이거였어요.

"사용자가 크롬 브라우저로 Gmail에 접속할 때, 크롬이 구글 서버에 요청을 보내고, 서버가 응답을 반환하는 것이 바로 클라이언트-서버 모델이 작동하는 것이다."

이렇게 설명해 주시니 확실히 이해가 쉬웠어요!

 

 

 

🛠️ STEP 5. 개발자 도구로 HTML 구조 들여다보기

그렇게 깃에 접속한 뒤 F12를 누르면 개발자 도구 창이 열리는데요.
아래 첨부한 이미지와 같이 조회가 가능합니다.

 

 

HTML 형식으로 보여지는 내용을 직접 볼 수 있었어요.
이 개발자 도구는 나중에 디버깅이나 코드 확인할 때도 자주 활용하게 된다고 하니 알아두면 유용할 것 같아요!

 

 

 

📖 모르는 단어 찾아보기

오늘도 새로운 단어들이 나왔어요. 찾아보고 정리해봤습니다!

[Live Server / Live Preview]
VSCode 확장 프로그램으로, 코드를 저장할 때마다 브라우저가 자동으로 새로고침되어 결과를 바로 확인할 수 있어요.

[로컬 서버 (Local Server)]
내 컴퓨터 안에서 실행되는 서버예요. 실제 인터넷에 올리지 않고도 웹 서버처럼 동작하는 환경을 만들어줘요.

[127.0.0.1]
내 컴퓨터 자신을 가리키는 IP 주소예요. localhost라고도 불러요.

[Port (포트)]
네트워크에서 특정 프로그램이 통신하는 통로예요. 5500번 포트는 Live Server가 사용하는 기본 포트예요.

[HTTP / HTTPS]
웹 브라우저와 서버가 데이터를 주고받을 때 사용하는 통신 규칙이에요. HTTPS는 HTTP에 보안이 추가된 방식이에요.

[F12 개발자 도구]
브라우저에서 F12를 누르면 열리는 도구로, 웹페이지의 HTML, CSS, JS 구조를 직접 확인하고 수정해볼 수 있어요.

[API (Application Programming Interface)]
프로그램끼리 서로 데이터를 주고받을 수 있도록 연결해주는 통로예요.



🙌 마무리

AI를 통해서 잘 모르는 키워드들을 찾아가면서 바이브 코딩의 이해도를 높이는 도구로 활용하는 것도 중요하다고 강조해 주셨어요.

오늘 로컬 서버 개념을 배우고 나니, 지금까지 막연하게 느껴졌던 웹 개발의 흐름이 조금씩 보이기 시작하는 것 같아서 뿌듯한 하루였습니다 😊

이어서 다음 강의를 통해 실습 예정이니 다음 게시글도 기대해 주세요!

앞으로도 강의 내용을 꾸준히 기록할 예정이니, 관심과 응원 부탁드립니다! 🙏