프론트 앤드(Front-end) 독학 준비하기

Front-end
2022. 7. 4. 18:43

최근 프런트 앤드에 대한 관심이 생기면서 공부를 하고 있습니다. 이젠 나이가 있어서 그런지 공부하고 돌아서면 잊어버리는 일이 많아지네요. 오늘부터 독학을 준비하면서 습득한 정보와 공부한 내용을 조금이나마 블로그에 작성하여 복습하는 과정을 가져보려고 합니다.

우선 프론트앤드(Fornt-end)란 무엇일까요? 쉽게 생각하면 우리가 접할 수 있는 웹과 앱의 앞면이라고 생각하면 좋을 것 같습니다. 웹의 구조, 꾸밈, 동작 등 눈앞에 보이는 것이 프런트 앤드의 작업입니다. 작업하면서 실시간으로 확인할 수 있어 큰 매력이 있는 것 같아요.

프런트 앤드를 독학하려면 어떻게 해야 할까요?

공부하기 좋은 사이트

1. Codecademy

현재 제가 공부하고 있는 사이트입니다. HTML, CSS, JavaScript의 기본적인 부분은 무료로 학습할 수 있으며 조금 더 세부적인 부분으로 들어가 node, git, react 등을 배우고 싶다면 pro(유료)로 구독하여 사용하시면 됩니다. 프런트 앤드 과정이 따로 있어 무엇을 공부해야 할지 모른다면 pro 서비스를 사용하시는 것을 추천드립니다.

코드카데미의 가장 큰 장점은 학습 후 바로 실습할 수 있는 부분입니다. 예를 들면 HTML의 <input>을 배웠다면 <input>에 대한 예시를 직접 실습해볼 수 있고 수업의 마지막 과정에서는 프로젝트를 통해 실습할 수 있는 점이 정말 좋았습니다.

프런트 앤드 공부 순서를 잡을 수 있다.
예제를 통한 실습이 가능하다.
하나의 레슨이 끝나면 프로젝트를 통해 실습 가능하다.
코드카데미 포럼을 통해 코드를 공유하고 피드백이 가능하다.

다만 모든 것이 영어로 이루어져 있어 해석하는 부분이 조금 어렵고 한글 번역만으로 공부하다 보니 이해하기 어려운 부분이 있다는 것이 가장 큰 단점입니다.

영어로 되어있어 번역기 사용 시 해석이 어려울 수도 있다.
더 깊이 배우려면 pro로 전환해야 한다.(유료)

codecademy : https://www.codecademy.com/

2. MDN

MDN은 Mozilla Developer Network의 약자입니다. HTML, JavaScript, CSS 등 웹 기반의 기술을 배울 수 있는 학습 플랫폼입니다. 전반적인 내용을 무료로 학습할 수 있으며 모르는 태그와 코드 등을 검색을 통해 찾아보고 사용법을 참고할 수 있습니다. 저는 Codecademy를 통해 학습하다 이해가 안 되거나 모르는 부분이 있다면 MDN을 참고합니다.

전반적인 내용을 무료로 학습이 가능하다.
코드별 정리가 잘되어있다.

예를 들어 JavsScript를 공부하던 도 중 .map()에 대하여 이해가 안 된다면 검색을 통하여 확인 가능하며 실제로 구현되는 output을 확인할 수 있습니다.

MDN : https://developer.mozilla.org/ko/

3. Google

모든 개발자들은 구글을 사랑한다고 합니다. 자신이 모르는 부분 또는 개발하고자 하는 것을 구글링 해보면 오픈 소스를 통해 더 깊은 공부가 가능하고 프로그램 개발 또한 쉽게 할 수 있습니다.

예를 들어 토글 버튼을 만든다고 하면 구글에 토글 버튼 만들기, JavaScript 토글 버튼 등으로 검색해보면 정말 많은 글들이 나옵니다. 거기서 필요하겠을 찾아 코드에 적용해보고 수정해보면 많은 공부와 퀄리티 높은 사이트, 프로그램 등을 개발할 수 있습니다.

코드 관련 자료가 많고 예제가 많다.
오픈소스를 통해 개발을 조금 더 쉽게 할 수 있다.
한글 검색으로 못 찾을 경우 영어로 검색하는 것을 추천한다.

에디터 프로그램

1. codepen

별도의 설치 없이 무료로 HTML, CSS, JavsScript 등을 실제로 작성하고 확인이 가능합니다. 또한 서비스에 가입하고 코드를 작성한다면 간편하게 저장 가능하고 본인이 코딩 관련 블로그를 쓰고 있다면 codepen을 활용하여 공유하고 실제 글에서 수정도 할 수 있는 기능을 탑재하고 있습니다.