프론트엔드 로드맵

1. 웹은 어떻게 작동합니까?

기술을 배우기 전에 먼저 일반적인 웹의 기초를 배우는 것이 좋습니다. 여기서 우리는 웹의 작동 방식과 시작 방식을 배우고 있습니다. 이것은 모든 유형의 개발자에게 필수입니다. HTTP, 도메인 이름, 호스팅, 브라우저 및 작동 방식에 대해 배워야합니다.

고려해야 할 몇 가지 주제 목록은 다음과 같습니다.

• 인터넷이란 무엇입니까?
• 인터넷은 어떻게 작동합니까?
• HTTP 란 무엇이며 어떻게 진화 했습니까?
• 브라우저는 어떻게 작동합니까?
• 도메인 이름과 호스팅이란 무엇입니까?
• DNS는 어떻게 작동합니까?

HTML 은 Hypertext Markup Language를 나타냅니다 . 웹 사이트의 골격 또는 마크 업을 작성하는 데 사용됩니다. 여기서 HTML의 기본을 배워야하지만 HTML 양식은 향후 기본이 될 것이기 때문에 더 많은주의를 기울여야합니다.

HTML에 대한 기본적인 이해가 끝나면 CSS의 기초를 배울 수 있습니다. CSS는 Cascading Style Sheets의 약자입니다 . HTML 요소의 모양을 정의하는 데 사용됩니다. 또한 반응 형 레이아웃을 만드는 데 사용되며 웹 페이지도 더 아름답게 만듭니다.

 

CSS는 배우기는 쉽지만 마스터하기는 어렵습니다. 다음과 같이 더주의를 기울이고 싶은 몇 가지 주제가 있습니다.

• 상자 모델 : 여백, 패딩 및 테두리가 함께 작동하는 방식.
• CSS 단위 : 길이를 표현하기 위해 사용 ( rem, vh, 및 vw).
• 위치 : 위치 지정 방법의 유형을 지정합니다. 그것은 또한 많은 사람들을 혼란스럽게하므로 그것에 시간을 할애하십시오.
• 변수 : 문서 전체에서 재사용 할 수있는 엔티티입니다. 이것은 CSS에서 제가 가장 좋아하는 기능입니다. CSS 작업을 매우 즐겁게 만들고 몇 줄의 코드만으로 테마를 만들 수 있습니다.
• 미디어 쿼리 : 다양한 화면 크기에 표시 할 내용을 결정합니다. 반응 형 디자인의 핵심 구성 요소입니다.
• 애니메이션 : 요소를 한 스타일에서 다른 스타일로 변경할 수 있습니다. 애니메이션을 올바르게 사용하는 방법을 알고 있다면 사이트를 돋보이게합니다. 그렇지 않으면 웹 사이트가 전문가답지 않게 보일 수 있으므로주의하세요.
• Flexbox, CSS Grid : 반응 형 레이아웃을 구축하는 데 사용됩니다.

3. Git 및 Github 사용법 배우기

Git은 시간 경과에 따른 코드베이스 및 파일의 변경 사항을 추적 할 수있는 버전 제어 시스템입니다. 문제없이 이전 버전의 코드베이스로 돌아갈 수 있습니다. 또한 동일한 코드로 작업하는 사람들과 공동 작업하는 데 도움이됩니다.

따라서 Git의 기본 사항과 명령 줄에서 사용하는 방법을 배우십시오. 또한 Github에서 계정을 만들고 Git을 사용하여 HTML 및 CSS 코드를 푸시하기 위해 첫 번째 저장소를 만드는 방법을 배웁니다. 이렇게하면 프런트 엔드 웹 개발에서 향후 프로젝트에 Git 및 Github를 사용하는 습관이 생깁니다.

4. 웹 사이트 배포

이제 HTML과 CSS를 알았으므로이 두 기술을 사용하여 간단한 웹 페이지를 만들 수 있습니다. 그러나 사람들이 볼 수 있도록 인터넷에 게시해야합니다.

과거에는하기가 훨씬 더 어려웠습니다. 하지만 이제는 매우 쉽고 GitHub Pages 또는 Netlify 와 같은 도구를 사용할 수 있습니다 .

5. 자바 스크립트

자바 스크립트는 웹 개발의 여왕입니다. 자바 스크립트 없이는 웹을 상상할 수 없습니다. 웹 개발자를위한 최고의 프로그래밍 및 스크립팅 언어입니다. 프런트 엔드, 백 엔드, 모바일 앱 등과 같은 많은 작업을 수행 할 수 있습니다.

자바 스크립트에 관해서는 먼저 기본을 배워야합니다. 변수, 데이터 유형, 함수, 배열, 객체 등과 같은 것. 또한 DOM을 조작하는 방법 등을 배워야합니다.

다음은 고려해야 할 사항의 목록입니다.

• 구문 및 기본 구성.
• DOM 조작을 배우십시오.
• Fetch API / Ajax에 대해 알아보십시오.
• ES6 +.
• 모듈 식 자바 스크립트.
• 개념 이해 : 클로저, 범위, 비동기 대기, 프로토 타입, 이벤트 버블 링, Shadow DOM, Hoisting, Strict 등.

Sass는 S yntactically A wesome S tylesheets를 의미합니다. CSS 작업을 더 쉽게하고 반복을 줄이며 시간을 절약 할 수있는 CSS 전 처리기입니다. 이렇게하면 적은 수의 코드로 페이지 스타일을 쉽게 지정할 수 있습니다. 초능력을 가진 CSS와 같습니다.

CSS를 많이 사용하는 경우 Sass는 강력한 도구입니다. 그것은 당신의 삶을 더 쉽게 만들고 CSS에서 자신을 반복하지 않도록 도와줍니다.

7. 패키지 관리자 및 웹 번 들러

패키지 관리자와 관련하여 가장 먼저 떠오르는 것은 NPM과 Yarn입니다. 따라서이 두 가지 중 하나를 선택하고 기본 사항을 배우십시오.

패키지 관리자.

패키지 관리자는 기본적으로 프로그램 또는 프로젝트를 설치, 업데이트, 구성 및 제거하는 프로세스를 자동화하는 도구입니다.

그 후에 빌드 도구에 대해 배워야합니다. 태스크 러너 (NPM 스크립트 또는 Gulp) 및 웹 번 들러 (Webpack 또는 Parcel)와 같은 것.

빌드 도구.

8. 프레임 워크 선택

위의 모든 기본 사항과 도구를 학습 한 후 JavaScript 프레임 워크를 선택할 수 있습니다. React 또는 Vue로 시작하는 것이 좋습니다. 원하는 경우 Angular를 사용할 수도 있습니다.

React의 경우 실제로 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리입니다. 구성 요소를 기반으로하며 웹 애플리케이션의 성능과 속도를 높여주는 가상 DOM이 있습니다. Vue는 또한 훌륭한 프레임 워크이며 놀라운 커뮤니티와 문서를 가지고 있습니다.

 

상태 관리.

9. 서버 측 렌더링 및 정적 생성기

Next.js는 서버 측 렌더링 또는 정적 웹 사이트 생성에 사용됩니다. 그리고 예, Next.js는 여전히 새롭지 만 이것이 React 개발자로서 우리 가 가져야 할 기술이라고 생각 합니다 . Vue를 사용하는 경우 서버 측 렌더링에도 사용되는 Nuxt.js라는 다른 도구에 대해 배워야합니다. 앵귤러의 경우 유니버설을 배워야한다고 생각합니다.

그 후, 당신은 같은 일부 응용 프로그램을 구축하고자합니다 채용 정보 검색 도구, 블로그, 또는 문서 페이지 등을

10. 앱 테스트

테스트와 관련하여 단위, 통합 및 기능 테스트의 차이점을 알고 작성 방법을 배워야합니다.

테스트.

결론

보시다시피 프런트 엔드 웹 개발은 복잡해졌습니다. 배울 도구가 많이 있습니다. 하지만 열정이 있다면 할 수 있고 훌륭한 개발자가 될 수 있습니다. 연습 없이는 당신이하는 일을 결코 잘할 수 없기 때문에 당신의 물건을 연습하십시오.