Code States BE 부트캠프#2

John Jun·2023년 4월 12일
CSBE
0

Development <웹개발 기초>

INDEX

  1. 컴퓨터와 프로그래밍의 이해
  2. WEB
  3. HTML
  4. CSS
  5. ChatGPT 활용
  6. 느낀점&회고

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

- 1. 컴퓨터의 구성 요소
  1. 컴퓨터란?
    컴퓨터란 암호를 풀어내는 튜링 머신에서 유래하였고 이제는 단순한 계산 기계에서 벗어나 우리일상의 모든 분야에 깊게 관여하는 전자장치가 되었다.
    다시말해, 컴퓨터란, "입력받은 데이터를 정해진 규칙대로 처리해서 처리 결과를 저장하고 출력하는 전자 장치" 라고 정의 할 수 있다.

사람으로부터 입력장치로 받은 데이터를 정해진 규칙, 즉 프로그램을 통해 중앙처리장치를 거쳐 연산을 수행하고 그 결과를 기억장치에 저장하고 출력장치를 통해 출력한다.

  1. 구성 요소
    소프트웨어
    시스템 소프트웨어
    - 응용 소프트웨어를 실행하기 위한 일종의 플랫폼
    - 하드웨어와 직접적 소통을 통해 하드웨어를 컨트롤(운영체제 및 드라이버)

응용 소프트웨어
- 시스템 소프트웨어를 제외한 모든 소프트웨어(애플리케이션 혹은 프로그램)

하드웨어
- 컴퓨터의 신체에 해당
- 중앙처리장치, 기억장치, 입력장치, 출력장치로 분류

  • 중앙처리장치(CPU)
    -CPU는 프로그램의 실행과 데이터 처리를 담당하는 컴퓨터의 핵심 장치
    -제어장치(모든 동작 및 데이터 흐름 통제 관리 / 운영체제와의 소통으로 컴퓨터 자원 관리), 연산장치(프로그램 명령어 수행 및 코드 실행), 레지스터(작고 빠른 기억장치 연산을 위한 데이터 임시 보관)로 구성

  • 기억장치(Memory Device)
    - CPU동작에 필요한 데이터를 장기적 혹은 단기적으로 보관
    -장기적 보관: 보조기억장치: SSD, HDD(반영구적 저장, 큰 용량의 데이터를 저장하지만 읽고 쓰는 속도가 느림 따라서 CPU와 직접 소통 X )/ 단기적 보관: 주기억장치: RAM, ROM (프로그램 수행을 위한 모든 데이터 저장, 큰 용량 데이터 저장이 불가하지만 읽고 쓰는 속도가 빨라 CPU와 직접 소통)

  • 입력장치 (Input Device) 및 출력장치 (Output Device)
    - 데이터를 입력/출력하는 장치들

  • 시스템 버스 (System Bus)
    - CPU를 포함한 각 하드웨어 장치 간의 통로

    • 하드웨어 장치를 물리적으로 연결한 전선(데이터 전달을 위한 데이터 버스, 데이터의 도착 정보를 전달하는 주소 버스, CPU의 제어 신호를 전달하는 제어 버스)

  • 컴퓨터의 동작
    1. CPU가 보조기억장치에 저장되어있는 프로그램을 주기억장치 RAM에 로드(로딩)

    1. 모니터 등에 출력(프로세스)
    2. 입력장치를 이용, 데이터 입력
    3. CPU는 프로그램에 작성된 코드를 해석 명령어 수행
    4. 결과가 주기억장치에 저장되고 출력

- 2. 프로그래밍

  1. 프로그래밍이란?
    컴퓨터의 특성을 활용하여 컴퓨터에 문제 해결을 요구하는 일종의 커뮤니케이션 과정.
    즉, 특정 목적을 당성하기 위해 설계된 알고리즘을 프로그래밍 언어를 사용하여 코딩하는 과정. 프로그램은 프로그래밍의 결과, 즉, 프로그램은 어떠한 목적을 달성하기 위한 컴퓨터 명령문의 집합체이다.

  2. 프로그래밍 언어
    컴퓨터가 이해할 수 있는 언어

  3. 컴파일 & 빌드
    Compile: 프로그래밍 언어로 작성된 소스 코드를 컴퓨터가 이해할 수 있는 기계어 코드로 번역하는 과정
    Build: 빌드는 작성한 소스 코드를 실행할 수 있는 산출물로 변환시키는 과정(컴파일 과정이 포함) 컴파일된 코드들을 실행 파일로 변환하는 과정

  4. 통합개발환경(IDE)
    IDE는 코드를 작성할 때 사용하는 프로그램으로, 프로그래밍에 필요한 모든 작업을 하나의 프로그램 안에서 처리할 수 있도록 만들어진 프로그램

2. WEB

  1. 웹 클라이언트와 웹 서버
  • 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 구조를 2티어 아키텍처, 또는 클라이언트-서버 아키텍처라 부른다. 이에 데이터베이스가 추가된다면 3티어 아키텍처가 된다.
    - 클라이언트(Client): 리소스를 사용하는 앱
    • 서버(Server): 리소스를 제공하는 곳
      - 데이터베이스(Database): 리소스를 저장하는 별도의 공간
  1. 웹 프론트엔드
    HTML: Structure(구조)
    CSS: Presentation(디자인 시각화)
    JavaScript: Interaction(프로그램을 통해 유조와 상호작용 / 동작구현)

3. HTML

HyperText Markup Language: 웹페이지의 틀을 만드는 마크업 언어

  1. HTML의 기본 구조와 문법
  • tag들의 집합 / tag: <> 로 묶인 기본 구성 요소
  • html 확장자를 사용한다.
  • tree 구조로 형성된다: 
    <html>
 	<head>
   	<body>
   	</body>
   </head>
</html>
  • 같은 요소의 <>,</>의 열고 닫는 태그들로 구성된다.

4. CSS

디자인을 적용하는 데 사용되는 스타일 언어(Cascading Style Sheets)
UI(User Interface)의 개선을 위해 사용된다.

  • Interface란?
    두 대상을 연결해주는 매개체 혹은 매개물

  • UI/UX란?
    UI: 웹 애플리케이션이 제공하고자 하는 웹 서비스와 사용자를 연결해주는 매개체(보이는 영역)
    UX: UI를 사용하는 사용자 경험

웹페이지 구성에서 필수적으로 고려되어야 하는 요소가 UI/UX이고 이에 핵심 기술이 CSS이다.

  • CSS는 스타일링 도구이므로 독립적으로 기능하지 않고 반드시 HTML과 함께 동작한다.

CSS 기본문법

//Selector(태그의 이름, id, class)
body { //선언블록

//선언
color: red; //선언구분자(;)
font-size: 30px;
//속성명   //속성값
}

link 태그를 이용하여 HTML파일과 연결한다.

*HTML태그에 직접 CSS속성을 추가할 수도 있지만 관심사 분리 측면에서 권장하지 않는다.

5. ChatGPT

ChatGPT란?
OpenAI가 공개한 GPT3.5(Generative Pre-trained Transformer)를 기반으로 한 대화형 인공지능 챗봇

머신 러닝을 통해 방대한 데이터를 미리 학습(Pre-trained)하고, 이를 통해 문장을 생성(Generative)하는 인공지능

구체적인 질문을 통해 다양한 방면에서 코딩에 도움을 줄 수 있다.

6. 느낀점 & 회고

컴퓨터의 전반적인 이해와 우리가 작성하는 코드들이 어떻게 구현되고 동작하는지를 전반적이고 전체적으로 이해할 수 있었다.
또한 웹에서 서버와 클라이언트 그리고 데이터베이스를 공부하면서 우리가 만들어야 할 앱 애플리케이션 서비스가 어떤 것인지 엿볼 수 있는 기회였다.

내일 배울 것들

#Linux기초
1. CLI 기본 명령어
2. 패키지와 패키지 매니저
3. 사용 권한
4. 환경 변수

profile
John Jun
I'm a musician who wants to be a developer.
이전 포스트

Code States BE 부트캠프 #1

다음 포스트

Code States BE 부트캠프 #3

0개의 댓글