프론트엔드 공부순서는 보통 컴퓨터공학 기초, HTML, CSS, JS 언어 학습 그리고 Frontend Framework 및 응용기술의 순서로 진행합니다. 그리고 비전공자의 경우도 학원의 체계적인 커리큘럼을 통해 기초지식 및 팀원간 프로젝트를 통해 현업과 비슷한 실무 경험을 쌓을 수 있습니다.
프론트엔드 개발
프론트엔드 개발은 백엔드 API를 통해 가져온 데이터를 웹 브라우저를 통해 표시하여 사용자와 인터페이스 하는 기술입니다. 최근 모바일 사용자가 늘어나면서 HTML, CSS 및 반응형 웹 기술 등의 중요성이 점차 커지고 있습니다.
하지만 웹 표준과 웹 접근성 그리고 모바일의 등장으로 점차 사용자와 직접 interface 하는 UI/UX 부분의 중요성이 커졌습니다. 이에 따라 Ajax, Javascript, jQuery와 같은 웹 개발도구가 나왔으며 점차 전문성을 가지는 개발자로서 인정받게 됩니다.
디지털 전환
점차 스마트폰이나 태블릿과 같이 화면 사이즈가 작지만, 휴대가 편한 Device에서 콘텐츠 소비가 늘어나고 있습니다. 이를 통해 하이브리드 앱이나 웹 애플리케이션의 등장으로 프론트엔드 기술은 더욱 더 전문적이고 활용도가 높은 기술이 되어가고 있습니다.
교육학원
프론트엔드의 경우 비전공자도 쉽게 접근할 수 있는 특징이 있습니다. 백엔드 영역에서는 데이터베이스, SQL, 서버 관리 등의 상세한 IT 지식이 필요하지만, 프론트엔드는 입출력된 데이터를 가공하고 표시하는 것에 Focus를 두기 때문입니다.
아무리 데이터 보안이 기가 막히고 서버 세팅이 좋아도, 웹 사용 편의성과 사용이 떨어진다면 그 서비스는 고객의 눈길을 끌 수가 없기 때문에 프론트엔드 기술을 잘 활용해야 합니다. 만약 학습이나 취업을 원한다면 다음의 국비지원 과정을 활용하여 개발자 코딩 경험을 쌓으실 수도 있습니다. 이와 관련하여 다음의 정보를 참고 바랍니다.
프론트엔드 공부순서
프론트엔드는 웹 인터페이스 구현 중심이지만 데이터베이스 구조 및 알고리즘 등의 기초 지식 역시 중요합니다.
1. 컴퓨터공학 기초지식
자료구조, 네트워크, 객체 지향 및 DB SQL 등에 대한 이해가 있어야 합니다. 자료구조는 데이터를 다루는 영역이라면 필수입니다. 또한 네트워크는 웹 기반 기술(송신, 수신)을 이해하기 위해서 중요합니다.
2. HTML, CSS, 자바스크립트
특히 HTML5나 자바스크립트는 기본적으로 깊이 이해하고 활용할 수 있어야 합니다. 이 3가지를 알 수 없으면 뒤이어 설명할 프레임워크를 이해하고 활용할 수 없습니다.
3. Framework
자바스크립트 기반으로 작성된 프레임워크가 많이 있습니다. 대표적인 프론트엔드 기술로 앵귤러, React, Vue.js 프론트엔드 Framework이 있으며, 이를 통해 보다 빠르고 효율적인 개발이 가능합니다. 프레임워크에 대한 자세한 설명은 아래의 이전글을 참고 바랍니다.
4. 응용기술: 반응형 웹, 싱글페이지 App, Typescript 등
반응형 웹 기술은 화면 사이즈나 해상도의 차이에 따라 자동으로 사용자에게 보여주는 화면이 변화되는 기술입니다. 반응형 웹 기술을 활용한 사용자 모바일 친화성은 중요한 웹 평가 기준의 하나입니다.
싱글 페이지 App은 위의 그림과 같이 하나의 Page가 불린 후 추가적인 HTML 페이지의 로딩없이 Javascript 등을 통해 JSON 형식의 데이터 교환만으로 구성되는 기술을 말합니다.
Typescript는 JS를 기반으로 정적타입문법을 추가한 프로그래밍 언어로 위에서 설명한 프론트엔드 Framework와도 호환성이 좋은 언어입니다.
이와 같은 응용 기술들은 앞서 설명한 기초지식을 다진 후에 업무 필요에 따라 하나씩 습득해 나가시기를 권해드립니다.
학원 선택시 참고할 점
앞서 알아본 프론트엔드 주요 기술들은 학원 교과과정을 선택하는데 기준으로 참고하실 수 있습니다. 이어서 학원 선택시 참고할 점을 알아보겠습니다.
1. 수강생 취업지원
교육학원을 선택한 큰 이유는 취업입니다. 단순히 지식만을 전달하는 것이 아닌 교육생의 향후 취업을 위해 다음과 같은 형태의 지원이 되는지 확인해보세요.
- 모의기술면접 지원
- 이력서검토 및 멘토링
예를 들어 모의 기술 면접을 지원하여 준비생이 당황할 만한 질문이나 예상 질문들을 사전에 연습할 수 있어 많은 도움이 될 것입니다.
2. 포트폴리오 프로젝트 여부
앞서 코딩 부트캠프 선택기준 글에서 살펴본 바와 같이, 수강생끼리 팀을 이루어 실제 현업과 같은 프로젝트를 단기로 진행하고 성과물을 취업시 활용할 수 있도록 지원받을 수 있습니다.
프로젝트 경험이 없다면 실제 면접시에도 경험에서 우러나온 답변을 하기 어렵습니다. 실제 프로젝트를 진행하면서 쌓인 경험은 면접이나 현업에서도 소중한 자산이 될 것입니다.
3. 멘토링 지원 여부
프론트엔드 학원의 경우 대부분 비전공자가 많으므로 코드리뷰나 프로젝트 일정관리 및 기술측면에서 코칭하고 멘토링 서비스를 받을 수 있으면 좋습니다.
이런 방식의 멘토링 서비스는 보통 학원교육 방식보다는 단기 프로젝트 중심의 코딩부트캠프의 커리큘럼으로 많이 제공 됩니다.
4. 국비지원 및 중도환급 여부
취업 준비를 위해 학원을 다닐 경우 가장 소중한 것은 시간 그리고 돈입니다. 이 중에서 학원비의 경우 내일배움카드 등으로 국비지원을 받을 수 있다는 사실은 잘 아실 텐데요.
가령 학원 과정이나 적성에 맞지 않아 중도에 포기할 경우 국비지원이 어렵거나, 개인적인 금전 손실을 방지하기 위해, 교육기관에 따라 매달 결제하는 방식이 가능하므로 참고 바랍니다.
이상으로 프론트엔드 공부순서 및 학원 선택 시 주의할 사항에 대해서 알아보았습니다.