프론트엔드 공부 1일차 - 프론트엔드란

프론트엔드에 대한 간단한 설명

프론트엔드란 눈에 보이는 영역을 만들어내는 개발이라고 한다.

나도 눈에 보이는 영역을 만들어 내는 것에 더 관심이 있어서 프론트엔드로 선택했다.

HTML, CSS, JS 등의 언어와 React, Vue, Angular 등과 같은 프레임워크를 사용할 수 있어야 한다고 한다.

 

프론트엔드 개발의 기초

HTML(Hypertext Markup Language)은 웹의 기본적인 구조를 만들 수 있다.

CSS(Cascading Style Sheets)는 웹을 꾸며줄 수 있으며,

JS(Java Script)는 객체지향 언어로 웹의 동작을 담당하게 된다.

 

대표적인 몇개의 프레임워크

Angular
강력한 명령행 도구와 잘 정돈된 폴더 구조, 프로젝트 생성과 동시에 각종 환경이 한 번에 갖춰지는 등 필요한 기능을 모두 내장한 프레임워크. 참고로 이렇게 애플리케이션을 만들기 위해 필요한 기능을 모두 갖춘 프레임워크를 '컴플리트 프레임워크(Complete Framework)'라고 한다. Google이 개발한 Angular는 2010년에 처음 출시되어 가장 오래되었다. 

React
사용자의 조작에 따라 사용자 인터페이스가 동적으로 변화하는 웹 애플리케이션을 개발할 수 있게 해 주는 프론트엔드 라이브러리.

React는 "A JavaScript library for building user interfaces"라고 주장하며 라이브러리를 표방하고 있다. Facebook이 개발한 React는 2013년에 출시되었으며, Facebook은 React를 자사의 제품(Facebook, Instagram 및 WhatsApp)에서 광범위하게 사용.
Vue.js
Vue.js는 이 그룹에서 가장 늦게 출시되었는데, Google 직원인 Evan You가 2014년에 개발했다.

[출처 - https://www.samsungsds.com/kr/insights/frameworks.html]

 

Visual Studio CODE와 확장 프로그램 설치

VS Code를 설치하고 필요한 확장 프로그램을 설치했다.

 

1. Korean Language Pack

    - VS Code를 한국어로 바꾸어준다.

2. Bracket Pair Colorizer2

    - 괄호 별로 색을 입혀줘서 보기 쉽게 도와준다.

3. Live Server

    - 내 프로젝트를 브라우저에서 실시간으로 볼 수 있게 도와준다.

 

오늘 배운 HTML의 기본적인 태그들

<div> : html의 대부분을 구성하며 block 요소이다.

<a> : href 속성을 추가해 다른 페이지로 이동이 가능하다.

<img> : 이미지를 추가한다.

<ol> : 순서가 있는 리스트이다. <ul> : 순서가 없는 리스트이다.

<li> : 리스트. <h> 제목을 표시할 때 사용한다.

<style> : 스타일을 지정할 수 있다. 하지만 대부분 CSS에서 작업한다.