요즘 열심히 JavaScript와 ReactJS를 공부하고 있다. (맨날 공부를 하다가 블로그 글이 뜸해진 것도 사실이다)
그런데 벽을 만나 엄청 큰 고민을 했다. 그 벽이란게, 언어가 어렵다거나 이해가 안된다거나 하는 벽이 아니라 아주 뜬금 없게도 그 다음 무엇을 해야하냐는 것이었다.
"So... what's next?!"
도대체 그 다음 뭘 해야할지 감이 잡히지 않는다! ㅜㅜ
검색을 왕창 해보았는데, 결국 다른 튜토리얼로 스며들어가거나 아니면 '프로젝트를 시작해라'와 같은 조언과 맞닥트리게 된다. 그런데 이러한 결론은 실제로 나의 코딩 능력을 향상시키는데 전혀 도움이 되지 않을 것 같았다.
다른 튜토리얼을 또 보게 되는 것?
실제로 JavaScript를 이미 다 공부를 하였을 때, 거기서 추가로 무언가 깊이 파고드는 것은 이 언어를 내가 실제로 사용하여 무언갈 만들어보는 경험을 갖는데 전혀 도움이 되지 않는다. 왜냐면 정말 내가 뭐르는게 뭔지를 알기 위해선 실제로 언어를 써봐야 되기 때문이다.
그리고 여러 선구자(?)들이 만들어준 튜토리얼들은 각자 개성있게 만들어져있긴 하지만 아무래도 다루는 내용이 동일하다보니 계속 겹치는 것들이 나온다. 내가 아는 것을 반복해서 또 보게 되는 결과가 나오게 되는 것이다. 전혀 앞으로 나아가는 것 같지 않았다.
프로젝트를 시작하는 것?
그렇기 때문에 이 조언이 100% 맞는 말인 것 같긴 했다. 왜냐하면, 뭔가 새로운 것을 만들게 되었을 때 오는 현타로부터 배우는 것이 지금 내가 가진 지식과 능력에 플러스될 요소들을 뜻하기 때문이다. 뭔가 이러이러한 방식으로 내가 구현을 하고 싶은데, 분명 비슷한 걸 튜토리얼을 따라하며 배운 것 같다. 그래서 그걸 해봐야지! 라고 생각하지만, 그 튜토리얼 없이 내가 창의적으로 하려면 머리가 멍... 해진다. 뭐더라... 그게 뭐더라.. 이게 뭐더라... 여기에 괄호를 써야하나 콤마를 넣어야 하나 이런 것 부터 말이다ㅋㅋㅋ..
그런데 이 조언에도 문제가 있다. 도대체 무슨 프로젝트를 하란 말이야?! 실제로 내가 뭘 만들어보는 것이 좋다는 것은 알겠는데, 그래서 뭘 해야할지 전혀 감히 잡히지 않았다. To-do list? 이미 해봤다 ㅜㅜ... 시계? 해봤다 ㅠㅠ.. 계산기? 별로 하고 싶지 않다 ㅜㅜ 그리고 포트폴리오에도 추가하지 말라고 하더라...
그래서 주니어 프론트엔드 개발자를 꿈꾸는 자들이 자바스크립트를 배운 뒤 뭘 해야하는지 폭풍 검색을 했다. 여러가지 자료가 나왔다.
먼저 찾은 것은 github에 공유된 비기너들을 위한 프로그래밍 프로젝트 아이디어 리스트였다.
링크: github.com/strongdan/beginner-js-projects
아이디어 종류는 다음과 같이 __가지로 나뉘어 있었다:
1. Simple projects
2. Object-oriented projects
3. Basic CRUD projects
4. Projects using libraries
샘플 JS 파일이 함께 제공된다고 쓰여있는데, 모두 있는 것은 아니고 리스트 중 몇 개만 있으니 참고해도 될 것 같았다.
그런데 이 리스트가 다가 아니었다. 어쨌든 투두리스트를 만들어라, 뭐 게임을 만들어봐라 이거랑 너무 비슷했다. 뭔가 아직 관념적인 단계에 있어서, 정확히 뭘해야될지 모르겠달까? 그러다 찾은 것이 Frontend Mentor라는 **무료**사이트였다.
Frontend Mentor에서는 쉬운 단계에서부터 고급 단계까지 스스로 도전해볼 수 있는 프로젝트를 제시해준다. 게다가, 각 프로젝트 관련 디자인 리소스 등을 함께 파일로 주기 때문에 그것들을 이용해서 내가 배운 HTML, CSS 그리고 JS를 써먹을 수 있는 구체적인 방안이 마련되었다.
그렇다면 어떻게 쓸 수 있을까? 우선 간단히 가입한 뒤, 사이트 우측 상단의 메뉴에서 CHALLENGES를 선택한다.
CHALLENGES 페이지에 들어가면, 도전해볼 수 있는 여러 과제들이 나온다.
이 페이지의 우측 상단에 보면 아래와 같은 메뉴가 있는데, 'Sort by'를 통해 가장 쉬운 것부터 또는 가장 어려운 것부터 정렬을 할 수 있으며 'Filter by'를 통해 유/무료 여부, 난이도, 언어(HTML/CSS 또는 Javascript 또는 API)를 선택할 수 있다.
나는 가장 쪼렙이니까 "가장 쉬운 것부터", "무료", "HTML/CSS" 그리고 "JavaScript"를 선택해보았다.
우와!!!
그랬더니 아래와 같이 굉장히 많은 리스팅이 나왔다.
보니까, HTML/CSS만 있는 과제들도 있어서 JS도 사용하는 걸 꼭 포함하기 위해 필터에서 HTML/CSS는 제외하고 다시 검색해보았다.
그래도 여전히 여러 과제들이 나왔는데, 모두 HTML, CSS, JS가 필요한 녀석들인 것을 볼 수 있다. (2020년 12월 24일 기준 18개가 나왔다)
직접 해보기 위해 & 테스트용으로 다운로드를 받았다. HTML/CSS 중에서 가장 쉬운 것들 먼저로 했을 때 나온 가장 앞에있던 놈으로다가!
상세 설명에 있는 빨간색 X로 표시된 것은 유료 회원으로 전환시 더 받을 수 있는 추가 물품들(?)을 뜻한다. 그런데 저거 없이도 충분히 무료로 제공되는 리소스를 가지고 직접 연습을 해볼 수 있다. 왜냐면 충분히 많은 것들이 딸려오기 때문이다!
압축을 열고 파일을 보면 내부에 이렇게 내용들이 있다:
각 내용물들에 대한 설명은 저 위에 스크린샷 중 다섯번째에 있는 "README.md"를 보면 상세한 설명이 나온다(영어). 대충 내용을 요약하자면 아래와 같다:
"design" 폴더: 내가 만들어야하는 결과물이다. 즉, 이걸 보고 똑같이 만들려고 노력하면 된다. 내가 다운 받은 이 과제 같은 경우 와이드 스크린 버전의 큰 화면과, 데스크탑 프리뷰 사이즈, 그리고 모바일 사이즈 - 이렇게 3가지가 들어있었다. 반응형(responsive) 웹을 만드는 연습인 것이다!
"images" 폴더: 내가 직접 코딩을 하면서 써야하는 디자인 리소스가 들어있다. 배경에 들어가는 SVG, 사용된 인물 사진, 패턴 jpg 등이 포함되어 있다.
"index.html: 여기에다가 코딩을 하면된다. 아주 기본적인 것이 쓰여있었는데, 내가 다운 받은 파일같은 경우 <body>안에 저 화면에 나온 인물 이름, 나이, 장소, 팔로워수 등이 아무 태그 없이 그냥 글씨로 쓰여있었다.
"style-guide.md": 직접 화면을 구현해나가면서 사용하는 컬러, 폰트명, 폰트 사이즈 등의 정보가 적혀있다.
자주 묻는 질문란에 다음과 같은 내용들이 적혀 있다:
혹시 궁금하실 분들을 위해 번역해서 올립니다:
Q. 무료와 프리미엄 과제의 차이점은 뭔가요?
=> 스킬을 테스트하고 프론트앤드 작업을 향상하는데엔 무료로도 충분합니다. 프리미엄 버전같은 경우 가능한 가장 현실적인 개발 작업 흐름을 제공함과 동시에 굉장히 인상적인 포트폴리오를 만들 수 있게 해줍니다.
Q. 참고할 수 있는 공식적인 해결안이 있나요?
=> 저희는 "공식" 답변을 제공하지 않습니다. 하나의 도전 과제를 완수하는데 한 개의 완벽한 방법이란 없기 때문입니다. 대신에, 커뮤니티를 통해서 다른 사람들의 코드를 리뷰하는 것을 추천드립니다. 같은 도전 과제를 다른 사람들은 어떻게 했는지 봄으로써 많은 것을 배울 수 있을 것입니다.
Q. 제 답변을 포스팅하면 코디 리뷰를 받을 수 있나요?
=> 만약 피드백을 받고 싶다면, 답변을 제출할 때 질문과 함께 올려주시기 바랍니다. 질문은 구체적일수록 더 좋습니다. 구체적인 질문은 커뮤니티에 있는 다른 사람들이 당신을 도와주는 것을 용이하게 할 것입니다.
Q. 제 답변들을 개인 포트폴리오에 사용해도 되나요?
=> 물론입니다! Frontend Mentor는 개발 커뮤니티가 전문적으로 생산된 디자인 프로젝트들을 더 쉽게 얻을 수 있도록
하기 위해 만들어졌습니다. 당신이 만드는 무엇이든 포트폴리오에서 자유롭게 사용해주시기 바랍니다.
Q. 구독을 언제든지 취소할 수 있나요?
=> 물론입니다! 설정 페이지(Setting page)를 통해 계정 관리를 쉽게 할 수 있습니다. Billing tab을 클릭하여 구독 현황을 관리할 수 있습니다.
Q. PRO 멤버로 가입한 뒤 마음이 바뀌면 어떻게 하나요?
=> 문제 없습니다. 저희는 고객이 구매에 대해 완전히 만족하길 바랍니다. 14일 내 환불이 보장됩니다. 프로 멤버십 구매 후 14일 이내에 hi@frontendmentor.io로 이메일을 보내주신다면 환불을 진행해드립니다.
결론
저기 나오는 무료 과제는 모두 해볼거다!
사실 저 첫번째로 해본 것도 처음 봤을 땐 엄청 쉬워보였는데 실제로 해보니 내가 뭘 모르는지 너무 잘 알게 되었다. 그 흔하디 흔한 background에도 그렇게 많은 설정들이 있을 줄 누가 알았겠어..! 직접 해보지 않았으면 절대 몰랐을 부분들이었다.
나를 비롯하여 많은 분들이 코딩을 배우고 계신데, JavaScript를 쭉 훑어본 뒤 무엇을 해야할지 모르겠는 분들에게 도움이 되길 바라며 정보를 공유한다. 모두들 화이팅!
다음편: 과제 완료 후 제출하기
'Learn to Code' 카테고리의 다른 글
| 코드 스테이츠 시작, 본격적인 개발자 전직 퀘스트 돌입 (1) | 2021.03.03 |
|---|---|
| 자바 스크립트 세번째 과제, 아티클 프리뷰(article preview) 만들기 / 처음으로 받아 본 커뮤니티 코멘트 (0) | 2020.12.27 |
| 자바 스크립트 두번째 과제, 반응형 FAQ 카드 만들기! 그리고 받은 결과 리포트 (0) | 2020.12.26 |
| 프론트엔드 멘토(Frontend Mentor), 과제 결과 리포트! (0) | 2020.12.24 |
| 프론트엔드 맨토(Frontend Mentor), 과제 제출하기! (0) | 2020.12.24 |
댓글