오늘의 학습 주제
- 컴퓨터와 프로그래밍의 이해
- 웹 클라이언트와 웹 서버
- 웹 프론트엔드의 핵심 기술 HTML, CSS, JS
- Chat GPT 활용법
| 컴퓨터와 프로그래밍의 이해 |
컴퓨터란?
입력받은 데이터를 정해진 규칙대로 처리해서 처리 결과를 저장하고 출력하는 전자 장치
스스로 생각하거나, 자동으로 알아서 무언가 해주지 않는다. 그저 빨리 연산하는 단순 연산 장치이다. 대표적으로 자판기를 떠올려보면 좋다.
컴퓨터의 구성 요소
- 소프트웨어
- 시스템 소프트웨어 : 응용소프트웨어의 실행 환경, 하드웨어 장치를 관리
- 응용 소프트웨어 : 애플리케이션 및 앱 또는 프로그램 - 하드웨어
- 중앙처리장치 (CPU) : 프로그램의 실행과 데이터 처리, 프로세서라고도 함
- 제어장치 : CPU의 모든 동작과 데이터 흐름을 통제, 운영체제와 소통하며 컴퓨터의 자원을 관리
- 연산장치 : 명령어(코드) 수행
- 레지스터 : CPU 내에 존재하는 작고 빠른 기억장치, 연산에 필요한 데이터 임시 보관
- 기억장치
- 보조기억장치 : 읽고 쓰는 속도가 느려 CPU와 직접 소통X (SSD, HDD)
- 주기억장치 : CPU와 직접 소통 (RAM, ROM)
- 캐시메모리 : CPU가 자주 쓰는 데이터를 주기억장치로 부터 미리 불러와 대기시킴
* 보조기억장치>주기억장치>캐시메모리>레지스터
- 입력장치
- 출력장치
- 시스템버스 : 각 하드웨어 장치 간의 통로
- 데이터버스
- 주소버스 : 데이터가 어디에 도착해야 하는지에 대한 정보를 전달
- 제어버스
- 중앙처리장치 (CPU) : 프로그램의 실행과 데이터 처리, 프로세서라고도 함
프로그램 실행 과정
- 운영체제가 보조기억장치에 저장된 프로그램을 주기억장치인 RAM에 로드하고 모니터에 출력 (이렇게 실행중인 프로그램=프로세스)
- 입력장치를 통해 데이터를 입력하고 CPU는 프로그램의 소스 코드대로 해석하고 명령어를 적용해 연산
- 연산 결과를 주기억장치에 저장하고 모니터에 출력
프로그래밍이 뭘까?
- 프로그래밍 : 프로그래밍 언어를 사용하여 코드로 작성하는 과정을 통해 프로그램을 만드는 것
- 프로그램 : 프로그래밍의 결과로 만들어진 컴퓨터 명령문의 집합체
- 프로그래밍 언어 : 컴퓨터 언어와 사람의 언어를 매개해주는 언어
- 컴파일 : 프로그래밍 언어로 작성된 소스 코드를 기계어 코드로 번역하는 과정
- 빌드 : 작성된 소스 코드를 프로그램으로써 실행시키기 위해 파일로 만드는 과정
- 통합개발환경 (IDE) : 프로그래밍에 필요한 모든 작업을 한곳에서 처리할 수 있도록 만들어진 프로그램
| 웹 Web |
웹이 뭘까?
인터넷을 통해 전 세계적으로 연결되어 정보를 통신할 수 있는 전자적 정보 공간이다.
World Wide Web 이라고도 하며, 대륙 간 인터넷 연결이 가능할 수 있도록 하는 매체는 해저케이블.
웹 클라이언트 & 웹 서버
- 웹 클라이언트 : 서버에 요청을 하는 주체
- 웹 서버 : 클라이언트의 요청을 처리/응답하는 주체
- 2-Tier 아키텍처 : 클라이언트-서버 아키텍처, 리소스를 전달하는 서버와 리소스를 사용하는 클라이언트를 분리시킨 설계
- 3-Tier 아키텍처 : 리소스를 저장하는 공간(데이터베이스)을 추가한 설계
웹 프론트앤드 (HTML, CSS, JS)
- HTML : 웹 문서를 구조적으로 표현하기 위한 언어
- CSS : 구조적인 문서를 시각적으로 표현하는 언어
- JS (JavaScript) : 기능을 구현하는 프로그래밍 언어
| HTML |
HTML 이 뭘까?
- 웹 페이지의 내용과 뼈대를 정해진 규칙대로 구성하는 언어
- tag (태그) 의 집합
- 트리구조로 이루어져 있음
자주 쓰는 HTML 요소
- <div> : 한 줄을 차지, 줄바꿈 가능
- <span> : 컨텐츠 크기만큼 공간을 차지, 줄바꿈이 없음
- <img> : 이미지를 삽입, src 속성을 통해 경로를 지정
- <a> : 하이퍼 링크 삽입, href 속성을 통해 링크 지정
- <ol> : 순서가 있는 목록 생성
- <ul> : 순서가 없는 목록 생성
- <li> : <ul></ul> 또는 <ol></ol> 태그 내부에 들어가는 항목, 단독사용 불가
- <input> : 한 줄의 짧은 텍스트 입력 폼
- <textarea> : 줄바꿈이 가능한 입력 폼
- <button> : 클릭하면 작업이 수행되는 버튼 생성
- <script> : 자바스크립트 실행을 위해 사용
- <p> : 문단을 구분
- <section> : 묶어서 구역을 지정하는 '시맨틱 태그'
- <h#> : #에는 1-6 숫자, 제목을 표현++ 시멘틱 태그(semantic tag) : 기능적으로는 완전히 같지만, 각 요소가 감싸고 있는 영역이 어떤 역할을 담당하는지 개발자가 쉽게 파악할 수 있도록 이름을 붙여놓은 것
| CSS |
CSS가 뭘까?
- 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어
- 사용자 인터페이스를 개선하여 좋은 사용자 경험을 제공하기 위한 도구
- CSS는 스타일링 도구이므로 독립적으로 기능하지 않는다
- 반드시 HTML이 있어야만 동작
사용자 인터페이스(UI; User Interface)
- 웹 애플리케이션이 제공하고자 하는 웹 서비스와 사용자를 연결해 주는 매개체
사용자 경험(UX; User eXperience)
- UX는 사용자가 특정 서비스를 사용하고 경험하면서 직/간접적으로 느끼는 종합적인 만족도
CSS 기본 문법 구조
셀렉터 { 속성명(property name) : 속성값(property value) ; }
body {
color: red;
font-size: 30px;
}| 2일차 회고 |
CSS 챕터는 시간이 촉박하여 다 끝내지 못하였다.... 연속하여 글만 읽고 있으려니 중간중간 집중도가 떨어졌고, 끊긴 집중력으로 30분에서 1시간 동안 낯선 CSS 챕터를 끝내기엔 역부족이었다.
집중을 잘 할 수 있도록 환경을 조성하고, 시간 내 챕터를 끝낼 수 있도록 오늘 해본 공부 방법에서 쓸데없는 구간을 파악해서 제거해보자. 내용을 정리하며 읽기보단, 일단 한번 정독 후 또 읽으며 정리해보는건 어떨까? 한번에 이해와 정리를 함께 하려는 완벽주의 성향이 좋지 않은 것 같다. 빨리 최적화된 공부 방법을 찾아 정착할 수 있었으면 좋겠다.
또 나는 6시부터 육아를 하기에 남들보다 자율학습시간이 부족하다. 어떤식으로 보충할 수 있을지 생각해보고, 시간을 정말 효율적으로 쓰도록 노력해야겠다.
오늘은 직접 결과물을 낼 수 있는 과정이어서 졸리지는 않았다. 트위틀러를 만들 때 가장 시간가는줄 몰랐고 재미있었다. 완성에 성공했다!! 프론트는 내가 입력한 코드가 바로바로 시각적으로 나타나기 때문에 코드치는 재미가 있었다. 그런데 확실히 색지정, 수치지정 등 디자인적으로 알록달록 예쁘게 꾸미는 건 내 취향이 아니다. 기능을 구현하는게 더 재미있기 때문에 나는 백엔드 개발자가 좋다!
하루종일 책상앞에 앉아있으니 정말 등, 허리, 손목, 목, 다리 등등 안아픈곳이 없다.. 운동을 해야할까? 체력관리도 너무 중요할 것 같다.
체력관리! 시간관리! 멘탈관리! 나는 내일 더 발전할거야!
백엔드 개발자 김예인입니다.