프론트엔드 입문, 어디서부터 시작해야 할까요?

• 프론트엔드를 배우기 전에 인터넷의 기본 개념인 URL, HTTP, 브라우저 등을 이해해야 합니다.
• HTML, CSS, JavaScript와 같은 기본 문법을 익히며 웹 페이지의 구조, 스타일, 동작을 구현하는 능력을 키웁니다.
• React, Vue, Angular 같은 프레임워크를 학습하여 효율적인 웹 개발을 할 수 있도록 단계적으로 발전시킵니다.

프론트엔드는 인터넷을 통해 배포되는 페이지들의 화면을 주로 제작하는 기술로, 공부를 시작하기 위해서는 ‘인터넷’에 대한 이해가 선제적으로 진행되어야 합니다.

흔히 이야기하는 URL, 인터넷 주소를 구성하고 있는 요소들에 대해서도 속속들이 알아야 추후에 구현을 할 수 있게 됩니다.

그래서 HTTP가 무엇인지, 브라우저는 무엇인지 등 인터넷에 대한 전반적인 이론 학습부터 진행해야 합니다.

인터넷에 대한 이해도가 쌓였다면 이제는 실제 구현을 위한 문법들을 하나씩 배워나가야 합니다.

가장 기초적인 HTML, CSS, Javascript의 기본 문법을 익히며 웹 페이지의 구조와 스타일, 동작을 만드는 스킬을 갖춰야 합니다.

작은 단위의 실습을 통해 해당 문법이 어떤 모습으로 구현되는지 확인하며 익히는 과정을 거쳐야 합니다.

그 이후에는 React, Vue, Angular와 같은 프레임워크나 라이브러리를 통해 효율적으로 개발할 수 있는 스킬을 익혀야 합니다.

우리가 사용하는 복잡한 페이지의 기능들은 HTML, CSS, Javascript만을 가지고 작업하기에는 너무 긴 시간을 필요로 합니다. 그래서 효율적으로 웹 페이지를 제작하고 관리하기 위해서는 구조와 특징에 맞는 프레임워크 혹은 라이브러리를 사용하는 것이 중요합니다.

프레임워크는 기본 프로그래밍 언어들과 달리 고유의 개념을 가지고 있는 경우가 많습니다. 예를 들어, React는 실제 DOM을 조작하는 대신 가상 DOM (Virtual DOM)을 사용하여 불필요한 렌더링을 최소화해서 성능을 개선하는 특징을 가지고 있습니다. 또 Prop과 Component 등 타 언어에서 볼 수 없었던 개념과 단위를 가지고 있습니다.

위의 예시들처럼 프론트엔드 학습 시에는 배우고 익혀야 할 언어와 라이브러리, 각 프레임워크마다의 특징이 되는 개념들까지 학습할 내용이 정말 많습니다.

기본이 되는 문법부터 익힌 뒤에는 구현하고자 하는 페이지의 기능적인 특성을 고려하여 라이브러리나 프레임워크를 하나씩 학습해 나가는 방향이 바람직하다고 할 수 있습니다.

프론트엔드 실무 : 실습은 어떻게 해야 하나요?

• HTML, CSS, JavaScript는 이론과 실습 병행이 효과적
• VSCode의 LiveServer나 브라우저 개발자 도구로 즉각적인 변화 확인
• 기본 문법 실습과 프로젝트 규모 실습
• 클론 코딩

HTML, CSS, Javascript는 이론을 학습하며 알게 된 문법들을 활용하여 코드를 작성하면 반영 결과가 눈에 잘 띄는 경우가 많기 때문에 이론 학습을 진행하며 실습을 병행하는 방향이 가장 좋습니다.

내가 지금 작성한 코드가 어떤 변화를 불러일으켰는지 확인하며 진행하는 방향이죠. VSCode에서 코드를 작성한다면 LiveServer라는 확장 기능을 통해 변경 사항을 즉각적으로 확인하면서 학습할 수 있습니다.

혹은 공부하고자 하는 웹 페이지에서 브라우저의 개발자 도구 (F12를 눌렀을 때 나오는 창)을 통해 코드를 작성하거나 값을 변경해 보며 코드에 따른 변경 사항을 학습할 수도 있습니다.

기본 문법을 학습할 때에는 위와 같은 방법이 효과적이나, 활용을 하기 위해서는 프로젝트 규모의 작업은 필수입니다. 규모를 이해하기 쉽도록 예시를 들어보겠습니다.

기본 문법 실습 : 네이버 메인 화면에서 버튼의 이름 바꿔보기, 문의하기 버튼 만들어보기 프로젝트 규모의 실습 : 로그인 페이지 만들기, 날씨 조회 페이지 만들기

이와 같이 프로젝트 규모의 실습으로 넘어갈 경우 하나의 이론이 아닌 여러 개의 언어와 라이브러리를 사용하며 작업해야 합니다.

이 과정에서 발생하는 오류를 해결하는 경험을 통해 이론에서 실습으로 한 단계 레벨 업을 할 수 있습니다.

프로젝트 실습을 진행할 때 주제를 선정하기 어렵다면 내가 평소 즐겨찾는 웹 사이트의 일부 페이지를 그대로 재현하는 ‘클론 코딩’의 방법으로 학습할 수 있습니다.

클론 코딩은 아래와 같은 장점을 가지고 있습니다.

1. 프로젝트 주제 선정과 기획 단계에서 드는 고민을 줄일 수 있다.
2. 대기업에서 고심하여 설계한 좋은 구조를 따라 개발할 수 있는 방법이다.
3. 본인의 개발 수준을 판단해 볼 수 있다.

그러나 클론 코딩을 진행할 때에는 무조건 타인의 코드를 그대로 복제하는 Copy&Paste는 지양해야 하며, 해당 기능을 구현하기 위해 스스로 고민하고 변화점을 찾는 노력을 함께 해야 합니다.

프론트엔드 처음이라 막막하다면, 오름캠프로!

생각보다 학습해야 하는 양과 내용이 많아 당황하셨을 수도 있다고 생각합니다.

특히나 비전공자의 입장에서 생각했을 때 혼자서 이 많은 내용을 공부하고 개발자로 직무를 전환하거나 새로운 커리어를 갖는다는 것은 매우 막막하게 느껴질 수도 있죠.

오름캠프에서는 이 과정을 현업 1 Tier 강사진과 함께, 열의와 학습 의지가 뛰어난 동료들과 함께 학습합니다.

검증되고 엄선된 강사진들과 커리큘럼을 통해 HTML, CSS, Javascript부터 React, Three.js와 같은 프레임워크와 라이브러리까지 학습합니다.

또한 실무에서 백엔드 개발자들과의 원활한 협업이 가능한 인재로 성장하기 위해 Node.js와 같은 백엔드 스택도 함께 공부합니다.

이후 미니프로젝트와 참여 기업과 함께하는 최종 프로젝트를 통해 실제 개발 경험을 쌓습니다.

첫 미니 프로젝트 결과물로 영화 추천 페이지, 미세먼지 데이터를 보여주는 페이지 등을 개발할 정도로 촘촘하게 설계되어 있는 과정을 통해 능력치를 향상시킵니다.

뿐만 아니라 4개월 간의 대장정을 지치지 않고 완수할 수 있도록 전담 매니저가 상주하며 훈련생 모두를 밀착 케어합니다. 교육 전담 / 행정 전담 매니저가 훈련생 곁에 늘 상주하며 필요한 모든 지원들을 제공합니다.

모각코 (모여서 각자 코딩)과 알고리즘 스터디, 코딩테스트 스터디 등 다양한 커뮤니티형 학습 체계를 통해 타인과의 협업과 교류도 활발히 진행됩니다.

프론트엔드 개발자로서의 첫 시작을 꿈꾸고 있다면 지금 신청해 보세요!

👉 차원이 다른 Next Level 프론트엔드 개발 과정