본문 바로가기
FrontEnd/JavaScript

프론트엔드 공부 로드맵

by Geurim 2022. 6. 7.

1.기본 및 비동기 개념 : 초보자는 Let, var, const, If-else , Loops, Functions, Map, Filter and Reduce, Expression and Operations, Number, String, Arrays 및 Objects, ES5, ES6과 같은 핵심 개념이나 기본 사항에 집중해야 합니다. DOM 조작법, 이벤트 사용법 등 자바스크립트의 모든 기본 사항. 기본 개념을 명확히 이해하면 Javascript의 비동기 동작에 대해 배울 수 있습니다. 또한 Prototypes, Coercion, Hosting, Scope, callback, promises, closures, higher-order functions 에대해 알아보십시오.

  1. 알고리즘 문제 해결: JavaScript 개발자로 지원하면 인터뷰에서 해결해야 할 몇 가지 알고리즘 문제에 직면하게 됩니다. 일부 코드 테스트 가 있거나 온라인 테스트 또는 프로젝트 리포지토리를 보내는 것을 선호하는 회사가 거의 없거나 회사에서 라이브 코드 테스트를 수행하도록 요청할 수 있습니다. 따라서 기본 개념을 마치고 나면 몇 가지 알고리즘 문제를 해결하고 지식을 테스트하고 코드를 조작하거나 다른 입력 예제를 사용하여 코드를 확인하는 것이 좋습니다. 코드로 플레이할 때 출력이 어떻게 다른지 확인하십시오.
  2. 클라이언트 측 프레임워크 및 라이브러리: 애플리케이션의 프론트 엔드 부분과 관련하여 너무 많은 Javascript 프레임워크 및 라이브러리가 있으므로 개발자 사이에서 올바른 것을 선택해야 하는 혼란을 야기합니다. 학습 곡선 과 직업 관점 에서 두 가지를 염두에 두고 Vue.js나 ReactJs 또는 AngularJS 를 선택하는 것이 좋습니다 . 이러한 클라이언트 측 프레임워크 및 라이브러리는 취업 시장에서 수요가 높으며 대부분의 회사에서 이를 사용하여 애플리케이션을 구축하고 있습니다.Google 트렌드 에서 이러한 프레임워크의 인기도와 비교를 확인하거나 Aungular vs React 링크를 확인할 수도 있습니다.학습할 올바른 프레임워크를 선택하는 데 도움이 됩니다.
  3. 서버 측 프레임워크 및 환경: JavaScript는 브라우저에만 국한되지 않고 브라우저 외부에서도 실행할 수 있으며 NodeJS 는 브라우저 외부에서 Javascript를 실행할 수 있도록 하는 기술입니다. NodeJs 는 JavaScript가 백엔드 프로그래밍 언어가 될 수 있도록 하는 매우 강력한 런타임 환경이며 최근 개발자들은 Node의 프레임워크인 ExpressJS 와 함께 NodeJS 를 사용하는 것을 선호하며 백엔드 API를 빌드하는 데 널리 사용됩니다. 따라서 두 가지를 모두 배우는 것이 좋습니다.
  1. 데이터베이스: 자바스크립트 응용 프로그램을 구현하는 동안 응용 프로그램을 연결하고 데이터를 저장 및 조작하기 위해 최소한 하나의 데이터베이스에 대한 지식이 있어야 합니다. SQL 또는 NoSQL 데이터베이스를 사용할 수 있습니다. 일부 옵션은 MongoDB, PostgreSQL, MySQL, CouchDB, Redis입니다. 따라서 최소한 하나의 데이터베이스에 대한 기본 지식이 있어야 합니다.
  2. 태스크 러너 및 모듈 번들러: 태스크 러너는 여러 js 파일을 연결하는 데 도움이 되며 특정 파일이 변경될 때마다 실행됩니다. Gulp 및 Grunt 이 두 작업 실행기는 대부분 개발자가 사용합니다. 모듈 번들러가 자바스크립트 파일을 실행하기 전에 하나의 파일로 묶는 역할을 하는 경우 웹사이트 성능이 향상됩니다. Webpack 및 Browserify 이 두 가지는 대부분의 개발자가 선호하므로 위의 태스크 러너 및 모듈 번들러를 선택하는 것이 좋습니다.
  3. OOP와 함수형 프로그래밍: JavaScript의 객체 지향 프로그래밍은 다른 프로그래밍 언어에서 작동하는 것처럼 작동하지 않습니다. 개념이 다르고 JavaScript가 클래스 기반이 아닌 프로토타입 기반이기 때문에 혼동을 일으킬 수 있습니다. 더 나은 이해를 위해 Object Oriented Javascript 링크를 참조하십시오 . 또한 함수형 프로그래밍에 대해 배우고 OOP와 어떻게 다른지 알 수 있습니다. Javascript에서 더 나은 이해를 위해 Functional Programming  Introduction to Functional programming 링크를 확인하십시오 .
  4. 디자인 패턴: 디자인 패턴은 앱을 확장 가능하고 유지 관리 가능하게 만드는 데 도움이 되며 개발자가 더 쉽게 작업할 수 있도록 하므로 Module, Prototype, Observer, Singleton과 같은 Javascript의 일반적인 디자인 패턴을 사용하여 다양한 유형의 문제를 해결하는 방법도 배웁니다. 문제. 이 주제에 대한 이해를 위해 JS의 디자인 패턴 링크를 확인할 수 있습니다 .
  5. 배포 및 호스팅: 모든 개념이 끝나면 자신만의 프로젝트를 만들 수 있지만 이야기는 여기서 끝나지 않습니다. 또한 라이브 서버에 프로젝트를 배포해야 합니다. 이렇게 하면 직업을 얻고 포트폴리오를 만들고 자신의 지식을 얻는 데 도움이 됩니다. GitHub 페이지, Heroku, Netlify, Digital Ocean, AWS, Firebase . Heroku 및 Netlify 는 액세스하기가 매우 쉽기 때문에 둘 중 하나를 선호할 수 있습니다.
  6. 기타 사항
  • 테스트 라이브러리: Jest, Mocha, Jasmine, Sinen, Chai, Enzyme
  • 패키지 관리자: NPM 및 Yarn.
  • 브라우저 및 개발자 도구: Chrome, Firefox, MS Edge 및 개발 또는 디버깅 도구입니다.
  • 버전 관리
  • 텍스트 에디터
  • HTML및 CSS에 대한 지식

아래는 Javascript Frontend 및 Backend 부분의 명확한 그림입니다.

클라이언트 측:


이미지 출처: 구글

서버측:


이미지 출처: 구글

책:
모던 자바스크립트 Deep Dive

JavaScript:

CS :

Roadmap:

무료강의:
부스트코스
생활코딩 유튜브
노마드코더 유튜브
드림코딩 유튜브

 

 

'FrontEnd > JavaScript' 카테고리의 다른 글

[JavaScript] 실행 컨텍스트  (0) 2022.06.07
[JavaScript] 프로토타입  (0) 2022.06.07
[JavaScript] 프로퍼티와 내부메서드  (0) 2022.06.07
[JavaScript] 스코프  (0) 2022.06.07
[JavaScript] 함수  (0) 2022.06.07