HTML
CSS
자바스크립트
=>
HTML (Hypertext Markup Language): 웹 페이지의 구조를 정의하는 마크업 언어. 웹 페이지의 요소와 구조를 태그로 정의하며, 내용을 표시하고 링크를 설정하는 데 사용됩니다.
CSS (Cascading Style Sheets): 웹 페이지의 스타일과 레이아웃을 디자인하기 위한 스타일 시트 언어. HTML 요소에 스타일을 적용하여 글꼴, 색상, 배치 등의 디자인 요소를 지정합니다.
자바스크립트 (JavaScript): 웹 페이지를 동적으로 만들고 상호작용을 구현하기 위한 프로그래밍 언어. 사용자와 상호작용하며 웹 페이지를 변경하고, 이벤트 처리, 데이터 검증, 애니메이션 등 다양한 기능을 제공합니다.
HTTP
URL
DNS
웹 서버
=>
HTTP (Hypertext Transfer Protocol): 웹에서 데이터를 주고받을 때 사용되는 프로토콜로, 클라이언트와 서버 간의 통신을 관리합니다. HTML 문서, 이미지, 스타일 시트 등을 전송하는 데 주로 사용됩니다.
URL (Uniform Resource Locator): 웹 상에서 리소스의 주소를 나타내는 형식입니다. 프로토콜(예: http, https), 도메인 이름 또는 IP 주소, 포트 번호, 리소스 경로 등을 포함합니다.
DNS (Domain Name System): 인터넷에서 도메인 이름을 IP 주소로 해석하는 역할을 하는 시스템입니다. 사용자가 도메인 이름을 입력하면 해당 도메인의 IP 주소를 찾아주어 웹 서버와 통신할 수 있도록 합니다.
웹 서버: 클라이언트(웹 브라우저)로부터 HTTP 요청을 받아들이고, 해당 요청에 대한 정적 또는 동적인 웹 페이지를 생성하여 응답하는 소프트웨어입니다. 웹 서버는 웹 사이트 및 웹 애플리케이션을 호스팅하고 실행하는 역할을 합니다.
클라이언트 측 스크립팅
서버 측 스크립팅
=>
클라이언트 측 스크립팅: 웹 브라우저에서 실행되며, 사용자 인터페이스와 상호작용을 담당하는 프로그래밍 언어와 스크립트입니다. 주로 JavaScript를 사용하며, 웹 페이지를 동적으로 변경하고 사용자의 입력을 처리하는 역할을 합니다.
서버 측 스크립팅: 웹 서버에서 실행되며, 클라이언트에게 동적인 콘텐츠를 제공하고 데이터베이스와 상호작용하는 프로그래밍 언어와 스크립트입니다. 주로 PHP, Python, Ruby, Java 등을 사용하며, 서버에서 데이터 처리 및 로직을 수행합니다.
데이터베이스 관리
API
Ajax
JSON
XML
=>
데이터베이스 관리: 데이터의 저장, 검색, 업데이트, 삭제 등을 관리하기 위한 소프트웨어 시스템입니다. 데이터베이스 관리 시스템(DBMS)은 데이터를 구조화하고 보호하여 정보를 효율적으로 관리하며, 관계형 데이터베이스(SQL)와 NoSQL 데이터베이스 등이 있습니다.
API (Application Programming Interface): 소프트웨어 애플리케이션 간의 상호작용을 위한 인터페이스를 제공하는 도구나 규칙의 집합입니다. API는 데이터를 요청하거나 전송하고, 서비스를 확장하며, 애플리케이션 간 통합을 가능하게 합니다.
Ajax (Asynchronous JavaScript and XML): 웹 페이지에서 비동기적으로 데이터를 서버와 교환하기 위한 기술입니다. Ajax를 사용하면 페이지 전체를 새로 고치지 않고도 동적으로 데이터를 로드하고 업데이트할 수 있습니다.
JSON (JavaScript Object Notation): 경량 데이터 교환 형식으로, 사람과 기계 모두 이해하기 쉽고 파싱하기 용이한 데이터 형식입니다. 주로 웹에서 데이터를 교환하는 데 사용되며, JavaScript 객체와 유사한 구조를 가집니다.
XML (eXtensible Markup Language): 데이터를 표시하고 전송하기 위한 마크업 언어입니다. 계층 구조로 데이터를 표현하며, 다목적으로 사용되며, 웹 서비스 통신 및 데이터 저장에 사용됩니다. JSON보다 더 유연하지만 더 무겁고 복잡할 수 있습니다.
MVC 아키텍처
간단한 다트 코드로 MVC 아키텍처를 설명해보겠습니다.
이 코드는 CLI(Command Line Interface) 기반의 간단한 To-Do 리스트 애플리케이션을 예로 들 것입니다.
// Model - 데이터와 비즈니스 로직을 관리합니다.
class TodoModel {
List<String> todos = [];
void addTodo(String todo) {
todos.add(todo);
}
void removeTodo(int index) {
todos.removeAt(index);
}
}
// View - 사용자 인터페이스를 표시합니다.
class TodoView {
void showTodos(List<String> todos) {
print("To-Do List:");
for (var i = 0; i < todos.length; i++) {
print("$i: ${todos[i]}");
}
}
}
// Controller - 모델과 뷰 간의 중개자 역할을 합니다.
class TodoController {
final TodoModel _model = TodoModel();
final TodoView _view = TodoView();
void addTodo(String todo) {
_model.addTodo(todo);
_updateView();
}
void removeTodo(int index) {
_model.removeTodo(index);
_updateView();
}
void _updateView() {
_view.showTodos(_model.todos);
}
}
void main() {
final controller = TodoController();
controller.addTodo("Buy groceries");
controller.addTodo("Walk the dog");
controller.addTodo("Finish homework");
controller.removeTodo(1);
}이 코드에서, TodoModel은 데이터를 관리하고, TodoView는 데이터를 시각적으로 표시합니다. TodoController는 사용자 입력을 처리하고 모델과 뷰 간의 상호작용을 조정합니다. main() 함수에서는 간단한 To-Do 리스트를 만들고 항목을 추가하고 삭제하는 과정을 보여줍니다.
이것은 매우 간단한 예제이지만, MVC 아키텍처의 기본 개념을 보여주고 있습니다. 더 복잡한 애플리케이션에서는 모델, 뷰 및 컨트롤러가 더 복잡하고 구조화되어 있을 것입니다.
CMS
프레임 워크
버전 제어
크로스 브라우저 호환성
반응형 디자인
접근성
=>
CMS (Content Management System)은 웹 사이트 콘텐츠를 손쉽게 관리하고 업데이트하는 도구이며, 프레임워크 (Framework)는 웹 애플리케이션을 빠르게 개발하기 위한 구조를 제공하며, 버전 제어는 소프트웨어 변경사항을 관리하고 추적합니다. 크로스 브라우저 호환성은 다양한 웹 브라우저에서 일관된 작동을 보장하고, 반응형 디자인은 다양한 화면 크기와 기기에 맞추어 웹 페이지를 최적화합니다. 접근성은 모든 사용자가 웹 콘텐츠에 쉽게 접근할 수 있도록 보장합니다.
SEO
웹 보안
SSL/TLS
쿠키
세션
입증
권한 부여
=>
SEO (Search Engine Optimization)는 웹 사이트가 검색 엔진에서 높은 순위로 나타날 수 있도록 웹 페이지를 최적화하는 과정이며, 웹 보안은 웹 애플리케이션 및 데이터를 보호하는 것입니다. SSL/TLS는 데이터 암호화를 제공하여 웹 페이지와 사용자 간의 안전한 통신을 보장하고, 쿠키와 세션은 웹 사이트에서 사용자 정보를 저장하고 유지하는 방법입니다. 입증은 사용자의 신원을 확인하고 권한 부여는 사용자에게 특정 리소스 또는 기능에 대한 액세스 권한을 부여하는 것입니다.
암호화
해싱
SQL Injection
XSS
CSRF
=>
암호화: 데이터를 비밀스럽게 유지하기 위해 정보를 다른 형태로 변환하는 과정으로, 무단 접근을 방지하고 안전한 통신을 보장합니다.
해싱: 입력 데이터를 고유한 고정 길이 문자열로 변환하는 프로세스로, 암호 저장 및 데이터 무결성을 보호하는 데 사용됩니다.
SQL Injection: 악의적인 SQL 쿼리를 입력하여 데이터베이스에 무단 액세스하거나 파괴하는 공격으로, 보안 취약점을 이용하여 예방할 수 있어야 합니다.
XSS (Cross-Site Scripting): 웹 애플리케이션에서 악의적인 스크립트가 실행되도록 허용하는 공격으로, 사용자 입력을 안전하게 처리해야 합니다.
CSRF (Cross-Site Request Forgery): 사용자가 의도하지 않은 요청을 악의적인 웹 사이트를 통해 실행시키는 공격으로, 요청에 대한 충분한 인증 및 검증을 해야 합니다.
OWASP TOP 10
성능 최적화
캐싱
cdn
GZIP 압축
최소화
이미지 최적화
=>
OWASP TOP 10: 웹 애플리케이션 보안에서 주요 위협을 나열한 목록으로, 취약점을 방지하고 보호하기 위한 지침을 제공합니다.
성능 최적화: 웹 페이지 빠르게 로드하기 위한 기술로, 빠른 응답 시간과 사용자 경험을 향상시키는데 중요합니다.
캐싱: 이전에 검색한 데이터를 저장하고 재사용하여 웹 페이지 로딩 시간을 단축하며 서버 부하를 줄입니다.
CDN (Content Delivery Network): 콘텐츠를 전 세계의 서버에 분산하여 웹 페이지의 로딩 속도를 향상시키고, 대용량 트래픽을 관리하는 데 도움을 줍니다.
GZIP 압축: 웹 서버가 웹 페이지를 전송할 때 데이터를 압축하여 대역폭을 절약하고 로딩 시간을 단축시키는 데 사용됩니다.
최소화: HTML, CSS 및 JavaScript 파일을 최소화하여 불필요한 공백 및 줄 바꿈을 제거하고 파일 크기를 줄여 성능을 최적화합니다.
이미지 최적화: 이미지 크기를 줄이고 형식을 최적화하여 웹 페이지의 이미지 로딩 시간을 단축하고 사용자 경험을 향상시킵니다.
디버깅
테스트
단위 테스트
통합 테스트
엔드 투 엔드 테스트
=>
디버깅: 소프트웨어 버그를 찾고 수정하는 과정으로, 코드 실행 중에 발생하는 오류를 식별하고 해결하는 데 사용됩니다.
테스트: 소프트웨어의 동작을 확인하고 검증하기 위한 활동으로, 다양한 방법으로 코드를 실행하고 예상대로 동작하는지 확인합니다.
단위 테스트: 소프트웨어의 개별 컴포넌트 또는 모듈을 격리된 환경에서 테스트하는 과정으로, 개별 기능을 검증하고 버그를 식별합니다.
통합 테스트: 서로 다른 컴포넌트 또는 모듈을 통합하여 상호작용을 테스트하고 시스템 전체의 호환성을 검증합니다.
엔드 투 엔드 테스트: 소프트웨어 시스템 전체를 완전한 사용 사례를 시뮬레이션하여 실제 환경에서의 동작을 검증하며, 사용자 관점에서의 품질을 평가합니다.
지속적인 통합
전개
DevOps
민첩한 방법론
프로젝트 관리
=>
지속적인 통합 (CI)은 개발자가 코드 변경을 지속적으로 공유하고 통합하여 버그를 빠르게 식별하고 소프트웨어 개발 주기를 단축합니다.
전개 (CD)는 CI의 확장으로, 코드 변경 사항을 자동으로 빌드, 테스트하고 프로덕션 환경에 신속하게 배포하여 소프트웨어를 지속적으로 제공합니다.
DevOps는 CI/CD와 함께 소프트웨어 개발과 운영 팀 간의 협력을 강조하는 문화와 방법론으로, 소프트웨어 개발과 배포를 효율적으로 관리하며 품질을 향상시킵니다. 민첩한 방법론을 통해 프로젝트 관리를 강화하고 비즈니스 요구 사항을 빠르게 수용합니다.
