1. 프론트엔드& 백엔드 개념

1) 프론트엔드와 백엔드 정의

프론트엔드(front-end)

• 웹/앱 화면에서 사용자(클라이언트)에게 보여지는 화면(앞단)

백엔드(back-end)

• 웹/앱 화면에서 사용자에게 보여지지 않는 부분
• 서버 측에서 데이터 처리와 관리를 담당하는 뒷단
  
  

2) 웹 개발에서의 역할과 중요성

프론트엔드

• 웹/앱 페이지의 시각적 요소와 사용자 인터페이스를 개발하고 관리
• 사용자가 웹 사이트나 애플리케이션과 상호작용할 때 보는 화면과 디자인을 만들고 유지보수
• 프론트엔드는 사용자 경험(UX)를 크게 좌우하며, 웹 페이지의 레이아웃, 색상, 애니메이션 등을 다룸

백엔드

• 데이터베이스(DB)와 서버(server), 비즈니스 로직 관리
• 프론트엔드로부터 데이터를 받아오고 처리하며, 사용자가 요청한 작업 수행
• 보안, 성능 최적화, DB 등을 관리
  
  
  

2. 프론트엔드

1) 주요 기술과 도구

• 프론트엔드에는 HTML, CSS, Javascript가 가장 기본적인 언어로, 각 언어는 골격(HTML) + 피부(CSS) + 행동(Javascript)를 담당하여 앱의 프론트를 구성한다.

- HTML(HyperText Markup Language)

• HyperText(하이퍼텍스트): 참조(하이퍼링크)를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
• Markup(마크업): 어떤 문자열에 '의미를 갖는 마크'를 붙인다는 의미. 예를 들어 <title>제목명</title>로 작성하면 컴퓨터는 마크(html에서는 태그라고 함)로 "제목명"을 타이틀로 인식함. 이렇게 텍스트에 마크업(표기)를 하면 검색 사이트에 정확한 정보를 제공할 수 있고, 웹 접근성에도 좋음
• Language(언어): IT에서 언어는 프로그래밍 언어를 의미하고, 프로그래밍 언어는 사용자가 컴퓨터에게 명령을 내리기 위한 도구를 의미. 사용자와 컴퓨터는 약속된 규칙(문법)을 통해 서로 의사소통이 가능함.
• 즉, HTML은 문서(데이터)의 구조 골격을 표기하는 표준 마크업 언어를 의미함.

- CSS(Cascading Style Sheet)

• Cascading(캐스케이딩): cascade는 작은 폭포, 폭포처럼 흐르다는 의미를 가진다. 즉, '위에서 아래로 떨어지는'이라는 의미를 갖는데, 이는 CSS 언어 특징이 스타일이 상속되는 방식을 가지는 것을 의미한다. 다시 말해 상위 요소에서 정의된 스타일이 하위 요소에도 같이 적용된다. 예로 들어 상위 요소에 굵은 빨간 글씨를 정의했다면, 하위 요소에도 굵은 빨간 글씨가 적용된다.
• Style(스타일): 문서의 요소나 모양, 레이아웃, 디자인을 정의하는 것. 폰트, 색상 간격, 배치 등의 시각적인 요소를 지정함
• Sheet(시트): 여러 스타일 규칙이 포함된 문서를 의미. HTML 요소에 적용할 스타일이 포함된 시트로, 이를 통해 웹 페이지의 디자인을 제어함.
• 즉, CSS는 골격만 있는 문서에 디자인(스타일)을 입히는 작업을 하는 스타일 시트 언어

- JavaScript

• JavaScript(자바스크립트): 웹 페이지를 동적으로 만들기 위해 사용되는 스크립트 언어. 줄여서 JS라고 쓰이기도 하며, JS 덕분에 앱이 사용자 입력에 반응하거나 앱의 디자인이 변경되는 등 다양한 동적 기능이 가능해짐. 참고로 자바스크립트는 객체 지향 언어인 Java와 완전히 다른 프로그래밍 언어로, Javascript 출시 초기에는 'LiveScript'라는 이름으로 출시되었으나 인기가 없어, 그 당시 인기있는 언어인 Java 유명세에 편승하기 위해 'JavaScript'라는 이름으로 변경되었음.
• 즉, JavaScript는 웹 페이지의 동적인 기능을 구현하는 스크립팅 언어임

그 외

• 그 외에도 Reract.js, Vue.js, Angular, TypeScript 등이 있으나 회사별, 개발하고자 하는 웹앱의 기능과 목적에 따라 사용 여부가 갈리지만 위의 3가지는 프론트엔드 개발자의 기본 중의 기본이라고 할 수 있음.
  
  
  

3. 백엔드

1) 기술과 데이터베이스

서버 사이드 프로그래밍 언어

• 서버 사이드(server side): 웹 애플리케이션에서 사용자가 보지 못하는 부분, 즉 서버에서 처리되고 실행되는 영역을 의미. 주로 DB 관리, 사용자 요청에 대한 응답 생성, 웹 애플리케이션의 비즈니스 로직 처리 등을 포함함
• 서버 사이드 프로그래밍 언어: 서버 사이드(서버 영역)에서 사용되는 언어를 의미함. 이 언어들은 서버에서 요청을 받아들이고, 그에 따라 데이터베이스에 접근하거나 사용자에게 결과를 반환하는 등의 작업을 수행함. 대표적으로 PHP, Python(Django), JavaScript(Node.js), Ruby(Ruby on Rails) 등이 있음.

데이터베이스(DB, Database)

• Database(데이터베이스): 데이터 저장소를 의미. 웹 개발에서는 웹 애플리케이션의 데이터를 관리하는데 사용되며, 데이터를 어떻게 관리하는지에 따라 데이터를 관리하는 툴(DBMS)이 달라짐. 참고로 DB와 DBMS는 엄연히 의미하는 바가 다르지만 일반적으로 DBMS를 DB라고 부른다.
• DBMS(Database Management System)은 데이터를 관리하는 툴을 의미하는데, 사용자(클라이언트)는 DB에 쌓인 데이터에 직접 접근하지 못하고 DBMS를 통해 접근 가능하다. 이때 클라이언트가 DBMS에 데이터를 어떻게 조작해달라고 요청(질의, 쿼리, 씨퀄)을 하면 DBMS는 요청을 받아 DB에 접근하여 데이터를 꺼내와 사용자에게 보여준다. DBMS는 데이터를 어떻게 관리하느냐에 따라 HDBMS(계층형 데이터베이스 관리 시스템), NDBMS(망형 데이터베이스 관리 시스템), RDBMS(관계형 데이터베이스 관리 시스템), ODBMS(객체지향 데이터베이스 관리 시스템) 등으로 나뉠 수 있다. 최근에는 RDBMS가 가장 많이 쓰이고 있으며, RDBMS 제품으로는 Oracle, Mysql, SQL server, Maria DB가 있다. 참고로 사용자가 RDBMS에 접근하여 데이터를 조작/관리하려는 언어를 SQL(Structured Query Language, 구조적 질의어)라고 하며 단어 뜻 그대로 SQL은 정해진 문법과 규칙에 따라 구조화되어 있는 질의(질문/요청) 언어이므로 다른 프로그래밍 언어보다 배우기가 상대적으로 쉽다(상.대.적.으.로) SQL과 반대로 NoSQL이 있는데, 이는 "Not Only SQL"의 약자로 RDBMS와 다른 데이터 모델과 저장 방식을 사용하는 데이터베이스 유형을 가리킨다. NoSQL 데이터베이스 유형으로 문서 지향 데이터베이스, key-value 스토어, 열 지향 데이터 베이스, 그래프 데이터베이스 등이 있으며 MongoDB(문서지향 DBMS), Redis(key-value DBMS), AWS DynamoDB(key-value DBMS), Apache Cassandra(열 지향 DBMS), Neo4j(그래프 DB) 등이 있다.

2) 보안과 확장성

• 백엔드는 사용자 데이터를 관리하고 중요한 로직을 처리하기 때문에 보안에 매우 민감함. 그렇기 때문에 인증과 권한 관리, 데이터 보안, 보안 취약점 대응 등에 대해 잘 알아두어야 함.
• 또한 앱이 성장함에 따라 시스템 확장하는 능력도 중요한 요소 중 하나. 수평적 확장, 캐싱과 성능 최적화, 마이크로서비스 아키텍처, 모니터링과 스케일링 등과 같은 주제에 대해서도 잘 알아두어야 함.
  
  
  

4. 프론트엔드 vs 백엔드

1) 차이점

• 프론트엔드와 백엔드의 가장 큰 차이는 웹앱 개발 담당 영역 차이임
• 프론트엔드는 사용자가 접하는 화면 앞단과 관련된 부분을 개발하고, 백엔드 개발자는 화면 뒷단(서버, DB 등)을 담당함
• 프론트엔드는 사용자 인터페이스를 디자인하고 UX를 개선하고, 백엔드는 데이터 관리와 비즈니스 로직을 처리함

2) 상호 의존성과 협업의 중요성

• 과거 웹은 단순한 정적 페이지로 시작하여 프론트엔드 직무라는 게 없었음
• 최근 JavaScript, CSS, HTML 등 웹 기술의 발전으로 웹앱의 복잡성과 다양성이 높아짐
• 이에 동적이고 인터랙티브한 경험이 중요해지면서, UI/UX에 대해 주목하기 시작
• 사용자의 요구와 기대가 높아지면서 화면 앞단(프론트엔드)의 개발 중요성과 전문성이 필요해짐
• 뿐만 아니라 백엔드에서도 웹 기술의 발전으로 복잡한 비즈니스 로직과 데이터를 전문적으로 관리하는 것이 필요해짐
• 이런 데이터 관리와 로직 처리는 백엔드에서 처리되기 때문에 백엔드 역시 별도의 전문 분야로 성장함
• 프론트엔드와 백엔드는 서로 긴밀하게 연결되어 있으므로, 프론트 없는 백엔드와 백엔드 없는 프론트는 상상할 수 없음
• 프론트엔드와 백엔드는 전문성과 범위 때문에 나뉘어 있지만, 이들 모두가 협력하여 하나의 프로덕트를 개발하는 것이므로, 개발자 상호 간의 협업은 매우 중요함
  
  
  

5. 기타

• 웹 개발은 프론트엔드와 백엔드 두 영역으로 구분되며, 두 분야는 애플리케이션에서 주요한 역할을 한다. 예전부터 프론트보다는 백엔드에서 작업하는 일에 흥미를 느꼈다. 프론트에서 입력한 데이터가 어떻게 데이터베이스에 저장되고 가져오는지, 최근에 강조되는 데이터 관리 방법, 대용량 데이터 처리, 실시간 데이터 처리, 그리고 트래픽, 데이터베이스와 서버를 다루는 방법 등에 대해 알고 싶었다. 프론트엔드는 화려하게 개발하지는 못해도, 기본적인 부분만 알아도 구현이 가능하다는 점과 디자인 감각이 부족하다는 점 때문에 프론트에 대한 흥미를 갖지 못했다. 하지만 백엔드는 프로덕트의 핵심 로직을 만든다는 점과 백엔드를 잘 이해하면 다른 소프트웨어의 동작 원리도 이해할 수 있다는 생각이 가장 매력적으로 다가왔다.