2021 웹 프론트엔드 공부법 - 입문자편 <커리큘럼>

프롤로그

예전 글에서 실제로 기술하려고 했던 커리큘럼에 대해서 좀 적어보려합니다. 앞에서는 이야기가 삼천포로 샜었죠;;

해당 커리큘럼은 자바스크립트의 문법을 난이도에 맞게 순서대로 익히는 것을 중심으로 구성이 되어있습니다.
CSS는 따로 기회가 되면 적어볼까 합니다.

초보자가 아니라 정말 입문용이기 때문에 개발 공부를 조금 하신 분들에게는 내용이 너무 쉽다고 생각할 수 있습니다.

실제로 자바스크립트가 어렵지 않습니다.

하지만 누구나 한글은 배우지만 누구나 쉽게 시, 소설을 쓰지는 못합니다.
한줄 문자 답장 보내는 것은 쉬워도 장문의 편지를 적는 것은 어렵습니다.

현업에서 중요한 것은 그 쉬운것들이 모이고 모여서 하나의 큰 구성으로 이루는 과정이 어려운 것이니
언어를 배우는데 그치지말고 꼭 응용하고 바꿔보고 더 나은 가치를 만들고 공유 하는 과정을 함께 하길 바랍니다.

입문의 범위

• 서버와의 통신은 배제하고 자바스크립트의 기초 문법을 익힙니다.
• 그래서 자연어로 된 요구사항을 컴퓨터 언어로 표현하는 방법을 이해합니다.
• 기획과 디자인이 어떻게 코드를 만나 동적으로 변화하는지 이해합니다.
• 사용자의 동작을 어떤식으로 컴퓨터가 이해할 수 있는 값으로 변경하는지 이해합니다.

너무 쉬운데... 하는 분이라면 이렇게 활용해보세요

• 웹 프레임워크 없이 바닐라 javascript로 개발해보세요.
• javascript보다 가능하면 typescript로 구현해보세요. 개발 환경은 tsup을 추천드립니다.
• 아니면 이 참에 다른 프레임워크를 한번 써보세요.
  이때 선택 기준은 주류가 아니지만 그래도 최근에 개발된 프레임워크를 추천드립니다. (그래야 시야가 넓어집니다)
• 금방 만들 수 있을 것 같으면 금방 만들어서 외부에 퀄리티 있는 서비스를 배포하는 사이클을 한번 가져보세요.

1. 가위 바위 보 게임 만들기

요구사항

• ✌️✊🖐 이모지가 순서대로 변하고 있는 화면을 만든다
• 3개의 가위 바위 보 버튼이 있다.
• 하나를 클릭하면 그때 화면에 있는 가위바위보가 멈추고 비교하여 이김, 비김, 짐을 표기한다.

배워야 할 것

• 변수
• 값을 화면에 출력하는 법
• +, % 등의 간단한 연산자 사용
• setInterval, clearInterval 내부 API 사용법
• 버튼에 이벤트 연동
• if를 이용한 비교문
• alert() 등의 메시지 API

꼭 해보세요!

• 본인이 만든 코드 github에 올리기
• 본인이 만든 프로그램을 웹 사이트에 배포하기
• 이모지 대신 이미지로 만들어 보기
• 뭔가 재밌는 요소 추가하기
• 기획 비틀어 보기
• 배운것만으로 비슷한 다른 것도 만들어 보기

일단 돌아가게 하는 것이 최우선입니다.

그리고 언제나 구현이 끝나고 나면 꼭 남들에게 보여줄 수 있을 만큼 완성도를 올려서 배포하고 기획도 바꿔보는 과정 잊지 마세요. 딱 저것만 알아도 만들 수 있는 것들이 엄청 많아요.

2. 다른 글자 찾기 게임

stage1

멵먽멵멵멵멵멵멵
멵멵멵멵멵멵멵멵
멵멵멵멵멵멵멵멵
멵멵멵멵멵멵멵멵

요구사항

• N x M 의 화면에 하나만 다른 글자로 채워서 보여준다. ex) (멵먽멵, 꾭굡꾭)
• 해당 게임의 정답 글자 위치는 매번 달라져야 한다
• 정답 글자를 선택하면 다음 stage로 넘어간다.
• 아니면 실패 메시지를 띄우고 종료한다.

배워야 할 것

• 연속된 값의 표현인 배열(Array)
• 배열의 특정 index에 값을 대입하는 방법
• Math.random()
• for등의 간단한 반복문으로 값을 채우는 방법
• 혹은 .fill() 과 같은 Array API 사용법
• 배열의 값을 화면에 표기하는 방법

꼭 해보세요!

• 난이도가 점점 상승할 수 있도록 만들어 보세요.
• 글자가 아니라 이미지나 색상을 통해서 만들어보세요.
• https://kr.vonvon.me/quiz/1093

3. 짝 맞추기 게임

🍏🃏🃏🃏🃏🃏
🃏🃏🃏🃏🃏🃏
🃏🃏🃏🍏🃏🃏

요구사항

• 2쌍이 같은 랜덤한 카드 N장의 뒷면을 보여준다.
• 1장을 선택하면 해당카드의 앞면을 보여준다.
• 나머지 다른 1장을 선택했을때 같다면 보여주고 아니라면 다시 둘다 뒤집어 둔다.
• 다 맞으면 성공

배워야 할 것

• 복합적인 값을 다룰 수 있는 Object 값 익히기 ex) { card: "🍏", isOpen: false }
• Object와 Array를 함께 쓰는 방법
• Array.prototype.sort()를 이용한 정렬방법
• sort()와 Math.random()를 함께 응용하는 suffle방법
• 0장이 열려있을때와 1장이 열려있을때 처럼 같은 동작인데 상황이 다른 것을 코딩하는 방법
• 화면에 보여주기 위해 delay를 이용하는 비동기적인 상황에 대한 대응

꼭 해보세요!

• 주위에 공개 했을때 본인이 빡시게 구현을 한 내용보다 카드에 어떤 사진을 썼는지 에니메이션은 어떤지에 따라서 주위의 반응이 바뀌는 것을 느껴보세요!
• 완성도를 높이는 것과 본인이 생각했던 코딩을 잘한다는 것의 괴리감을 느껴보세요!
• http://hajagame.com/bbs/board.php?bo_table=mul&wr_id=452
  (요새는 플래시가 없어져서 퀄리티 좋은 예시들을 보여주기가 참 어렵네요 ㅠㅠ)

4. 메모리 게임

🃏🃏🃏
🃏🃏🃏
🃏🃏🃏

1 -> 1, 4 -> 1,4,6 -> 1,4,6,7

요구사항

• 3x3 타일에 랜덤하게 하나를 골라 표기하고 다시 돌아옵니다.
• 사용자는 그 순서를 기억하고 순서대로 클릭합니다.
• 순서대로 다 맞았다면 하나씩 추가해서 반복합니다.

-_-; 설명이 부족한것 같아서 이미지 첨부 합니다.

배워야 할 것

• delay와 animation등이 포함되는 비동기 프로그래밍 개념
• 한 동작이 아닌 여러 동작을 받아서 처리하는 처리하는 개념

꼭 해보세요!

• 하나도 안 중요한데 괜히 여기에 사운드를 넣어보면 좀 퀄리티가 올라갑니다.
  입문하고는 거리가 먼데 재미로 한번 해보세요.

5. 퍼즐 스트라이크

???

123 1B
456 1B
789 1S
723 1S
746 2S
741 3S

요구사항

• 컴퓨터는 1~9중 3가지 숫자를 고릅니다. 이때 중복된 숫자는 고를 수 없습니다.
• 사용자는 3가지 숫자를 입력합니다.
• 숫자가 아니거나 중복된 숫자가 있거나 3자리 숫자가 아니라면 입력을 받지 않거나 메시지를 출력해줍니다.
• 숫자가 포함되어 있는데 위치가 다르면 Ball 입니다.
• 숫자와 자리수가 둘다 맞으면 Strike입니다.
• 컴퓨터가 입력한 숫자와 사용자가 입력한 숫자가 같으면 성공입니다.

배워야 할 것

• 사용자가 타이핑해서 입력받는 Input Form 사용해보기
• 요구하는 조건에 맞지 않으면 입력을 거절하는 Form Validation에 대해 이해하기
• 논리적인 스펙을 컴퓨터 언어로 만들어보기

꼭 해보세요!

• 언제나 그렇듯이 그럴싸한 화면과 구성으로 완성도를 챙겨봅시다!

🎉 수고하셨습니다!

여기까지 진행하셨다면 기본적인 자바스크립트 문법이나 프로그래밍을 하는 요령에 대해서는 알게 되셨을거라고 생각합니다. 그리고 실제로 뭘 많이 배우지 않더라도 서비스나 제품을 만들 수 있다는 경험은 하셨으면 좋겠습니다.

그 밖에 더 실력을 쌓고 싶다면 퍼즐류의 게임(빙고나 스도쿠 같은 것들)을 한번씩 만들어 보는 것들을 추천합니다.
이상형 월드컵, 오늘 뭐먹지 룰렛등 간단하면서도 실용적인 아이템도 괜찮아요.

왜 게임을 만들어 보는 것을 추천하나요?

• 게임은 요구사항이 복잡한데 반해서 만들어야 할 명세가 분명합니다. 그래서 목표가 분명하고 버그 유무가 확실하기 때문에 좋습니다.

• 보통 다 한번쯤은 해본 것들이라서 제가 위에서 요구사항을 대충 적었어도 뭘 만들어야 할지 압니다.

• 제가 늘 주위에 공개하라고 했는데 현업 스터디에서 쓰이는 자동완성, 깃이슈 트래커, 할일 관리, 게시판, SNS 피드 이런것들을 만들어서 보여줘봐야 주위에서 별로 반응이 없습니다ㅠㅠ. 데이터를 화면으로 다루는 업이 프론트엔드의 주된 업무긴하나 일반 주위 사람을 감동(?)시킬만큼의 프로그램을 만드는데에는 게임에 반해 엄청난 에너지가 필요합니다.

• 그래서 코드량이 더 적어도 외부에 보여주면 더 반응이 좋아요.

• 그리고... 재밌잖아요!!

끝으로..

당연히 게임만 만들어서는 실제 프론트엔드 현업과 뒤떨어질테고 실제 현업에서는 게임과 같은 코딩이 아니라 백엔드와 함께 데이터를 다루고 데이터를 화면으로 보여주는 업무가 가장 주된 업무입니다. 그러니 앞으로는 데이터를 표기하고 사용자의 입력을 관리하고 UI를 관리하는 업무들을 배우시게 될 거에요.

그러한 내용들을 바탕으로 백엔드와 함께 하는 CRUD스러운 스터디용 프로젝트나 커리큘럼도 한번 정리해볼까 합니다.

일단은 맛보기로 실전용 프로젝트를 마지막으로 소개합니다.

6. 할 일 관리

프론트엔드 개발의 고전 중의 고전 Todo List 입니다.
https://todomvc.com/

요구사항

• 사용자는 할일을 추가 할 수 있습니다.
• 할일은 체크 on/off가 가능합니다.
• 체크는 모두 on/off를 할 수 있습니다.
• 할일 내용의 편집과 삭제도 가능해야 합니다.
• 아직 하지 않은 일과 한 일을 구분할 수 있어야 합니다.
• 할일에 보관된 데이터는 브라우저를 종료해도 보관이 되어야 합니다.
• 요구사항은 만들기 나름이니 연습용으로는 https://github.com/tastejs/todomvc/blob/master/app-spec.md 를 참고해보세요.

배워야 할 것

• 데이터 생성, 편집, 삭제
• 사용자 입력 검증 (Form Validation)
• LocalStorage과 같은 Stroage API
• 아~ 이런게 프론트엔드가 주로 하는 일이구나!!

꼭 해보세요!

• 할 일 관리는 저희 회사 뿐만 아니라 애플, 구글, MS 등의 실제 서비스에 항상 탑재되는 서비스입니다. 뿐만 아니라 Todo List만으로도 굴러가는 회사가 있습니다.
• 고전 중의 고전이며 기본 중의 기본이니 자기만의 서비스를 한번 만들어 보시길 바랍니다.

꼭 당부 드리고 싶은 말씀!

정말로 잊지말아야 할 것은 이러한 커리큘럼이 단순히 요구사항만 구현해서 자바스크립트의 문법을 익히는데서 끝나야 되는게 아니라 서비스의 완성도를 얼마만큼 올리느냐가 진짜 중요합니다. 그러니 꼭 주위에 공개하거나 남에게 제공해주거나 팔아보려고 해보거나 홍보 해보시길 바랍니다. 계속 강조하지만 프론트엔드의 가치는 서비스의 가치로 결정되며 코드의 스킬이나 퀄리티로 결정되지 않습니다. 코드의 퀄리티나 좋은 설계 역시 서비스가 가치가 높아져 대형 서비스로 잘 만들 수 있기 위한 수단 일 뿐입니다.