[코드스테이츠] 04_12_TIL : 프론트엔드 이해하기

Today I Lean

프론트엔드 이해하기

 

아침에 일어나서 바로 공부를 시작하는게 습과이 안돼있어서 그런지 쉽지 않았다.

그래도 최대한 준비시간을 줄여보고자 커피도 미리 타놓고 긴장하고 잠들었던게 효과가 있었는지 제대로 일어나서 수업에 참여할 수 있어서 나름의 뿌듯함을 느낄수 있었다.

 

사실 HTML과 CSS는 공부했던 적이 있어서 아는 내용이긴 하지만 그래도 한 번 더 복습하는 느낌으로 정독하고 정리도 했다. 그 과정에서 배웠지만 잊고 있던 것들과 미처 알지 못했던 내용, 긴가민가 했던 부분까지 확실하게 알 수 있어서 좋은 배움의 시간이라고 느껴진다.

 

내일부터는 진짜 모르는 내용이 나와서 긴장되지만 그와 동시에 설레는 마음도 함께 있다.

HTML도 처음엔 어려웠는데 이제는 읽을 수 있는것처럼 JAVA도 계속 하다보면 언젠가는 잘 할 수 있을 테니 꾸준히 노력해 봐야겠다는 생각을 하며 오늘을 마친다. 

 

 

 

 

학습목표 및 개념정리

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

- 컴퓨터의 구성 요소에 관해 설명할 수 있다.
- 프로그램을 실행하면 컴퓨터 내부에서 어떤 일이 일어나는지 이해할 수 있다.
- 프로그래밍과 관련된 개념들을 설명할 수 있다.
 (프로그램, 프로그래밍, 프로그래밍 언어, 컴파일, 빌드, 통합개발환경)

# 웹

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

#  HTML

- HTML이 "구조를 표현하는 언어" 라는 것을 이해한다.

- HTML의 기본적인 구조를 이해한다.

- 자주 사용되는 HTML 요소(Element)를 설명할 수 있다.

 (<div>, <span>, <ul>, <ol>, <li>, <input> 등)

#  CSS

- CSS의 사용 목적을 이해하고, 기본적인 문법과 구조를 설명할 수 있다.

- HTML 에 CSS를 적용하는 방법에 대해 이해할 수 있다.

- HTML 파일 내에 CSS를 정의하는 것을 권장하지 않는 이유를 설명할 수 있다.

- CSS를 이용해 텍스트를 꾸밀 수 있다.

- 기본적인 CSS 박스 모델을 이해하고 설명할 수 있다.

 

#  Chat GPT를 활용한 학습 방법

 

 

 

 

배운 것

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

1. 컴퓨터란?

- 입력받은 데이터를  → 하드웨어
 : 데이터를 입력장치로 입력받는다.(키보드, 마우스, 마이크 등)

- 정해진 규칙대로 → "소프트웨어"
 : 시스템 소프트웨어 (응용소프트웨어의 실행환경, 장치관리 드라이버)
 : 응용 소프트웨어 (프로그램 / 애플리케이션)

- 처리해서 → 하드웨어
 : 중앙처리장치를 통해 연산을 수행한다.(CPU>Center Processing Unit)

- 처리 결과를 저장하고 → 하드웨어
 : 기억장치에 저장한다.(하드디스크 드라이브)
 : 용량이 작을 수록 속도와가격은 높고, 용량이 클수록 속도와 가격은 낮아짐

- 출력하는 전자 장치 이다 → 하드웨어
 : 출력장치로 출력한다.(모니터, 스피커, 프린터 등)

- 그 외로 기기들을 연결하는 전선이 있다.  → 하드웨어
 : 시스템 버스라고 하는데, 각 하드웨어를 물리적으로 연결한 전선을 의미

2. 프로그래밍

- 프로그래밍 언어
 : 컴퓨터와 사람의 언어를 매개해 주는 것

- 컴파일
 : 프로그래밍 언어로 작성된 코드를 컴퓨터 언어로 변환하는 과정

- 빌드
 : 실행할 수 있는 확장자를 가진 파일로 만들어 주는 과정
 : 컴파일 과정이 빌드 안에 속한다.

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

 : 코드를 작성할 대 사용하는 프로그램 (디버깅, 빌드 등의 작업도 가능)
 : VScode, IntelliJ, Eclipse

# 웹

1. 웹 클라이언트와 웹 서버

- 2티어 아키텍처 / 클라이언트-서버
 : 리소스를 사용하는 곳 : 앱(클라이언트)
 : 리소스를 제공(serve) 하는 곳 : 서버

- 3티어 아키텍처 / 클라이언트-서버-데이터베이스
 : 리소스를 사용하는 곳 : 앱(클라이언트)
 : 리소스를 전달 하는 곳 : 서버
 : 리소스를 저장하는 곳 : 데이터베이스(서버에 속함)

* 리소스란?
사용될 수 있는 어떤 항목
프린터, 디스크 드라이브와 같은 장치 or 메모리
마이크로소프트 윈도우나 매킨토시와 같은 많은 운영체계에서, 리소스라는 용어는 프로그램들이 활용할 수 있는 데이터나 루틴들을 말한다.

- 종류
 : 클라이언트 (웹, 앱)
 : 서버 (성격에 따라 달라짐)

 

 

2. 웹 클라이언트와 웹 서버

- HTML
 : 화면의 기본적인 구조를 짜고 스케치를 그려준다. 
 : 원하는 항목들을 쭉 나열하는 식

- CSS
 : HTML로 만든 스케치 위에 채색을 하고 그리드를 정렬 하는 등 더 다양한 화면을 그릴 수 있다.
 : CSS에서 움직임이 없는 정적인 화면을 만들 수 있다.

- JAVA SCRIPT
 : 화면에 생동감을 주며 움직임을 줄 수 있다.
 : 같은 화면에서 탭을 누를 때 여러번 로드 하지 않도록 해준다.

 

 

# HTML

1. 기본 구조와 문법

- HTML은 tag의 집합이다.
 : tag <>로 묶인 HTML의 기본요소

 

 

2. 자주 사용하는 HTML 요소

- <div>
 : div는 한 줄을 차지

 → 따로 정렬이나 사이즈 조절을 하지 않는이상 같은 줄에 다른 요소가 들어갈 수 없다.

 

- <span>
 : 컨텐츠의 크기만큼 공간을 차지

 

- <img>
 : <img src = "링크">

 → 닫는 태그 없음

 

- <a>

 : <a href = "링크" target = "_blank"></a>

 → a태그는 문서 전체에 스타일을 줬을 때 적용되지 않기 때문에  따로 줘야 함

 → 하이퍼링크

 

- <ul> - <li> / <ol> - <li>
 : 리스트를 만드는 태그

 → ul (점으로 표시)

 → ol (숫자로 표시)

 

- <input>, <textarea>

 → 입력폼

 : <input type = "text" placeholder = "type here">

 →

 : <textarea></textarea>

 →

 : <input type = "checkbox">

 →

 : <input type = "radio">

 →

 : <input type = "radio" name = "choice" value = "a">a

   <input type = "radio" name = "choice" value = "b">b

 → ab

 : <button>닫기</button>

 →

 

 

 

# CSS

1. CSS 와 UI / UX

- UI (User Interface)
 : 사용자 인터페이스 / 서비스와 사용자를 연결해주는 매개

 

- UX (User eXperience)
 : 사용자 경험 / 사용자가 편리하도록 깔끔하고 직관적인 페이지 구성

 

 

2. CSS 따라하기

- 시멘틱 태그 (semanric tag)
 : div를 대신하여 사용할 수 있는 태그

 → 기능은 같지만 사용자 편의를 위해 조금더 직관적인 이름이 달린 태그

 

- CSS 파일 추가
 : <link rel = "stylesheet" href = "../index.css" type = "text/css">

 → HTML과 CSS파일 연결

 

- CSS 파일 추가
 : <link rel = "stylesheet" href = "../index.css" type = "text/css">

 → HTML과 CSS파일 연결

 

- id / class
 : id

 → #

 → 한 문서내의 유일한 속성값

 → 특정 요소에 특별한 이름을 붙이는 데에 사용

 

 : class

 → .

 → 한 문서 내에 여러개 중복이 가능한 속성값

 → 스타일의 분류에 사용

 

 

3. BOX

- 박스 모델

 : 웹 페이지의 콘텐츠가 가지고 있는 영역

 : 줄바꿈(block) / 옆(inline, inline-block)

 

- 박스의 구성요소

* { 

     box-sizing : border-box;

}

 → 여백과 테두리를 포함한 크기로 박스 사이즈가 계산된다.

 → 전체 설정 * 에 지정

 

 

#프레임워크와 IDE의 차이

1. 프레임워크

 : 대표적인 프레임워크로는 웹개발에서 사용되는 Spring, Django, Ruby on Ralls 등이 있다.

- 표준화된 구조와 규칙 제공

- 재사용 가능한 코드 제공

- 개발의 생산성을 높이고, 유지보수를 용이하게 함

- 보안과 성능 최적화를 위한 기능제공

- 커뮤니티 지원과 다양한 플러그인, 라이브러리를 제공

 

2. IDE

 : 대표적인 IDE로는 Eclipse, IntelliJ IDEA, NetBeans 등이 있다.

- 통합 개발 환경 (Integrated Development Enviromment)

- 소프트웨어 개발을 위한 툴 들을 모아놓은 프로그램

- 코드 작성, 디버깅, 빌드, 배포 등을 지원하여 개발 생산성을 높임

 

Q&A

Q. 두개가 같은 건가?

 A. 프레임워크는 소프트웨어 개발을 위한 구조와 규칙을 제공하고 개발자는 이를 활용해 소프트웨어를 구현한다. IDE는 개발의 생산성을 높이는 통합개발환경 으로 상호작용을 하며 함께 사용할 수는 있지만, 이 둘은 같은 것은 아니다.

 

Q. 둘다 개발할 때 사용하는거 아닌가?

 A. 맞다. 둘다 소프트웨어 개발에 필요한 도구 이지만, 다른 목적과 기능을 가지고 있다.

 

Q. 그럼 프레임워크는 유지보수용이고, IDE는 개발용?

 A. 프레임워크는 유지보수에도 큰 도움을 주지만, 개발초기 단계에서도 사용되기 때문에 기능을 정확하게 나눌 수 없다. 결론적으로 프레임워크와 IDE는 모두 소프트웨어를 개발할 때 사용하지만, 어디에 더 중점을 두었느냐의 차이라고 할 수 있다.

프레임워크는 일관성과 유지보수성을 높이는 것에 중점을 두기 때문에 기능의 구조와 규칙을 제공한다.

IDE는 개발의 생산성을 높이는데 중점을 두기 때문에 코드작성, 디버깅, 빌드, 테스트, 배포 등의 기능을 제공한다.

그렇기 때문에 개발할 때 어떤 도구를 사용할 것인지는 프로젝트의 목적과 개발자의 선호도에 따라 달라진다.

 

Q. 크게 봤을때 IDE에 프레임워크가 포함되는건가?

 A. 그건 아니다.

 

 

 

 

Tomorrow Chapter

# 실습 툴 설치 및 실행

# CLI 기본 명령어

# 패키지와 패키지 매니저

# 사용권한

# 환경변수

 

 

 

---

 

 

↓ 이전 글 ↓

[코드스테이츠] 04_11_TIL : 코딩을 시작하기에 앞서...

 

 

↓ 코트스테이츠 부트캠프 관련 글 한번에 보기 ↓

'IT/코드스테이츠 부트캠프' 카테고리의 글 목록