[인프런 비즈니스] 교육담당자의 개발직무 파헤치기: 프론트엔드편

안녕하세요, 인프런 비즈니스팀 호야 입니다😀

이~번에는!

지난 번 연재했던 백엔드편에 이어 프론트엔드에 대해 다뤄볼 예정인데요!

기술 용어를 살펴 보기에 앞서, 프론트엔드는 지난 역사를 조금 알아두시면 더 재밌게 보실 수 있을 거예요. 쿄쿄쿄

본격 프론트엔드(FE) 파헤치기

프론트엔드란? 말 그대로! "앞단"이란 뜻으로,

사용자가 웹 페이지를 열었을 때 볼 수 있는 화면(웹페이지 레이아웃, 메뉴, 디자인 요소 등)과 같이

사용자와 직접 상호작용할 수 있는 사용자 인터페이스를 말합니다.

프론트엔드 분야는 기술이 근 10년간 굉장히 빠르게 발전해왔는데요!

인터넷의 등장과 구글/페이스북과 같은 거대 웹 서비스들이 큰 성공을 이루면서,

웹에 대한 개념과 기술이 상당히 빠른 속도로 발전하게 됐습니다!!

(여담이지만 486, 586 컴퓨터를 기억하시는 분이라면..모르긴 몰라도 당시의 웹이 지금과 같지는 않...았..☆ 또르륵😿)

그리고 웹 서비스의 성공과 함께 찾아온 스마트폰 혁명으로 모바일 시장이 개척되면서,

프론트엔드 기술은 다시 한 번 비약적인 발전을 이루게 되었습니다!

그렇다면! 왜!

웹 서비스와 스마트폰 시장 확대가 프론트엔드 기술 발전으로 이어진 것일까요?!

우리의 삶이 디지털 트랜스포메이션(이하 DT) 되면서 굉장히 많은 것들을 온라인에서 생산하고, 소비할 수 있게 되었는데요!

그 과정에서 초기 사업의 프로토타입이나 사용자를 유인하기 위한 UI/UX가 굉장히 중요해짐에 따라

웹 개발과 UI/UX 표현을 위해 필수적인 프론트엔드 기술이 자연스럽게 발전하게 되었다고 볼 수 있습니다!🔥🔥

(특히 구글, 페이스북, MS 등 다수의 빅 테크기업들이 웹 분야 기술 리더십을 유지하기 위해 경쟁적으로 신기술들을

엄청나게 만들어내고, 웹이라는 생태계 특성 상 누구나 생태계에 참여할 수 있게 되면서 유래 없는 발전을 이루게 되었습니다)

그렇다면 우리가 꼭 알아야되는 프론트엔드 대표 스킬태그는 무엇이 있는지 바로 확인 한 번 해볼까요?!

프론트엔드(FE) 대표 스킬태그

TypeScript: 프론트엔드 개발에 있어 떼어놓을 수 없는 필수불가결 언어(TypeScript 작성→JavaScript 코드 출력)
- TypeScript는 MS에서 구현한 언어로, JavaScript의 모든 기능을 포함하면서 개발 안정성을 높이는 기능을 갖추고 있습니다.
Angular: 구글이 만든 강력한 오픈소스 자바스크립트 프레임워크 (오픈소스 뜻은 백엔드편 참고!)

- 프로젝트 생성부터 코드 최적화 작업까지 모든 작업에 사용할 수 있는 폭 넓은 프레임워크 입니다.
- 그만큼 전체적인 개발 과정에서 가장 다루기 힘든 프레임워크라는 평가를 받습니다.

- 다루기 힘든 만큼 잘만 활용하면 굉장히 좋은 결과물을 만들 수 있기에 장기 프로젝트&큰 규모의 앱을 개발할 때 좋습니다.
React: 메타(구 페이스북)가 오픈소스로 공개한 자바스크립트 라이브러리

*라이브러리란? 의미 그대로 프로그래밍에 필요한 지식/기능들을 모아둔 집합소(도서관). 필요할 때마다 기록된 코드를 사용 할 수 있음
- 다양한 FE 작업 환경에서 쉽게 도입할 수 있다는 엄청난 장점이 있습니다.

- FE 분야에서 점유율이 가장 높기 때문에 숙련도가 높은 개발자를 포함한 개발 인력 확보가 수월합니다.
- React는 Angular와 다르게 데이터 흐름이 한 방향으로만 흐르는 단방향이서 데이터 흐름 예측에 용이합니다.
Vue.js: 대규모의 커뮤니티와 개발자들이 합심하여 만든 오픈 소스 프로그레시브 자바스크립트 프레임워크

- 다른 자바스크립트 라이브러리와의 호환 및 명령 자체가 쉬워서 개발 과정에 빠르게 활용할 수 있습니다.
- 시장 진입 단계 또는 작고 가벼운 애플리케이션을 개발할 때 많이 활용됩니다.
알아두면 좋은 FE 지식 Plus!
*Native App(네이티브앱)이란? 우리가 흔히 말하는 '애플리케이션'. 안드로이드는 Kotlin/Java 로 iOS는 Swift/Objective C로 만들 수 있음. 앱 성능이 제일 좋으나, 해당 플랫폼에서 요구하는 언어를 개발자가 잘 알아야 함
*Mobile Web+APP(모바일웹앱)이란? PC용 페이지를 모바일 크기에 맞춰 마치 앱인 것처럼 제공하는 형태. 모든 기기와 브라우저에서 접근 가능하나! 유저가 브라우저를 열고 검색해서 들어가야하는 불편함 발생

*Hybrid App(하이브리드앱)이란? 네이티브앱 + 웹앱(네이버 지도 앱 자세히 보면 웹뷰를 앱에서도 동일하게 볼 수 있어요!). 모바일과 웹에서 다양한 개발이 가능하나, 브라우저의 성능이 떨어지면 앱 구동 속도 저하

*Cross-Platform(크로스 플랫폼)이란? 한 가지의 개발 언어와 프레임워크로 안드로이드, IOS 두 가지의 네이티브 앱을 만드는 개발 방식. 대표적으로 Flutter, React Native(인프런에서 사용중인 라이브러리) 등이 있음

역시나 이번에도 굉장히 생소한 용어들이 많이 들어가있죠😅
아무래도 전공자가 아닌 이상, 프론트엔드에 깊이 알지 못하는 건 어찌보면 당연할지 모릅니다!

다만, 이번 기회를 통해 조금이나마 프론트엔드에 대한 더욱 알게 되고 관련 지식을 쌓을 수 있었다는 것 자체로
너무 귀중한 시간이 되지 않았나 생각이 듭니다!

앞으로 우리 교육 담당자님들이 IT교육 커리큘럼을 기획하고, 개발자분들과 원활히 소통하시는데
조금이나마 도움이 될 수 있도록 개발직무 파헤치기 컨텐츠를 계속적으로 연재할테니까요! 많은 관심 부탁드립니다 😀

우리 함께 배우고, 나누고, 성장해요!

교육담당자님을 위한 Tip! (개발자에게 아는 척하면 붐업킹 되는 추천 강의)