7월 우아한테크세미나 윤지수님의 "2020년에 프론트엔드개발자가 되기위한 10가지 방법"

1. 코드스쿼드 윤지수
2020.07.15
2020년에
FE개발자가 되기 위한 10가지 방법

2. 주의
코드 없음
라떼~ 모드 가득

3. • 웹프론트엔드 기술이 활용되는 서비스 범위가 매우 넓어짐
• 비대면사회 😭
• 웹의 기술 역시 다양하고 복잡하게 발전 중
• 서비스와 제품의 기술적 요구사항도 다양해지는 중
세상은…

4. ‘웹은 계속 발전중이군 🧐’
이제 우리가 어떻게 대응할 것인가?
10가지로 알아볼게요

5. 1. 현장 이해하고
대응하기

6. 세가지 특징
함께 일하기
분석, 개발,
테스트, 배포,
피드백, 개선
제품과서비스의
지속적인 운영

7. 여기서 발생하는 문제들
커뮤니케이션
의 어려움
일의 순서 정리
다양한
제약사항
품질과 일정 형상관리
테스팅의
어려움

8. 채용공고…
뭐가 엄청 복잡하고 많다..
자격요건
• 웹 프론트엔드 개발 경력 2년 이상
• HTML(웹표준), CSS, Javascript 에 대한 깊은 기술적 이해
• React 및 Angular와 같은 프레임워크를 통한 개발 경험
• TypeScript, RxJS 사용 경험
• IE 대응 등 크로스 브라우징 업무 경험
우대사항
• AWS 환경에서 운영을 위한 서비스 빌드 및 배포 경험
• Next.js 를 이용한 SSR 개발 경험 및 서버 사이드 이해
• Webpack, Babel, Gulp 등을 이용한 빌드 배포 도구 제작 경험
• 소프트웨어 엔지니어링에 대한 기본 지식
• MVC, Flux 및 각종 디자인 패턴에 대하여 학습하거나 응용해 본 경험
• 포트폴리오를 이용하여 본인 개발 이력을 어필할 수 있는 분
• 더 나은 소프트웨어 개발을 위하여 기술 습득을 꾸준히 할 수 있는 분
• 새로운 기술을 익히는데 재미를 느끼고 거부감이 없는 분
• 디자이너, 기획자 및 백엔드 같은 타 부서와 업무적 소통이 원활한 분
• 동료들간의 업무적 피드백이 활발한 분

9. 우리의 대응!
연습은 실전처럼!
• 기초 프로그래밍 연습 -> 미니 프로젝트 -> 좀더 큰 프로젝트 -> 같이 할 수 있는 프로젝트
• 프로젝트를 하면서 모르는 부분을 찾아보자.
•인턴경험, 알바 경험 등등
• 경력같은 주니어?
문제 해결 능력 향상
• 다양한 방법으로 문제를 해결하고, 회고하고.
• 디버깅 잘 이해하기.
• 다른사람의 방법도 배우고(페어프로그래밍 등)

10. 2. 프로젝트를 통해서
JS익히기

11. • JavaScript익히는 것이 가장 중요
• 책과 프로젝트의 거리감 줄이기
• 프로젝트를 하면서 언어 책을 함께 공부하자
• 이런게 prototype이구나
• closure를 활용해서 이렇게 구현할 수 있구나,
• let, const의 차이가 이거구만!
• 면접에서 이론을 묻는 이유는?
• 기초지식을 충분히 알고 대응하는 개발자인지
JS 공부하는법

12. 3. 향상된 UX를 목표로 개발하기
https://roar-software.com/wp-content/uploads/2019/07/mobile-july-2000x1000.jpg

13. 향상된 UX를 목표로 개발하기
• FE 개발자는 사용자와 접점이 된다.
• FE 개발자의 많은 시간은 완벽한 코드보다, 사용성 향상작업(성능, 매끄러움 등)
• 사용자가 쓰기에 불편함이 없는 인터랙션 개발.
• 애니메이션
• 좀더 빠르고 좀더 직관적인 UX 고민, 개선
• CSS3, DOM, Event, Animation 제어, 비동기에 대한 이해

14. 4. 함께 자라기

15. 함께 자라기
• 현업은 함께 익히고 함께 고민하고 함께 만들어 간다.
• 그런데 난 프로젝트를 할 수준은 아닌데 ? 😢
•함께 학습하기.
•간단한 프로젝트 함께 만들어보기.
•피드백
•피곤하지만 함께 맞춰보기
•업무를 분석하고 github issue/project로 일감 만들어서 관리하기
•PR 보내기
•코드리뷰 하기
•git branch 전략세워보기
•주변에 사람이 없다고?
• 커뮤니티를 활용해서 사람들과 함께하기

16. 5. 기초는 튼튼하게

17. 기초에서
좀더 중요한 것들은?
자료구조와 알고리즘
• 채용단계를 뚫기 위해서는 반드시 필요
• 문제를 좀더 다양한 방법으로 풀 수 있고, 효율성을 고려하면서 구현할 수
있음
• 연습은 실전처럼
• 시간 재기
• 쉬운 문제 많이 풀어보기
• 같은 문제 다시 풀어보기
• 다른 사람 코드 보기

18. 네트워크
• 웹개발은 클라이언트와 서버간의 커뮤니케이션.
• HTTP를 중심으로 공부하자. 개발자도구의 네트워크 탭을 다 이해해보자.
• HTTP관련 책은 재미도 없고 방대하다. 개발하면서 알게 되는 용어를 찾
아서 공부하기
백엔드 접해보기
• 우리가 어떤 일을 어떻게 접할지 모름
• SSR을 위한 서버를 운영해야 한다면?
• Node.js를 중심으로 웹애플리케이션 서버와 연동해보기
• Database, OS, 클라우드(AWS) 등의 지식.
기초에서
좀더 중요한 것들은?

19. 6. HTML, CSS에서
FE엔지니어로!
https://www.1training.org/wp-content/uploads/2017/10/6.png

20. • Component 기반 개발이 표준이 된 세상
• HTML,CSS,JS를 따로 개발하기보다 함께 개발해야 하는 시대
• React,Vue를 할 줄 안다고 FE개발자가 되기 어렵다.
• 바닐라 프로그래밍이 먼저…
• HTML CSS는 프로그래밍 언어지만
알고리즘이나 프로그래밍 사고가 많이 필요하지는 않다.
• 프로그래밍 사고 늘리기가 최우선 ‼
• JS책만 보지 말고, 무언가 만들어보기.
• 조건,반복,함수를 활용한 호출관계, 모듈을 만드는 방법 등
• 알고리즘 문제, 쉬운문제를 많이 그리고 꾸준히 푸는 연습이 필요
• 자바스크립트 프로그래밍 연습
HTML, CSS에서
FE엔지니어로!
점프하는 방법

21. 7. 프론트..원래 이럼?

22. • 로드맵? 그거 다 하다가 10년 지남
• 주니어는 다 아는가?가 아니고 무언가를 찐~하게 대할 수 있는지가 더 중요
• 내가 하고 있는 분야를 깊게 파고 있는가?
• 웹 사이트를 꾸준히 만들고 피드백을 받으며 개선했나?
• 좀더 사용성을 올리기 위해서 다양한 방법을 찾아보고 시도했는가?
• 좀더 나은 코드품질을 위해서 다양한 리팩토링을 시도하고 실험했는가?
• 내가 얻어낸 코드를 공유하고, 노하우를 알리거나, 오픈소스화 했는가
양 < 질

23. 8. React,
Vue,
Angular
익히기

24. 겉 보다는 속
• 모두 다 할 필요는 없음
• 바닐라로 훈련이 충분이 된 상태에서 접근
• 이미 프레임워크를 다루었다면 바닐라로 프레임워크 흉내내보기
• 관련된 Tools & Library 다 경험한 필요 없음
• 특정 프레임워크 비의존적인 부분에 대한 학습
• 각 프레임워크의 동작 방식
• 렌더링 원리
• 상태 관리
• 모듈 관리
• 성능에 유리한 코딩방식

25. 9. 내가 선택한 길이 맞을까? 🤔
• 열심히 그리고 즐겁게 개발하고 있다면? 틀린 길은 없음
• 나를 믿고 전진하기
• 이것저것 왔다갔다 안하기
• 피드백을 받을 수 있는 방법을 찾아보기
• 다양한 멘토와 코드리뷰
• 커뮤니티를 활용할 수도..

26. 10. 나를 알아봅시다
이력서 써보기
면접 기회 얻어보기

27. 10. 나를 알아봅시다
이력서 써보기
면접 기회 얻어보기
1. 현장 이해하고 대응하기
2. 프로젝트를 통해서 JS익히기
3. 향상된 UX를 목표로 개발하기
4. 함께 자라기(실전과 같은 팀 프로젝트)
5. 기초는 튼튼하게(네트워크, 자구알, 백엔드)
6. 프로그래밍 사고를 향상시켜 HTML,CSS에서 FE엔지니어로 발전하기
7. 프론트엔드 기술 양보다는 질
8. 프레임워크 겉보다는 속
9. 내가 선택한길, 나를 믿고 그리고 피드백 받으며 확신하기
10. 나를 알아보기 (이력서와 면접의 기회)
정리

28. 10. 나를 알아봅시다써놓고 보니 할 게 많네요 ㅠ.ㅠ
하지만,
프로그래밍 세계는 정직합니다.
우리 모두 열심히 코딩하고,
행복한 웹프론트엔드 개발자가 됩시다!
감사합니다~!