[취업후기] 비전공자 웹퍼블리셔 독학으로 프론트엔드 개발자 준비 1편 (강의 추천)
1. 서론
나는 비전공자다! 전공은 요리였고 요리 쪽으로 꽤 오래 일하다가 국비지원을 통해 웹퍼블리셔가 되었다. (그때 나의 나이 29,,)
웹퍼블리셔 직무로 2년 조금 넘게 일 하다가 회사의 정리해고 이후 실업급여를 받으며 Javascript와 React를 독학으로 공부하여 현재는 한 회사에 React / Next.js / Zustand / React-query / Swagger 등을 이용하여 웹퍼블리셔와 프론트엔드의 사이 일을 하고있는 개블리셔 일을 하고 있다. 더 나아가 회사에서 요구하는 나의 포지션은 프론트엔드 개발자로서의 포지션이니까 프론트엔드개발자 취업후기로 작성하도록 하겠다.
이 글을 쓰게 된 이유는 국비지원이나 부트캠프를 통해 개발자가 된 성공 사례도 많지만 그런 정석적(?)인 루트 말고
이런 방법으로도 프론트엔드 개발자가 될 수 있구나~ 하고 예시를 남기고 싶었다.
왜냐하면 나처럼 비전공자에 금전적 / 시간적 여유가 많지 않아 국비지원이나 부트캠프를 이용할 수 없는 사람들이 분명히 있을 것이고. 또한 프론트엔드 개발자로 전향하는 목표를 갖고있는 웹퍼블리셔 / 웹디자이너들이 많을 것이기에 그분들에게 조금이라도 도움이나 희망(?)이 되어보고자! 작성하게 되었다.
아마 개발에 욕심이 많은 웹퍼블리셔들이 그러하듯 나도 마찬가지로 개발 욕심이 많은 웹퍼블리셔였다. 프론트 개발이 너무 재밌고 잘 맞아서 프론트엔드 개발자로 전향하는 것을 웹퍼블리셔가 되면서 목표 1순위로 삼았지만 비전공자에다가 웹퍼블리셔 일을 하면서 프론트엔드 개발자로 전향하는 것은 매우 쉽지 않은 일이라는 것을 깨달았다. 하지만 당장 퇴사 후 큰 돈을 들여 부트캠프에 갈 수도 없었고, 6개월 이상 일을 쉬면서 국비지원 학원에 다닐 수도 없었다. 그러던 중 정리해고 대상자가 되면서 실업급여를 받을 수 있게 되었고
실업급여를 받게 되면서 Javascript / React를 독학으로 공부하기로 마음 먹었다.
그리고 그 때 부터 나의 목표는 프론트엔드 개발자가 되자! 라는 목표보단 리액트를 할 줄 아는 리액트 퍼블리셔(개블리셔)가 되어보자라는 목표로 공부를 시작하게 되었다.
왜 프론트엔드 개발자가 아닌 개블리셔를 목표로 삼았는지는 뒤에 가서 이야기 하겠다!
2. 웹퍼블리셔 퇴사 전
앞서 말했듯 나는 비전공자다. 사실 웹퍼블리셔로서 취업하기 위한 학위나 전공도 필요 없기 때문에 대부분의 웹퍼블리셔들은 국비지원 훈련을 통해 되는 경우가 많다.
나의 경우 웹퍼블리셔 국비지원 훈련을 통해
어도비 포토샵 / 일러스트를 배웠고 마크업 기술로는 HTML / CSS 를 공부했다.
그 외에도 제이쿼리를 활용한 애니메이션 / 탭메뉴 / 토글메뉴 등을 만들 수 있는 실력인 상태로 신입 웹퍼블리셔로 취업을 했었다.
하지만 나의 경우 실력이 멈춰있는 것을 극도로 싫어하는 성향이기 때문에 입사 후 피그마와 XD를 공부했고 그 외에도 CSS 전처리기인 SCSS를 혼자 공부해서 사수 없이 회사의 프로젝트들에 사내 최초로 SCSS 기술을 도입시켰다.
프로젝트들을 진행하면서 SCSS를 이용해 스타일 시트를 분리하는 작업과 컴포넌트별로 CSS를 모듈화 하는 작업, 그리고 mixins를 활용하여 확장성있는 SCSS를 구축하는 등 능숙하게 SCSS사용할 수 있는 실력까지 끌어올렸기에
웹퍼블리셔로서는 자신감이 충만한 상태였지만 그 외 개발 언어에 대해서는 자신감이 매우 낮았다. 왜냐하면 그 당시 나는 Jquery만을 이용해서 각종 라이브러리 정도(Swiper.js / Chart.js 등) 만 연결 할 줄 알았지, Javascript / ES6 문법에 대해서는 이해도가 매우 낮았기 때문이다.
웹퍼블리셔 일을 하면서 퇴사 직전까지도 JS 공부는 꾸준히 했지만 문법 공부를 하면서도 이걸 왜? 어떻게? 무엇을 위해 사용하고 쓰는지 알 수 없었고
회사의 업종 변경으로 인한 정리해고 대상자가 되어버리니 개발에 대한 자신감이 바닥인 상태가 되어 퇴사를 하게 되었다.
3. 웹퍼블리셔 퇴사 후
퇴사 후 실업급여를 받게 되면서 많지는 않지만 어느정도 금전적 / 시간적 여유가 생긴 김에 독학으로 자기개발을 해야겠다고 마음 먹었고
어떻게 공부를 해야 효율적으로 할 지 많은 고민을 했다.
그당시 나는 비전공자라는 타이틀을 떼고싶어 2022년 초에 방통대 컴퓨터과학과에 3학년으로 편입한 상태였긴 하지만,,
상위 전공 수업보단 1학년 위주의 개론적 수업을 많이 들었기 때문에 큰 도움이 되지 않았고 퇴사를 하게 되면서 방통대도 휴학 처리를 해버렸다. (CS와 같은 전공 지식은 현재도 1도 없다 따흐흑.)
나의 실업급여 수급기간은 2022년 6월 ~ 2023년 1월 초 까지로 대략 7개월 정도 되었는데.
2022년 6월은 푹 쉬었고
2022년 7월은 운전면허를 땄고
2022년 8월 - 9월은 SQLD 시험에 도전했으나 떨어졌다 ㅠㅠ
SQLD 시험의 경우 방통대 졸업 논문 대체 자격증이어서 준비했던 것이니 다른 분들은 굳이 시험을 보실 필요가 없고
4년제 학위가 있다면 차라리 정보처리기사 시험을 준비하라고 권하고 싶다! 없어도 되긴하지만 있으면 좋다!
일부 기업은 해당 자격증이 있으면 100-200정도 연봉이 다른 경우도 있다고 들었다!
그래서 내가 본격적으로 자바스크립트와 리액트를 공부하기 시작한 시간은 2022년 9월 중순부터였다.
대충 타임라인을 간략히 설명하자면
2022년 9월 중후순 - Javascript(ES6) 공부
2022년 10월 - React 공부 및 토이프로젝트
2022년 11월 - GSAP 공부 및 포트폴리오 제작
2022년 12월 - TypeScript / 경력기술서 / 이력서 준비 / 입사지원 시작
2023년 1월 초 - 면접 및 취업
위와 같은데,
나의 경우 인터랙티브 웹에 대해 관심이 많은 사람이라 GSAP를 별도로 공부한 것일 뿐! 프론트엔드 개발자를 준비하시는 분들은 굳이 GSAP까지 공부할 필요는 없다!
3. 내가 했던 프론트엔드 개발 공부 방법 및 인강 추천
나는 구름에듀 / 유데미 / 인프런 등 각종 온라인 교육 플랫폼을 모두 통틀어 유무료 강의만 대략 100개 넘게 갖고 있다.
내가 들어본 강의들 중 완강 여부를 떠나서 가장 좋아서 주변에 추천하고 다녔던 강의만 소개하겠다!
3-1. HTML / CSS (SCSS)
일단 나는 웹퍼블리셔였기 때문에 프론트를 개발하는 기술 중 HTML / CSS은 퇴사 후에 별도로 공부하진 않았으나
내가 들었던 강의 중 정말 좋았던 강의를 추천하자면
[구름에듀] 김버그의 UI 개발 부트캠프 - 경력같은 신입으로 레벨업 (김버그) 유료
■ 장점: 실무 이상의 강의이다. 퍼블리셔를 위한 HTML / CSS / SCSS / Javascript 강의 중 이만한 강의는 없다고 생각한다. 웹퍼블리싱에 자신이 없는 신입 퍼블리셔라면 무조건 사서 최소한 SCSS 부분까지만이라도 듣자.
■ 단점: 어느 순간 김버그님이 수강생들의 질문에 답변을 안해주심.. 답답해도 내가 해결해야 함. 문제해결 능력은 올라갈 듯.
김버그의 UI 개발 부트캠프 - 경력같은 신입으로 레벨업 - 구름EDU
구름EDU는 모두를 위한 맞춤형 IT교육 플랫폼입니다. 개인/학교/기업 및 기관 별 최적화된 IT교육 솔루션을 경험해보세요. 기초부터 실무 프로그래밍 교육, 전국 초중고/대학교 온라인 강의, 기업/
edu.goorm.io
구름에듀에서 김버그님이 올리신 강의를 추천한다.
나의 경우 이 강의를 오픈하자마자 사놓았는데 1년 가까이 여분 강의가 오픈 되지 않아 기다리다 지쳐버려서 SCSS 부분만 듣고 JS 쪽은 수강하지 않았지만 김버그님은 프론트엔드 개발자이시기 때문에 매우 잘 알려주시리라 생각이 든다.
현재는 모든 강의가 오픈되어있는 상태로 확인이 되니 강의를 듣는 데에는 문제가 없을 듯 하다.
SCSS 부분까지만 들은 나의 경험으로선, 강의의 질이 매우 좋아 모든 웹퍼블리셔 / 프론트엔드 준비생이라면 꼭 보길 바랄 정도다.
3-2. Javascript (ES6)
누가 자바스크립트가 너무 어려워 울거든 고개를 들어 코딩앙마와 코딩애플을 보게하라.
나는 자바스크립트 때문에 운 적이 있다.
아무리 공부하고 공부해도 이해가 되지 않았기 때문에 남들은 다 하는 자바스크립트를 나만 이해를 못하는 것 같아서
그런 내가 너무 똥멍충이 같아서 답답해서 운 적이 있다.
그런 내가 자바스크립트에 대해서 조금이나마 눈을 뜨게한 훌륭한 지식공유자가 바로 코딩앙마님과 코딩애플님이시다.
[유튜브 or 인프런] 왕초보 자바스크립트 / 자바스크립트 중급강좌 (코딩앙마) 무료
■ 장점: 이걸 무료로 들을 수 있다고? 코딩앙마님께 내 영혼을 드리고 싶다.. 코딩앙마님 덕분에 자바스크립트로 털린 내 영혼이 구원받는 기분이었다. 욕심이지만 평생 무료 공개였으면 좋겠다 ㅠㅠ ..
초급 - 중고급 개념까지 한꺼번에 있음 그저 근본 강의다. 꼭 보세요. 메소드 부분은 필요할 때마다 보면 너무너무 좋다.
자바스크립트 문법을 알잘딱깔쎈 알려주신다.
공개하신 플랫폼은 유튜브 채널이나 인프런에 공개해놓으셨기 때문에 편한 곳에서 보면 된다!
나는 유튜브에서 볼 때도 있고, 인프런에서 볼 때도 있고 뒤죽박죽 이었음.
■ 단점: 진짜 없는데 단점이라고 친다면 양이 많아서 성실히 공부하지 못하는 게으른 나 자신을 탓할 수 있음.
https://youtube.com/playlist?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI
왕 초보 자바스크립트
www.youtube.com
https://youtube.com/playlist?list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4
자바스크립트 중급 강좌
www.youtube.com
[코딩애플] JavaScript 입문과 웹 UI개발 / 쉽게 이해하는 JavaScript 객체지향 & ES6 신문법(코딩애플) 유료
■ 장점: 코딩애플님 말투로 말하자면 빡대가리들(..)도 이해할 수 있는 강의이다.
어려운 전문용어 안쓰고 와 어떻게 이렇게 쉽게 설명을 하고 이해를 시켜주실까 싶다. 매번 박수가 절로 나옴.
돈내고 듣는 강의여도 너무 좋아서, 아침마다 문안 인사 드리고 싶을 지경이었다. 돈이 안아깝다.
이분은 코딩계의 흑종원 / 흑화한 생활코딩 ㅋㅋㅋ 이시다. 1타 강사 그 잡채,, ㅠㅠㅠ
간단한 숙제 같은 것들로 개발적 사고력도 높일 수 있음
나의 경우 이분의 웹개발 패스 강의를 회사돈으로 1번 결제 해서 듣고,
기간 만료 후 너무 강의가 좋아서 내돈내산으로 1번 더 결제해서 현재도 듣고 있음! (총 2번 들음)
가끔 개인 유튜브 채널에서 할인 쿠폰 뿌리시니까 참고참고 !!
■ 단점: 결제하면 1년안에 들어야 함, 자바스크립트 / 리액트 / 노드까지 들을 생각이라면 웹개발 패스를 끊는 것을 추천(그것도 1년 제한 ㅠ) 하지만 돈 안아깝다.
코딩적 사고 방식이나 자바스크립트 문법에 대해 익숙하지 않은 사람들에겐 숙제가 버거울 수 있음.
하지만 개발을 할려면 혼자서 해결해야하는 능력을 키워야하니 열심히 해봅시다.
질문 피드백은 빠르나 목소리 처럼 느슨하신 스타일이셔서 질문에 대한 답이 되게 단답이고 상세하지 않음.
질문에 질문에 질문을 하는 과정이 좀 번거로울 순 있으나, 이것도 처음부터 모든 정답을 알려주면 문제 해결 능력을 키울 수 없으니
나름의 교육 철학이라 생각하며 코딩애플님이 던져주신 힌트를 통해 나만의 정답을 찾는 것이 중요함.
자바스크립트의 심오한 작동 원리며 이런걸 알려주시진 않음! 개발에 익숙치 않은 초보자들을 상대로 강의 하는 것이기 때문에 딥하지 않은 정도로 설명해주심.
심오한 원리까지 이해하며 공부하고싶으면 자바스크립트 Deep Dive 책이 더 나을 것 같다.
나에겐 오히려 깊지 않은 적당한 수준으로 알려주셔서 자바스크립트의 거부감을 많이 없앨 수 있었음!
https://codingapple.com/course/javascript-jquery-ui/
JavaScript 입문과 웹 UI개발 - 코딩애플 온라인 강좌
Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 다른거 필요없이 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때
codingapple.com
https://codingapple.com/course/javascript-es6/
쉽게 이해하는 JavaScript 객체지향 & ES6 신문법 - 코딩애플 온라인 강좌
Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 다른거 필요없이 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때
codingapple.com
3-3. React.js
[코딩애플] REACT 리액트 기초부터 쇼핑몰 프로젝트까지!(코딩애플) 유료
■ 장점: ㅠㅠㅠ 코딩애플님 바이럴 아니고 내가 진짜 돈 내고 들어도 후회 안해서 추천한다..
코딩애플님 이 글 보시면 저 Next.js 강의 목 빠지게 기다리고 있는 수강생이자.. 패스를 두번이나 끊은 수강생이 열심히 홍보중이니까 무료 수강권좀 주시면 안될깝쇼,,,?(굽신
나라면 어디 공식문서 읽어주는 지루한 리액트 강의 들을 바에야, 코딩애플님 강의 들으라고 하고 싶다.
나도 리액트 강의 무료/유료 다 들어봤지만 내가 생각하기에
누군가 "리액트 문법을 보는 눈을 키워 토이프로젝트를 할 수 있었던 강의는 무엇이냐" 묻는다면
주저없이 코딩애플님 강의라고 말할 것이다. 그만큼 좋다.
깔끔하고 귀에 쏙쏙 박히는 설명 덕분에 나같은 바보도 취업을 했다 ㅠㅠ..
리액트 문법 / Hooks / 리덕스 툴킷 / 프로젝트 깃헙 페이지 배포 방법 등 모든 것을 코딩애플님께 전수 받았다.
■ 단점: 단점은 아까 JS 강의 편에서 다 말햇슴!
https://codingapple.com/course/react-basic/
React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌
Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 다른거 필요없이 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때
codingapple.com
[유튜브] React Hooks에 취한다 - 리액트 훅스 쉽게 마스터하기 (별코딩) 무료
■ 장점: 리액트 문법에 어느정도 익숙해지고 나면 Hooks가 얼마나 중요한지 깨닫게 될 것이다.
그럴 때 Hooks 강의만 따로 듣고 싶다면 근본 좌 별코딩님의 강의를 들으면 된다. 심지어 무료이고
강의 목소리 톤도 좋으시고 쉬운 예제를 갖고 리액트 훅을 설명해주시기 때문에 댓글에 사랑합니다. 하트하트를 남발하게 된다.
진심 별코딩님 사랑해요.. ❤️
신입 주니어 개발자들에게도 거의 필수인 강의인데 무료이기 까지 하니까 꼭! 꼭! 제발 들어주세요!!!
■ 단점: 무료 강의에 리액트 훅스만 에센셜로 뽑아 놓은 강의이다. 감히 어디 불평을 하는가!
https://youtube.com/playlist?list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO
React Hooks에 취한다 - 리액트 훅스 쉽게 마스터하기
www.youtube.com
[유데미] 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript (Maximilian Schwarzmüller / 웅진씽크빅 글로벌) 유료
■ 장점: 위에 추천한 강의들의 가격이 너무 부담스럽다면 유데미 타임세일을 노려보자.
보통 12,000원 ~ 15,000원 사이로 개발 강의들을 종종 세일 하니까. 세일 할 때 줍줍해서 듣도록 하자.
나도 이 강의를 최근에 사게 되었는데, 공식문서 기준으로 되게 세세하게 알려준다.
리액트 뿐만 아니라 리덕스 / Next.js / TypeScript 까지 포함되어 있는 강의를 할인가 15,000원에 구매해서 필요한 부분만 듣고 있다.
■ 단점: 세세하다 못해 강의의 수가 너무 많다,, 시간이 많으면 다 듣고 이해하겠지만 그러지 못해서 아쉽다.
한글자막이 있긴하지만 개발자가 번역을 한게 아니다보니 자막이 좀 어색할 때도 있다.
https://www.udemy.com/course/best-react/
3-4. TypeScript
[유튜브] TypeScript 강좌(코딩앙마) 무료
■ 장점: 킹갓코딩앙마님이시다. 타입스크립트 강의마저 무료다. 근데 딱 필요한 부분만 알려주신다. 그 이상도 그이하도 필요없다.
유료 강의도 들어봤지만 듣다가 너무 지루하고 재미 없고 잔설명이 많아서 돌고돌아 코딩앙마님걸로 듣게 된다.
■ 단점: 리액트 + 타입스크립트 연계 강의가 없는게 좀 아쉽지만. 실무에 개념만 아는 상태로 들어가서 실제 프로젝트에 적용하며 익혀도 된다고 본다.
https://youtube.com/playlist?list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0
TypeScript 강좌
www.youtube.com
원래 이거 말고 내가 했던 공부 방법 / 취업 준비 등등 작성하려고 했는데,,
프로젝트 때문에 너무 바빠서 이 글만 일주일 째 쓰고있다,, 너무 힘들어서 ㅠㅠ 이정도로 마무리 하고
다음편에 내가 했던 공부 방법 / 멘탈 관리 / 취업준비(이력서) / 왜 프론트엔드가 아닌 개블리셔를 준비했는 지 등 적어보려고 한다.
(물론 아무도 안 궁금하겠지만 🥹)
혹시나 이 글 읽고 궁금한 점이 생기셨다면 댓글로 남겨 주세요 ~~ 다음편 가져올 때 함께 적을 수 있는 내용들은 포함해서 오겠습니닷!
'Devlog' 카테고리의 다른 글
| [회고록] 1년차 2023 주니어 개발자 회고록 (13) | 2023.12.31 |
|---|---|
| [내돈내산] Next.js 강의 추천 -12버전부터 실무까지- (이정환님/하조은님/조현영님) (0) | 2023.12.14 |
| [취업후기] 비전공자 웹퍼블리셔 독학으로 프론트엔드 개발자 준비 2편(공부 방법 / 포트폴리오 / 이력서 / 면접 ) (55) | 2023.04.16 |
| [회고록] 2022년 웹퍼블리셔 회고록 (0) | 2023.01.02 |
