목차
- 프론트엔드와 백엔드란?
프론트엔드란?
백엔드란? - 프론트엔드, 백엔드 에서 사용하는 언어
- 백엔드를 공부하며 프론트엔드를 알아야 하는 이유
프론트엔드와 백엔드란?
개발하는 과정에서 프론트엔드와 백엔드의 연결은 필수적인 단계입니다.
프론트엔드는 사용자에게 보이는 인터페이스를 담당하며,
백엔드는 데이터 처리, 로직 실행, 인증과 같은 서버 측 작업을 처리해요.
제가 들은 강의에서는 쉽게 음식점에 비유를 해주셨는데요.
저는 건물에 쉽게 비유를 해볼게요~!
웹사이트나 앱을 만드는 것은 멋진 건물을 짓는 것과 매우 비슷합니다.
건물을 지을 때 우리가 보는 부분과 보이지 않는 부분이 있듯이,
개발에도 사용자가 보는 부분과 보이지 않는 부분이 있습니다.
프론트엔드 = 건물의 인테리어
프론트엔드란 웹 또는 앱에서 ‘사용자가 직접 상호작용할 수 있는 사용자 인터페이스(UI; User Interface)를 말합니다.
쉽게 말해, ‘화면상에 보이는 것’을 뜻하며,
웹 이나 앱에서는 레이아웃, 메뉴, 디자인 버튼 등 이 프론트엔드 개발에 속해요
비유하면 건물의 인테리어와 같아요~
사람들이 건물에 들어왔을 때 보이는 가구나, 벽지 등 보고 경험 하는 모든 것들이라고 생각하면 이해하기가 쉽죠? 😊
프론트엔드의 구체적인 역할
1. 시각적 디자인
• 색상과 폰트: 어떤 색깔을 쓸지, 글씨체는 어떻게 할지
• 레이아웃: 버튼, 메뉴, 이미지를 화면 어디에 배치할지
• 반응형 디자인: 컴퓨터, 태블릿, 스마트폰에서 모두 예쁘게 보이도록
디자이너의 역할: 어떻게 하면 사용자가 편리하고 즐겁게 사용할 수 있을지 고민
2. 사용자 경험(UX)
• 직관적인 메뉴: 사용자가 원하는 기능을 쉽게 찾을 수 있도록
• 빠른 반응: 버튼을 클릭했을 때 즉시 반응하도록
• 편리한 입력: 회원가입이나 로그인을 간편하게
제작자의 역할: 디자인을 실제로 작동하는 웹페이지로 구현
3. 상호작용 기능
• 클릭 효과: 버튼을 누르면 색깔이 바뀌거나 애니메이션 효과
• 스크롤 효과: 페이지를 내릴 때 나타나는 부드러운 움직임
• 폼 검증: 형식이 틀렸을 때 즉시 알려주는 기능
테스터의 역할: 다양한 기기와 브라우저에서 제대로 작동하는지 확인
백엔드 = 건물의 기반 시설
백엔드란 웹 또는 앱에서 사용자의 행동을 처리하고,
정보를 저장·관리·전달하며, 서버와 데이터베이스를 관리하는 역할을 합니다.
프론트엔드가 웹이나 앱의 ‘앞에서 일어나는 일’이라면, 백엔드는 ‘뒤에서 일어나는 일’인 셈이죠.
마찬가지로 비유하자면, 건물의 기반 시설과 같다고 보시면됩니다.
눈에는 보이지않지만 건물이 지어지고 작동하기 위해 반드시 필요한 모든 시스템들을 생각하면 좋아요
예를 들어 전선이라던가, 기초공사, 상하수도 를 떠올리시면 보다 쉽게 이해가 가능하실거에요
백엔드의 구체적인 역할
1. 데이터 저장 및 관리
• 데이터베이스: 사용자 정보, 상품 정보, 주문 내역 등을 안전하게 보관
• 데이터 처리: 필요한 정보를 빠르게 찾아서 제공
• 백업 관리: 중요한 데이터가 사라지지 않도록 백업
시스템 설계: 많은 사용자가 동시에 접속해도 문제없도록 시스템 구조 설계
2. 비즈니스 로직 처리
• 계산 작업: 할인가격 계산, 배송비 계산, 포인트 적립 등
• 규칙 적용: "N만원 이상 구매 시 무료배송" 같은 비즈니스 규칙
• 권한 관리: 일반 사용자와 관리자의 접근 권한 구분
기능 구현: 복잡한 비즈니스 로직을 코드로 구현
3. 보안 및 인증
• 로그인 처리: 사용자가 올바른 비밀번호를 입력했는지 확인
• 데이터 암호화: 개인정보나 결제 정보를 안전하게 보호
• 해킹 방지: 악의적인 접근을 차단하는 보안 시스템
보안 관리: 해킹이나 데이터 유출을 방지하는 보안 시스템 구축
4. 외부 서비스 연동
• 결제 시스템: 신용카드, 계좌이체 등 결제 처리
• 배송 시스템: 택배사와 연동하여 배송 정보 제공
• 알림 서비스: 이메일, SMS 발송
성능 최적화: 빠르고 안정적으로 서비스가 작동하도록 최적화
아무리 인테리어가 이쁘더라도 전기가 안들어오거나 수도가 안되면 거주가 불가능하고
기반시설이 좋다하더라도 인테리어가 엉망이면 살기가 싫듯이
웹 또는 앱도 마찬가지에요~
프론트엔드와 백엔드가 조화롭게 작동해야 사용자들이 만족하는 서비스가 완성되요~!
네이버, 다음, 구글 등을 생각하면 굉장히 보기쉽고 이용하기 편리한것도 이때문이랍니다 :)
자세한건 마지막에 한번더 다뤄볼게요~!
프론트엔드와 백엔드의 언어
프론트엔드에서 사용하는 언어
- HTML, CSS, JavaScrip
HTML은 웹페이지의 구조나 목차를 구성할 때 사용해요.
HTML은 웹 프론트엔드 개발의 기본적인 언어이지만, HTML만 사용할 경우
아래 이미지 처럼 옷을 안입은 홈페이지처럼 보인답니다^^
CSS는 HTML로 구성한 웹페이지를 좀 더 예쁘게 꾸미는 역할을 합니다.
HTML에 입력된 언어가 실제로 사용자에게 보일 때는 CSS를 적용할 수 있습니다.
쉽게말해 위의 HTML에 옷을 입혀주는 역할이라고 보시면되요~!
JavaScript는 웹에서의 동적 모션을 담당합니다.
즉, HTML으로 뼈대를 구성하고, CSS로 옷을 입혔다면, JavaScript로 웹에서의 움직임을 표현할 수 있습니다.
보통 웹에서의 프론트엔드 개발은 이 세 가지 언어를 함께 사용하는 편이죠.
네이버 좌측상단의 三을 누르면
메뉴가 나오듯이 어떤 버튼을 누르면 어디로 이동하는 것들이라고 생각하시면 되요~!
백엔드에서 사용하는 언어
- JAVA,Python,JavaScript
백엔드 언어는 굉장히 다양하지만 가장 대표적으로 많이 쓰이는 3가지만 소개를 간단히 해볼게요~!
자바(JAVA)는 전통적인 백엔드 개발 언어로, 아직까지도 많은 사람들이 자바를 이용해 백엔드를 개발하고 있습니다.
특히, 한국에서는 자바가 전자정부표준프레임워크로 지정되었기 때문에
대부분의 정부 프로젝트는 자바를 이용해 개발합니다.
파이썬(Python)은 문법이 매우 쉽고 직관적이라 간결하고 깔끔하게 코드를 작성할 수 있으며,
배우기 쉽다는 장점이 있습니다.
최근 개발자 언어로 급부상한 만큼 다양한 프레임워크와 라이브러리가 존재하며, 커뮤니티 또한 활발한 편입니다.
프론트엔드 개발에 사용하는 자바스크립트(JavaScript)는 백엔드에서도 사용할 수 있습니다.
참고로, 자바와 자바스크립트는 이름만 닮았을 뿐 완전히 다른 언어인데요.
문법이 쉽고, 프론트엔드 개발에서도 활용된다는 점에서 웹 분야에서 큰 인기를 얻고 있습니다.
백엔드를 배우며 프론트엔드를 알아야 하는이유
백엔드 개발자가 프론트엔드를 알아야 하는 이유는
원활한 API 설계, 효율적인 데이터 처리, 그리고 독립적인 풀스택 역량 강화 때문입니다.
클라이언트가 데이터를 어떻게 소비하는지 이해하면, 서버의 성능과 협업의 효율이 크게 향상됩니다.
- 최적화된 API 설계: 프론트엔드가 데이터를 어떻게 요청하고 화면에 렌더링하는지 알면,
불필요한 통신을 줄이고 최적화된 API(데이터 구조)를 설계할 수 있습니다. - 원활한 협업 및 소통: 프론트엔드 개발자와 소통할 때 공통된 용어와 기술적 한계를 이해하므로
요구사항을 정확히 조율하고 병목 현상을 해결할 수 있습니다. - 독립적인 서비스 구축(풀스택 역량): 프론트엔드를 다룰 줄 알면 타개발자 없이도
간단한 화면을 만들어 자신이 작성한 서버 로직과 데이터베이스를 즉시 테스트할 수 있습니다. - HTTP 및 웹 표준에 대한 깊은 이해: 데이터를 주고받는 헤더(Header), 상태 코드(Status Code),
쿠키/세션 동작 등을 프론트엔드 관점에서 직접 확인하며 웹의 동작 원리를 더 명확하게 파악할 수 있습니다.
위의 이유처럼 굉장히 중요한 포인트도 있지만,
교육을 들으면서 "함께 일하기 좋은 사람이 되기 위해서" 라는 말이 가장 저한텐 깊게 와닿았어요.
프론트엔드가 어떻게 운영되는지 모르면, 고객의 정확한 니즈를 파악하기 어렵고
니즈를 파악하기 어려운만큼 이용의 편의성이 떨어질것같다는 생각이 들었어요.
누구나 편하고 원활한 이용을 위하는 만큼,
각자의 업무를 이해하고
그들이 필요로 하는 데이터를 정확하고 효율적으로 제공하는 전문가가 되기 위해서는
어느정도는 알아두는것이 좋다라고 생각하며 오늘의 TIL을 마치겠습니다.