#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
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
2) CodePen
- 웹 개발자들이 HTML, CSS, JavaScript 코드를 실험할 수 있는 플랫폼
- https://codepen.io/
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
3) Stack Overflow
- 개발 중 발생하는 문제를 해결하는 데 유용한 질문/답변 커뮤니티
- https://stackoverflow.com/