해당 글을 보완하여 기술 블로그(https://howdy-mj.me/bookmark/lecture/)에 다시 올렸으며, 업데이트도 꾸준히 할 예정입니다.
-- 원글 --
이번에는 HTML, CSS, JavaScript를 공부할 수 있는 사이트를 들고왔다.
다 영어로 진행되지만, 어떤 에러가 생겼을 때 대다수 개발자의 답변은 '구글링 해봐'이니 영어로 어떻게 검색하면 좋을지 등도 먼저 선행한다 생각하면 좋을 것 같다.
1. Freecodecamp(https://www.freecodecamp.org/learn)
Freecodecamp는 이름에서 알수 있듯이 무료이다. 이미지에 있는 것처럼 웹디자인, 자바스크립트 등 프론트엔드 관련 내용을 주로 다루고 있다.
강의를 클릭하면 왼쪽이 해당 주제에 대한 설명, 오른쪽이 코딩 화면, 그리고 오른쪽 하단이 콘솔창이다.
왼쪽 하단에 있는 문제를 풀면 해당 강의를 완료했다 본다. (뒷 강의부터 들을 수 있다)
만약 못 풀겠다면 'Get Help+'에 동영상으로 설명해주기도 하니 참고할 수 있다.
2. CodePen (https://codepen.io/)
두번째로 소개할 사이트는 CodePen이다. 사실 CodePen은 코딩 사이트라기보다는 커뮤니티에 가깝다. 다른 개발자들이 자신의 포트폴리오를 올리는 용도로 많이 쓰이고 있으며, 어떤 코드를 사용해서 해당 화면을 짰는지 알 수 있다.
CodePen의 메인페이지를 보더라도 다른 사람이 올린 포트폴리오를 많이 볼 수 있다. 클릭하면 HTML, CSS, JS순으로 보이며 밑에는 출력되는 화면 그리고 왼쪽 하단에 콘솔창도 있어서 어떤 것이 실행되는지도 실시간으로 확인 가능하다.
그리고 CodePen을 이용하면 다른 사람에게 내 코드를 첨삭받기가 더 쉬워진다. CodePen에 로그인 후 내가 작성한 코드를 'Pen'에 업로드하여 URL로 다른 사람에게 전송할 수 있다. 이는 기존의 스크린샷이나 파일을 주고받는 것보다 훨씬 간편하며, 첨삭을 도와주는 분도 콘솔창으로 어떤 에러가 뜨는지 확인하고 빠르게 수정할 수 있다.
3. Pythontutor (http://pythontutor.com/visualize.html)
세번째는 Pythontutor이다. 이름과 달리 파이썬을 제외하고도, Java, C, C++, JavaScript, Ruby, TypeScript을 지원하고 있다. 이 사이트 역시 CodePen과 비슷한 'VISUALIZE CODE AND GET LIVE HELP' 사이트다.
실시간 도움을 받는 것을 제외하고, 가장 큰 장점은 'Visualize code'인 것 같다.
위의 화면을 보면 왼쪽에 'var me = 1;'이라는 코드를 쳤다. VSCode를 통해 콘솔창에 출력할 경우 바로 me는 1이라는 것이 출력될 것이다. 하지만 해당 사이트는 me는 undefined를 먼저 보여준다. 이는 me가 어떤 것이든, 최초는 항상 undefined가 할당되는 코딩 구조를 보여주기 때문이다.
따라서 비전공자가 처음 공부할 때 가장 헷갈리는 '코드가 어떤 방식으로 어떻게 선언되는지'를 차례대로 보여준다. 그 다음에 어떻게 진행되는지 궁금하면 왼쪽 하단의 'Next'를 클릭하면 볼 수 있다.
자바스크립트를 공부하다가 갑자기 왜 이 결과값이 뜨는지 이해가 안된다면 해당 사이트에서 다시 코딩을 해보는 것도 좋을 것 같다.
4. Codecademy(https://www.codecademy.com/)
마지막으로 소개할 곳은 Codecademy다. 사실 이 사이트는 완전 무료는 아니기 때문에 넣을까말까 고민을 했지만, 그래도 한 계정당 1주일은 무료로 Pro를 쓸 수 있기 때문에 넣었다.
Codecademy는 첫번째 소개한 Freecodecamp와 매우 비슷하다. 들을 강의를 선택하면 왼쪽에 강의 내용, 중간에 코드 창, 오른쪽이 보여지는 화면 및 콘솔창 역할을 한다. 마찬가지로 Hint가 있기 때문에 잘 따라간다면 어렵지 않게 다음 강의로 넘어갈 수 있다.
하나 다른 점은 Codecademy는 각 세션마다 Project가 있다는 점이다.
만약 if문을 배웠다면, if문을 활용한 '가위 바위 보'를 완성하는 Project가 나올 것이다. 좌측 상단에 해당 프로젝트 설명, 하단에 지시사항을 따라 코드를 완성하면 된다. 보통 어려운 세션에는 2개의 Project가 존재한다. 못 풀겠다면 오른쪽 하단의 'Get Help'의 동영상을 보고 따라할 수 있다.
하지만 한 가지 단점이 있다면, 'Get Help'의 동영상은 한 사람이 찍은 것이 아니라 모두 코딩하는 스타일이 다르고, 해당 세션에서 배운 것이 아닌 설명하는 개발자가 주로 사용하는 스타일로 알려주는 경우가 많다. 그리고 처음부터 세세히 알려주는 사람이 있는가 반면, 누구는 딱 문제만 풀고 넘어가기 때문에 동영상 길이도 다 제각각이다.
개인적으로 Codecademy의 단점을 하나 더 꼽자면, 함수를 작성할 때 보편적인 스타일로 작성하지 않고 '=>'를 사용하여 한줄로 끝내는 코딩이 많다. Get Help의 동영상에서도 '=>'로 함수를 코딩하는 사람은 없지만 왼쪽의 설명란은 해당 코딩으로 해놓았다.
'■ 프로그래밍 > Front-end' 카테고리의 다른 글
| Git & GitHub (1) - 정의, 명령어 (0) | 2020.04.01 |
|---|---|
| 리눅스 & 터미널 기초 (0) | 2020.03.31 |
| 개발자도구 활용하기 (0) | 2020.03.27 |
| 프론트엔드 개발 무료 공부 사이트 (국내) - 2 (0) | 2019.12.27 |
| 프론트엔드 개발 무료 공부 사이트 (국내) - 1 (0) | 2019.12.10 |
