프론트엔드 개발을 하려면 뭐부터 공부해야 될까? 생존형 FE 개발자가 알려주는 React 강의 추천+협업,포폴 필수스킬 피그마 강의 ft.유데미

 

 

시작하며

 

- Swift 개발하다가 갑자기 프론트엔드 개발하게 된 이유

 
시간을 거슬러 보겠습니다. 제작년 이맘 때 저는 Swift에 푹 빠져서 공부하고 있었습니다. 

제 지난 글들을 보셨다면 아마 아실거에요. 

1편 - iOS 앱을 2개 출시하고 나서 돌아본 10개월간의 iOS 개발 공부 방법(2022) - 독학, 개인프로젝트,

공부 10개월을 하고 현업에서 작년 초부터 일해서 Swift 함께한 지는 이제 3년이 되어갑니다.

그 사이 제 개인 iOS 앱과 아이메시지앱도 이렇게 냈었죠.

다시 저의 커리어 얘기로 조금 돌아보자면요.
 
저는 2023년 초에 한 AI 솔루션 회사에 입사해서 1년 이상 Swift로 AI 영상편집을 하는 macOS앱 개발을 해왔는데요 


회사에서 해당 프로덕트 개발이 접히게 됐어요. 여차저차 7월 중순부터 프론트엔드팀으로 가게 됐습니다. 😂


 
물론 Swift가 JS와 유사하고, 제가 과거에 디자이너로 일했을 때 HTML, CSS, Javascript를 이용해 퍼블리싱도 함께 했었지만, React는 완전 처음이어서 사실 걱정부터 앞섰습니다. 

- 그래서 FE 업무에 적응하려고 저는... 

 
솔직히 개발자로 일한지 겨우 2년차인데 갑자기 기술스택이 바뀌게 되어서 엄청 허둥지둥했습니다.

팀 바뀌고 한달 동안은 자잘한 이슈를 처리하면서 공부에 집중했어요.

잊었던 JS를 다시 떠올리기 위해서 책도 구매해서 읽어봤구요.

 
특히 React 공식문서에 나온 튜토리얼을 위주로 따라해보기도 했습니다. 
 

 그런데 공식문서로 기본 개념을 열심히 익혔지만요. 현업의 프로덕션 코드를 보다보면 이것만으론 부족하더라고요.


회사에서도 여러 다양한 이슈들을 처리해가면서, 스스로 부족한 부분들은 열심히 LLM을 뒤져가며 해왔는데요. 
 
많은 사람들이 거쳐간, 오래된 프로덕션 코드를 보면서 공부를 하다보니 이게 개발팀이 콘센서스한 컨벤션인지, 개발자 개인의 의도인건지, 혹은 성능적으로 좋아서 리액트 개발에 유행처럼 쓰이는건지, 잘 알 수 없이 혼란스러운 때가 많았고요. 

또한 어마어마한 크기의 파일들, 복잡한 플로우... 가끔은 좀 너무 머리에 안 들어오기도 해서, 좀 더 내 FE 개발에 레벨업이 많이 필요하구나, 싶었습니다.

 
그래서 React 강의를 찾다가, 제가 처음에 Swift와 Unity, 그리고 현재는 플러터도 공부하던 유데미에서 해답을 찾게 됩니다. 
 

- 그래서 유데미, 결론은 유데미였습니다

 

저의 1000분 기록, 이렇게 의미있는 성취지표도 메일로 알려주니 동기부여가 잘 됩니다!

유데미홈

https://bit.ly/4fubjLe

저는 사실 아주 예전에 MOOC(온라인 오픈형 학습 사이트) 에 대해서 처음 얘기가 나올 때쯤부터 유데미를 알게 되었습니다. 
 
아무래도 가격도 합리적이어서, 특히 사회초년생일 때 감사한 마음으로 유데미 강의들을 종종 보았는데요. 
 
특히나 전 분야에서 다양하게 망라하는 콘텐츠가 끊임없이 업데이트 되고 있습니다. 

게다가 이번에 보유강의 수가 기존 21만개에서 무려 25만개로 늘었어요! 어마어마하죠.


 
특히나 강사분들의 뛰어난 전문성은 입이 닳도록 언급해도 아깝지 않죠. 

저는 Angela Yu를 통해서 Swift와 Flutter 강의도 입문했었고요. 이후에 UMC 활동을 하면서 컴공선배의 Swift 강의도 유데미에서 봤었는데, 앱개발은 많이 찾아봐서 알고있는데 React는 누구의 강의를 들으면 좋을지 고민이 되더라고요.
 
열심히 React 강의를 찾아봤는데, 이 분을 적극 추천하는 글들이 많아서, 아래에 설명드릴 이 강의로 결정하게 됐어요. 
 

인터넷 커뮤니티 디씨의 추천글

네이버블로그 HelloWorld님의 추천글

 
 
특히나 유데미 프로모션으로 더욱 더 저렴한 가격, 최저가 12,000원에 강의들을 만나볼 수 있어서 적극 추천하고 싶습니다. 


 

---

요즘 제가  빠져있는 React 강의 소개

위에도 언급했지만 제가 FE 개발자로 잘 성장하기 위해, 푹 빠져 보고 있는 리액트 강의는 바로 유데미에서 Andrei 님의 강의입니다.

Complete React Developer (w/ Redux, Hooks, GraphQL)

https://bit.ly/3UFTsc4


추천하는 내용이 여러 커뮤니티에 보여서 찾아 들어갔는데 제게 필요한 내용들 +그 이상이 마련되어 있었습니다.

강의구성이 정말 꼼꼼했어요!

리액트 기본, 라우터, 리덕스, 훅과 같이 리액트를 쓰면서 필요한 기본 내용들을 탄탄하게 짚어주고요.

프로덕트에 많이 쓰이는 다른 API 들도 함께 강의와 실습이 준비되어있어요.

유명한 결제 API로 Stripe, 많이 서버리스로 사용하는 Firebase, 외에도 스타일드 컴포넌트, GraphQL, Apollo, Jest를 이용한 테스트, 디자인 패턴 등 주니어를 넘어 시니어 프론트엔드 개발자가 되기 위한 징검다리들이 눈 앞에 하나씩 있는 느낌이었어요.

+ 게다가 한국어 자막까지 있으니 너무너무 좋은거 있죠! 아무리 영어가 필수라지만 모국어로 공부하는 거랑  제2언어로 공부하는 거랑 속도차이가 당연히 있잖아요.

React 강의구성이 실제 FE 개발 취준, 이직에 실제로 도움이 될까요?

미국에 FAANG이 있다면, 우리나라 개발자들에게 높은 선호도의 개발회사들은, 많이들 아시겠죠. 네카라쿠배당토, 여기에 몰두센까지.

이 중에서 가장 기술 유연성이 좋고 신기술을 잘 활용한다는 얘기가 들리는 당근마켓 프론트엔드 개발 상시 채용공고를 보면요.

당근 프론트엔드코어팀 채용공고

React에서 GraphQL이 기술스택이고, Redux와 같은 상태관리도구 사용경험이 필수로 표시돼죠.

또 토스의 프론트엔드 챕터의 기술문화를 정리해둔 문서를 확인하면요.

React와 Next.js 의 중요도가 높은 것을 확인할 수 있어요.

Andrei 강의 구성에 모두 포함된 내용이니, 차근차근 함께 따라가보면 네카라쿠배당토 취준이 두렵지 않을 것 같습니다.

해당강의를 통해 실무에서 어떤 도움을 얻었는지 실 후기!

저는 사실 강의 대부분 내용에서 제가 놓쳤던 디테일 및 새로 알게 된 내용들이 많아서 다 도움이 되었는데요.

그래도 꼽자면, 옵저버 패턴이랑 리듀서에 대해서 간단히 제가 공부한 메모를 토대로 얘기드리고 싶어요.

첫째로 옵저버 패턴입니다.

옵저버 패턴은 하나의 객체에 상태가 바뀌게 되면 그 객체에 의존하고 있는 다른 객체들이 자동으로 갱신되는 패턴인데요.

사실 rx에 대해서 알고있어서 이미 옵저버 패턴에 대해서는 알고있었지만 useEffect 와 같은 훅을 이용한다든지, 전반적으로 어떻게 구현하는지를 잘 이해 못하고 있어서 크게 도움이 됐어요.

리액트에서의 옵저버 패턴은 대부분 아래 흐름을 보여줍니다.

1. Subject의 상태가 변경되면,
2. React가 자동으로 모든 옵저버 컴포넌트들에게 새로운 값을 전달하고,
3. 각 옵저버들은 새로운 값을 받아 화면을 업데이트합니다

여기서 useEffect는 상태변경을 감지하고 반응합니다.


전통적인 옵저버 패턴과 비교하면, React의 방식이 더 선언적이고 관리하기 쉽게 느껴졌어요.

rx처럼 명시적인 구독 및 해지 과정이 필요 없고(해지를 안하면 메모리가 새거든요ㅜ) React의 virtual DOM이 효율적으로 업데이트를 처리한다는 걸 이해할 수 있어 좋았습니다.

프로덕션에서 사용된 훅에 대해서 더 잘 이해할 수 있어서 좋았어요.

두번째로는 리듀서인데요.

리듀서는 복잡한 상태 로직이나 연관된 상태를 한 곳에 모아서 중앙으로 처리할 수 있는 로직입니다.

출처: 야무의 React 러닝 가이드

action, reducer, dispatch의 흐름을 여러 파트로 나누어서 실습을 따라가다보면 리듀서에 대한 이해가 한층 높아질 수 있었습니다.

FE 개발자 협업 필수& 혼자 포트폴리오 만들 때 필요한 스킬: Figma 피그마

사실 React 강의 말고도 많은 다양한 강의가 있지만 FE 개발자에게 꼭 하나 더 추천하자면 저는 피그마 강의를 추천하고 싶어요.

【한글자막】 피그마를 활용한 UI/UX 디자인: 프로젝트와 함께 웹 & 앱 디자인해보기 (2024)

https://bit.ly/4fDMOLE

현재 프로모션 중이라 평소보다 더욱 저렴한 가격으로 만나볼 수 있는데요.

먼저 강의 구성을 살펴보자면요.

기본적인 피그마의 사용방법부터, UX를 포함한 디자인 및 색채 이론, 디자인 시스템, 디자인 패턴까지 다루고 있습니다.

이 중에서 저는 프론트엔드 개발자가 익히면 더욱 좋을 내용들은, 사용성 휴리스틱에 대한 인터랙션 이론과 피그마의 오토레이아웃을 포함한 기초 사용법들입니다.

프론트엔드 개발에서 당연히 사용자 경험에 대한 이론적 지식은 꼭 필수적인 부분이라고 생각이 들어요.

논란이 있을 순 있습니다. 개발자들도 많이 사용하는 커뮤니티 레딧에서도, 프론트엔드 개발자가 UI/UX 디자인 지식을 아는 게 얼마나 중요한지 묻는 질문에 어떤 사람은 '죽어도 디자인은 못하겠다. 디자인 작업은 (다른 사람을 통해) 피그마로 받고있다.'고 얘기하고 공감을 14표를 받았습니다.

물론 피그마로 바닥부터 디자인 할 수 있다면 좋겠지만, 그래도 피그마를 알고 UX를 안다면 더 좋은 개발, 협업을 할 수 있으리라고 생각되는 경험들을 저는 겪어봤어요.


저는 개발자가 되기 전엔 UI/UX 디자인을 했는데요.
처음 피그마가 나오던 시절부터 했으니 한 5년 이상은 피그마를 다루고 있고, 개발자로서도 디자이너로부터 공유받은 피그마 파일에 들어가 디자인을 확인하고 디자이너와 커뮤니케이션하고 작업하는데요.

제가 같은 개발팀분들과도 얘기하면서, 그리고 저 자신이 가장 느꼈던 건, 프론트엔드 개발자가 피그마를 할 줄 알아야 더 나은 협업이 가능하다는 거였어요.

피그마의 데브모드 / 출처: 피그마 공식홈페이지

개발자를 위한 데브 모드가 있으니, 굳이 따로 피그마를 해야되나? 하고 생각하실 수도 있는데요.

디자이너마다 어떠한 컴포넌트를 표현하는 방식이 다른데, 프레임 안에 계속 프레임이 중첩되어 있거나 컴포넌트 상태가 별도로 있다면 그걸 개발자들이 못 찾는 경우가 되게 많아서 디자이너에게 계속해서 물어보거나, 혹은 디자이너가 부재중이면 주변 동료들에게 물어보는 경우도 많았습니다.

피그마의 중첩된 프레임 모습 / 출처: 피그마 공식 홈페이지

간단하게 프레임과 객체 구조를 이해한다면 클릭 몇 번으로 도달할 수도 있고, 디자이너가 짜놓은 세부적인 디테일을 더 잘 살려서 구현할 수 있을겁니다.

그리고!

요즘 본인만의 포트폴리오, 개발에 대한 디자인을 누군가에게 맡기기 어렵다면, 피그마로 본인이 디자인하거나 방대한 피그마 커뮤니티에서 다른 사람들이 만든 좋은 디자인을 가져와 본인의 스타일로 고쳐 사용할 수 있다면 훨씬 더 좋은 포트폴리오를 만들 수 있어요!

저는 심지어 PDF로 작업물을 정리한 슬라이드와 사내 기술세션 발표자료도 모두 피그마로 만들었고요!

발표자료를 피그마로 만든 모습

피그마로 디자인한 개인 포트폴리오 앱

직접 만든 것도 있지만 피그마 커뮤니티에서 무료 디자인을 따오거나 모티브를 가져온 경우도 많아요.

그러니 꼭! 피그마를 익히셔서 이 풍성한 기능들과 또 기회를 누리셨음 합니다.

---

유데미 프로모션 소개 

여태까지 프론트엔드 개발자에게 꼭 필요하다고 생각되는 강의를 소개했는데요.

사실 제가 이렇게 열심히 지금 추천하는 이유는 바로바로 유데미 프로모션 때문입니다!

https://bit.ly/4fubjLe

강의 최저가가 무려 12,000원!

치킨보다 싸고요. 브랜드 커피 3잔보다도 저렴합니다.

이렇게 저렴한 가격으로 다양한 강의를 만나볼 수 있다니 이 기회 꼭 놓치지 않으셨음 해요!

2024년 마지막 프로모션이니까요!

저도 장바구니에 넣어둔 강의들, 이번 기회에 결제하려고요 😚

킴디의 유데미 200% 활용방법!

저는 주로 아이패드와 PC를 병행해서 유데미를 학습하는 편이고요. 가끔 간단하게 보고싶은 강의들은 이동중에 휴대폰 앱으로도 시청하곤 해요!

- 스마트폰 앱으로 유데미 시청하기

플레이스토어, 앱스토어에서 유데미를 다운로드하면 앱에서 편리하게 시청하고, 메모할 수 있어요!

이렇게 강의영상 리스트를 클릭해서 시청하고요.

영상을 보다가 메모가 필요한 부분은 강의 왼쪽 하단에 연필 아이콘을 클릭해 메모하고, 메모한 내용은 이렇게 따로 모아볼 수 있어서 간단히 공부하기 좋아요!

저는 이렇게 봤던 아이메시지앱 강의 꼭지를 보고, 저만의 인사이트를 더해서 제 아이메시지앱도 등록하고 이렇게 포스팅도 작성했었어요.

[iOS] iMessage 스티커팩 만들기 (+ 손쉽게 만들 수 있는 피그마 템플릿 무료제공!)

스마트폰이어서 오히려 더 부담없이 공부할 수 있고,앱에서 메모하기가 잘 되어있어서 나중에 PC에서 공부하거나 다시 공부할 때 찾아보기가 좋았습니다!

- 아이패드로 유데미 보며 공부하기

 
저는 이론이나 개념적인 부분들이 나오면 꼭 노트테이킹을 하면서 정리하고 싶더라고요.

아이패드는 스플릿뷰가 지원되니까 왼쪽에는 강의 틀어놓고 오른쪽은 굿노트 띄워놓고 공부하면 그게 또 좋더라고요.
 
이번에 소개했던 피그마강의에서 UX에 대한 이론들도 심도있게 다뤄주고 있거든요. 

그래서 저도, 특히 개발자로서 유념해야 될 부분을 신경쓰면서 굿노트로 필기하며 시청하고 있습니다. 
 

- PC에서 유데미 강의보며 익히고 공부하기

만약 코드를 쳐야되거나 피그마와 같이 직접 실습이 필요하다면 아무래도 PC에서 들으면서 함께 실습하는 게 제일 좋겠죠!



그 외에도,

궁금한 내용이나 의문이 드는 점은 강의 질의응답에 달면 강의하시는 분이 달아주거나, 같이 공부하는 다른 유데미 수업 메이트들이 댓글로 답을 알려주어서 PL(Peer-Learning)이 되기도 합니다.

저 외에도 다양한 분들이 커뮤니티 댓글 남긴 부분을 참고할 수 있습니다.
 

왜 유데미인지

https://bit.ly/4fubjLe


그래서 유데미를 선택해야 되는 이유는 너무나 자명합니다.

1. 합리적인 가격 (프로모션 기간엔 무려 최저 12,000원까지)
2. 전세계의 각 업계 전문가들이 만든 유수의 강의들
3. 비교할 수 없는 엄청난 수의 콘텐츠, 무려 25만개의 강의
4. 유명 강의들에는 한국어 자막까지!

물론 국내의 유명한 분들이 올린 한국어 강의들도 많지만요. 전세계 전문가들의 강의를 통해서 글로벌 스탠다드를 알게되고 익히는 데에 있어서 유데미가 좋은 터를 마련해주고 있다 생각듭니다.
 

---

 
오늘도 읽어주셔서 감사합니다. 
올해 2024년 유데미의 마지막 프로모션 기회 꼭 놓치지 말고요!

https://bit.ly/4fubjLe

저희 더욱 더 성장하고 나아가는 개발자가 되도록 함께 힘내요! 
 

정보가 유용하셨다면 공감과 댓글은 큰 힘이 됩니다. 감사합니다.
 

본 게시물은 브랜드의 유료 광고가 포함되어 있습니다.