웹 개발을 시작할 때 기본 개념과 지식을 먼저 갖추고 시작하는 게 중요합니다. 웹 작동 방식을 잘 이해하고 프로그래밍 언어와 기술이 어떻게 사용되고 서로 작용하는지 알아야 합니다. 오늘은 기본적으로 알아야 될 언어와 기술을 살펴보겠습니다.
웹 개발을 위한 필수 언어 및 프로그램
다음은 일반적으로 프런트엔드 및 백엔드 개발과 관련된 기술 및 언어에 대한 간략한 개요입니다.
기본 영역
- HTML
- CSS
- 자바스크립트
- 깃허브
프런트엔드
- 라이브러리 – 제이쿼리, D3.js, 부스트트랩
- 프레임워크 – 리액트, 앵귤러, 뷰
백엔드
리눅스, 네트워크, 데이터 베이스 구축
- 서버언어 – 파이썬, 자바, php, 닷넷
- 프레임워크 – 노드제이에스, 스프링, 장고, 코드이그나이터
웹 개발의 기본 언어
HTML
HTML(Hypertext Markup Language)은 웹 페이지 내의 제목, 문단, 사진과 같은 요소 등을 마크업 언어로 구조화하기 위해 사용되는 기본 언어입니다.
CSS
CSS(Cascading Style Sheets)는 HTML로 만든 콘텐츠의 스타일 및 배치를 지정하는 데 사용되는 언어입니다. CSS를 활용해 웹 요소를 꾸며서 필요한 부분을 강조하거나 알맞게 배치하여 사용자들이 알아보기 쉽게 만드는 역할을 합니다.
- 색상, 글꼴, 배경, 테두리 및 기타 시각적 속성을 HTML 적용
- HTML 요소의 위치 지정 및 레이아웃 꾸미기
- 미디어 쿼리 및 반응형 디자인 기술을 이용하여 레이아웃, 글꼴 크기 및 속성을 수정하여 데스크톱, 태블릿 및 모바일에 최적화된 화면 설정
- 애니메이션 및 전환, 부드러운 전환, 키프레임 애니메이션을 생성
JavaScript
JavaScript(JS)는 웹사이트에서 요소의 동작 및 반응성을 추가하여 동적 효과를 적용할 수 있는 프로그래밍 언어입니다. 클릭 및 스크롤과 같은 동작에 응답하여 팝업 창 또는 콘텐츠 자동 스크롤 등을 구현할 수 있습니다.
❗️GitHub
웹 개발을 목표하신다면 꼭 배워 두면 좋은 서비스입니다. 웹 개발 시 지속적인 수정과 업데이트가 계속 필요한데, 이 서비스를 활용하면 소스의 수정 내용을 저장하고 관리할 수 있는 편리한 도구입니다.
프론트엔드 프로그램
제이쿼리 (jQuery)
DOM을 활용해 웹 요소 및 스타일을 수정하거나 HTML 문서 수정 및 애니메이션 요소등을 구현할 때 편리한 라이브러리 도구입니다.
D3.js
웹에서 실시간으로 정보를 화면에 보여주기 위해 사용되는 라이브러리 도구입니다.
부트스트랩 (Bootstrap)
주로 PC, 태블릿 및 모바일에서 동작하는 반응형 디자인을 제작할 때 사용되는 라이브러리 도구입니다.
리액트 (React)
SPA와 같이 한 화면에 대량의 내용을 보여주기 위해 사용되는 도구로 페이스북에서 개발한 프레임워크입니다.
앵귤러 (Angular)
웹 어플을 제작할 때 사용되는 도구로 구글에서 개발한 프레임워크입니다.
뷰 (Vue)
웹 어플이나 사용자 인터페이스를 제작이 가능합니다. 뷰는 웹의 보이는 요소에 특화된 프레임워크입니다.
백엔드 프로그램
백엔드에서는 서버의 동작을 구현하고 웹사이트에 보는 구역을 제외한 모든 구역을 백엔드가 개발하고 관리합니다.
백엔드 프로그램 종류
- 노드제이에스 (Node.js)
- 익스프레스 (Express)
- 자바 (JAVA)
- 스프링 (Spring)
- 파이썬 (Python)
- 장고 (Django)
- PHP
- 코드이그나이터 (Codeigniter)
Conclusion
백엔드 프로그램들에 대해서는 다른 포스팅에서 더 자세히 다뤄 보겠습니다. 웹 개발과 관련된 다양한 프로그램들과 언어 중 각각 장점과 특화된 점이 있기 때문에 자신이 개발하고자 하는 웹의 유형과 목표를 정하고 맞는 프로그램을 사용하시는 게 좋습니다.
관련 글