웹 개발을 처음 시작할 때 강의 목록과 문제 풀이 사이트를 한꺼번에 열면 무엇을 완성해야 하는지 흐려집니다. 작은 웹페이지 한 장을 목표로 삼고, 개념을 읽은 뒤 직접 바꿔 보고, 변경과 막힌 지점을 기록하는 순서로 시작하세요.
1. MDN에서 만들 페이지의 범위를 정하기
MDN의 웹 개발 학습지는 처음 시작하는 사람에게 웹과 함께 시작하기를, 기초를 익힌 뒤에는 HTML·CSS와 JavaScript 자료를 안내합니다. 첫 결과물은 제목, 본문, 링크 한 개가 있는 페이지로 좁히고 HTML의 구조부터 따라 해 보세요.
문서를 읽은 뒤 예제를 그대로 끝내지 말고 제목이나 링크를 자신의 주제로 바꿔 보세요. 화면이 달라지면 무엇을 바꿨는지 한 줄로 적습니다. 다음날 같은 파일을 열어 수정한 부분을 설명할 수 있으면 다음 기능을 하나 더 붙여 봅니다.
참고: MDN Web 개발 학습하기
2. GitHub에 변경 이유를 남기기
첫 페이지를 다시 찾고 변경 전후를 비교하려면 GitHub의 헬로 월드 자습서에서 저장소·브랜치·커밋의 역할을 익혀 보세요. 공식 자습서는 Git 명령줄이나 코딩 지식 없이도 시작할 수 있지만 GitHub 계정은 필요하다고 안내합니다.
연습 저장소를 만들 때 공개·비공개 선택을 먼저 확인하고, 비밀번호나 접속 키를 예제 파일에 넣지 마세요. 완성한 페이지의 내용과 수정 이유를 README나 커밋 설명에 짧게 기록하면 다음 실습의 출발점을 찾기 쉽습니다.
3. 코딩테스트 연습은 목표가 있을 때 분리하기
프로그래머스 스쿨은 코딩테스트 문제를 기초·입문·알고리즘 유형 등으로 나눠 제공합니다. 해시, 스택·큐, 정렬 같은 고득점 Kit는 문제 풀이 연습을 위한 자료입니다. 이것을 웹페이지의 HTML·CSS 학습을 대신하는 순서로 놓지는 마세요.
취업 준비에 코딩테스트가 필요하다면 웹페이지 실습과 별도의 연습 목록을 만드세요. 한 문제를 고른 뒤 입력·출력 조건, 실패한 예제, 수정한 풀이를 메모하면 복습할 때 도움이 됩니다. 코딩테스트 문제·교육 강의·인증시험은 메뉴와 목적이 다르므로 지금 필요한 연습부터 고르세요.
4. 막힌 오류는 먼저 재현하고 기존 답을 찾기
오류가 나면 어느 파일의 어떤 변경 뒤에 발생했는지, 기대한 결과와 실제 결과가 무엇인지 적으세요. MDN에서 관련 문법을 찾아본 뒤에도 해결되지 않으면 Stack Overflow의 기존 질문을 검색해 같은 증상인지 비교합니다.
Stack Overflow는 질문 전 검색과 조사, 문제를 요약하는 제목, 재현에 필요한 최소 코드 등을 권장하며 질문은 영어로 작성해야 한다고 안내합니다. 다른 사용자의 답을 그대로 붙여 넣기보다 자신의 예제에서 재현해 보고, 해결됐다면 원인과 바꾼 줄을 기록하세요. 질문을 올려도 답변을 보장받는 것은 아닙니다.
공식 공개 안내를 바탕으로 정리한 이용 가이드입니다. 안내의 검토일과 사이트 접속 상태는 별개이며, 서비스별 조건은 이용 시 공식 페이지에서 확인하세요.
← 모든 이용 가이드