당신은 주제를 찾고 있습니까 “프론트 엔드 공부 – 웹 프론트엔드 개발자 아무것도 모르는 상태에서 취업까지 하는 구체적인 준비방법 | 프론트엔드 공부순서 | 취업준비 | 면접준비“? 다음 카테고리의 웹사이트 you.charoenmotorcycles.com 에서 귀하의 모든 질문에 답변해 드립니다: https://you.charoenmotorcycles.com/blog/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 라매개발자 이(가) 작성한 기사에는 조회수 99,768회 및 좋아요 4,220개 개의 좋아요가 있습니다.
프론트 엔드 공부 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 웹 프론트엔드 개발자 아무것도 모르는 상태에서 취업까지 하는 구체적인 준비방법 | 프론트엔드 공부순서 | 취업준비 | 면접준비 – 프론트 엔드 공부 주제에 대한 세부정보를 참조하세요
메일로 프론트엔드 개발자가 되기 위한 준비 방법에 대한 질문을 정말 많이 받았습니다.
프론트엔드 개발자가 되기 위한 방법들을 답변 드렸던 걸 정리해서 구체적으로 설명하는 영상입니다.
프론트엔드 공부순서 | 취업준비 | 면접준비
프론트 엔드 공부 주제에 대한 자세한 내용은 여기를 참조하세요.
[프론트엔드 개발자] – 공부 순서, 하는 일, 연봉, 전망 – B.Iog
웹 개발자/웹 프로그래머에 대해서 알아봤는데 이번에는 프론트엔드 개발자에 대해서 알아보겠다. 프론트엔드와 백엔드라는 용어가 있는데 이 둘은 …
Source: wkdus0608.tistory.com
Date Published: 12/15/2022
View: 5811
11.어떤공부를 해야할까 feat.채용공고, 프론트엔드 – 브런치
나도 처음에 프론트엔드 개발자로 취업했기 때문에 더 많은 부분을 다룰수있을것같다. 자격요건에 들어가있는 필수적인 공부를 먼저 해야하는데 더 혼란을 …
Source: brunch.co.kr
Date Published: 3/5/2022
View: 5622
프론트엔드란? 프론트엔드 공부방법. – 독일개발자초록이 – Tistory
오늘은 프론트엔드는 과연 무엇인지, 또한 어떠한 프로그래밍 언어를 사용하는지,. 어떠한 방법으로 공부를 시작하는 것이 좋은지 알아보겠습니다.
Source: ko-de-dev-green.tistory.com
Date Published: 4/20/2021
View: 7131
프론트엔드 개발자에게도 알고리즘 공부가 중요할까? – 요즘IT
즉 프론트엔드 개발 생태계에 어느 정도 익숙해진 후 알고리즘 공부를 시작해도 늦지 않다. 알고리즘 공부의 목적은 최소한의 알고리즘 지식과 자료구조를 …
Source: yozm.wishket.com
Date Published: 3/14/2022
View: 6795
2021 웹 프론트엔드 공부법 – 입문자편 <커리큘럼> – velog
초보자가 아니라 정말 입문용이기 때문에 개발 공부를 조금 하신 분들에게는 내용이 너무 쉽다고 생각할 수 있습니다. 실제로 자바스크립트가 어렵지 …
Source: velog.io
Date Published: 1/11/2021
View: 7570
<커리큘럼> 개인적인 프론트엔드 공부방향 – Harry’s diary
이 글은 초보자의 지극히 주관적인 글이며, 개인적인 공부방향을 작성하였습니다. 1. 서론. 지난 2020년 10월, 오랜 고민끝에 프론트엔드 개발자가 …
Source: haesoo9410.tistory.com
Date Published: 10/5/2022
View: 4870
왕초보 프론트엔드! 학습 로드맵으로 시작해보세요.
어디서부터 시작해야 할지 막막한 초보자를 위한 프론트엔드 공부 로드맵.
Source: fastcampus.co.kr
Date Published: 4/3/2021
View: 3470
2022년 프론트엔드 개발 로드맵으로 보는 개발 트랜드와 공부 …
1️⃣HTML, CSS, JavaScript. 웹프론트앤드 개발자로드맵 필수 코스. 웹 프런트엔드 개발자의 가장 기초는 쌓는 …
Source: ordinary-code.tistory.com
Date Published: 3/5/2022
View: 810
주제와 관련된 이미지 프론트 엔드 공부
주제와 관련된 더 많은 사진을 참조하십시오 웹 프론트엔드 개발자 아무것도 모르는 상태에서 취업까지 하는 구체적인 준비방법 | 프론트엔드 공부순서 | 취업준비 | 면접준비. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 프론트 엔드 공부
- Author: 라매개발자
- Views: 조회수 99,768회
- Likes: 좋아요 4,220개
- Date Published: 2021. 4. 9.
- Video Url link: https://www.youtube.com/watch?v=YbVuqWD12Ko
공부 순서, 하는 일, 연봉, 전망
웹 개발자/웹 프로그래머에 대해서 알아봤는데 이번에는 프론트엔드 개발자에 대해서 알아보겠다. 프론트엔드와 백엔드라는 용어가 있는데 이 둘은 서로 반대되는 직업이다. 쉽게 말해 프론트엔드는 사용자에게 보이는 부분 백엔드는 사용자에게 보이지 않는 부분을 다룬다.
프론트엔드 개발자란? (하는 일 + 수행직무)
프론트엔드와 백엔드는 서로 반대되는 직업이지만 가깝게 지내는 직업군이라고 볼 수 있다.
프론트엔드 개발자는 백엔드에서 가져온 데이터를 분석하고 사용자들에게 시각적으로 보이는 사용자 인터페이스 부분을 작업한다.
간단히 말하자면 프론트엔드 개발자는 눈에 보이는 모든 것을 개발하고 백엔드는 눈에 보이지 않는 모든 것을 개발한다.
프론트엔드가 작업해야 하는 분야는 사용자가 회사의 서비스를 사용하기 전에 보이는 첫인상을 담당하고 있다. 사용자와 가장 먼저 맞닿는 영역의 일을 하기 때문에 프론트엔드는 사용자의 반응을 빠르게 캐치해야 하고 그것을 최대한 빨리 적용시켜야 한다.
프론트엔드 개발자는 프론트 영역 전반과 서버의 대한 폭넓은 이해를 필요로 하며 바닐라 JS, HTTP 프로토콜, 웹팩을 다루는 작업이 업무의 대부분을 차지한다. 어떤 직장은 프론트엔드 개발자가 HTML과 CSS작업도 도맡아 하지만 다른 직장에서는 오로지 프론트엔드 개발에 전념하라고 HTML과 CSS만 따로 작업해주는 개발자를 따로 뽑는 경우도 있다.
프론트엔드 개발자가 되려면
프론트엔드 개발자가 되기 위해서는 자바 스크립트, CSS, HTML를 공부해야 한다.
HTML
– 웹 페이지는 HTML로 이루어져 있다. – 그래서 HTML 코드를 모른다면 아무것도 할 수 없을 것이다.
CSS
– HTML과 CSS를 배운다면 적은 노력으로 웹사이트를 만들 수 있다.
자바스크립트
– 만들고자 하는 웹 사이트에 더 많은 기능을 추가할 수 있다. – 특히나 자바스크립트에 대한 깊은 이해도가 필요하다.
프론트엔드 개발자는 자격증을 굳이 따지 않아도 된다는 의견이 지배적이다.
프론트엔드 공부 순서 (로드맵)
아래의 프론트엔드 로드맵을 보면 엄청 다양하게 뻗어나간다.
큰 틀에서 보면 프론트엔드 공부 순서는 다음과 같다
인터넷 HTML, CSS, 자바 스크립트 기본 지식 레이아웃 구성 문법, 구조 버전 관리 시스템 깃허브 Git 기본 사용법 웹 보안 지식 HTTPS CORS Content Security Policy OWASP Security Risks 패키지 관리자 CSS 설계 모던 프레임워크의 등장과 CSS-in-JS 덕분에 걱정을 덜었지만, 그래도 최소한 BEM과는 친숙해지는 것이 좋다. CSS 전처리기 역시나 모던 프레임워크, CSS-in-JS 덕에 필요성은 떨어질 수 있어도 이 기술들과 친숙해지는 것이 좋다. Build Tools Linters and Formatters Task Runners Module Bundlers 프레임워크를 선택한다. React.js Angular Vue.js 등등 CSS in JS Web Components CSS 프레임워크 서버 사이드 렌더링 GraphQL 정적 사이트 생성기 모바일 어플리케이션 데스크톱 애플리케이션 웹 어셈블리 공부 또 공부
프론트엔드 공부순서 (로드맵)
프론트엔드 개발자는 얼마나 받을까? (연봉 + 페이)
평균적인 신입 기준 연봉 : 3000 ~ 3500
[매년 0~4%의 연봉 인상]사실 IT 업계는 연봉이 의미가 없다. 개인의 전문성과 스펙에 따라서 연봉이 달라지기 때문에 본인이 본인만의 스펙을 만들어가기를 바란다.
프론트엔드 개발자의 현실과 처우 그리고 전망
프론트엔드 개발자의 경우 트렌드 변화가 굉장히 빠른 편에 속한다. 대학교 때 배운 지식들로 평생을 써먹는 직업과는 다르게 하나의 기술을 익혔다고 계속 써먹을 수 없고 지속적으로 나오는 새 기술들과 요즘 트렌드를 꾸준하게 익혀야 하는 분야이다. 요즘 시대에 신기술을 배우는 것은 프론트엔드 개발자에만 제한되지는 않지만 다른 개발 분야보다 변화가 빠르다고 할 수 있다. 이 분야가 적성에 맞는다면 다양한 기술을 접할 수 있다는 것이 장점이 되겠지만 반대로 이런 것이 버겁다면 단점이 될 수 있다.
전망
코로나 바이러스로 인한 언택트 문화 때문에 온라인 관련 분야가 급등할 것으로 보인다. 프론트엔드 개발자는 웹 사이트 개발에 가장 가까운 업종이다 보니 비전이 있다.
반응형
11.어떤공부를 해야할까 feat.채용공고, 프론트엔드
많은 분들이 개발자로 전향을 생각하고 있으나 가지고있는 고민과 궁금증에 비해 도움을 받을곳이 많지 않습니다. 저도 비전공 출신으로 28살의 나이에 개발을 배우기 시작했으나 처음 개발을 배워볼까 고민하던 순간 부터 취업하기까지 많은 고민과 문제가 있었고 도움을 받을곳은 없었습니다. 아직 현업에서 2년째 일하고있는 부족한 개발자지만 아직까지 생생하게 기억하고 있는 경험과 지식이 3년전의 저같은 사람에게 큰 도움이 될거라 생각합니다.
앞으로 개발자 전향을 고민하는시점부터 취업까지 모든 경험과 생각을 연재합니다.
지난번 글에서는 좋은 직장에 성공적으로 취업하기 위해서 앞으로 어떤 공부를 해야할지 방향성을 잡아보는게 중요하며 그러기 위해서는 채용공고를 쭉 살펴보기를 권장했다. 또 JAVA 개발자 채용공고를 보며 어떤것들을 먼저 필수적으로 공부해야 할지 알아봤다. 그리고 이번에는 JS 개발자 (프론트엔드) 를 위한 채용공고를 한번 분석 해보기로하자. 나도 처음에 프론트엔드 개발자로 취업했기 때문에 더 많은 부분을 다룰수있을것같다.
자격요건에 들어가있는 필수적인 공부를 먼저 해야하는데 더 혼란을 줄것같아 우대사항을 이번에는 제외했다.
이곳의 자격요건은 매우 쉽고 낮은 수준의 자격요건이다. 첫번째 자격요건을 제외하고 두번째부터는 인성과 관련된 부분 이기에 자신을 잘 포장할수 있다면 될것이다. 첫번째 부분을 보면 컴퓨터 공학 전공 or 컴퓨터과학 지식에 대한 높은이해 라고 적혀있다. 나는 학원교육 수료가 될때까지 이게 중요한지 몰랐다. 그러나 취업을 하기 위해 면접을 보러 다니면서 단 한번도 빠지지 않고 받았던 질문이 컴퓨터 공학 지식 질문이었다. 그중 자료구조(Data Structure)는 늘 질문에 있었다.
Data Structure(자료구조), OOP(객체지향 프로그래밍) , 알고리즘, 데이터베이스, 네트워크 이 모든것들이 컴퓨터공학 지식이다. 정보처리기사 라는 자격증을 따기 위해 공부하는 내용이기도 하다.
모든것들이 중요하지만 중요도를 굳이 따지자면 만약 JS 개발자라면 자료구조 – 네트워크 – 알고리즘 – OOP – 데이터베이스 순으로 공부하는것을 추천한다. 단순히 면접질문 으로 많이 받았던 순서이다 .
프론트엔드 개발자라면 HTML, CSS, JS는 필수이다.
두번째 JavaScript(ES2015) 는 쉽게말하면 최신 JavaScript이다. javascript 도 시간이 지나면서 점점더 새로운 문법이 나오는등 발전되고있다. ES2015는 ES6라고도불리며 현업에서 가장 많이쓰이는 버전이다.
결국 ES2015-Javascript 에 새로 들어온 문법을 이해하고 사용하는 경험이 필요하다.
Javascript 에서는 타입을 명시적으로 쓰지 않기 때문에 개발 하는중에 어떤 타입 오류가 있는지 알지 못할때가 있다. 그래서 Typescript를 사용하는곳도 많다. 역시 공부해야한다. 이게 뭔지는 간단히 여기서 설명하고있다.
SPA 구현, SinglePageApplication이라해서 한 페이지에서 상태값 변환으로 여러 뷰들을 관리하는방법이다. 페이지 이동이 없어서 서버를 여러번 호출하거나 로딩을 기다리는 일이 없는게 장점이다.
Restful 아키텍쳐는 서버로 부터 데이터를 가져올때 “/user/1” , “/user/inser/1” 이런식의 URI를 사용하는 방식인데 여러가지 규칙들이 있으니 자세히는 여기서 보면된다.
학원에서든 개인적으로든 프로젝트를 구현 할때 SPA와 Restful API 를 머리속으로 염두해두고 만든다면 아마 좋은 경험이 되지 않을까싶다.
React, Vue, Angular 는 실제로 현업에서 자주쓰는 JS 프레임워크이다. 프레임워크 개념이 익숙하지 않다면 쉽게 말해 현업에서는 React, Vue, Angular 를 사용해서 개발하고 그것은 JS언어(문법)으로 되어있다.
이전에는 기업마다 다르게 React를 쓰는곳이 있고 Vue를 쓰는곳이 있었는데 요즘은 거의 React를 사용하고있다.
자격요건이 역시 비슷하다. HTML CSS JS 에 익숙해야하고 TypeScript와 React를 다룰줄 알아야한다.
여기서 또 Redux라는게 나오는데 프론트엔드의 상태관리를 쉽게 해주는 라이브러리이다. React와 함께 React-Redux를 공부하면 될것이다.
우대에 Graphql 사용경험이 나온다. 이것은 RESTful API 처럼 백엔드 API 라고 보면 된다. RESTful 과 달리 엔드포인트가 하나(API 주소가 하나) 라는 차이점이 있다. REST에서 “/user/1” “/user/2” 이렇게 유저마다 다른 주소가있다면 Graphql에서는 하나의 주소에서 getUser(no:1) getUser(no:2) 이런식으로 쿼리를 다르게 날려서 값을 받아온다. 그리고 그것을 사용할수있게 프론트엔드에서는 “Apollo” 혹은 “Relay”를 사용하고있다. 자세한 내용은 여기서
반응형 웹이란 모니터의 크기나 사용자가 브라우저의 크기를 변경할때 웹 UI 가 깨지지 않고 그에 따라 반응해서 잘 그려주는 것이다. 예로 모바일에서 해당 페이지를 켰을때도 모바일에 맞게 UI가 그려져야 하는것이 반응형 웹이다. CSS 와 연관이 깊다.
지금까지 3개의 채용 공고를 본 결과 역시 곂치는 부분이 많고 이것들을 필수적으로 공부 해야할것이다.
1. 컴퓨터 공학 지식 (자료구조 – 네트워크 – 알고리즘 – OOP – 데이터베이스 순서)
2. HTML CSS JS 에대한 깊은 이해와 실력
3. React.js & Redux
4. 서버와 데이터 통신 경험(REST API 혹은 GraphQL)
5. SinglePageApp 과 반응형 웹 구현 경험
6. TypeScript
내 기준 에서는 1번부터 6번 순으로 중요하다고 생각한다. 나도 프론트엔드로 취업을 성공 했지만 사실 1~5번까지는 했었고 Typescript 까지는 경험이 없었다. 채용공고들을 보니 그때보다 요즘은 더 많이 Typescript를 사용 하는것 같다. 만약 프론트엔드로 취업을 생각한다면 이런것들을 공부해야 할것을 염두해두면 좋을것 같다.
프론트엔드란? 프론트엔드 공부방법.
반응형
프론트엔드란? 프론트엔드 공부방법.
오늘은 프론트엔드는 과연 무엇인지, 또한 어떠한 프로그래밍 언어를 사용하는지,
어떠한 방법으로 공부를 시작하는 것이 좋은지 알아보겠습니다.
이는 굉장히 주관적일 수 있으며, 결코 정답은 아닙니다.
그럼 오늘도 전혀 비전문적이고, 알기 쉽게 알아보겠습니다.
목차.
프론트엔드 개발자란 무엇인가? 프론트엔드의 장점은 무엇인가? 프론트엔드에 필요한 것들은 무엇인가? 마치며.
1. 프론트엔드 개발자란 무엇인가?
프론트엔드 개발자란 쉽게 말해,
유저를 위한 홈페이지의 디자인을 구현시키고,
유저에게 필요한 상호작용 기능을 개발 및 적용시키는 개발자입니다.
예를 들면 홈페이지의 디자인을 디자이너에게 받은 뒤,
실제 유저가 보고 사용 할 수 있도록 디자인에 맞춰 홈페이지를
구현하게 됩니다. 이때 구현 뿐 아니라 유저에게 필요하고,
친화적인 기능을 개발하여 적용시키는 것입니다.
프론트엔드 개발자는 비교적 쉽게 접근할 수 있습니다.
그렇기에 많은 디자이너 혹은 사업하시는 분들이,
스스로 자신만의 홈페이지를 쉽게 제작하여 운영하시기도 합니다.
2. 프론트엔드의 장점은 무엇인가?
1. 언어에 대한 고민이 적습니다.
프론트엔드는 백엔드에 비해 고민이 적게 시작 가능합니다.
그 이유는 사실 프론트엔드는 백엔드에 사용되는 언어가 적기 때문입니다.
후에 라이브러리 혹은 프레임워크를 사용하게 된다면, 당연히 배워야 할
언어는 많겠지만, 현재 초보 개발자라는 카테고리에 맞게,
프론트엔드로써 처음 배우셔야 할 언어는 정해져 있습니다.
바로 HTML, CSS 그리고 Javascript입니다.
여기서 잠깐!!
HTML과 CSS는 프로그래밍 언어가 아닙니다.
HTML은 Markup 언어이며,
CSS는 Style sheet입니다.
프로그래밍 언어는 Javascript 뿐입니다.
후에 HTML과 CSS에 관해 다루겠습니다.
그렇다면 초보이신 여러분이 가장 먼저 배우실 언어는 저 3가지입니다.
처음부터 라이브러리 혹은 프레임워크를 사용하지 마세요.
처음엔 무조건 기본기를 위해 저 3가지만 시작하는 걸 추천드립니다.
충분히 기본기를 익히시고 라이브러리, 프레임워크로 넘어오셔도 늦지 않습니다.
라이브러리와 프레임워크를 원활하게 사용하는 것도 중요하나,
기본기 없이 라이브러리와 프레임워크로 작업하시면,
의존도가 높아지고, 정작 스스로 기능을 개발하여야 할 때 수많은 난관에
부딪힐 수 있습니다. 실제로 기본적인 슬라이더 조차 바닐라로 구현하지 못할 수 있습니다.
2. 시각적인 요소.
또한 프론트엔드는 직접 보면서 작업 할 수 있습니다.
즉 프론트엔드는 브라우저를 통해서 언제든지 자신의 코드의 결과 값을 확인 가능하다는 것이며,
그만큼 자신의 코드에 따라 시각적으로 결과를 볼 수 있습니다.
이러한 시각적 요소는 내 코드가 정상적으로 작동하는지 조금 더 빠르게 확인 가능하며
대처하기도 좀 더 수월한 것 같습니다.
3. 웹앱.
브라우저의 성능은 나날이 좋아집니다.
그러하여 예전에는 휴대폰에서 원활히 작동되지 않던 홈페이지가
이제는 문제없이 작동하기도 합니다.
이는 즉 웹앱의 발전을 뜻합니다.
웹앱이란 말 그대로 웹을 모바일에서 앱처럼 사용 가능한 것입니다.
프론트엔드 개발자는 모바일, 태블릿, pc의 크기에 맞게, 변화되는
디자인을 구현한 뒤, 모바일, 태블릿에 설치된 브라우저로,
홈페이지를 앱처럼 사용 가능합니다.
웹앱의 장점은 따로 설치할 필요가 없다는 것입니다.
이는 즉 모바일을 위해 따로 앱으로 만들지 않아도 된다는 것입니다.
하지만!! 브라우저의 성능이 많이 발전하였어도,
네이티브 앱들의 성능을 따라가기에 아직 무리가 있으며,
네이티브에서 사용 가능한 기능들을 웹앱에서는 사용하기 힘든
단점도 존재합니다.
3. 프론트엔드에 필요한 것들은 무엇인가?
앞에서 말했듯이 처음은 HTML, CSS, Javascript로
기본기를 확실히 다지는 것이 중요합니다.
혹은 처음부터 Javascript가 아닌 Typescript로 시작하시는 것도
나름 추천드립니다.
Typescript는 요 근래 한창 뜨고 있으며,
자바스크립트의 Superset이기에 기본 자바스크립트에 구현된
모든 기능을 사용 가능하며, 말 그대로 Javscript의 고질병,
타입 지정에 훨씬 좋습니다.
또한 제가 자주 사용하는 리액트 역시 사실 Typescript와 아주
좋은 케미를 보입니다.
이렇게 3가지 기본적인 언어들을 무리 없이 사용하신다면,
기본적인 css뿐만 아니라 SASS 혹은 LESS를 이용해 보시는 것도 좋습니다.
이는 css보다 훨씬 더 쉽고 간편하게 스타일링이 가능하며,
프로그래밍 언어처럼 변수에 특정 값을 지정하여 사용 가능하기에,
코드가 짧아지고 사용하기도 편안합니다.
그 후 Bootstrap과 같은 프레임워크를 배워보시는 것도 좋습니다.
하지만 요즘은 React나 Vue 같은 라이브러리가 워낙 대세이기에,
우리나라는 모르겠으나 독일에서는 잘 사용되지 않습니다.
이제 슬며시 자신이 배우고 싶은 라이브러리 혹은 프레임워크를 둘러봅시다.
저는 당연히 React를 추천드립니다.
현재 최고 핫한 라이브러리이며, 커뮤니티도 거대하기에 많은 정보를 얻고 사용 가능합니다.
그다음은 C#의 ASP.Net Core를 배워보시는 것도 좋을 것 같습니다.
이 또한 아주 강력하고 떠오르는 샛별입니다.
jQuery는 정말 배워야 하는 상황이 아니라면 배우지 않는 것을 추천드립니다.
4. 마치며.
프론트엔드 분야는 예전에 개발자도, 디자이너도 아닌
애매한 위치에 있었지만 지금은 당당히 개발자로 자리 잡고 있습니다.
분야 또한 지금 이 순간에도 훨씬 다양해지고,
심층적이고 전문화되고 있습니다.
개발을 할 수 있다는 것은 자신 혹은 다른 사람의 생각을 구현할 수 있다는 것입니다.
너무 멋지지 않나요??
또한 현실에서 불편하거나 부족한 부분을 개발을 통해 채우고 바꾸어 나간다는 점
때문에 저는 개발자라는 직업에 홀딱 빠졌습니다.
여러분들 또한 개발이라는 분야를 너무 어렵게 생각하지 마시고, 도전해 보시길 바랍니다.
그리고 대부분의 개발자들이 자신의 지식을 나누고 싶어 안달 나 있습니다.
내 지식을 꽁꽁 숨기는 것이 아닌 모두와 나누어 좀 더 많은 사람들이 시도해보고,
개발되어 사용화 되기를 바라기 때문이지 않을까 싶습니다.
지금 저 또한 여러분에게 지식을 나누려 글 쓰고 있지만,
언젠가 제가 여러분으로부터 도움을 받고 지식을 얻어 갈 수 있다는 뜻일 것입니다.
항상 건강하시고 도전하시기 바랍니다.
완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.
Es gibt keine perfekte Vorbereitung.
Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.
반응형
프론트엔드 개발자에게도 알고리즘 공부가 중요할까?
우리는 왜 알고리즘을 공부할까요? 기초 소양을 쌓기 위해서? 좀 더 나은 개발자가 되기 위해서? 아주 틀린 이야기는 아니지만, 좀 더 솔직하게 얘기해 보겠습니다. 아마 대부분은 코딩 테스트를 통과하기 위해 알고리즘을 공부하고 있을 겁니다.
요즘은 취업과 이직은 물론이고, 부트캠프나 대외 활동에서도 지원자를 가려내기 위해서 코딩 테스트를 요구하는 시대입니다. 물론 최근에는 온라인 저지(Online Judge)로 진행하는 코딩 테스트 대신, 실무형 과제를 제출하는 곳도 많이 있는 것 같습니다. 하지만 알고리즘 코딩 테스트는 여전히 많은 기업에서 실재(實在)합니다.
지금으로부터 약 1년 전, 저 역시 복학을 앞둔 상황에서 처음 알고리즘 공부를 시작했습니다. 공부 목적은 당연하게도 코딩 테스트를 준비하기 위해서였습니다. 알고리즘 공부를 본격적으로 해본 건 처음이었기에 처음에는 실력도 부족했고 두려움이 컸습니다. 사실 은연중에 ‘알고리즘 공부가 굳이 필요한가?’라는 생각도 있었기에, 주변 사람들에게 이를 확인받고 싶어 물어보기도 했습니다.
동공 지진
“프론트엔드 개발자에게도 알고리즘 공부가 중요할까요?”
특히 취업을 준비하고 있거나 또는 개발자로 커리어 전환을 시도하는 분이라면 이런 불안감이 더욱 커지는 것 같습니다. 저도 그랬거든요. ‘프론트엔드 개발자라면 일단 서비스부터 잘 만들어야 할 것 같은데, 알고리즘은 또 언제 배우냐?’라며 막막한 마음이 들었던 것이 사실입니다. 실무에서 써먹을 일도 별로 없을뿐더러, 무엇보다 재미가 없습니다. 하지만 코딩 테스트 때문에 울며 겨자 먹기로 하는 수밖에 없었습니다.
저도 이런 고민을 했던 입장으로써, 오늘은 프론트엔드 개발자의 관점에서 알고리즘 공부의 중요성에 대해 솔직하게 이야기해보고자 합니다. 이번 포스트를 통해 프론트엔드와 알고리즘 공부 사이에서 고민하는 독자들에게 도움이 되었으면 좋겠습니다.
TL;DR 사실 알고리즘을 몰라도 프론트엔드 개발에는 큰 지장이 없다고 생각한다. 하지만 단순한 요구사항 구현을 넘어 효율성, 성능, 개발에 소요되는 시간까지 생각하게 된다면 결국에는 알고리즘과 자료구조를 응용하지 않을 수 없다.
그렇기 때문에 알고리즘 공부는 본인이 필요성을 느낄 때 시작하면 된다. 즉 프론트엔드 개발 생태계에 어느 정도 익숙해진 후 알고리즘 공부를 시작해도 늦지 않다.
알고리즘 공부의 목적은 최소한의 알고리즘 지식과 자료구조를 알고 있다는 것을 증명하는 것이다. 너무 과하게 파고들 필요 없이 적당히만 하자.
나의 경험상 노베이스에서는 매일 1~2시간 공부 기준 6개월 정도 하니 유의미한 성과가 나왔다. 중요한 시험이나 면접이 있다면 이를 감안해서 미리 준비하자.
프론트엔드라는 직군에 매몰되어 알고리즘을 비롯한 CS 공부 자체를 소홀히 하지는 말자. 프론트엔드 개발자이기 이전에, 우리는 개발자다.
너 혹시… 뭐 돼?
뭐 되는 건 아니고 그냥 기본만 합니다.
우선 글을 시작하기 전에, 제가 알고리즘과 관련해서 여러분께 조언을 드릴 입장인지는 모르겠다는 생각이 들어서 조심스럽습니다. 제가 백준(프로그래밍 문제를 풀고 온라인으로 채점 받을 수 있는 곳) 외에 다른 플랫폼은 안 써봐서 모르겠는데 대충 골드 1 정도까지 공부했습니다.
골드 1은 노베이스에서 6개월 동안 매일 한두 시간씩 꾸준히 문제를 풀다 보면 어렵지 않게(?) 달성할 수 있는 수준입니다. 이 정도면 골드 4, 5 난이도 문제를 30분 내외로 풀 수 있을 정도이며, 일반적인 기업에서 커트라인으로 제시하는 코딩 테스트는 무난히 통과할 수 있는 것 같습니다. 덕분에 작년에 네이버와 카카오(1차) 코딩 테스트를 통과한 경험이 있습니다.
지금부터는 제 경험을 바탕으로 프론트엔드 개발자가 알고리즘 공부를 바라봐야 할 관점을 일문일답으로 요약하고자 합니다. 아래에서 이야기할 코딩 테스트는, 전형적인 개발자 채용 과정에서 진행되는 알고리즘 유형과 난이도를 기준으로 한다는 것을 말씀드립니다.
개발자에게 알고리즘이 중요한가?
“그렇습니다.”
우선 프론트엔드라는 단어를 떼어놓고 생각해봅시다. 개발자에게 알고리즘은 어떤 의미일까요? 당연히 떼려야 뗄 수 없는 관계입니다. 알고리즘은 곧 문제 상황이 주어졌을 때 제한된 시간과 메모리 내에서 가장 효율적으로 문제를 해결할 수 있는 방법입니다.
문제를 해결하는 방법은 여러 가지가 있을 수 있지만, 모든 방법이 유용한 것은 아닙니다. 문제를 해결할 수는 있지만 정답을 얻어내기까지의 과정이 굉장히 오래 걸린다면, 이를 이용해 현실 세계에서의 문제를 풀기는 어려울 것입니다. 우리에게 주어진 시간과 자원, 그리고 인내심(…)은 유한하기 때문입니다.
따라서 똑같은 문제 상황이라고 해도 최소한의 시간, 최소한의 공간을 사용하는 알고리즘이 더 유용합니다. 또한 목적에 맞는 자료구조를 활용하면 알고리즘의 효율성을 더욱 개선할 수 있습니다. 이 덕분에 컴퓨터 이론은 과학(Science)에서 벗어나 보다 공학적(Engineering)인 가치를 갖게 됩니다.
프론트엔드 개발자에게 알고리즘 공부는 필수적인가?
“항상 그런 것 같지는 않습니다.”
하지만 프론트엔드라는 단어를 붙이면 좀 애매해집니다. 대우(contraposition)로 생각해보면, 질문이 ‘알고리즘을 배우지 않으면 프론트엔드 개발자가 될 수 없는가?’가 됩니다. 제 경험상 이 전제는 ‘항상 옳지는 않다’라는 생각이 들었습니다. 왜냐하면 그 반례를 많이 봤고, 저 역시 그 반례 중 하나였기 때문입니다.
HTML과 CSS는 외울 게 많긴 하지만, 사용 방법만 알면 되지 내부 알고리즘까지 우리가 알 필요는 없습니다. ‘자바스크립트(JavaScript)’에서 일부 로직에 알고리즘을 적용해 최적화할 수 있지만, 정렬이나 탐색 등 웬만한 기본적인 알고리즘은 이미 API가 제공됩니다. 없다면 라이브러리나 프레임워크를 쓰면 되죠. 생각보다 Node.js 생태계는 무척 잘 되어 있습니다. 즉 우리는 알고리즘 구현 자체를 알기보다는 제공되는 기능을 적재적소에 잘 써먹기만 하면 대부분의 문제를 해결할 수 있습니다.
저도 3년간 알고리즘 기초에 대한 빠삭한 이해 없이 업무를 진행했지만, 업무 중 알고리즘을 몰라서 개발에 문제가 생긴 경우는 거의 없었습니다. 오히려 성능보다는 가독성을 중요시하는 코드를 더 많이 짰습니다. 물론 재귀 함수로 트리 구조의 레이아웃을 구현하거나 계산 결과를 ‘메모이제이션(동일한 계산을 반복해야 할 경우 한 번 계산한 결과를 메모리에 정해 두었다가 꺼내서 중복 계산을 방지하는 것)’하는 것처럼 비즈니스 로직 단계에서 최적화를 진행하면 좋은 경우도 있긴 합니다.
주변에 있는 여러 개발자분의 의견도 비슷합니다. 대부분 프론트엔드 개발자도 ‘알아두면 좋긴 한데, 다른 직군에 비해 알고리즘이 크게 중요한 것은 아니다’라는 이야기를 해주셨습니다. 애초에 직군과 상관없이 실무에서 알고리즘을 쓸 일이 별로 없다는 생각도 많이 들었고요.
왜 일반적으로 프론트엔드에서 알고리즘이 중요하지 않다고 생각할까?
“크게 네 가지 이유가 있는 것 같습니다.”
알고리즘 최적화가 필요한 문제 상황 자체가 별로 없음
서버-클라이언트 구조이기 때문에 대부분의 복잡한 로직이 서버에 탑재됨
브라우저에서 대용량의 데이터를 처리하는 경우가 잘 없음
알고리즘을 추상화한 API를 쓰는 것이 효율적임
그렇다면 왜 일반적으로 프론트엔드에서 알고리즘이 중요하지 않다고 생각할까요? 제가 생각했을 때 네 가지 이유가 있는 것 같습니다.
우선 알고리즘 최적화가 필요한 문제 상황 자체가 별로 없기 때문입니다. 프론트엔드의 주요 역할은 HTML과 CSS를 이용한 퍼블리싱, 데이터 기반의 상호작용 가능한 UI 구현, 그리고 백엔드와의 HTTP 통신 정도가 생각이 나는데요. 이 작업들은 알고리즘에 대한 깊은 지식 없이도 구현이 가능합니다. 즉, 프론트엔드 자체에서 매우 복잡한 로직을 수행하는 것이 아니라면 알고리즘까지 이용해가면서 문제를 최적화해야 할 상황 자체가 자주 발생하지 않습니다. 오히려 유지보수를 위해 최적화를 포기하고 코드의 가독성이나 재사용성을 높이는 경우가 더 많습니다.
만약 복잡한 로직이 필요하다고 해도 웹은 서버-클라이언트 구조를 따르므로 대부분의 복잡한 비즈니스 로직은 서버에 탑재됩니다. 서버(백엔드)는 다량의 데이터를 안전하게 보관하고 내부 동작 방식을 숨길 뿐만 아니라 여러 요청을 동시에 처리하는 데 최적화되어 있습니다. 따라서 클라이언트(브라우저)는 서버에게 필요한 기능을 요청하고 그 결과를 받기만 하는 구조가 바람직합니다.
위의 이유로 브라우저에서는 대용량의 데이터를 처리하는 경우가 잘 없습니다. 애초에 브라우저 자체가 대용량 데이터의 처리를 위해 만들어진 것이 아닙니다. 브라우저의 역할은 사용자를 대신해 백엔드와 상호작용할 수 있는 프론트엔드 인터페이스를 실행시켜주는 것입니다. 알고리즘의 효율성은 데이터 규모(NN)가 커질수록 극적인 효과를 내는데, 브라우저의 성능이 제한적이기 때문에 알고리즘을 이용해 최적화할 수 있는 기댓값이 상대적으로 크지 않습니다.
만약 알고리즘적인 접근이 필요한 경우가 있다고 해도 브라우저나 라이브러리, 프레임워크 등에서 이를 추상화한 API를 이미 제공하며, 이것을 쓰는 것이 효율적이기 때문입니다. ‘추상화되었다’는 말은 우리가 내부 구조를 모르고도 사용할 수 있는 것을 의미합니다. 우리는 getElementById 함수가 DOM 트리 구조를 DFS로 탐색한다는 것을 알지 못해도 됩니다. 해당 API가 입력으로 ID 속성을 받고, 출력으로 DOM 엘리먼트가 반환된다는 사실 자체만 이해하고 쓰는 게 더 경제적입니다.
요약하자면, 우리가 프론트엔드에서 일상적으로 풀어야 할 문제들은 이미 추상화된 형태로 제공되는 알고리즘들의 조합으로 해결 가능하며 이것이 효율적이기 때문입니다. 따라서 추상화된 형태로 제공되는 알고리즘의 입출력만 잘 알면 실무에 있어서는 큰 지장이 없기 때문에 이런 일이 가능한 것 같습니다.
알고리즘을 실무에 써먹을 데가 없으면 굳이 배워야 할까?
“단순히 주어진 요구사항 구현뿐만 아니라 성능과 효율성까지 챙기는 개발자가 되기 위해서는 배워야 합니다.”
오늘의 핵심을 꿰뚫는 질문입니다. 개인적인 생각으로는 알고리즘을 몰라도 프론트엔드 개발이 가능하긴 하지만, 더 넓은 시야를 가진 개발자로 성장하기 위해서는 알고리즘 공부가 필요하다고 생각합니다. 생각의 규모를 조금 더 확장해 생각해본다면, 우리가 왜 CS를 공부해야 하는지에 대한 답과도 일맥상통합니다.
그렇게 생각하는 첫 번째 이유는 알고리즘과 자료구조의 조합을 이해하고 있으면 우리가 실제로 해결하고자 하는 문제 상황에 최적화된 구조를 쉽게 떠올리고 설계할 수 있기 때문입니다. 흔히 이야기하는 ‘컴퓨팅적 사고(Computational Thinking)’가 바로 이것입니다.
만약 여러분이 크기가 매우 큰 배열에서 특정 값을 찾아야 할 때 Array.find() 를 사용할 수도 있지만, 그 값이 정렬되어 있다면 이분 탐색으로 값을 찾는 것이 훨씬 더 빠릅니다.
를 사용할 수도 있지만, 그 값이 정렬되어 있다면 이분 탐색으로 값을 찾는 것이 훨씬 더 빠릅니다. 만약 여러분이 SNS 웹 애플리케이션을 기획한다고 할 때, 각 인물 사이의 관계를 추상화하기 위해서 그래프 이론과 그래프 탐색 알고리즘을 사용할 수 있습니다.
만약 여러분이 파일 탐색기 같은 중첩 가능한 UI 구조를 만들어야 할 때는 트리 자료구조와 분할 정복 기법을 이용해 컴포넌트를 설계할 수 있습니다.
한 번 서버에서 불러온 데이터를 메모이제이션하는 방식으로 동적 프로그래밍 기법을 적용할 수 있습니다.
이를 잘 이용한다면 소프트웨어 개발 시간을 줄이면서 성능과 효율성을 높일 수 있고, 수준이 매우 뛰어나다면 비즈니스적 성과로도 이어질 수 있습니다.
두 번째 이유는 환경이나 플랫폼의 변화에도 흔들리지 않는 개발자가 될 수 있기 때문입니다. 우리는 알고리즘이 추상화된 형태의 API 또는 라이브러리를 많이 쓰곤 합니다. 하지만 그것만 가지고 “알고리즘을 이해했다”라고 이야기할 수 있을까요? 정확하게 이야기하자면 우리는 다른 개발자들이 만들어 놓은 기반 위에서 동작하는 API를 그저 사용한 것뿐입니다.
이러한 개발자들은 특정 환경과 특정 플랫폼에 단단히 종속될 수 있다는 점에서 위험합니다. 원리를 이해한 것이 아니라 기능을 사용했기 때문입니다. 따라서 환경이 바뀌거나 본인이 익숙하지 않은 플랫폼에서는 적응에 상당한 어려움을 겪을 것입니다.
만약 여러분이 JavaScript Web API에서 기본으로 제공되는 getElementById 를 파이선(Python)에서 구현해야 하는 일을 맡게 됐다면? Python에서 기본 제공되는 자료구조인 힙, 우선순위 큐 등의 자료구조를 JavaScript에서 구현해야 하는 일을 맡게 된다면? 게다가 만약 내가 필요한 기능의 라이브러리를 사용할 수 없는 환경이라면?
언어 자체가 익숙하지 않다면 문법이 헷갈릴 수 있겠지만 이건 큰 문제가 아닙니다. 문법이야 배우면 되니까요. 알고리즘과 자료구조에 대한 이해만 있다면, 환경과 플랫폼에 상관없이 효율적인 문제 해결 방법을 제시할 수 있다는 사실이 더 가치 있는 것입니다.
마지막 이유는 모든 응용 기술들은 결국 기초 기술을 기반으로 만들어지기 때문입니다. 결국 하고 싶은 이야기는 ‘어느 정도 기초에 충실하자’라는 겁니다. 모든 개발자는 본인이 사용하고 있는 기술 그 자체에서 이해를 멈추는 것이 아니라, 그것을 떠받치고 있는 기술을 이해하기 위해 노력해야 할 필요가 있습니다. 그래야만 본인의 기술을 더 잘 활용할 수 있습니다.
비즈니스 로직이 어떻게 알고리즘과 자료구조로 추상화되며, 그렇게 작성한 React와 TypeScript 코드가 어떻게 JavaScript로 어떻게 컴파일되고, 이 JavaScript는 HTML, CSS와 함께 어떻게 브라우저에서 동작하는지, 그 브라우저는 어떻게 운영체제에서 관리되며, 운영체제는 어떻게 다양한 호스트에서의 네트워크 연결을 중재하는지도 생각해봐야 합니다.
이런 과정들이 불필요해 보이나요? 우리가 쉽게 사용하는 기술들은 공짜로 얻어진 것이 아닙니다. 기반이 되는 모든 기술을 이해하자는 것이 아닌, 최소한의 지식 정도는 알고 있자는 것입니다.
그렇다면 기업은 왜 알고리즘으로 코딩 테스트를 보는가?
“기업 입장에서 수많은 지원자의 기본기를 검증할 수 있는 가장 경제적인 방법이기 때문입니다.”
위에서 뭔가 거창하게 이야기했지만, 사실 기업 입장에서 저렇게 사명감(?) 넘치는 취지로 알고리즘 코딩 테스트를 보는 것은 아니라고 생각합니다. 그 이유는 알고리즘 코딩 테스트가 기업 입장에서 매우 경제적인 평가 방법이기 때문입니다.
물론 기본기를 평가하는 목적도 있지만, 알고리즘 테스트를 도입하면 지원자들의 점수를 객관적으로 수치화할 수 있습니다. 덕분에 점수에 따라 지원자들을 일렬로 줄 세울 수도 있고, 무의미한 실력의 지원자를 쉽게 걸러낼 수도 있습니다. 또한 빠르면 한두 시간 내에 평가가 끝나기 때문에 내부 구성원들의 리뷰가 필요한 과제 전형에 비해 리소스를 덜 쓰기도 합니다. 특히 어느 정도 규모가 있는 회사일수록 지원자는 많은 반면 인원은 신중하게 뽑기 때문에, 면접 전까지는 점수로 커트하려는 목적도 있습니다.
알고리즘은 테스트 케이스 통과 여부에 따라 정답과 오답이 명확하게 드러나고, 효율성을 수치화하기에도 적합하기에 코딩 테스트의 평가 기준으로 사용되고 있는 듯합니다. 사실 기업 입장에서도 모든 지원자의 편의를 봐주고 코드를 읽어볼 수는 없는 노릇이니, 이해는 갑니다.
하지만 실무용 코드와 알고리즘 문제 해결을 위한 코드는 다르지 않은가?
“맞습니다만, 문제 접근 방식을 평가하기 위한 목적도 있습니다.”
목적 자체가 다르긴 합니다. 단순히 일회성으로 정답을 찾기 위한 코드, 그리고 유지보수성과 재사용성을 고려하면서 작성한 코드는 분명 다릅니다.
그래서일까요? 최근에는 일부 기업에서 코딩 테스트 대신 과제나 포트폴리오를 더 많이 보는 전형도 생기고 있다고 합니다. 하지만 채용 과정을 진행하는 것은 전적으로 기업의 선택이기 때문에, 어떤 것이 정답이라고 이야기할 수는 없습니다. 구글에서는 아직 알고리즘으로 코딩 테스트를 본다고 합니다. 기업의 입장에서 변호하자면, 알고리즘 코딩 테스트를 통해 효율성뿐만 아니라 문제 접근 방식에 대한 평가도 진행할 수 있습니다.
면접에서 코딩 테스트 때 제출한 코드를 리뷰하는 경우도 꽤 있습니다. 또한 라이브 코딩 테스트 같은 경우에는 면접관이 일부러 요구사항이 모호한 문제를 주기도 합니다. 따라서 지원자는 요구사항을 명확히 하기 위한 질문을 면접관에게 해야 하고, 이렇게 커뮤니케이션하는 과정에서 문제 접근 방식을 평가할 수 있습니다.
만약 여러분이 가고 싶은 회사에서 알고리즘으로 코딩 테스트를 본다면? 뭐, 조금 냉정하게 들리겠지만, 포기하거나 공부해서 시도하거나 둘 중 하나밖에 없습니다. 사실 이게 불합리하다고 느껴진다면 과제로 검증하는 회사를 지원해야 합니다.
그렇다면 알고리즘 공부는 언제 시작하면 좋은가?
“본인이 필요하다고 느껴질 때 하면 됩니다.”
저처럼 각종 교육 과정이나 채용 전형으로 요구되기 때문에 미리 준비해둘 수도 있고, 그냥 본인이 더 나은 개발자가 되고 싶어서 공부할 수도 있습니다. 자투리 시간을 생산적으로 활용하고 싶을 때도 틈틈이 공부하기 좋습니다. (뭐 군대에 있을 때라던가…)
개인적으로는 완전 노베이스 기준 매일 1~2시간 공부 기준 6개월 정도 했을 때 웬만한 알고리즘 코딩 테스트는 통과했던 것 같습니다. 중요한 시험이나 면접이 있다면 이를 감안해서 미리 준비할 필요가 있을 겁니다.
어디까지 공부하면 되는가?
“목표에 따라 다른 것 같지만 취업을 위해서라면 기본기만 챙기면 충분합니다.”
저는 아래 범위를 위주로 공부했습니다.
수학, 조합론, 기하학
브루트포스, 그리디
분할 정복, 재귀
투포인터
자료구조(스택, 큐, 우선순위 큐, 힙, 해시, 트리, 유니온 파인드…)
이분 탐색
다이나믹 프로그래밍
그래프 이론, 그래프 탐색(BFS, DFS, 백트래킹, 다익스트라, 플로이드-워셜…)
비트마스킹
시뮬레이션, 구현
개인적으로 알고리즘은 설계를 쉽고 효율적으로 만들어주는 개발자의 기초 체력이라고 생각합니다. 물론 많이 알수록 좋지만 올림피아드에 나가지 않는 이상 알고리즘 그 자체에만 매달리는 것은 그리 효율적이지는 않다고 생각합니다. 기본이라는 기준이 대부분의 기업 코딩 테스트에서 요구하는 수준인 것 같고, 그 이후로는 본인이 전문성을 가져야 하는 직군의 공부를 더 하는 게 좋다고 생각합니다.
그렇기 때문에 만약 프론트엔드 개발자가 되고 싶긴 한데 프론트엔드 자체에 대한 지식이 부족하다면, 이 경우에는 알고리즘보다는 프론트엔드부터 공부하는 걸 추천합니다. 즉 프론트엔드 개발 생태계에 어느 정도 익숙해진 상태에서 알고리즘 공부를 병행하는 방식이 괜찮을 것 같습니다.
마무리
적다 보니 내용이 많이 길어졌습니다. 건조하게 ‘알고리즘 공부는 당연히 중요하다’라고 하기보다는 좀 더 실무적인 입장에서, 그리고 프론트엔드 개발자의 관점에서 글을 한 번 주절주절 써봤습니다. 사람에 따라 의견이 다를 수도 있는데, 건전한 피드백과 토론은 언제든 환영이니 댓글 남겨주시기를 바랍니다.
그리고 글을 마무리하기 전에 덧붙여봅니다. 프론트엔드라는 직군에 매몰되어 알고리즘을 비롯한 CS 공부 자체를 소홀히 하지는 맙시다. 프론트엔드 개발자이기 전에, 우리는 개발자니까요.
<커리큘럼> 개인적인 프론트엔드 공부방향
이 글은 초보자의 지극히 주관적인 글이며, 개인적인 공부방향을 작성하였습니다.
1. 서론
지난 2020년 10월, 오랜 고민끝에 프론트엔드 개발자가 되기로 결정했다. 경제학 전공으로서 4년간의 배움이 아깝기도 하고, 취미삼아 잠깐 했었던 파이썬을 쓰지도 않아서 정말 힘든 결정이었다. 처음에는 파이썬을 기왕 시작했기도 했으니 백엔드개발자가 되볼까도 생각했으나, 난 논리적으로 무엇인가를 설계하는 것보다 당장 눈에 보이는걸 선호했다. 물론 BE도 신기했다. 그러나 FE를 하면 정말 너무 재미있고 새벽까지 잠도 안자고 할 수 있었다.
그렇게 프론트엔드에 관심을 갖고 현직자와 연락도 해보고, 비전공자에서 개발자가 되신 분과도 상담해본 결과 충분히 가능하다는 결론을 냈다. 물론 4년이상 배운 전공이 정말 아깝다는 생각을 떨치기는 어려웠다. 그러나 여기에 내 심금을 울린 말이 있다.
“프로그래밍이 중요한 이유가 기술 그 자체가 아니라 사람들에게 편리함을 제공하기 때문이라면, 비전공 출신 개발자가 각자 대학교에서 보낸 4년은 결코 헛된 것이 아니다.”
이는 인문학도 개발자되다 브런치를 운영중이신 마르코님이 쓰신 문장이다. 로스쿨의 장점이 다양한 전공을 익힌 사람들이 더 풍부한 법리 해석이 가능한 것 처럼 우리 비전공자도 시장이 원하는 것, 즉 사람들이 더 원하는 것을 찾아낼 수 있는 능력이 있다는 것이다. 나의 경우 4년간 경제학도로서 열심히 공부했고, 이를 통해 다양한 자료에서 인사이트를 도출하고 가장 효율적으로 문제를 해결하는 능력을 배울 수 있었다. 이러한 분석력과 문제해결력은 내가 앞으로 무슨일을 하든 도움이될 것이다.
과정이 어찌됐든 용기를 내어 프론트엔드에 발을 들였다. 나는 공부를 할 때 장기적이든 단기적이든 반드시 계획과 순서를 잡고 시작한다. 이렇게 계획을 짜두면 하나의 단계가 끝날 때 마다 다음단계를 찾아 헤매는 시간을 줄일 수 있을 뿐만아니라 다음 단계로 나아가기 위한 동기부여도 된다.
2. 본론
커리큘럼을 설계하며 가장 도움이 되었던 것은 유튜버 노마드코더님의 웹개발자 로드맵 영상, 그리고 인프런의 ‘비전공자를 위한 개발자 취업 개론’ 이라는 강의였다. 노마드코더님의 개발자로드맵은 대강 웹개발자의 로드맵을 그려준다. 다음단계로 넘어가려면 어느 정도가 되어야 하는지도 설명하기 때문에 꽤 도움이 되었다. 그리고 김병욱님의 취업 개론 강의는 정말 돈이 아깝지 않은 강의였다. 자신이 비전공자로써 어떻게 취업에 성공했는지, 이랬더라면 좀 더 빨리 개발자가 되었을텐데 하는 내용까지 아낌없이 알려준다. 게다가 강의를 굳이 결제하지않더라도 카카오톡으로 상담해주신다. 필자도 상담을 받았었고 매우 도움이 되었다.
라인 프론트엔드 채용 공고 中
개발자는 기술을 선택함에 있어서도 꽤 고민이 많아지는 직업이었다. 예를 들어 백엔드의 경우 언어를 파이썬으로 시작할지 자바로 시작할지 고민할 수 있고, 프론트엔드의 경우 프레임워크를 React로 시작할지 Vue를 먼저 배울지 고민할 수 있다.
카카오서비스 프론트엔드 채용 공고 中
그러다가 우연히 보게된 글이 있는데, 자신이 당장 취업할 곳에서 필요로하는 기술을 익히지 말라는 것이었다. 기술의 유행은 지금도 시시각각 변하고 있으므로 시장을 선도하고 있는, 그리고 자신이 정말 목표로 하고 있는 기업이 필요로하는 기술을 익히라는 것이다. 개발자는 이직이 정말 잦은 직업이므로 최신 기술에 민감해질 필요가 있는데, 지금 당장의 나는 그런 것을 보는 눈이 없기 때문이다. 그래서 프레임워크는 리액트로 결정했고, 다행히 현직에 계신 분께서도 리액트를 추천해주셨다.
위의 결과로 만든 필자의 커리큘럼이다.
FE 부분은 당연히 HTML과 CSS를 배우는 것으로 시작하였다. 강의 추천은 굳이 하지않겠다. 워낙 강의가 많고 사람마다 원하는 부분이 다를 수 있으므로.
각 단계가 끝날 때마다 쉬운 프로젝트라도 배운 것을 사용해서 직접 만들어 보는 것을 목표로 했다. 배우면서 따라하는 것과 혼자 하는 것은 천지차이이기 때문이다. 이는 자바스크립트를 배우고 스스로 프로젝트를 하면서 확실하게 느꼈는데, 강의자료가 아닌 자신의 자료로 만들면서 좀 더 실제에서 고민할 수 있는 부분들을 생각하게 되었다.
현재까지 두 개의 프로젝트를 완성했고, 깃허브에 정리해서 올려두었다. 커리큘럼에는 적어두지 않았지만 취업 때 요즘 기업들은 대부분 포트폴리오, 깃허브, 기술블로그를 본다고 한다. 따라서 이 세가지 또한 신경써서 해야할 필요가 있다.
위 세가지를 통해 기업에서 보고자 하는 것은 당연히 어느정도의 기술을 가지고 있는지도 보겠지만, 신입에게서 보고자하는 것은 꾸준히 성장할 가능성이 있는 사람인지, 문제를 맞딱뜨렸을 때 어떻게 해결해왔는지를 본다고 한다.
CS부분은 비전공자의 가장 큰 약점이라고 생각한다. 컴퓨터에 대한 이론은 배워본 적이 없으므로 면접 때 조금 불리할 수도 있고, 앞으로의 개발공부에 있어서 이해력을 높이기 위해 공부해야한다고 생각했다. 마침 부스트코스에 하버드 대학의 MOOC강의인 CS50이 잘 정리되어 있었고, 코칭스터디도 모집하기에 신청해두었다.
요즘 중견 이상의 IT기업에서는 코딩테스트가 필수가 되어가고 있다. 이를 위해 문제를 꾸준히 풀어볼 필요가 있다. 필자는 현재에도 매일 백준 온라인 저지 사이트에서 한 문제씩은 풀어보고 있다. solved.ac를 이용하여 티어도 확인하고 있는데, 골드 이상의 문제가 코딩테스트의 난이도라고 한다. 그러나 그 정도의 문제를 풀기 위해서는 자료구조와 알고리즘에 대한 공부도 필요할 것으로 판단되어 책을 통해 공부할 예정이다. (현재 필자의 티어는 실버5이다.)
3. 결론
현재까지 위의 커리큘럼의 절반도 채우지 못했다. 하지만 올해 1분기까지 최대한 해내는 것이 목표이며, 그 때부터 취업의 문을 두드려보겠다. 비록 나는 비전공자이고 경제학도이지만, 차근차근 역량을 쌓아서 반드시 기업에서 그토록 요구하는 융합형 인재가 될 것이다.
언젠가 나의 강점과 개발역량이 나와 회사뿐만 아니라 세상을 편하게 만드는 기술이 되도록, 그 때에 이 글을 웃으며 볼 수 있기를 기도하며 2021년의 1월1일을 시작한다.
Happy New Year !
참고
인문학도 개발자되다
인프런-비전공자를 위한 개발자 취업 개론
부스트코스-CS50
노마드 코더
왕초보 프론트엔드! 학습 로드맵으로 시작해보세요.
얼핏 보면 복잡하고 너무 많은 것을 공부해야 하는 것 같아 머리가 아플 수도 있겠지만, 이 로드맵을 차근차근 따라가면 크게 어렵지 않습니다! 로드맵을 살펴보면, 가장 먼저 웹 개발 기초 상식인 http, 브라우저, DNS 등을 학습해야 합니다. 그 후 html, CSS, Javascript와 같은 비교적 익숙한 항목을 공부하고, 다음으로는 뼈대가 되는 프레임워크인 React를 공부하는 것을 추천드립니다.
React는 페이스북이 제공하는 프론트엔드 라이브러리입니다. 웹 프론트엔드 프레임워크 중 대세로 손꼽히는 Vue.js, Angular, React 세 가지 중에서도 React의 선호도가 가장 높은데요. (출처 : risingstars.js.org, stateofjs 사이트) 현재 국내외의 수많은 기업과 서비스가 React를 사용하고 있고, 프론트엔드 개발자 채용 공고에서도 React 사용 역량을 요구하고 있습니다. 다른 프레임워크에 학습 난이도가 쉬운 편인 것도 있지만, 페이스북의 지원을 받는 만큼 지속적인 버전 관리가 이루어지고 사용자가 많아 다양한 레퍼런스, 확장 할 수 있는 라이브러리가 많습니다. 또한 사용자와 상호작용할 수 있는 보다 생동감 있고 인터랙티브 한 UI를 만들 수 있다는 장점이 있습니다.
프론트엔드 개발을 이제 막 시작하려는 분, 약간의 기초는 있지만 최근 핫한 React에 대해 더 공부하고 싶으신 분 등, 목적에 따라 프론트엔트 개발의 기본부터 심화까지 배울 수 있는 패스트캠퍼스의 강의 3가지를 소개합니다! 한 달에 커피 4잔 마실 돈으로 성공적인 프론트엔드 개발자로 자리매김하세요!
2022년 프론트엔드 개발 로드맵으로 보는 개발 트랜드와 공부 우선순위 추천
반응형
프론트엔드 개발 로드맵
업종 중에 개발직군은 트렌드가 매우 빠른 분야이다.
그래서 트래드에 맞춰서 새로운 언어들을 빠르게 따라가야 한다.
그중 kamranahmedse가 웹 개발자가 되기 위한 로드맵을 매년 이미지로 제공해주고 있다.
그해 연도에 트렌드하고 힙해진 언어들이 어떤 것들이 있는지 확인할 수 있다.
올해에도 2022년 프런트엔드 개발 로드맵이 떠서 살펴보기로 했다.
해당 github은 영어로 되어있는데 해당 로드맵 사이트를 한글로 번역해준 사이트도 있는데,
오늘은 해당 사이트의 자료를 보면서 주니어들이 주목해야되는 우선순위에 대해 말해보려 한다.
출처 : https://github.com/Han-Kyeol/developer-roadmap-kr-
😎 2022년 웹 프런트엔드 개발자 로드맵
2022년 프론트엔드 개발 로드맵 https://github.com/Han-Kyeol/developer-roadmap-kr-
1️⃣ HTML, CSS, JavaScript
웹프론트앤드 개발자로드맵 필수 코스
웹 프런트엔드 개발자의 가장 기초는 쌓는 3가지는 바로 HTML, CSS, Javascript이다.
해당 3가지는 이제 프런트엔드 개발자라면 절대적으로 이 3가지를 익히고 넘어가야 된다.
가장 기초적인 부분이다 보니 공부 난이도는 낮은 편이다.
HTML과 Css의 경우 모든 기능을 다 익힐 필요 없이 적당히 개념을 안다면 언제든지 구글링을 통해서 익힐 수 있다.
개념을 먼저 잡아준 뒤 실전 기능은 필요할 때마다 지속적으로 구글링을 통해서 구체화시키길 추천한다.
3가지 중 가장 공부 난이도가 있는 건 자바스크립트이다.
이 부분은 HTML, CSS보다는 좀 더 시간을 들여서 공부가 필요하고, 해당 부분에 대한 이해가 있어야
다음 웹 프레임워크를 좀 더 쉽게 이용할 수 있기 때문에
자바스크립트는 HTML, Css보단 좀 더 심도 깊은 공부를 하길 추천한다.
2️⃣ 웹 프레임워크
2022년 웹프레임워크 개발 로드맵
역시나 웹 프레임워크는 2022년에도 Reace.js가 압도적인 강세이다.
나의 경우 vue.js + Nuxt.js를 주력 개발 언어로 이용 중이었다.
내부 개발로 react.js를 접할일이 없었는데, 2021년 첫 외부 업체와 협업으로
2022년에는 나도 react.js를 한번 사용해서 슬슬 주력 언어를 변경할 준비를 해야 할 것 같다.
만약 2022년 프런트엔드 개발자를 꿈꾸는 분이라면 묻지도 따지지 말고 React.js로
기초를 잡고 시작하길 추천한다.
3️⃣ 버전 관리시스템
2022년 프론트엔드개발자 로드맵 버전관리시스템
프런트엔드 개발자를 꿈꾸는 분이라면 언어를 다 익혔다면 그다음에 필수 코스는
버전 관리시스템이다.
개발은 혼자 하기보다 팀으로 움직이기 때문에 Git사용은 거의 필수이다.
먼저 Git사용법을 익힌다면 github이나 Bitbucket 어떤 걸 사용하던 무리 없이 사용이 가능할 테니
꼭 입사 전 조금이라도 날 어필하고 싶다면 개인 Git을 만들어서 사용법을 익혀야 한다.
4️⃣ 패키지 관리자
2022년 프론트엔드개발자 로드맵 패키지관리자
다음 주목은 바로 패키지 관리자이다.
역시나 npm, yarn으로 2021과 똑같은 두 개의 트렌드를 제시한다.
어떤 걸 사용하든 문제는 없다.
뭐든 사용해서 사용법을 익혀놓자.
반응형
키워드에 대한 정보 프론트 엔드 공부
다음은 Bing에서 프론트 엔드 공부 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 웹 프론트엔드 개발자 아무것도 모르는 상태에서 취업까지 하는 구체적인 준비방법 | 프론트엔드 공부순서 | 취업준비 | 면접준비
- 동영상
- 공유
- 카메라폰
- 동영상폰
- 무료
- 올리기
웹 #프론트엔드 #개발자 #아무것도 #모르는 #상태에서 #취업까지 #하는 #구체적인 #준비방법 #| #프론트엔드 #공부순서 #| #취업준비 #| #면접준비
YouTube에서 프론트 엔드 공부 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 웹 프론트엔드 개발자 아무것도 모르는 상태에서 취업까지 하는 구체적인 준비방법 | 프론트엔드 공부순서 | 취업준비 | 면접준비 | 프론트 엔드 공부, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.
