Web 개발 학습하기
MDN 학습지에 오신 것을 환영합니다! 여기는 웹 개발을 처음 접하는 초보자가 웹 사이트 개발을 시작하기 위해 필요한 모든 것을 제공하는 글을 모아놓은 곳입니다.
MDN 학습지의 목표는 여러분을 "전문가"로 만드는 것이 아니고, 웹 개발에 익숙해지도록 도와드리는 것입니다. 그 후에는 MDN의 다른 문서를 포함해서, 각종 사전 지식을 요구하는 중급, 고급 리소스를 찾아 자신만의 길을 만드세요.
웹 개발이 완전 처음이시라면 시작이 다소 어려우실 수 있습니다. 저희가 이끌어드리면서 주제와 충분히 친숙해지고, 제대로 익히실 수 있도록 상세하게 알려드리겠습니다. 독학이나 강의로 웹 개발을 배우는 학생, 교육 자료를 찾고 계시는 선생님, 취미로 웹 개발을 알아보시는 분, 그저 웹 기술의 동작 원리를 알아보고 싶으신 분 모두 편하게 보실 수 있을거예요.
시작하기
- 처음에서 시작
-
처음부터 시작하시는 것이면 웹과 함께 시작하기 모듈부터 시작해보세요. 웹 개발의 실용적인 소개를 제공합니다.
- 기본기를 넘어
-
이미 기본 지식은 알고 계시면, 다음 단계는 HTML과 CSS를 자세히 알아보는 것입니다. HTML 소개 모듈에서 시작해서 CSS 첫걸음 모듈까지 배워보세요.
- 스크립트 다루기
-
HTML과 CSS도 알고 계시거나, 아니면 주로 코드 작성에 관심을 두신다면 JavaScript나 서버 개발을 보시는게 좋습니다. JavaScript 첫걸음과 서버 사이드 첫걸음 모듈을 방문하세요.
- 프레임워크와 도구
-
"바닐라" HTML, CSS, JavaScript의 정수를 모두 배우셨으면 클라이언트 사이드 웹 개발 도구를 읽어보세요. 그 후에는 클라이언트 사이드 JavaScript 프레임워크와 서버 사이드 웹 사이트 프로그래밍도 한 번 고려해보세요.
다루는 주제
다음 목록은 MDN 학습지에서 다루는 모든 주제의 목록입니다.
- 웹과 함께 시작하기
-
초보자가 쉽게 따라할 수 있도록 웹 개발을 간단히 소개합니다.
- HTML — 웹의 구조 짜기
-
HTML은 웹 사이트의 콘텐츠를 구성하고, 각각의 의미나 목적을 정의하는 언어입니다.
- CSS — 웹 스타일링
-
CSS는 웹 콘텐츠의 스타일과 레이아웃은 물론 애니메이션과 같은 추가 동작을 지정할 때 사용하는 언어입니다.
- JavaScript — 동적 클라이언트 사이드 스크립팅
-
JavaScript는 동적 기능을 웹 페이지에 넣을 때 사용하는 스크립트 언어입니다. 이 주제는 JavaScript 코드의 작성과 이해에 익숙해지기 위한 모든 기초를 다룹니다.
- 웹 양식 — 사용자 데이터로 작업하기
-
웹 양식은 사용자와 상호작용을 하기 위한 강력한 도구입니다. 주로 사용자에게서 데이터를 받거나, 직접 조절할 수 있는 사용자 인터페이스를 제공할 때 사용합니다. 이 주제에서는 양식의 구조와 스타일링, 그리고 상호작용까지 모든 것을 다룹니다.
- 접근성 — 모두를 위한 웹
-
접근성에서는 장애, 장비, 지역 및 기타 사람간의 차이점에 상관 없이 누구나 웹 콘텐츠에 접근할 수 있도록 구성하는 방법을 다룹니다.
- 웹 성능 — 빠르고 즉각 반응하는 웹 사이트
-
웹 성능에서는 사용자의 인터넷 대역이나 화면 크기, 네트워크, 장비의 성능에 관계하지 않고 웹 어플리케이션의 다운로드는 빠르게, 사용자 인터페이스의 반응은 즉각 일어나도록 만드는 기술을 다룹니다.
- 도구와 테스트
-
도구와 테스트에서는 크로스 브라우징 테스트, 린팅, 포맷팅, 변환 도구, 버전 관리, 배포, 클라이언트 사이드 JavaScript 프레임워크를 다룹니다.
- 서버 사이드 웹 사이트 프로그래밍
-
클라이언트 사이드 웹 개발에 집중하시더라도, 서버와 서버 사이드 코드의 작동 방식을 파악하는 것은 여전히 유용합니다. 여기서는 서버의 일반적인 동작 방식과 함께, 두 개의 유명한 프레임워크인 Django(Python)와 Express (node.js)를 사용해 서버 사이드 앱을 만드는 방법에 대한 상세한 자습서를 제공합니다.
코드 예제 받기
학습지의 모든 코드 예제는 GitHub에서도 보실 수 있습니다. 코드 예제를 한꺼번에 컴퓨터로 복사하고 싶으신가요? 가장 최신의 master 코드 브랜치를 ZIP으로 다운로드하시면 가장 쉽게 받아가실 수 있습니다.
자동 업데이트도 할 수 있는, 복잡하지만 좀 더 유연한 방법도 있습니다. 다음과 같은 방법으로 저장소를 복사하세요.
-
컴퓨터에 Git을 설치하세요. Git은 GitHub을 구성하는 버전 컨트롤 시스템입니다.
-
명령 프롬프트/터미널이 가리키는 현재 위치에
learning-area
저장소를 복사하시려면 다음 명령어를 입력하세요.bashgit clone https://github.com/mdn/learning-area
-
이제 탐색기/Finder 또는
cd
명령어를 사용해서 원하시는 파일을 찾아보세요.
GitHub의 마스터 버전에 변경사항이 생겼을 땐 learning-area
저장소를 아래의 방법으로 업데이트하실 수
있습니다.
-
명령 프롬프트/터미널에서
cd
명령어를 사용해learning-area
폴더로 이동하세요. 만약 현재 위치가learning-area
폴더의 바로 위라면,bashcd learning-area
입력하시면 됩니다.
-
아래의 명령어를 입력해 저장소를 업데이트하세요.
bashgit pull
연락처
어떤 주제건 저희에게 연락하고 싶으실 때 가장 좋은 방법은 Discourse 포럼에 글을 남겨주시는 것입니다. 틀린 점, 빠진 부분, 새로운 학습지 주제, 이해가 어려운 부분에 대한 도움 요청, 그 외 기타 질문이나 걱정거리 등 무엇이든 좋아요.
콘텐츠의 추가와 개선에 관심이 있으시면 MDN에 참여하는 법을 보시고 연락해주세요. 배우시는 분, 가르치시는 분, 숙련 개발자 등 누구나 환영합니다!
같이 보기
영어
- Mozilla 개발자 뉴스레터
-
웹 개발자를 위한 Mozilla의 뉴스레터입니다. 모둔 수준의 개발자에게 유용합니다.
- Learn JavaScript
-
Web 개발자 지망생을 위한 훌륭한 자료 — 짧은 강좌와 대화형 테스트, 자동화된 평가로 지도하는 인터랙티브 환경에서 JavaScript를 배웁니다. 처음 40개 강좌는 무료이며, 한번의 작은 금액 지불로 전체코스를 수강할 수 있습니다.
- Web Demystified
-
Jérémie Patonnier가 만든 웹 개발을 초보자가 기본을 쌓기에 좋은 강의
- Codecademy
-
처음으로 프로그래밍 언어를 공부하고 바로 실습할 수 있음
- BitDegree
-
게임화를 적용한 과정으로 기초 코딩 이론을 배울수 있음. 초보자를 대상으로 함
- EXLskills
-
정보 기술을 배우는 무료 강의를 제공. 프로젝트 기반의 학습 제공되며 멘토들에게 직접 조언을 구할수도 있음
- freeCodeCamp.com
-
웹 개발을 배우기 위한 튜토리얼과 프로젝트가 있음
- Web Literacy Map
-
초보자가 웹을 활용하고 최신 기술을 배울 수 있는 사이트로 학습 활동을 위한 자료도 제공함
- Edabit
-
다양한 코딩 문제를 접할 수 있음