0. 준비사항
저는 알고 있습니다. 이 글을 읽는 여러분이 긴 시간의 영어 유튜브를 모두 이해하지 못할 것이라는 걸요.
하지만 이 크롬 확장프로그램 하나만 있으면 그런 것도 끝장낼 수 있습니다.
바로 아래 사진처럼 유튜브에서 자동으로 인식해서 나오는 영어자막을 실시간으로 한글로 바꿔주는 게 있습니다.
세상은 배우기 위한 무궁무진한 기회로 가득한 곳입니다.
이 확장프로그램은 Language Reactor라는 프로그램으로 이곳(https://www.languagereactor.com/)에서 내용을 확인할 수 있고,
여기서 다운로드 가능합니다 ( 링크 바로가기 )
확장프로그램을 설치했다면 이제 시작합시다!
1. 기초는 이것 한 방에
우리가 익혀야 할 것은 단기적으로는 HTML, CSS, Javascript이고
장기적으로는 React (혹은 Next.js), Node.js, SCSS 같은 것들입니다.
먼저 기초부터 다집시다. 멀리 뛰어가려면 신발끈부터 꽉 매야합니다.
첫 번째, HTML"만" 4시간 동안 익히기 & HTML과 CSS를 5시간 동안 익히기 (약간 비추천)
저는 기초를 "너무" 다지는 것을 별로 좋아하지 않습니다. 뛰기도 전에 지쳐버리기 때문이죠.
하지만, 극단적으로 처음부터 배우고자 한다면 이 영상을 추천합니다.
두 번째, 만들면서 배우는 Javascript (약간 추천)
실제로 배우면서 만드는 영상입니다. 약간 어렵습니다. 영어 발음도 알아듣기 쉽지 않을 수 있습니다.
하지만 이 정도로 자바스크립트를 다룰 줄 안다면, 솔직히 지금 신입으로 들어온 프론트엔드 개발자보다 잘 할 수도 있습니다.
모든 프론트엔드 개발자가 다 자바스크립트를 빠삭하게 아는 것은 아니거든요..
2. 기초 따로 싫어. 그냥 영상 하나로 다 배워볼래
개인적으로 웹을 공부한다고 하면 가장 먼저, 그리고 유일하게 추천하는 영상입니다.
HTML부터 HTTP메서드까지 모두 배울 수 있습니다.
이 영상은 Ania Kubow라는 유튜버 영상으로 코드뿐만 아니라 매번 설명까지 곁들여있습니다. 정말 추천합니다.
감사합니다 누님..
3. 리액트 공부 끝판왕! 배우고 나서 만들지 말고, 만들면서 배워라!
이제는 리액트 라이브러리로 넘어가야 합니다.
왜 그 많은 라이브러리와 프레임워크 중에 리액트냐면.. 그냥 제 취향입니다.
하지만, 이런 주장도 있습니다. 한 번 읽어보시는 것을 권장드립니다.
https://news.hada.io/topic?id=6395
바로 영상 추천할게요.
추천 영상은 리액트를 배울 때 좋은 영상입니다.
이 영상은 리액트를 이용해서 UI만 만들어봅니다.
조금 아쉬운 것은, 이미 만들어진 것을 클론 하면서 배우는 것이라 이미 완성된 CSS를 클래스에 넣는 방식으로 진행합니다.
실제로 개발은 이렇게 쉽게 돌아가지 않습니다. HTML을 만들고 나서 온갖 스타일링에 고생을 하곤 하죠.
어쨌든, 좋은 영상입니다.
조금 더 깊게 배우고 싶으면 Meta에서 직접 제공하는 영상을 추천드립니다.
잘 추천드리지는 않는 게, 우선 너무 깁니다.(6시간) 그리고 영어로 길게 설명하는 것 위주입니다.
한국어로 들어도 쉽지 않은데 긴 내용을 영어로 지루하게 듣고 있으려니 쉽지는 않습니다.
하지만 Meta가 제공하는 것이니까 퀄리티는 괜찮습니다.
바로 위의 Meta 영상은 안 보실 것 같으니 다른 추천 영상을 드립니다.
여러 명의 강사들이 돌아가면서 알려주는 방식입니다.
몇 개의 프로젝트에서 실제로 리액트에서 많이 쓰이는 구조를 보여줍니다.
폴더를 나누거나, 다이나믹 라우트를 하거나 등 실무에서 많이 쓰일만한 것들을 영상으로 녹여냈습니다.
전체 길이 8시간이 너무 길다고 생각하다면 5시간 15분쯤 시작하는 마지막 프로젝트만 보는 것도 괜찮습니다.
4. 끝내는 글
제가 추천드린 영상 말고도 다양한 영상들이 많습니다.
각자 취향대로 들으면 좋겠지만, 사실 너무 비슷한 것의 연속인 영상도 있고
발음과 기술을 익히기 어려운 것들도 많습니다.
여러분도 잘 찾으셔서 행복한 웹 개발의 첫걸음을 내딛기를 바랍니다.
파이팅!!