[SEB_BE / Day 2] Development 기초

컴퓨터와 프로그래밍의 이해

 

🎯 Target

• 컴퓨터의 구성 요소에 대해 설명할 수 있다.
• 프로그램 실행 시 컴퓨터 내부의 상황을 이해할 수 있다
• 프로그래밍 관련 개념들을 설명할 수 있다.

 

🖖 Intro

프로그램 = 소프트웨어 = 애플리케이션

프로그래밍의 결과로 만들어진 결과물로 어떠한 목적을 달성하기 위한 컴퓨터 명령문의 집합체

뭐를 기반으로 하는 지에 따라 웹 애플리케이션, 앱 애플리케이션 등으로 불린다.

 

컴퓨터란?

입력받은 데이터를 정해진 규칙대로 처리하여 처리 결과를 저장하고 출력하는 전자 장치

• 입력받은 데이터
  • 컴퓨터는 사람으로부터 데이터를 입력받음
  • 즉, 컴퓨터는 데이터를 입력장치로 입력받음
• 정해진 규칙
  • 프로그램 = 소프트웨어 = 애플리케이션
• 처리
  • 중앙처리장치를 통해 연산을 수행
• 처리 결과를 저장
  • 처리 결과물을 기억 장치에 저장
• 출력
  • 출력 장치를 통해 사람이 볼 수 있는 형태로 전달

 

컴퓨터의 구성요소

‘정해진 규칙대로’ → 소프트웨어

‘입력받은 데이터를 처리해서 처리 결과를 저장하고 출력하는 장치’ → 하드웨어

즉, 컴퓨터(Computer)는 소프트웨어(Software)와 하드웨어(Hardware)로 구성되며, 이 둘의 상호작용을 통해 동작한다.

 

소프트웨어(Software)

물리적인 형태가 존재하지 않는 컴퓨터의 구성요소로, 하드웨어가 어떻게 동작해야 하는지 규정해놓은 명령어의 집합이다. 소프트웨어는 크게 시스템 소프트웨어와 응용 소프트웨어로 분류된다.

 

시스템 소프트웨어(System Software)

응용 소프트웨어를 실행하기 위한 일종의 플랫폼 역할을 수행하며, 하드웨어와 직접적으로 소통하며 하드웨어 장치들이 제대로 동작할 수 있도록 해준다.

• 응용 소프트웨어의 실행 환경
• ex) Mac, Windows, Linux와 같은 OS 및 Node.js, JRE와 같은 런타임 환경
• 하드웨어 장치를 관리
• ex) 키보드 드라이버, 마우스 드라이버, USB드라이버와 같은 각종 장치 드라이버

 

응용 소프트웨어(Application Software)

시스템 소프트웨어를 제외한 모든 소프트웨어를 의미하며 줄여서 애플리케이션 및 앱이라고 부르고 일반적으로 프로그램이라고 불린다. 종류는 사무, 교육, 멀티미디어, 통신, 게임 등 매우 다양하다.

ex) 쿠팡, 넷플릭스, LOL 등

 

하드웨어(Hardware)

컴퓨터를 구성하고 있는 기계적 장치들의 집합이다. 우리 손으로 만질 수 있는 컴퓨터의 물리적인 장치들을 하드웨어라고 한다. 하드웨어는 중앙처리장치, 기억장치, 입력장치, 출력장치로 분류된다. 그리고 각 장치들은 시스템 버스로 연결되어 있다.

 

중앙처리장치(CPU, Central Processing Unit)

프로그램의 실행과 데이터 처리를 담당하는 컴퓨터의 핵심 장치로, 프로세서라고도 한다. CPU는 제어장치, 연산장치, 레지스터로 구성되며 각 요소의 동작이 상호 작용하여 CPU의 기능을 수행한다.

• 제어장치
  • CPU의 모든 동작과 데이터 흐름을 통제 및 관리
  • 운영체제와 소통하며 컴퓨터 자원을 관리
• 연산장치
  • 프로그램에 기술되어 있는 명령어들을 수행
  • 코드를 실질적으로 실행시키는 장치
• 레지스터
  • CPU 내에 존재하는 작고 빠른 기억장치
  • 연산장치의 동작에 필요한 데이터를 임시로 보관 및 제공

 

기억(저장)장치(Memory Device)

CPU의 동작에 필요한 데이터를 장기적, 단기적으로 보관한다.

장기적 → 보조기억장치 | 단기적 → 주기억장치

• 보조기억장치
  • 컴퓨터에 필요한 모든 정보를 반영구적 저장
  • 큰 용량의 데이터 저장 가능, 데이터를 읽고 쓰는 속도가 느림
  • CPU와 직접적으로 소통하지 않음
  ex) SSD(Solid State Drive), HDD(Hard Disk Drive)
• 주기억장치
  • 컴퓨터가 프로그램을 수행하는 동안 필요한 모든 데이터를 저장
  • 큰 용량의 데이터 저장 불가능, 데이터를 읽고 쓰는 속도가 빠름
  • CPU와 직접적으로 소통
  ex) Ram(Random Access Memory), Rom(Read Only Memory)

 

캐시 메모리(Cache Memory)

한번 CPU가 사용한 데이터와 고나련된 데이터 중 재사용 가능성이 높은 데이터를 주기억장치로부터 미리 불러와 대기시켜놓는 역할

쉽게 말해 데이터를 현금이라고 할 때,

주기억장치 → ATM

캐시 → 지갑

 

기억장치의 계층 구조

 

 

입력장치(Input Device)

사용자로부터 컴퓨터 내부로 데이터를 입력받는 장치

ex) 키보드, 마우스, 마이크, 트랙패드 등등

 

출력장치(Output Device)

컴퓨터 내부로부터 사용자에게 데이터를 출력해주는 장치

ex) 모니터, 스피커, 프린터 등등

 

시스템 버스(System Bus)

CPU를 포함한 각 하드웨어 장치 간의 통로이다. 즉, 하드웨어 장치를 물리적으로 연결한 전선을 의미하기 때문에 시스템 버스 또한 하드웨어에 포함된다.

• 데이터 버스
  • 하드웨어 간에 데이터를 전달하는 통로
• 주소 버스
  • 데이터가 어디에 도착해야 하는지에 대한 정보를 전달하는 통로
• 제어 버스
  • CPU의 제어장치가 생성한 제어 신호를 다른 장치로 전달하는 통로

 

컴퓨터의 동작(프로그램 실행)

운영체제가 보조기억에 저장되어 있던 프로그램을 주기억장치인 Ram에 로드(Load) → 로딩(Loading) = 메모리에 적재

즉, CPU가 작업할 수 있도록 보조기억장치에서 주기억장치로 프로그램파일을 옮겨오는 과정

• 프로세스: 메모리에 로드되어 실행중인 프로그램

 

프로그래밍이란?

프로그램을 만드는 과정으로써, 특정 목적을 달성하기 위해 설계된 알고리즘을 프로그래밍 언어를 사용하여 코드로 작성하는 과정

 

컴파일(Compile)

프로그래밍 언어로 작성된 소스 코드를 컴퓨터가 이해할 수 있는 기계어 코드로 번역하는 과정으로 빌드(Build) 과정의 일부이다.

 

빌드(Build)

작성한 소스 코드를 실행할 수 있는 산출물로 변환시키는 과정

컴파일로 컴퓨터는 이해할 수 있지만 사용자가 소스코드를 실행시키지 못한다. 하지만 빌드가 완료되면 실행 시킬 수 있는 하나의 프로그램으로 완성된다.

통합개발환경(IDE, Integrated Development Environment)

코드를 작성할 때 사용하는 프로그램으로 프로그래밍에 필요한 모든 작업을 하나의 프로그램 안에서 처리할 수 있도록 만들어진 프로그램이다.

단순히 코드 작성 및 편입이 아닌 디버깅, 빌드 등의 작업등을 하나의 IDE안에서 해결할 수 있다

ex) Intellij, VSCode…etc

 

---

웹(WWW | W3, World Wide Web)

 

🎯Target

• 웹 클라이언트와 서버가 무엇인지 설명할 수 있다.
• 웹 프론트엔드에서 활용하는 핵심 기술인 HTML, CSS, JS가 무엇이고, 어떤 역할을 하는지 설명할 수 있다.

 

3-Tier Architecture

• Presentation(Web) Layer
  • 사용자와 애플리케이션과 상호 작용하는 인터페이스 및 커뮤니케이션 계층이다.
  • 주 목적은 정보를 표시하고 사용자로부터 정보를 수집하는 것
  • 일반적으로 HTML, CSS, JS를 사용하여 개발된다.
  ex) GUI
• Application Layer
  • 논리 계층 혹은 중간 계층이라고 부르며 애플리케이션의 핵심이다.
  • 특정 비즈니스 규칙세트인 비즈니스 논리를 사용하여 프레젠테이션 계층에서 수집된 정보가 처리된다.
  • API를 호출하여 데이터계층과 소통하며 데이터 계층의 데이터를 제어할 수 있다.
• Data Layer
  • 데이터베이스(Database) 계층으로 데이터 액세스 계층이라 부르며 애플리케이션이 처리하는 정보가 저장 및 관리되는 계층이다.
  ex) PostgreSQL, MySQL, MariaDB, OracleDB 등등

 

---

HTML(HyperText Markup Language)

웹페이지의 틀을 만드는 마크업 언어

 

🎯Target

• HTML이 “구조를 표현하는 언어”라는 것을 이해한다.
• HTML의 기본적인 구조를 이해한다.
• 자주 사용되는 HTML 요소(Element)를 설명할 수 있다.

 

HTML의 기본 구조와 문법

• Tag(<>)들의 집합
• Tree 구조를 가지고 있다.

 

자주 사용하는 HTML 요소

• div vs span
  • div태그는 한 줄을 차지한다.
  • span태그는 컨텐츠 크기만큼 공간을 차지한다.
• img
  • 닫는 태그가 없음
• a
  • 링크 삽입
  • <a href=”link”>내용</a>
• ul vs li
  • ul태그는 순서 없는 리스트
  • li태그는 순서 있는 리스트
• input, textarea
  • input 태그는 한 줄
  • textarea 태그는 줄 바꿈 가능
• button
  • button 태그

---

CSS(Cascading Style Sheets)

HTML로 작성된 웹 애플리케이션 구조에 디자인을 적용하는 데 사용

웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어

 

🎯Target

• CSS의 사용 목적을 이해하고, 기본적인 문법과 구조를 설명할 수 있다.
• HTML에 CSS를 적용하는 방법에 대해 이해할 수 있다.
• HTML 파일 내에 CSS를 정의하는 것을 권장하지 않는 이유를 설명할 수 있다.
• CSS를 이용해 텍스트를 꾸밀 수 있다.
• 기본적인 CSS 박스 모델을 이해하고 설명할 수 있다.

 

사용자 인터페이스(UI, User Interface)

웹 애플리케이션이 제공하고자 하는 웹 서비스와 사용자를 연결해주는 매개체

 

사용자 경험(UX, User eXperience)

사용자가 특정 서비스를 사용하고 경험하면서 직/간접적으로 느끼는 종합적인 만족

 

CSS 파일 추가

<link>: HTML파일과 다른 파일을 연결하는 목적으로 사용

html 파일에서 <link rel=”stylesheet” href=”css파일 경로” />

 

셀렉터(Selector)

id	class
#으로 선택	. 으로 선택
한 문서 내에서 유일한 속성값	한 문서 내에서 중복 가능한 속성값
특정 요소에 이름을 붙이는데 사용	스타일의 분류에 사용

 

박스모델

하나의 웹 페이지 내의 모든 콘텐츠는 고유 영역을 가지고 있으며 그 영역은 항상 직사각형으로 이루어져 있어, **박스(Box)**라고 부른다. 박스는 높이, 넓이, 테두리, 여백 등 다양한 속성을 가지고 있다.

 

block vs inline-block vs inline

block inline-block inline

한 줄 차지	O	X	X
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	가능	가능	불가능

 

 

---

ChatGPT(Generative Pre-trained Transformer)란?

Introducing ChatGPT

OpenAI가 2022년 11월에 공개한 서비스로 대화형 인공지능 챗봇이다. 머신러닝을 통해 방대한 데이터를 미리 학습하고 이를 통해 문장을 생성하는 질의 응답 인공지능 챗봇이다.

 

 

---

Ref.

https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EB%A6%AC_%EA%B3%84%EC%B8%B5_%EA%B5%AC%EC%A1%B0

https://towardsaws.com/together-we-build-an-aws-3-tier-architecture-62db9bba4f3a

http://www.tcpschool.com/css/css_boxmodel_boxmodel