KT aivle 11주차 후기

정보처리기사 두 달간 필기와 실기를 준비하며 실기 시험이 끝나지 얼마 안돼서 IT 인프라 수업에서 비슷한 내용이 많이 나왔다. 정보처리기사 실기를 준비하며 이해하기 어려웠던 내용이나 개념들에 대해서 더 자세히 알 수 있었고 네트워크 쪽이 ㅈ흥미롭다는 것을 알게 되었다.. 나중에 네트워크에 대해서 더 깊게 공부해보고 싶다는 생각

서버와 클라이언트

서버: 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 장치
클라이언트: 네트워크를 통해 서버에 접속해 정보를 확인하거나 서비스를 이용하는 장치
- 클라이언트 컴퓨터는 서버에 응용 프로그램을 요청한 뒤 서버에서 보내주면 실행합니다.
- 서버 컴퓨터는 응용 프로그램을 보유하고 있다가 클라이언트 컴퓨터에서 요청하면 이를 보냅니다.

서버의 역할 및 종류

웹 서버: 정적 콘텐츠(HTML, CSS, JS, 텍스트, 이미지 등)를 클라이언트에 전달
- 요청(Request) → 콘텐츠 탐색 → 응답(Response) → 콘텐츠 조회
애플리케이션 서버: 동적 콘텐츠를 클라이언트에 전달
- 요청(Request) → 콘텐츠 탐색 → 응답(Response) → 콘텐츠 조회 → 동적 콘텐츠 전달
데이터베이스(DB) 서버: 애플리케이션의 정보를 저장하여 운영, 관리할 수 있는 데이터베이스를 구동
- 요청(Request) → 콘텐츠 탐색 → DB 조회 요청 → 응답(Response)
리버스 프록시 서버: 클라이언트의 요청을 처리할 애플리케이션 서버 선택 후 전달
- 요청(Request) → 서버 선택 → 응답(Response) → 콘텐츠 조회
포워드 프록시(캐시) 서버: 미리 데이터를 저장해뒀다가 요청이 오면 데이터 전달
- 요청(Request) → 저장 → 콘텐츠 조회

서버 하드웨어와 소프트웨어

서버 하드웨어 폼팩터
- 랙마운트형 서버: 랙에 밀어 넣는 형태의 서버
  - 1U 서버, 2U 서버, 4U 서버
- 블레이드형 서버: 랙마운트형 서버를 더 얇게 만들고 케이스가 없는 형태
- 타워형 서버: 일반 데스크탑PC와 유사한 형태, 워크스테이션이라고도 부름
서버 하드웨어 유형
- Main Frame: 1964년 IBM이 출시한 대형 서버
- UNIX: Main Frame의 경량화 버전
- x86: 중소기업부터 대기업까지 가장 많이 사용하는 서버 유형
서버 하드웨어 제조사: HPE, Dell Technologies, Inspur, Lenovo, IBM, Asus 등
서버 소프트웨어
- 오픈소스 소프트웨어 vs 상용 소프트웨어
- 서버 OS(Operating System): z/OS, UNIX, 오픈소스 Linux, 상용 Linux, Microsoft Windows Server

네트워크 개념

네트워크(Network): Net + Work, 그물을 짜는 행위 -> 그물처럼 연결된 상태
IT 네트워크의 시작: 1960년대, 미국에서 메인프레임과 여러 대의 단말기를 연결하여 시작

네트워크 프로토콜과 계층

프로토콜(Protocol): 패킷을 전송하기 위한 규칙
- HTTP: 웹서버와 웹브라우저가 패킷을 교환할 때 사용하는 프로토콜
- 기타 프로토콜: DNS, FTP, SSL/TLS, TCP, UDP, SNMP, IEEE, ARP 등
계층(Layer): 송신 기기와 수신 기기 사이에서 데이터를 처리
- TCP/IP 참조 모델: 4계층 (애플리케이션 계층, 트랜스포트 계층, 인터넷 계층, 링크 계층)
- OSI 7 참조 모델: 7계층 (애플리케이션 계층, 프레젠테이션 계층, 세션 계층, 트랜스포트 계층, 네트워크 계층, 데이터링크 계층, 물리 계층)

네트워크 기기와 형태

네트워크 기기
- L1 기기: NIC, Hub, AP
- L2 기기: 스위치, MAC Address, 이더넷
- L3 기기: 라우터, IP Address
- L4 기기: L4 스위치, 방화벽
- L7 기기: L7 스위치, 웹방화벽
네트워크 형태
- LAN(Local Area Network): 근거리 통신망
- WAN(Wide Area Network): 원거리 통신망
- 인터넷(Internet): International Network, 모든 컴퓨터를 하나의 통신망 안에 연결
- 월드와이드웹 (World Wide Web): 인터넷에 연결된 컴퓨터를 통해 정보 공유

Web 프로그래밍

Front-end에 대해서 배웠다. 재밌었다.. 다 재밌으면 안 되는데 눈에 보이는 웹의 변화를 보는 게 재밌었던 것 같다.

프로젝트를 하다보면 프런트엔드 역량을 갖고 있으면 프로젝트를 더 효과적으로 전달할 수 있는 점을 느꼈던 적이 많다. 이번 기회에 프런트엔드에 대해서 짧게나마 배웠지만 앞으로 배워나가면서 해커톤에 참가할 때 사용할 수 있는 사람이 되고 싶다..

Plugin

Beautify CSS: CSS 코드를 정리하고 보기 좋게 만듦
Node.js 설치: Node.js 환경을 설치 ->JavaScript 런타임을 사용
JavaScript Debugger, Code Runner: JavaScript 디버깅 및 코드 실행 도구
Python IntelliSense: Python 코드에 대한 자동 완성 및 유용한 정보 제공.
Live Preview: 실시간으로 웹 페이지를 미리 보기

Shortcut

Hide Left Bar: cmd(ctrl) + b
Run: ctrl + alt + n
Delete One Line: cmd(ctrl) + x
Multiline Cursor: cmd(ctrl) + alt
Multiline Join: ctrl + j
Copy One Line: shift + option(alt) + 위, 아래 방향키
Beautify: shift + option(alt) + f
Open Terminal: `ctrl + ``

HTML 기본구조

<!DOCTYPE html> 
<html>
  <head>
    
  </head>
  <body>
    
  </body>
</html>

HTML 페이지 구조

시멘틱 태그 (Semantic Tag): 태그 이름으로 의미를 알 수 있는 태그.
시멘틱 태그를 사용하여 웹페이지의 전체적인 구조를 구성.

<body>
  <div id="contents">
    <header>
      <nav></nav>
    </header>
    <main>
      <section id="section1"></section>
      <section id="section2"></section>
    </main>
    <footer></footer>
  </div>
</body>

HTML 목록 태그

순서있는 목록: <ol>, <li>
순서없는 목록: <ul>, <li>
설명 목록: <dl>, <dt>, <dd>

HTML 테이블 태그

테이블 태그: <table>
테이블 제목: <caption>
테이블 컬럼: <thead>
테이블 내용: <tbody>
테이블 로우(row): <tr>
테이블 데이터: <th>, <td>

HTML 이미지 태그

이미지 태그: <img src="" alt="" width="" height="">

HTML 입력 태그

method: 데이터 전달 방법 정의 (GET, POST).
name: form 태그의 이름 정의.
action: 데이터를 전달할 URL.
target: "_blank" 새로운 탭에서 데이터 전달.
Fieldset: 데이터를 입력하는 영역을 묶어주는 태그
input 태그
- - type: 다양한 형태의 입력 태그 사용.
  - placeholder: 입력 전에 출력되는 문자열.
  - maxlength: 최대 입력 문자열 길이.
  - name: input 태그를 묶어주는 문자열.
  - value: 선택했을 때, 서버로 전송할 데이터.
  - readonly: 데이터를 입력할 수 없고 읽기만 가능.
  - required: 필수 입력 속성.
  - autofocus: 자동으로 입력창의 포커스 설정.

CSS Selector

- 엘리먼트를 선택하는 방법
  - Tag 이름으로 선택: tagName
  - ID 이름으로 선택: #idName
  - Class 이름으로 선택: .className
  - Attribute 이름으로 선택: [attrName]
- 계층적으로 엘리먼트를 선택하는 방법
  - 한 단계 하위 엘리먼트 선택: parent > child
  - 모든 하위 엘리먼트 선택: ancestor descendant
- 특별하게 엘리먼트를 선택하는 방법
  - :not(selector): 특정 엘리먼트만 제외하여 선택
  - :first-child: 첫 번째 엘리먼트 선택
  - :last-child: 마지막 엘리먼트 선택
  - :nth-child(n): n번째 엘리먼트 선택
  - :before: 선택한 엘리먼트 앞에 있는 엘리먼트 선택
  - :after: 선택한 엘리먼트 뒤에 있는 엘리먼트 선택
- 여러 개의 Selector를 사용하여 선택하는 방법
  - selector1, selector2: 여러 개의 엘리먼트 선택
  - selector1selector2: AND의 의미를 가짐

저작자표시 비영리 변경금지 (새창열림)

하량별