프론트엔드란? 프론트엔드 공부방법.

프론트엔드란? 프론트엔드 공부방법.

 

오늘은 프론트엔드는 과연 무엇인지, 또한 어떠한 프로그래밍 언어를 사용하는지,

어떠한 방법으로 공부를 시작하는 것이 좋은지 알아보겠습니다.

이는 굉장히 주관적일 수 있으며, 결코 정답은 아닙니다.

그럼 오늘도 전혀 비전문적이고, 알기 쉽게 알아보겠습니다.

 

 

목차.

1. 프론트엔드 개발자란 무엇인가?
2. 프론트엔드의 장점은 무엇인가?
3. 프론트엔드에 필요한 것들은 무엇인가?
4. 마치며.

 

1. 프론트엔드 개발자란 무엇인가?

 

프론트엔드 개발자란 쉽게 말해,

유저를 위한 홈페이지의 디자인을 구현시키고,

유저에게 필요한 상호작용 기능을 개발 및 적용시키는 개발자입니다.

 

예를 들면 홈페이지의 디자인을 디자이너에게 받은 뒤,

실제 유저가 보고 사용 할 수 있도록 디자인에 맞춰 홈페이지를

구현하게 됩니다. 이때 구현 뿐 아니라 유저에게 필요하고,

친화적인 기능을 개발하여 적용시키는 것입니다.

프론트엔드 개발자는 비교적 쉽게 접근할 수 있습니다.

그렇기에 많은 디자이너 혹은 사업하시는 분들이,

스스로 자신만의 홈페이지를 쉽게 제작하여 운영하시기도 합니다.

 

 

2. 프론트엔드의 장점은 무엇인가?

 

1. 언어에 대한 고민이 적습니다.

 

프론트엔드는  백엔드에 비해 고민이 적게 시작 가능합니다.

그 이유는 사실 프론트엔드는 백엔드에 사용되는 언어가 적기 때문입니다.

후에 라이브러리 혹은 프레임워크를 사용하게 된다면, 당연히 배워야 할

언어는 많겠지만, 현재 초보 개발자라는 카테고리에 맞게,

프론트엔드로써 처음 배우셔야 할 언어는 정해져 있습니다.

바로 HTML, CSS 그리고 Javascript입니다.

여기서 잠깐!!

HTML과 CSS는 프로그래밍 언어가 아닙니다.

HTML은 Markup 언어이며,

CSS는 Style sheet입니다. 

프로그래밍 언어는 Javascript 뿐입니다.

후에 HTML과 CSS에 관해 다루겠습니다.

 

그렇다면 초보이신 여러분이 가장 먼저 배우실 언어는 저 3가지입니다.

처음부터 라이브러리 혹은 프레임워크를 사용하지 마세요.

처음엔 무조건 기본기를 위해 저 3가지만 시작하는 걸 추천드립니다.

충분히 기본기를 익히시고 라이브러리, 프레임워크로 넘어오셔도 늦지 않습니다.

라이브러리와 프레임워크를 원활하게 사용하는 것도 중요하나,

기본기 없이 라이브러리와 프레임워크로 작업하시면,

의존도가 높아지고, 정작 스스로 기능을 개발하여야 할 때 수많은 난관에 

부딪힐 수 있습니다. 실제로 기본적인 슬라이더 조차 바닐라로 구현하지 못할 수 있습니다.

 

 

2. 시각적인 요소.

 

또한 프론트엔드는 직접 보면서 작업 할 수 있습니다.

즉 프론트엔드는 브라우저를 통해서 언제든지 자신의 코드의 결과 값을 확인 가능하다는 것이며,

그만큼 자신의 코드에 따라 시각적으로 결과를 볼 수 있습니다.

이러한 시각적 요소는 내 코드가 정상적으로 작동하는지 조금 더 빠르게 확인 가능하며

대처하기도 좀 더 수월한 것 같습니다.

 

3. 웹앱.

 

브라우저의 성능은 나날이 좋아집니다.

그러하여 예전에는 휴대폰에서 원활히 작동되지 않던 홈페이지가

이제는 문제없이 작동하기도 합니다.

이는 즉 웹앱의 발전을 뜻합니다.

웹앱이란 말 그대로 웹을 모바일에서 앱처럼 사용 가능한 것입니다.

프론트엔드 개발자는 모바일, 태블릿, pc의 크기에 맞게, 변화되는

디자인을 구현한 뒤, 모바일, 태블릿에 설치된 브라우저로,

홈페이지를 앱처럼 사용 가능합니다.

웹앱의 장점은 따로 설치할 필요가 없다는 것입니다.

이는 즉 모바일을 위해 따로 앱으로 만들지 않아도 된다는 것입니다.

하지만!! 브라우저의 성능이 많이 발전하였어도,

네이티브 앱들의 성능을 따라가기에 아직 무리가 있으며,

네이티브에서 사용 가능한 기능들을 웹앱에서는 사용하기 힘든 

단점도 존재합니다.

 

 

3. 프론트엔드에 필요한 것들은 무엇인가?

 

앞에서 말했듯이 처음은 HTML, CSS, Javascript로

기본기를 확실히 다지는 것이 중요합니다.

혹은 처음부터 Javascript가 아닌 Typescript로 시작하시는 것도

나름 추천드립니다.

Typescript는 요 근래 한창 뜨고 있으며,

자바스크립트의 Superset이기에 기본 자바스크립트에 구현된

모든 기능을 사용 가능하며, 말 그대로 Javscript의 고질병,

타입 지정에 훨씬 좋습니다.

또한 제가 자주 사용하는 리액트 역시 사실 Typescript와 아주

좋은 케미를 보입니다.

 

이렇게 3가지 기본적인 언어들을 무리 없이 사용하신다면,

기본적인 css뿐만 아니라 SASS 혹은 LESS를 이용해 보시는 것도 좋습니다.

이는 css보다 훨씬 더 쉽고 간편하게 스타일링이 가능하며,

프로그래밍 언어처럼 변수에 특정 값을 지정하여 사용 가능하기에,

코드가 짧아지고 사용하기도 편안합니다.

그 후 Bootstrap과 같은 프레임워크를 배워보시는 것도 좋습니다.

하지만 요즘은 React나 Vue 같은 라이브러리가 워낙 대세이기에,

우리나라는 모르겠으나 독일에서는 잘 사용되지 않습니다.

 

이제 슬며시 자신이 배우고 싶은 라이브러리 혹은 프레임워크를 둘러봅시다.

저는 당연히 React를 추천드립니다.

현재 최고 핫한 라이브러리이며, 커뮤니티도 거대하기에 많은 정보를 얻고 사용 가능합니다.

그다음은 C#의 ASP.Net Core를 배워보시는 것도 좋을 것 같습니다.

이 또한 아주 강력하고 떠오르는 샛별입니다.

 

jQuery는 정말 배워야 하는 상황이 아니라면 배우지 않는 것을 추천드립니다.

 

4. 마치며.

 

프론트엔드 분야는 예전에 개발자도, 디자이너도 아닌

애매한 위치에 있었지만 지금은 당당히 개발자로 자리 잡고 있습니다.

분야 또한 지금 이 순간에도 훨씬 다양해지고,

심층적이고 전문화되고 있습니다.

개발을 할 수 있다는 것은 자신 혹은 다른 사람의 생각을 구현할 수 있다는 것입니다.

너무 멋지지 않나요??

또한 현실에서 불편하거나 부족한 부분을 개발을 통해 채우고 바꾸어 나간다는 점

때문에  저는 개발자라는 직업에 홀딱 빠졌습니다.

여러분들 또한 개발이라는 분야를 너무 어렵게 생각하지 마시고, 도전해 보시길 바랍니다.

그리고 대부분의 개발자들이 자신의 지식을 나누고 싶어 안달 나 있습니다.

내 지식을 꽁꽁 숨기는 것이 아닌 모두와 나누어 좀 더 많은 사람들이 시도해보고,

개발되어 사용화 되기를 바라기 때문이지 않을까 싶습니다.

지금 저 또한 여러분에게 지식을 나누려 글 쓰고 있지만,

언젠가 제가 여러분으로부터 도움을 받고 지식을 얻어 갈 수 있다는 뜻일 것입니다.

 

항상 건강하시고 도전하시기 바랍니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.