2024. 10. 12. 00:33ㆍFront-End의 모든것/시작하기
안녕하세요.
만나뵙게 되어 진심으로 영광이며,
이 글을 읽어주시는 모든 분들께 감사의 말씀을 드립니다.
전 퍼블리셔로 시작하여
cafe24나 makeshop과 같은 쇼핑몰 호스팅서비스를 이용한 사이트 구축을
1년 2개월간 진행하다가,
에이전시에서 7년 넘게 근무하면서
금융권, 여행사, 공기업 등 수 많은 프로젝트 구축 및 운영을 경험하고
잠깐 1년간 금융계열 퍼블리셔로 근무하다가
현재 게임회사 프론트엔드 개발자로 근무하고있습니다.
프론트엔드에 대해 시작하기 앞서
현재는 하나의 포지션으로 자리잡게된 프론트엔드는 비교적 최근에 사용되었습니다.
프론트엔드 백엔드로 구분되기 이전에는 개발이 비교적 단순하였고,
구분이 없이 웹개발자가 전반적인 개발을 담당하였습니다.
웹기술의 급격한 발전 하다 보니
(눈뜨고 일어나면 바뀌어있는 웹 생태계 환경이란🤮...)
좀 더 전문적인 작업들이 필요하게 되었는데요,
현재는 기존 웹개발자였던 분들이 희망에 따라 프론트엔드 혹은 백엔드로,
퍼블리셔였던 분들은 프론트엔드로 디벨롭하여 전환을 하던지,
웹 생태계에서 많은 자리를 잃었지만
아직도 퍼블리셔 포지션에 머물러 계신분들도 많습니다.
퍼블리셔 혹은 웹 개발자였던 분들께서는 대략적으로
프론트엔드 포지션의 역할 및 사용하는 언어에 대해서 간략하게나마 알고 계실텐데요,
이제 시작하거나 아직까지 자세히 모르시는 분들을 위해
간략하게 정리를 해보려고 합니다!
1️⃣ 프론트엔드 개발자의 주요 역할
- UI/UX 구현: 웹사이트의 구조, 스타일, 인터랙션 등을 사용자 입장에서 편리하게 사용할 수 있도록 구현합니다.
- 동적인 웹 기능 개발: 웹페이지에 인터랙티브한 요소를 추가하여, 사용자 입력에 반응하는 기능을 구현합니다.
- 웹 성능 최적화: 웹페이지가 로딩 속도를 보다 빠르고 부드럽게 동작하도록 성능을 개선합니다.
- 웹 브라우저 호환성: 다양한 브라우저와 디바이스에서 동일한 작동하도록 호환성을 유지합니다.
- 디자인을 코드로 변환: 디자이너가 설계한 시안을 바탕으로 HTML, CSS, JavaScript를 사용해 실제 웹페이지를 만듭니다.
- 사용자 인터랙션 구현: 웹페이지가 사용자의 행동(버튼 클릭, 스크롤, 입력 등)에 반응할 수 있도록 동적인 기능을 추가합니다.
- 반응형 웹 개발: 다양한 화면 크기(모바일, 태블릿, 데스크톱)에 맞춰 웹페이지가 적응하도록 개발합니다.
- 웹 성능 및 접근성 개선: 페이지 로딩 속도를 최적화하고, 모든 사용자가 쉽게 접근할 수 있는 웹사이트를 만듭니다.
2️⃣ 필수적으로 사용하는 언어와 기술
- HTML (Hypertext Markup Language): 웹페이지의 구조와 콘텐츠를 정의하는 언어입니다. 제목, 문단, 이미지, 링크 등을 배치합니다.
- CSS (Cascading Style Sheets): 웹페이지의 디자인과 레이아웃을 정의하는 언어입니다. 글꼴, 색상, 크기, 간격, 배경 등을 설정해 시각적인 스타일을 적용합니다.
- JavaScript: 웹페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다. 사용자의 클릭, 스크롤, 입력 등의 이벤트에 반응하는 기능을 구현할 수 있습니다.
*️⃣ 그 외 주요 기술
- 프레임워크와 라이브러리: 프론트엔드 개발을 더 효율적으로 해주는 도구입니다. 대표적으로 React, Vue.js, Angular와 같은 프레임워크나 라이브러리가 있습니다. 이들은 코드의 재사용성을 높이고, 복잡한 웹 애플리케이션을 쉽게 관리할 수 있도록 도와줍니다.
- 버전 관리 시스템(Git): 코드 변경 이력을 관리하고, 여러 개발자와 협업할 때 사용하는 필수 도구입니다.
- 패키지 매니저 (npm, Yarn): JavaScript 라이브러리나 패키지를 쉽게 설치하고 관리할 수 있게 도와줍니다.
- 웹 성능 최적화 도구: 웹 성능을 최적화하기 위해 이미지 압축, 코드 최적화, 캐싱 등의 작업을 할 수 있는 도구를 사용합니다.
처음 시작해보시려는 분들 및 HTML, CSS까지만 접하셨던 분들은
위 내용을 한번씩 읽고 지나가는 정도까지만 해도 될것같습니다.
추후 내용들은 차차 하나하나 다루면서
배워나가도록 해요!!