#8 프런트앤드 개발

1. 프런트앤드 개념

 프런트앤드란 사용자가 보는 화면의 인터페이스와 사용자 경험을 구축하는 작업으로 주로 UI/UX를 구축하는 작업이며 HTML, CSS, JavaScript 등의 기술을 활용하여 구축함

 

2. 프런트엔드 개발 기본 개념

 1) HTML (HyperText Markup Language)

• 웹 페이지의 구조를 정의하는 언어로, 페이지의 제목, 단락, 이미지, 링크 등을 배치하고 표시하는 데 사용

 2) CSS (Cascading Style Sheets)

• 웹 페이지의 스타일과 레이아웃을 담당하며, 글꼴, 색상, 여백 등을 정의해 사용자가 보기 좋은 형태로 페이지를 꾸밈

 3) JavaScript

• 페이지에 동적인 기능을 추가, 버튼 클릭, 데이터 처리, 화면 애니메이션 등 사용자와 상호작용하는 부분에 사용됨

---

3. 프런트엔드 프레임워크와 라이브러리

 1) React

• Facebook에서 개발한 자바스크립트 라이브러리
• 동적인 UI를 구성하는 데 최적화되어 있으며, 단위로 UI를 구성할 수 있어 코드 재사용성과 유지보수에 유리

 2) Vue

• 컴포넌트 기반 아키텍처와 반응형 데이터 바인딩이 특징
• 직관적이며 빠르게 배울 수 있어 사용하기 쉬움

 3) Angular

• Google에서 개발한 프레임워크
• 다양한 내장 기능을 제공해 규모 있는 프로젝트에서 유용하지만 초보자에게는 다소 복잡할 수 있음

---

4. 프런트엔드 개발 도구

 1) Visual Studio Code

• 다양한 프로그래밍 언어를 지원하는 무료 코드 편집기
• 자동 완성, 디버깅, 확장 기능 등을 통해 효율적인 코딩 환경을 제공

 2) 브라우저 개발자 도구

• Chrome, Firefox 같은 브라우저는 개발자 도구를 제공해 HTML, CSS, JavaScript 코드를 실시간으로 확인하고 수정할 수 있음
• 페이지의 오류를 찾고 성능을 테스트하는 데 유용

 3) Git 및 GitHub

• Git은 소스 코드 버전 관리를 위한 필수 도구
• GitHub를 통해 다른 개발자와의 협업이 가능하며, 코드 변경 사항을 쉽게 관리하고 공유할 수 있음

 4) NPM, Yarn

• 프로젝트에서 사용하는 라이브러리나 프레임워크를 관리하는 도구
• 자주 사용하는 패키지들을 쉽게 설치하고 업데이트할 수 있음

---

5. 유용한 웹사이트와 자료

 1) MDN 웹 문서

• HTML, CSS, JavaScript와 같은 웹 개발 기술에 대한 포괄적인 자료를 제공
• https://developer.mozilla.org/ko/

MDN Web Docs

 2) CodePen

• 웹 개발자들이 HTML, CSS, JavaScript 코드를 실험할 수 있는 플랫폼
• https://codepen.io/

CodePen

 3) Stack Overflow

• 개발 중 발생하는 문제를 해결하는 데 유용한 질문/답변 커뮤니티
• https://stackoverflow.com/