[애드인에듀] 프론트엔드(Front-end) 알아보기!! 프론트엔드를 하기위한 조건은? 비전공자 자바(Java)웹개발자 양성과정

[IT취업정보]

안녕하세요, 프론트엔드란 무엇이고 프론트엔드 개발자가 되기 위해서는 무엇을 알아야 할까요?

오늘은 프론트엔드에 대해

설명드리도록 하겠습니다 :)

1. 프론트엔드(Front-end) 란?(무엇인가?)

스마트폰, 노트북, 컴퓨터 등 우리가 보고 있는

수많은 웹사이트들을 누가 어떻게 만들었는지

생각해본 적이 있으신가요?

네이버 검색창부터, 쇼핑몰 페이지 등등

세상에 있는 수많은 웹사이트 화면을

누군가는 디자인하고 만들었어요.

그 것이 바로 프론트엔드 개발자입니다.

이때, 프론트엔드란?

프론트엔드(front-end)

: 프로세스의 처음 단계

저희는 웹사이트에 접속하여 많은 것들을

보고 만지고 터치합니다.

위와 같은 행동이 바로 프로세스,

즉 웹사이트를 돌아가게 하는 과정의

시작이라고 볼 수 있어요.

때문에 웹사이트에서는 주로

사용자에게 시각적으로 보여지는 모든 부분을

프론트엔드라고 부릅니다.

---

2. 프론트엔드는 어떻게 만들까?

(feat. html, css, javascript)

HTML, CSS, JavaScript

위의 주로 세 언어로 웹페이지를 만듭니다.

각각에 대해 잠시 알아볼게요!

2-1. HTML

: 웹 브라우저에 표시되도록 설계된

문서의 표준 마크업 언어

즉 본문, 웹사이트를 만들기 위한

구조 혹은, 구조를 만드는 방법을 제공하는 언어입니다.

결제버튼이 있어야해!

혹은 확인버튼, 날짜, 입력창이 있어야해!

와 같이 기본적으로 필요한 문자부터 버튼까지

기본 요소의 뼈대를 만들 때 사용하는

언어입니다.

출처 : 짧굵배::온라인 프로그래밍 강좌

자주 사용하는 네이버 홈페이지에서

html 소스만 추출한 결과입니다.

평소에 보던 것보다 훨씬

간소화 되어 뼈대만 잡혀있는 것을 볼 수 있어요!!

2-2. CSS

: 작성된 문서(html) 의 표시를 설명하는 데

사용되는 스타일시트 언어

html로 만든 웹사이트는

저희가 아는 모습과는 상당히 다릅니다.

스타일이 적용되지 않았기 때문입니다.

css를 통해 뼈대만 있는 문서에

다양한 스타일을 적용할 수 있어요.

글자의 크기, 모양, 색깔, 줄 간격 등등

웹 문서의 다양한 모양 표현을 해주는 언어입니다.

위의 사이트에 css를 적용하면 비로소

저희가 아는 것과 상당히 비슷한 모양으로

웹사이트가 만들어진 것을 볼 수 있습니다.

2-3. JavaScript

: 웹 페이지 동작을 위해

클라이언트 측에서 사용하는 언어

이젠 나름 모양을 갖춘 웹사이트에

javascript라는 것을 추가하게 됩니다.

왜일까요?

바로 웹페이지의 동적작용 때문입니다.

저희가 버튼을 터치하거나,

특정 부분으로 스크롤을 내리면

어떤 동작이 발생하는 부분을 볼 수 있습니다

이러한 동작을 추가하기 위해

javascript를 더하여

최종적으로 웹사이트를 완성할 수 있는 것입니다.

하지만..

위에서 설명한 HTML, CSS, javascript만을

가지고는 웹페이지를 만들 수 없어요​!

정확하게는

유지보수가 가능하고, 다같이 수정할 수 있는

기준이 필요해요.

예를 들자면, 우리는 펜과 종이만 있다면

글을 쓸 수 있어요.

하지만 저희는 일기장, 메모장, 보고서 등

다양한 양식에 맞추어 글을 씁니다.

javascript도 마찬가지에요.

위의 세 언어로만 코딩하는 것은

아무 것도 없는 a4용지에 글을 쓰는 것과 같아요.

그럼 무엇을 사용해야할까요?

---

3-1. jQuery

: HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된

크로스 플랫폼의 자바스크립트 라이브러리

대표적인 것이 바로 Jquery입니다.

jquery는 자바스크립트 라이브러리에요.

이때 라이브러리란, 자원의 집합이라고 생각하면 됩니다.

자원에는 여러 코드, 규칙, 이를 실행하는 함수 등이

존재하고 있어요.

따라서 jQuery는 자바스크립트를 편리하게

사용할 수 있도록 도와주는

함수, 문서, 데이터의 집합이라고 생각하면 됩니다.

3-2. React

: 사용자 인터페이스를 만들기 위해 사용되는

자바스크립트 라이브러리

자바스크립트 사용을 도와주는 라이브러리는

jquery를 제외하고도 수많이 존재하고 있어요.

그중에서 또다른 유명 라이브러리 React를 소개하려고 해요.

React는 싱글 페이지 어플리케이션에

주로 사용되는 라이브러리에요.

대표적으로 컴퓨터에서 보는

웹 형태의 페이지들을

스마트폰에서 볼 때에도 불편함 없이

바뀌도록 자원을 제공하는 목적으로 주로 사용하는

라이브러리에요.

iPhone 14 Pro 및 iPhone 14 Pro Max

위의 링크는 SPA 형식으로 만들어진 페이지 예시입니다.

이처럼 세상에는 다양한 라이브러리가

다양한 이유로 존재하고 있어요.

HTML, CSS, Javascript를 배운 뒤

다양한 js 라이브러리를 통해

자신이 원하는 방식의 웹사이트를

더욱 손쉽게 만들 수 있답니다.

ADDINEDU 풀스택 개발자 양성과정

(주)애드인에듀에서는

오늘 설명한 프론트엔드 개발은 물론이고,

웹개발을 위해 필요한 자바와

스프링 프레임워크와 필요한 다양한 프로그램을

기초부터 쉽게 가르쳐주는 국비지원 과정입니다!

더 자세한 내용을 알고 싶다면

아래의 링크를 참고하세요 :)

신청 링크↓↓

(애드인에듀 홈페이지로 이동합니다)

애드인에듀

상세 정보 링크↓↓

(강의 상세 정보 페이지로 이동합니다)

JAVA 입문부터 서비스 런칭 가능 개발자까지 7개월

카카오톡 상담 링크↓↓

(카카오톡 상담하기 채널로 이동합니다)

애드인에듀 문의&상담 채널

여러분들의 성공적인 취업을 응원합니다!! :)