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

안녕하세요, 풀스택 웹 개발자 한인호입니다. 안드로이드 개발로 시작하여 다양한 기업(스타트업, 대기업)에서 웹 프론트엔드 및 백엔드 개발 경력을 쌓았고, 현재는 사내 개발 도구 개발을 담당하고 있습니다. 이 과정을 통해 웹 개발의 핵심을 배우고 실전 경험을 쌓으세요!

이 과정은 HTML, CSS, JavaScript를 활용하여 자신만의 웹 애플리케이션을 만드는 프로젝트 기반 학습입니다. 기본적인 웹 애플리케이션 구조를 이해하고, 프론트엔드와 백엔드 간의 상호작용을 경험하며 각 역할의 중요성을 파악할 수 있습니다.

핵심: 기본에 충실한 JavaScript 개발

jQuery, React, Vue와 같은 UI 프레임워크에 의존하지 않고 순수 JavaScript로 개발합니다. 프레임워크에 대한 의존성 없이 JavaScript 기초를 탄탄하게 다지고, 다양한 프레임워크의 장단점을 스스로 판단할 수 있는 능력을 키울 수 있습니다. 순수 JavaScript 코딩 경험은 프레임워크 활용 능력을 향상시키는 강력한 기반이 됩니다.

백엔드: Express.js를 활용한 효율적인 서버 개발

백엔드 개발에는 Node.js의 대표적인 프레임워크인 Express.js를 사용합니다. Express.js는 다른 백엔드 프레임워크와 유사한 구조를 가지고 있어 숙달 후 빠르게 다른 프레임워크를 습득할 수 있습니다.

RESTful API 통신:

프론트엔드와 백엔드 간의 통신은 가장 일반적인 REST 방식으로 구현됩니다. 직접 통신 코드를 작성하며 REST API의 작동 원리를 익힐 수 있습니다.

이 과정을 통해 무엇을 얻을 수 있나요?

• 실전 웹 개발 경험: HTML, CSS, JavaScript만으로 웹 애플리케이션을 구축하는 실습을 통해 실전 감각을 익힙니다.
• JavaScript 능력 향상: JavaScript의 강력함과 매력을 경험하고, 향후 커리어에 적극 활용할 수 있도록 합니다.
• 프레임워크 이해: UI 프레임워크의 장단점을 파악하고, 상황에 맞게 적절한 프레임워크를 선택하여 활용할 수 있는 능력을 키웁니다.
• 웹 애플리케이션 구조 이해: 웹 애플리케이션의 전체적인 구조를 파악하고, 유지 보수 및 확장에 용이한 코드를 작성할 수 있습니다.
• 코드와 구조의 이해: 단순히 코드를 작성하는 것을 넘어, 전체적인 시스템 구조를 이해하고 설계하는 능력을 키웁니다.

구현 기능:

• 모달 (Modal)
• 노트 생성 (Note creation)
• 노트 수정 (Note update)
• 노트 삭제 (Note deletion)
• 핀 설정 노트 (Pinned note)
• 색상 선택 (Color select)
• 다양한 기능 추가 (Some tweaks)

수강 후 기대 효과:

1. 웹 애플리케이션 구조에 대한 깊이 있는 이해
2. 유지 보수 및 확장이 용이한 코드 작성 능력
3. 코드 뿐만 아니라 전체 시스템 구조를 파악하는 능력

이 강의는 누구에게 적합할까요?

• 초보 웹 개발자: 웹 개발 입문자를 위한 최고의 선택
• 웹 개발 지망생: 웹 개발 분야 진출을 희망하는 분들을 위한 필수 과정
• 웹 프로젝트 경험 필요: 웹 프로젝트 경험을 쌓고 싶은 분들

클론 코딩 프로젝트를 통해 웹 개발 실전 경험을 키우세요!

선행 지식: HTML, CSS, JavaScript 기초 지식 필요