프론트엔드 개발자 필요한 지식

코딩/개발자 프로그래머 개발 분야의 4차 산업시대 진로

코딩/개발자 또는 프로그래머 프로그래밍이라는 단어를 이제는 한 번쯤 들어보셨을 것이기에 이 글을 접했을 것이라고 생각합니다.

 

개발자라는 것이 타이틀 하나인 줄 알았던 분들에게 알고 보면 개발자는 다 다른 개발자이며 초등학교는 기본 유치원 때부터 코딩을 배우겠다며 학원을 보내는 학부모님들도 많이 늘어났습니다.

 

4차 산업시대의 개발자란 기업에서 꼭 필요한 직업 중 하나입니다

 

이번에는 어떤 개발자들의 분야가 있는지 각 분야별 개념과 프론트엔드에 필요한 지식에 대해 알아보겠습니다.

 

요점 <개발자는 선생님처럼 하나가 아닌 국어 선생님 수학선생님 영어 선생님과 같이 다른 개발자들이 있다.>

1. 개발자 분야
2. 각 분야별 돌아가는 운용 예시
3. 클라이언트-웹을 갖추기 위한 필요한 지식 
4. 클라이언트-엡을 갖추기 위한 필요한 지식
5. 클라이언트-PC을 갖추기 위한 필요한 지식

 

개발자 분야

1. 프론트엔드 개발자 (클라이언트)  -눈에 보이는 화면[앱, 모바일, pc게임 등 화면]
2. 백엔드 개발자 (서버) -안 보이는 정보 처리 서버
3. 데어터 개발자 -빅데이터, 머신러닝, 인공지능
4. 임베디드 개발자 -하드웨어와 밀접[운영체제, 윈도, 리눅스]
5. 보안 개발자 -보안 해킹, 취역점 문서, 백신 개발

개발자 분야를 크게 5가지로 나누어 보았는데 더 깊숙이 들여다보면 더 다양해질 수 있지만 우리는 아직 코딩이 무엇인지도 모르는 상태라고 생각하였을 때 일반적인 분류입니다. 다음은 각 분야별 한 줄 정리입니다.

 

<프론트엔드>-컴퓨터를 할 때 화면을 보면 화면에서 보이는 출력물

<백엔드> -네이버 및 카카오톡 로그인 시 눈에서 보이는 곳이 아닌 서버 안에서 가공하고 처리하는 일

<데이터> -수많은 데이터를 수집하여 인공지능을 돌리거나 의미 있는 것을 출력하는 것

<임베디드> -하드웨어(우 리그 흔히 아는 윈도와 같은 운영체제를 만드는 일

<보안> -전체적인 과정에서 해킹이나 정보글이 빠져나가지 않게 보안을 해주는 경찰 역할

 

각 분야별 돌아가는 운용  예시

이 다섯 가지가 합치게 되면 네이버와 같은 로그인을 하는 곳이 있다고 예를 들어보겠습니다.

우리가 로그인을 하게 되면 로그인을 해야 할 때 모니터 상에 출력이 되는 이미지들이 프론트엔드라고 보시면 되겠고. 그렇다면 로그인할 때 아이디나 비밀번호 같은 정보를 입력을 하게 되면 이 정보들은 백엔드 서버로 넘어가게 됩니다.

 

그럼 백엔드 서버에서는 아이디나 비밀번호의 정보가 틀리게 입력된 것은 없는지 제대로 틀린 것 없이 작성을 하였는지 DB(데이터베이스)에서 검사를 해주고 맞으면 프론트엔드로 우리가 로그인을 하게 되면 그러한 기록들이 쌓이는데 이것이 데이터이며 기업에서는 로그인을 한 사람이 몇 시에 접속을 하였고 그 홈페이지에서 무엇을 하였는지 어떠한 활동을 하였는지 에 대한 기록들이 차곡차곡 쌓여 이 기록들이 필요한 광고 업체 및 도소매 업자들에게 또는 필요한 정보를 제공할 수 있게 됩니다. 

 

이 부분을 쉽게 설명하면 우리는 지도 및 내비게이션을 무료로 이용하고 있습니다. 그렇다면 내비게이션을 이용하는 사람들의 정보가 쌓이게 되고 사람이 많이 모이는 곳을 알 수 있게 됩니다. 그럼 사람이 많이 모이게 된다면 장사하는 사람한테는 수입을 낼 수 있는 하나의 수단이 될 수 있는데 그 방법으로 데이터를 활용합니다.

 

이 데이터라는 것으로 요즘 뜨거운 화재인 대선! 많은 사람들이 가장 쉽게 투표할 수 있는 투표장소를 수집할 수가 있고요 강원도 화재의 경우 LNG와 원자력 발전소 및 민가 피해를 최소화로 막기 위해 사용되기도 합니다.

이러한 것이 데이터 분석 파트입니다

 

프론트엔드 부분은 PC나 스마트폰(핸드폰)과 같은 화면에 하드웨어랑 실행할 수 있는 브라우저를 연결할 수 있게 해주는 부분이 임베디드라고 할 수 있습니다.

 

이러한 데이터들은 소중한 정보이기에 쉽게 노출이 되면 해킹이 될 수도 있습니다 작게는 개인 정보부터 크게는 국가에서 운영하는 군사 정보 및 대기업의 기밀, 주요 시설인 전력공사 나 원자력발전소 같은 곳에 치명적인 해킹을 당해 막대한 손해를 볼 수 있습니다. 그래서 보안은 모든 영역에 있어서 적용될 수 있겠습니다.

 

프론트엔드(클라이언트) - 웹을 갖추기 위한 필요한 지식

1. 웹(Web) -인터넷 화면 네이버, 다음, 구글, 줌, 야후
2. 앱(Android/ios) -스마트폰을 이용하여 들어갈 수 있는 어플리케 이켠 "앱" 휴대폰에 깔린 모든 것
3. PC(Window/Max) -PC에서 활용할 수 있는 프로그램 "PC에 설치된 프로그램들"
4. 게임 -게임 게발은 별도의 엔진을 쓰기에 별도로 분류하였음.

1) 클라이언트 (웹)-화면을 구성하는 것이며 대표적인 것은 HTML / CSS / JAVSCRIPT/ React / Angular / Vue) 

 

(HTML) -화면의 뼈대를 잡아주는 작업을 할 수 있습니다. 로고, 아이디, 비밀번호, 로그인 창의 위치 등 큰 틀을 잡습니다.

(CSS) - 큰 틀이 잡혔으면 색깔을 넣어줍니다 -버튼의 색깔 바탕화면의 색깔 등 꾸며주는 것이라고 생각하면 됩니다.

(JAVSCRIPT) -버튼을 눌렀을 때 화면이 움직이거나 색깔이 바뀌거나 하는 동적인 처리를 할 때 사용합니다.

(React) - 앵귤러와 뷰 같은 도구는 없어도 유연성을 제공함에 따라 어떠한 라이브러리라도 React에 넣을 수 있다.

(Angular) -프로젝트 생성에서부터 코드를 최적화 작업할 수 있는 프레임 워크입니다.

(Vue.js) - 프리코딩 구조, 앱을 빠르게 개발할 수 있다. 성능도 좋다.

 

프론트엔드(클라이언트) - 앱을 갖추기 위한 필요한 지식

 

네이티브 앱- 안드로이드 및 아이폰에서 직접 각각에 OS에 맞춰 개발하는 방법

 -(각각의 OS에 맞춰 개발하기에 최적의 상태로 만들 수 있다.)

 

크로스 플랫폼- 안드로이드 및 아이폰을 동시에 만들 수 있는 방법

 -(네이티브 앱보다 성능은 떨어지지만 하나의 코드로  안드로이드와 아이폰을 만들 수 있다.)

 

하이브리드 앱- 앱이지만 웹에 껍데기만 씌어 앱으로 운용하는 방법 웹사이트가 앱처럼 돌아간다 

 -단순히 웹에 껍데기만 씌운 것이게 웹 개발과 동일하게 하면 된다.)

 

안드로이드-JAVA, Kotlin, Android studio의 언어를 활용할 수 있다.

아이폰-Swift, , Objective-C

크로스 플랫폼은-React Native, JS, Dart, Flutter의 언어를 활용할 수 있다.

하이브리드 -HTML, CSS, JS의 언어를 활용할 수 있다.

 

프론트엔드(클라이언트) - PC을 갖추기 위한 필요한 지식

1. 윈도 프로그램-C#, Visual_Studio, XAML, C++, WPF

2. 맥 프로그램-Xcode, Swift, Objective-C

3. 크로스 플랫폼-HTML, CSS, JS

 

프론트엔드(클라이언트) - 게임을 갖추기 위한 필요한 지식

1.Unity-C#

2.Unreal-C++

2개의 엔진을 이용하여 C#, C++의 언어를 활용한다