실용적인 웹 프로그래밍 대시보드

입문자를 위해 준비한
[웹 개발] 강의입니다.

프로그래밍은 우리가 원하는 방향을 실현해주는 마법이에요. 우리 주변의 웹 서비스의 문제를 해결하며 웹 프로그래밍을 경험해봅니다.

가볍고 재미있게 시작하는 웹 프로그래밍!
직접 코드를 만져보면서 꼭 필요한 지식을 배워보세요.

강의 특징 💡

프로그래밍에 능숙하지 않은 사람을 강의 대상자로 삼아 최소한으로 필요한 지식을 알려드립니다. 기본적인 언어 소개나, 간단한 설명을 한 후에 중간마다 실습을 진행하면서 학습자의 이해도를 높이고자 했습니다. 심화적인 부분은 다루지 않으니 참고 자료 추천을 통해 자기주도적인 학습을 권장드립니다.

왜 배워야 하는지 ✒️

우리 주변의 웹 서비스에서 접하는 입력 필드, 버튼, 체크박스 등 웹 페이지의 요소를 프로그래밍으로 접근합니다. 웹 서비스 불편함을 느꼈던 부분을 직접 코드로 수정해보고, 비슷한 경험을 하는 사람들과 공유할 수 있습니다.

자세히 다루지 않은 것들 ❌

• 우리 주변의 웹 서비스를 따라 만드는 방법
• ECMAScript 2015 이후의 문법에 대해
• 타인에게 피해를 주는 악성 스크립트 작성법

섹션별 소개 📖

오리엔테이션

교육 소개, 웹의 배경에 대해

웹 서비스의 스타일을 바꿔보기

HTML과 CSS를 배워서 웹 서비스의 문제를 해결하거나, 자기 취향에 맞게 서비스를 꾸며봐요.
CSS 선택자에 대해 자세히 알면, 귀여운 고양이 배경 화면을 바탕에 띄워볼 수 있습니다 :D

^{▲ 배경 사진 출처 : Florian Olivo}

자바스크립트로 웹 서비스 자동화하기

자바스크립트 기능 중에 DOM 제어에 집중해서 주변의 웹 서비스를 프로그래밍으로 대신 다루는 방법을 소개드립니다.

^{▲ 간편결제 서비스 카카오페이의 결제 정보를 바로 입력하고 카카오톡으로 보내는 모습}

• 번거로운 텍스트 입력과 버튼 클릭을 컴퓨터에게 전담할 수 있을까요?
• 1,000개가 넘는 메일함의 항목을 일괄 처리할 수 있을까요?

자바스크립트로 웹 페이지의 구조를 재구성하기

광고를 차단하고 우리가 확인하고 싶은 내용만 보여주는 웹 확장 프로그램을 만드는 방법을 소개합니다.

• 브라우저 개발자 콘솔 내에서 돌아가는 코드를 작성해 필요로하는 정보만을 띄워봅니다.
• 유저스크립트를 이용해 영속성을 유지합니다.
• 다른 사이트에도 스크립트를 적용해보고 본문안에 담긴 광고를 제거합니다.

윤리적 사용

프로그래밍의 도덕적인 활용에 대해 고민합니다.

교육에 사용하는 도구

강의는 구글 크롬으로 진행하지만 구글 크롬, 사파리, 파이어폭스 등 편하신 모던 웹 브라우저를 사용하셔도 괜찮습니다.

지식공유자 소개 🎓

김무훈

웹 UI와 관련된 모든 엔지니어링을 하고 있습니다.

• https://github.com/mu-hun

김정인

개발동아리 활동이 즐거워서 개발을 시작했습니다.
현재는 로보틱스 공부를 하고 있고 강화학습, 서버에 관심있습니다. 글 잘쓰는 개발자가 되고 싶습니다.

• 전남대학교 지역바이오시스템공학과 재학 / 컴퓨터정보통신공학 복수전공

박세문

어릴 적 Turbo c, boland c++를 시작으로 프로그래밍을 접하였고, 개발자로 지낸지 10여년 정도 지났습니다.
웹, 앱, 모바일, 브라우저 엔진 개발 경험이 있고, 현재는 방콕에서 글로벌 OTA 업체에서 풀스택 엔지니어로 근무하고 있습니다.

• 현) Agoda 시니어 풀 스택 엔지니어

HTML 소개와 CSS 소개 교육 제작을 담당했습니다. 개인 사정으로 김정인, 양아름 선생님이 대신 강의를 진행합니다.

양아름

미림여자정보과학고등학교에서 개발을 배우며 자연스레 프로그래밍에 관심을 가지게 되었습니다.
다양한 경험을 하는 개발자가 되고 싶습니다.

• 미림여자정보과학고등학교 뉴미디어소프트웨어과

이지안

🙏 사전에 베타테스터로 참여해주신 김수현, 김유리, 윤희나, 이예슬, 허유준님 감사합니다.

이런 분들께 추천드려요!