웹 프론트엔드 기술이 활용되는 서비스 범위가 넓어지고 기술이 다양해지고 복잡해진다.
서비스와 제품의 기술적 요구사항도 많아진다.
1. 현장 이해하고 대응하기
→ 결론이자 가장 중요한 것이다.
현장 세 가지 특징
함께 일하기
분석, 개발, 테스트, 배포, 피드백, 개선
제품과 서비스의 지속적인 운영
프로덕트를 만들고 끊임없이 유지하는 것이 대표적인 특징
발생하는 문제들
1.
커뮤니케이션 어려움
2.
일의 순서 정리
3.
다양한 제약
4.
품질과 일정(공존 어려움)
5.
형상 관리
6.
테스팅(품질)
채용 공고를 보면 원하는 기술이 많고 복잡하다.
대응법
연습은 실전처럼
기초 연습 → 미니 프로젝 → 좀더 큰 프로젝 → 같이 할 수 있는 프로젝
현장이 원하는 인재는 경력 같은 주니어
문제 해결 능력 향상
•
다양한 방법으로 해결하고 회고
•
디버깅(에러 메시지)
•
페어 프로그래밍
2. 프로젝트를 통한 js 익히기
js 익히는 게 가장 중요하다.
책과 프로젝트 병행, 중심은 프로젝트(prototype, closure, let,,,)
면접에서 이론을 묻는 것은 기초 지식을 알고 대응하는지 확인하기 위해서
3. 향상된 UX를 목표로 개발하기
사용자와의 접점.
완벽한 코드보다 사용성 향상이 중요하다.(성능, 매끄러움,,)
사용자가 쓰기에 불편함이 없는 인터랙션 개발(애니메이션, 좀더 빠르고 직관적인 UX 고민, 개선)
CSS3, DOM, Event, Animation 제어, 비동기에 대한 이해, 디바운스와 쓰로틀
4. 함께 자라기
함께 익히고 함께 고민하고 만들어간다.
일단 해보고 피드백을 받는 게 중요하다.
피곤해도 함께 맞춰본다.
업무 분석해 github issue/project로 job을 만들어서 관리하기
PR 보내기, 코드리뷰하기, git branch 전략 세우기
커뮤니티를 통해 해라.
협업도구 슬랙과 트렐로
5. 기초는 튼튼하게
1. 자료구조와 알고리즘
채용을 위해 반드시 필요
문제를 다양한 방법으로 풀고, 효율성을 고려하는 능력
꾸준히 연습하고 지속가능해야 한다.
실전처럼
•
시간 재기
•
쉬운 문제 많이 풀기
•
같은 문제 다시 풀기
•
다른 사람 코드 보기
2. 네트워크
HTTP(TCP, IP,,,)
크롬 개발자 도구의 Network 탭 항목을 모두 알아야 한다.
추천 도서 : HTTP 완벽 가이드, 그림으로 보는 HTTP & Network Basic
개발하며 용어 공부
네트워크 웹 보안(XSS, CSRF, OWASP)
3. 백엔드
우리가 어떤 일을 할지 모른다. SSR을 위한 서버를 운영해야 한다면?
Node.js 중심으로 웹 애플리케이션 서버와 연동하기(로그인 HTTP 요청 보내고 서버에서 어떻게 받는지, 응답은 어떻게 하는지에 대한 이해)
DB, OS, 클라우드(AWS)
프론트엔드 개발자보다는 좋은 프로그래머로 성장하는 것이 핵심이므로
6. HTML, CSS에서 FE 엔지니어로
Component 기반(SPA)이 표준
HTML, CSS, JS를 같이 개발해야 한다.
React만으로 안된다. 가장 중요한 건 바닐라 자바스크립트다.
꾸미는 것을 좋아하지 않는 분은 FE 개발자가 좋지 않다.
프로그래밍 사고를 늘리기가 최우선이다.
•
js 책만 보지 말고 만들어보기
•
조건, 반복, 함수를 활용한 호출 관계, 모듈을 만드는 방법 등
•
알고리즘 문제, 쉬운 문제를 많이 그리고 꾸준히 연습
•
프로그래밍 연습
7. 프론트.. 원래 이럼?
프론트엔드 로드맵.
다 잘하기 어렵기 때문에 질이 중요하다.(공부하다 모르는 문제를 얼마나 깊게 파고 들었나)
내가 하고 있는 분야를 깊게 파고 있는가?
•
피드백 받고 개선
•
리팩토링 시도 및 실험
•
좀더 사용성을 높이기 위한 방법 시도
•
내가 얻은 코드를 공유하고 노하우를 알리거나 오픈소스화했는가?
8. React, Vue, Angular 익히기
React, Vue, Angular 같은 프레임워크는 추상화되어 편리한데 internal logic(내부 논리)을 알기 어렵다.
모두 다 할 필요는 없다. 바닐라로 훈련이 충분히 된 상태에서 접근하는 것이 좋다.
이미 프레임워크를 다루었다면 바닐라로 프레임워크 흉내내보기
하나만 깊이 있게 하는 것이 중요하다.
특정 프레임워크 비의존적인 부분에 대한 학습이 중요하다.
•
각 프레임워크의 동작 방식
•
렌더링 원리
•
상태 관리
•
모듈 관리
•
성능에 유리한 코딩방식
9. 내가 선택한 길이 맞을까?
열심히, 즐겁게 하면 된다.
나를 믿고 전진
왔다갔다 안하기
피드백 받을 방법 찾기
다양한 멘토와 코드 리뷰
10. 나를 알아봅시다.
이력서 써보기
면접 기회 얻기(피드백 받기)
면접 스터디
좋은 회사 알아보는 팁
채용공고
이전 공고
사내 문화
면접 분위기(질문의 질)
