[CS] IT 리터러시

1. 기계어

- 0과 1로 이루어진(2진수) 컴퓨터(CPU)가 별다른 해석(컴파일) 없이 읽을 수 있는 프로그래밍 언어

- code 작성 → 인터프리터/컴파일러(기계어 번역) → 컴퓨터 인식

- low level(기계와 더 가까운 언어, ↔ high level): 속도가 더 빠르지만, 작성이 어렵고 실수하기 쉽다

 

1) 인터프리터 (변환+실행)

- 소스 코드를 한 줄씩 읽어가며 변환하고 즉시 실행하는 프로그램

- Python은 인터프리터 언어이기 때문에 파이썬 코드를 실행하려면 인터프리터가 필요하다

- Python에서 가장 많이 사용되는 인터프리터는 CPython이다.

* CPython은 파이썬 소스 코드를 바이트코드로 컴파일한 후, 이 바이트 코드를 PVM(Python Virtural Machine)에서 실행

 

2) 컴파일러

- 전체 소스 코드를 한 번에 기계어 또는 중간 코드로 변환하여 실행 파일(기계어 코드)을 만들어내는 프로그램

- 컴파일러는 소스 코드를 기계어로 변환하는 역할만 하고, 실행은 운영체제가 함

- C는 컴파일러 언어로, C에서 가장 많이 사용되는 컴파이러는 GCC(GNU Compiler Collection)이다.

- GCC는 C 소스코드(.c파일)을 기계어로 변환하여 실행 파일(.exe 또는 .out 등)을 만들어낸다

- GCC는 C소스코드를 먼저 컴파일하고, 그 후에 *링킹과정을 거쳐 실행 가능한 프로그램을 생성한다.

** C의 컴파일 과정

- 소스코드 작성(.c) → 컴파일(.o 또는 .obj) → 링킹 → 실행파일 생성(.exe 또는 .out) →실행(운영체제)

* 링킹: 여러 개의 오브젝트 파일(.o)이 있을 경우, 링커가 이 파일들을 하나의 실행 파일로 결합

** 실행파일을 실행할 떄, 운영체제가 이를 메모리에 로드하고, 프로세스를 실행하여 리소스를 할당하고, 정상 동작 

 

2. 운영체제(OS)란?

- 컴퓨팅 기계(하드웨어)를 쉽게 다루기 위한 시스템 소프트웨어

- MacOS, Linux, Windows, iOS, Android

 

3. HTTP(하이퍼텍스트 전송 프로토콜)

- 1요청, 1응답의 원칙을 가진다

- 기기, 운영체제, 브라우저에 상관없이 문자(텍스트) 기반으로 통신하는 방식

- 클라이언트와 서버 간에 웹 데이터를 주고 받은 통신하는 방식

- Hyper Text Transform Protocol의 줄임말(웹에서 하이퍼텍스트를 주고 받는 통신 규칙)

* protocol: 통신 방식에 있어서 특정한 룰을 가지고 이대로 통신을 하자는 약속된 형태의 방식

** Https 의 S: security(보안 강화)

 

1) Hyper Text 

- 링크를 포함할 수 있는 텍스트

- 장점: 기계, 브라우저, 운영체제와 상관 없이 문자로 통신(정보 전달)하기 위해 만들어진 통신 방식

- JSON, XML

* Parsing: 문자를 특정한 형태로 잘라서 필요에 따라 사용하는 것

 

2) HTTP 통신 함수들

- GET: 기존의 저장된 정보, 페이지를 읽어온다

- POST: 정보의 저장 및 전달을 위해 서버에 전달하는 역할

- PUT/PATCH: 기존의 저장된 정보의 내용을 수정하는 역할

- DELETE: 저장된 정보를 삭제

 

* PATCH는 필요한 정보만 수정하기 때문에 데이터의 손상이나 삭제의 위험이 줄고, 불필요한 데이터 변경을 방지해 데이터 무결성을 유지하고 오류를 최소화하는데 유리하다. PUT은 악성 데이터를 전체 자원에 삽입(파일 덮어쓰기 공격)할 가능성이 있다.

** PUT: 전체 리소스 교체(완전히 덮어쓰기)

** PATCH: 리소스의 일부만 수정

 

4. WAS(웹 애플리케이션 서버, Web Application Server)

- 클라이언트 요청을 받아 비즈니스 로직으로 처리하고,데이터베이스와 연동한 뒤, 동적으로 응답을 생성

- 백엔드는 WAS에서 실행되는 코드, 프론트엔드는 브라우저에서 실행되는 코드

- 웹서버는 클라이언트의 요청을 처리하고, 정적 파일을 제공하지만, 동적인 처리가 필요한 경우(데이터베이스 접근, 사용자 인증 등 API 요청)에는 WAS로 요청을 넘긴다.

# Nginx 예시, /api/로 시작하는 모든 요청을 WAS로 넘겨줌

location /api/ {
    proxy_pass http://was_server_ip:8000;  # WAS(FastAPI)로 요청 전달
}

* proxy_pass: 웹서버(Nginx, Apache)가 사용자의 요청을 WAS로대신 전달하는 기능

- 프록시 전달을 하면 WAS를 외부에 직접 노출(API가 외부에 노출되면 해킹이나 DDoS 공격 위험이 높아진다)하지 않고 보호할 수 있고, 웹 서버가 정적 파일과 API 요청을 구분하여 처리할 수 있다. 로그밸런싱(부하 분산)이 가능하다.

** 브라우저는 웹 서버에서 제공하는 콘텐츠(html, css, js 등)을 해석하고 보여주는 프로그램

 

- FastAPI는 내부적으로 ASGI 서버(Uvicorn)을 사용해서 동작한다.

- Uvicorn은 ASGI서버로, FastAPI를 실행하는 역할을 한다. : WAS를 실행(ASGI 서버)

- FastAPI는 API 요청을 받아 비즈니스 로직을 처리하고 응답을 반환한다. : WAS(프로그램이지 물리적인서버가 아님)

* ASGI(Asynchronous Server Gateway Interface)서버

- FastAPI 같은 비동기 웹 애플리케이션을 실행하고,HTTP 요청을 처리하는 서버

1. 사용자가 API 요청 (GET /api/data)
2. 웹 서버(Nginx)가 요청을 받음
3. Nginx가 ASGI 서버(Uvicorn)로 요청을 전달 (프록시)
4. ASGI 서버(Uvicorn)가 FastAPI(WAS)에 요청 전달
5. FastAPI가 비즈니스 로직 실행 및 응답 생성
6. ASGI 서버(Uvicorn)가 FastAPI의 응답을 받아서 사용자(클라이언트)에게 반환

 

* 웹서버(Web Server): HTTP 요청을 받아들여 정적 파일을 클라이언트에 제공 - Nginx, Apache

- WAS에서 JSON 응답이 생성되면 웹서버(예: Nginx)는 WAS로부터 응답을 받아 브라우저로 전달함

# React 예시

fetch("https://example.com/api/login", {
    method: "POST"
})
.then(response => response.json())
.then(data => {
    console.log(data.message);  // "로그인 성공" 출력
});

 

- 웹 애플리케이션 동작순서: 클라이언트>웹서버>백엔드코드>데이터베이스

- 클라이언트(웹브라우저, 스마트폰) ↔ Web Server(http통신-api호출) ↔ Back End 코드 (Hyper text 파싱 후 저장할 공간을 찾아 전달) ↔ DataBase (각종 정보 저장)

* Endpoint(주소값): 웹 서버의 주소를 가르키는 url을 의미 ex.www.google.com

 

5. 프론트엔드

- 서비스에서 처음 만나는 화면, 서버의 기능과 관계 없이 단독적인 기능이 가능

- UI(유저인터페이스)/UX(사용자경험), 독립적인 기능, 서버에 요청하기 위한 통신 기능, 사용자 패턴 분석을 위한 Analystics 구현

* GUI: 그래픽을 활용한 사용자 환경

** UX: 핵심 기능이 무엇인가에 따라(서비스 성격에 따라) 사용자에게 편리한 경험을 제공하는 것

 

1) Grid System

- 화면비에 대한 계산이 필요(구조화)

 

6. 동기와 비동기

1) 동기: 통신의 결과와 함께 움직임

- 강의 목록에서 상세페이지로의 이동과 같이 일반적인 웹 페이지의 이동

- 즉, 정보와 함께 제공되어져야 하는 화면

2) 비동기: 통신의 결과와 상관없이 움직임

- 페이지의 이동이 없는 댓글 달기, SNS 피드백 등

 

* 병렬과 비동기는 다르다?

 

7. 백엔드와 API

- 핵심적인 정보를 처리하는 것: 비즈니스 로직

- 결제, 정보 저장 및 변경 등

* 참고: 프론트엔드-상태관리(정보유출을 방지하기 위해)

 

1) URI vs URL (URI > URL)

- URI: 서버에서의 특정 리소스 식별자를 지칭, 단순한 식별자

- URL: 우리가 흔히 사용하는 웹사이트 주소(프로토콜+도메인+경로), 리소스의 위치(주소)를 나타내는 URI

- URN: 리소스의 고율한 식별자(위치는 포함하지 않음)

 

2) Rest API

- 약속된 지정된 주소(URI, endpoint)를 가지고 있고, 각 주소에 기능(함수)를 가지고 있는 형태

- 예: https://www.apple.com/jp, https://www.apple.com/kr

- 라이브러리 vs API

* API: 어떤 기능을 사용하기 위한 규칙, 서비스 간 통신을 위해 사용

** 라이브러리: 실제 기능을 제공하는 코드 모음(함수, 클래스 등) 

*** URL은 단순히 리소스가 어디에 있는지를 나타냄, 엔드포인트는, API에서 클라이언트가 데이터를 요청할 수 있는 특정 URL

 

8. 데이터베이스

- 사람이 분류하기 쉽게 저장하고, 서비스를 어떻게 운영할 것인가의 핵심 요소

- 논리삭제: 실제로 데이터베이스에서 삭제한것이 아니라 조회가 안되게 하는 것(예: True/False)

 

9. 서버가 터졌다

- 클라이언트(프론트엔드)와 서버(백엔드)가 통신이 불가능해진 상황

- 트래픽(서버에 접속할 때 일어나는 통신량) 과부하, 백엔드 코드 버그, DB 접속 오류 등

 

10. 서버 아키텍처

- 서버컴퓨터 1개: 웹서버, 벡엔드 코드

- 주로 DB는 분리해 구성

* 개인정보는 비즈니스 로직과 분리하도록 되어있음

 

11. API

*API: 서비스 간 연결 (예: AI 모델을 외부에서 호출, OpenAI API)

**라이브러리: 코드를 재사용 할 수 있도록 제공, 필요한 기능을 골라 사용(예: AI 모델 개발 도와줌)

*** 프레임워크: 전체적인 개발 방식 제공(예: AI 서비스 구조)

- 프로그램끼리(Code)끼리 대화를 하도록 도와줌

- Application Programming Interface: 요청과 응답을 위해 작성된 코드

- HTTP 통신을 활용한 API를 REST API라고 함

- GET API : 사이트 정보를 가져옴

- POST: 로그인(아이디/비밀번호 전송)

- 네트워크, 통신을 통해 기능을 제공

* Open API : 예) 행정안전부 실시간 주소 정보 조회

 

12. DBMS 

- Database Management System: 데이터베이스 운영관리를 위한 소프트웨어

- MySQL, MariaDB, PostgreSQL, Oracle

 

1) 관계형 데이터베이스

- primary key라는 고유값을 활용해 연결에 유리한 관계형

- B신발 데이터 +  A고객 데이터

 

2) NoSQL

- 기록이 단순하고 대용량 처리에 유리

 

13. 웹의 역사

- 팀 버너스리 : 영국의 컴퓨터 과학자. 현재의 www(월드 와이드 웹)의 창시자

- Html, css, http 통신, url 등 현대 웹의 초석이 되는 기술을 개발, 무료로 공개

 

14. 라이브러리

- 반복해서 자주 사용하는 기능들을 함수로 묶어 선언하여 사용하는 형태로 제공(코드 모음)

- 예: Passport.js - 로그인 기능 구현 쉽게 해줌

- 검증된 라이브러리를 잘 활용해야 함

 

15. 프레임워크

- 프로그램을 효율적으로 짜기 위한 어떤 형태의 틀을 가진 도구

- 공통된 규칙을 따르기 때문에 협업에 유리함, 코드 로직 자체에 집중할 수 있게 도와줌

 

16. 검색 엔진 최적화 SEO

- 구글에 더 많이 노출되는 방법

- 구글의 시작: 웹사이트를 다운받아 DB에 저장하고 분석하여, 알고리즘을 만들어감

- 114억개에 달하는 웹 사이트 => 핵심 키워드를 통한 노출 전략

- 해시태그도 검색 최적화의 시도 중 하나다

- 네이버 웹마스터 도구, 구글 콘솔에 들어가 직접 사이트를 등록하는 방법도 존재

 

1) 구글의 검색엔진 3단계

-  크롤링 > 색인 생성 > 최종 검색결과 제공

* 색인이란? 검색 속도를 높이기 위해 데이터를 저장할 때 별도의 내용을 저장하는 방법

※ 구글의 검색 엔진 최적화 가이드 : https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko

SEO 기본 가이드: 기본사항 | Google 검색 센터  |  문서  |  Google for Developers

 

2) 크롤링

- 웹페이지를 자동으로 그대로 긁어서 가져옴

- 웹에 있는 코드 형태를 그대로 가져온다.

* 파싱: 특정하게 규칙이 정해져 있는 문장을 잘라내 분석하는 방법

 

3) 크롤링과 파싱

- 웹사이트 크롤링 > Parsing 통한 가격 정보 획득 > 최종 결과를 DB에 저장/출력

- AI 훈련을 위한 데이터 확보, 가격 비교 사이트, 시장 가격 조사 등에 활요

 

4) 검색 사이트 노출방지 방법도 존재

- 예: 관리자 페이지

 

5) 크롤링의 이슈

- 크롤링할 사이트 접속 > 사이트의 트래픽 발생 > 유지비용 증대/속도 저하

- 데이터의 가치가 어느때보다 크기 때문에 더욱 주의

- 구글 트렌드: https://trends.google.co.kr/trends/, 네이버 랩: https://datalab.naver.com/

 

* 색인: site:naver.com라고 검색시 네이버의 다양한 서비스들이 검색됨

- 온라인 마케터: 색인 과정에서 더 효율적인(띄어쓰기 등) 노출이 될 수 있도록 작업

 

17. 버전 컨트롤

- 전체 프로젝트를 개발, 출시, 버그 수정 등의 모든 프로젝트 관리 과정 

- 예: 카카오톡 공개 업데이트 노트

- Git: 테스트 작업, 출시버전, 제작 버전으로 편리하게 나누어 작업 가능

 

18. 기획과 플로우 차트

- 어떤 서비스를 만들 건지, 서비스의 핵심적인 흐름을 데이터와 함께 보여주는 것: 플로우 차트

- 쇼핑몰: 로그인 (회원 이름, 전화번호, 주소지 정보 획득)> 상품 구매(간편결제, 어떤 PG사 선택 등등) > 상품 배송(API)

- 프로토 타입 이후 > 기획팀은 상세 기획, 개발자는 관련 레퍼런스, 활용할 라이브러리, API 등을 점검

 

19. 오픈소스

- 프로젝트 전체 내용이 공유됨, 무료로 사용 가능(라이선스 관리)

- 자주 사용하는 서비스가 어떤 오픈소스들을 사용하는지 메뉴 페이지에서 확인할 수 있음

- 오픈소스 SW 라이선스 종합정보시스템: OLIS https://www.olis.or.kr/

메인화면 | 오픈소스SW 라이선스 종합정보시스템 OLIS

 

20. 클라우드

- 실물 서버 없이, 인터넷을 통해 활용하는 서버와 소프트웨어

- 실물 서버의 경우 용량 확장, 운영의 유연성이 부족, 유지비용 살생, 계산이 틀릴 경우 추가비용 위험성

- 예: [기존 서버] 서버 트래픽 증가 > 서버 컴퓨터 증설 > 증설된 서버 유지로 유지비용 증가

- 예: [클라우드] 유연하게 셋업 가능한 구조, 사용한 만큼 비용을 지불, 365일 정상적으로 가동해야 하는 운영 부담 감소

 

21. SaaS

- Software as a Service, 클라우드 서비스를 활용해서 제공하는 서비스

- 파일 공유와 같은 공유의 유연성, 소프트웨어 설치와 같은 과정을 거치지 않고 바로 사용, 계속해서 확장되고 있음