초보자를 위한 프런트엔드 개발 입문부터 숙련까지
이전 원문: 초보자를 위한 프런트엔드 개발 입문부터 숙련까지 게시일: 2024-9-12 마지막 편집: 2024-12-21 원래 분류: ⌨ 개발 튜토리얼
코딩, 블로그 작성, 영상 제작처럼 창작에 가까운 기술은 그중 하나만이라도 장기적인 평생 취미로 키워 두면 계속해서 이익을 가져다주는 원천이 될 수 있습니다.
들어가기 전에
프런트엔드 개발 지식을 배우고 직접 페이지를 만들고 싶어 하는 분들이 많습니다. 그래서 입문부터 숙련까지 필요한 지식을 한 번 정리해 둡니다.
다만 제 프런트엔드 실력은 아주 뛰어난 편은 아니고, 필요한 것을 그때그때 배우며 사용하는 실전형에 가깝습니다. 기술 연구에 집중하는 학자는 아니므로, 이 글의 조언은 참고용으로 봐 주세요.
지식 체계
프런트엔드는 오랫동안 발전해 왔고, 자동화와 고성능 컴포넌트가 계속 등장하고 있습니다.
건축 분야로 비유해 보겠습니다. 초기의 건축가는 간단한 도구, 도면, 재료만 익혀도 집을 지을 수 있었습니다. 하지만 기술이 발전하면서 오늘날의 건축가는 전통적인 건축 지식뿐 아니라 스마트홈, 친환경 재료 같은 현대 건축 기술도 알아야 합니다.
그렇지만 건축 기술의 밑바탕 논리는 같습니다. 핵심은 여전히 견고하고 아름답고 실용적인 건축물을 만들어 다양한 사용 시나리오를 만족시키는 데 있습니다. 새로운 기술 프레임워크는 이런 핵심 원칙을 자동화해 감싼 것이며, 선배들의 어깨 위에서 효율을 높이고 조작을 단순화한 것입니다.
따라서 새 기술을 배울 때는 보통 최소 두 가지 측면으로 나누어 볼 수 있습니다.
먼저 그 안의 "원리"를 익혀 기술 뒤의 기본 원칙을 이해해야 합니다. 그다음 계속 실천하고 정리하면서 새로운 "기법", 즉 현대적인 도구와 방법을 배우고 익혀야 합니다.
저는 지식 체계를 원리와 기법으로 나눕니다. 원리는 기본 원칙과 규칙이고, 기법은 선배들의 경험과 그들이 축적해 둔 도구 모음입니다.
아래는 배워야 할 지식 포인트를 펼쳐 설명한 것입니다.
원리 측면
웹 페이지는 다음 세 가지 구성요소로 동작합니다.
HTML 웹 마크업 언어
브라우저와 개발자가 관습적으로 약속한 전문 도면 규격입니다. 웹 페이지 전체의 레이아웃과 계획을 결정하며, 건축의 기초 프레임과 하중 구조에 해당합니다.CSS, Cascading Style Sheets
시각 효과와 웹 페이지의 질감을 결정합니다. 건축 재료와 페인트 색상에 해당합니다.JavaScript 스크립트
웹 페이지 기능과 시각 효과의 협업을 결정합니다. 배수관, 환기 덕트, 전기 배선, 네트워크 통신, 스마트 보안, 소방 안전 같은 요소에 해당합니다.
이 외에도 웹사이트 운영에는 서버 배포 지식이 필요합니다. 서버는 입주자 대표회의나 관리사무소처럼 커뮤니티와 건물군이 안전하고 효율적으로 운영되도록 돕는 조직에 비유할 수 있습니다. 더 넓게는 네트워크 프로토콜 관련 지식도 필요합니다. 이는 방문자가 효율적이고 안전하게 들어올 수 있도록 도로망을 계획하는 지식에 해당합니다.
기법 측면
개발 핵심 도구: VSCode 같은 개발 소프트웨어
다양한 플랫폼 대응: 모바일/PC 대응, 반응형
개발 효율 향상: Vue, React 등
개발 규모 확장: Webpack, TypeScript, Git 같은 엔지니어링 관리
실행 효율 향상: 브라우저 렌더링 원리 이해와 적용
페이지 미려함 향상: Bootstrap, Material, TailwindCSS, AntDesign, Animate 동작 효과, Echarts 차트 같은 성숙한 디자인 스타일 제품 학습
비즈니스 기능 결합: 사용자 데이터와 제출된 폼을 받아 저장하기 위한 백엔드 서버 개발. 예: NodeJS 서버와 MySQL 데이터베이스
튜토리얼에 대하여
프런트엔드 개발의 주요 내용은 대체로 위와 같습니다. 처음부터 튜토리얼을 새로 쓰는 것은 꽤 번거로우므로, 입문용으로 구조가 잘 잡힌 무료 그림/글 튜토리얼을 추천합니다.
프런트엔드 입문부터 심화까지 다룹니다.
또한 각 기술 포인트를 깊이 파고들면 배워야 할 세부 내용이 많고, 각 기술 포인트마다 여러 확장 기술과 해결책이 있습니다.
학습 과정에서 더 깊게 알고 싶은 지식이 생기면 아래 종합 튜토리얼에서 키워드로 찾아 하나씩 깊이 있게 학습할 수 있습니다.
RUNOOB은 프로그래밍 기초 기술 튜토리얼을 제공하며 HTML, CSS, JavaScript, Python, Java, Ruby, C, PHP, MySQL 등 다양한 프로그래밍 언어의 기초 지식을 소개합니다. 또한 많은 온라인 예제를 제공하므로 예제를 통해 프로그래밍을 더 잘 배울 수 있습니다.
web 프런트엔드 튜토리얼, 언제 어디서나 프로그래밍 배우기
fly63 프런트엔드 튜토리얼 사이트는 HTML, CSS, JavaScript, Vue, Python 등 다양한 프로그래밍 언어의 입문 튜토리얼을 제공하고, 많은 예제 데모도 함께 제공합니다. 예제를 통해 프로그래밍을 더 잘 학습할 수 있습니다.
원문 링크
https://docs.tangly1024.com/article/frontend-development-tutorial