웹 개발 프로젝트 - 내 손으로 구글킵 만들기

리더 소개

안녕하세요, 현업에서 풀스택 웹개발자로 일을 하고 있는 한인호입니다.

첫 개발 커리어는 안드로이드 개발로 시작하였으나 그 후 여러 기기에서 제가 만든 서비스를 사용할 수 있었으면 좋겠다는 생각에 웹개발의 생태계로 뛰어들게 되었습니다.

스타트업, 한국 대기업, 외국계 대기업을 전전하면서 웹 프론트앤드와 백앤드 개발에 대한 경력을 쌓게 되었고 현재는 풀스택 웹개발자로서 사내용 개발툴 개발을 담당하고 있습니다.

과정 소개

이번 과정은 HTML, CSS 그리고 JavaScript를 활용하여 본인 만의 간단한 웹 어플리케이션을 만들어보는 프로젝트입니다. 강의를 통해 기본적인 웹 어플리케이션의 전체적인 구조를 학습하고 웹 프론트엔드와 백엔드 간의 상호작용을 보며 각 파트의 개발자의 역할이 무엇인지도 알아볼 수 있습니다.

본 강의에서 가장 중요하게 여기는 것은 “기본”입니다. 따라서 프론트엔드의 경우 jQuery나 React, Vue와 같은 UI 프레임워크를 쓰지 않고 순수 JavaScript 개발하도록 내용을 구성하였는데 그 이유는 수강자분들의 개발 실력이 프레임워크에 의존하지 않도록 하기 위함입니다(개인적으로 수강자분들이 React만 다룰 수 있는 프레임워크 개발자가 아니라 보다 어떠한 UI 프레임워크를 상황에 맞게 빠르게 습득하여 활용하는 JavaScript 개발자가 되었으면 합니다). 순수 JavaScript로 한 번 코드를 작성해본 후 UI 프레임워크를 사용해보면 해당 프레임워크의 장단점을 판단할 수 있는 능력이 생길겁니다.

반면 백앤드는 node.js에서 가장 많이 사용되는 Express.js 프레임워크를 사용하였는데, 그 이유는 순수 JavaScript를 사용하면 본 강의의 대상자의 범주를 넘는 내용이 되기 때문에 해당 프레임워크를 사용하게 되었습니다. 하지만 백엔드 웹 프레임워크의 대부분은 대략적으로 비슷한 구조(싱글스레드/멀티스레드, 비동기/동기 구조와 같은 세부적인 부분은 분명히 다르지만)를 가지고 있기 때문에 Express.js에 어느정도 숙달이 되면 기타 다른 웹 프레임워크를 습득하는데에 큰 어려움이 없습니다.

마지막으로 프론트엔드와 백엔드의 통신은 가장 빈번하게 사용되는 REST 방식으로 이루어집니다. 직접 통신 코드를 짜보면서 REST란 무엇인지를 경험해볼 수 있습니다.

정리하자면, 본 과정은 HTML, CSS, JavaScript만으로 모든 것을 만들어보는 실습이라고 볼수 있습니다.

이번 기회에 JavaScript의 강력함과 매력을 느껴보시고 추후 커리어에 적극 활용해보시면 좋을 것 같습니다.

초보 웹 개발자, 웹 개발 지망생, 웹 프로젝트 경험이 필요한 사람 모두에게 필요한 강의!

웹 개발의 실전 경험을 키울 수 있는 클론코딩 프로젝트!

jQuery나 React, Vue 같은 UI 프레임워크에 의존하지 않는 순수 JavaScript

프레임워크의 정보는 물론 장단점을 스스로 파악하는 개발능력을 키울 수 있습니다.

구현할 기능들

- Modal

- Note creation

- Note update

- Note deletion

- Pinned note

- Color select

- Some tweks

수강 후 나의 모습

1. 웹 어플리케이션의 구조가 빠삭하게 보인다.

2. 유지 보수 업무의 개발, 수정, 보완이 가능하다.

3. 나무가 아닌 숲, 코드 뿐만 아닌 구조가 보인다.

* 선행지식으로 HTML, CSS, JavaScript 기초지식이 필요합니다.