웹 개발은 종종 매우 복잡할 수 있습니다. 오늘은 초보자를 위해 영어 알파벳 한 글자당 하나씩, 26가지 개념과 기법을 소개해드리고자 합니다. 이상하게 들리니 시작해 보겠습니다.
A——아약스
AJAX는 비동기식 javaScript 및 xml을 의미하며 최근 몇 년간 사용해 온 모든 원활한 웹 애플리케이션의 주요 원동력입니다. 기술로서 AJAX는 이미 널리 사용되고 있습니다. Gmail, Flickr 등. WordPress 관리 패널에서도 찾을 수 있습니다. 그렇다면 정확히 무엇이며 어떻게 작동합니까?
핵심은 페이지의 다른 부분과 연결하지 않고도 페이지가 완전히 렌더링된 후 요청을 보내고 응답을 받을 수 있는 xmlhttpRequest입니다. 이는 웹 애플리케이션이 모든 작업에 대해 전체 페이지를 새로 고칠 필요가 없음을 의미합니다. 이는 매우 부드럽고 동적인 데스크톱 앱과 같은 사용자 경험을 제공합니다.
관련 독서
원시 Javascript로 AJAX 요청을 만드는 방법
AJAX 구현을 위한 24가지 모범 사례
jQuery를 사용하여 페이지 새로 고침 없이 양식 제출
B——브라우저(브라우저)
브라우저는 웹사이트나 앱의 구조를 이해하는 것입니다. 최신 브라우저는 인터넷 서핑에 사용될 수 있을 뿐만 아니라 멀티태스킹 플랫폼이기도 합니다. 예를 들어 IRC, FTP 및 각 장치에 정보를 동기화하는 기능을 설치했습니다. 브라우저가 귀중한 개발 도구라는 것을 이미 알고 계실 수도 있지만, 많은 문제를 야기하기도 합니다. 자신의 작업이 모든 브라우저에서 완벽하게 보이도록 해야 하는 모든 개발자는 이러한 고통을 이해해야 합니다.
관련 독서
브라우저 테스트 및 작업 검증을 위한 13가지 방법
웹사이트를 브라우저에서 테스트하는 5가지 방법
9가지 가장 일반적인 IE 버그 및 수정 방법
C——CSS
CSS는 프런트엔드 개발의 날카로운 검입니다. Cascading Style Sheets의 약자인 CSS는 웹 페이지가 표시되는 방식을 정의하는 언어입니다. 웹 개발이 가장 무서웠던 시절, 개발자들은 종종 HTML 소스 코드에 스타일 코드를 작성했습니다. CSS는 스타일과 콘텐츠를 매우 잘 분리합니다.
관련 독서
꼭 기억해야 할 30가지 CSS 선택자
초보자를 위한 30가지 CSS 모범 사례
CSS 특이성 이해
CSS: 멍청한 놈부터 닌자까지 – 완전한 비디오 시리즈
D——돔
DOM은 HTML 또는 XML 문서와 상호 작용하기 위해 허용되는 규칙인 Document Object Model의 약자입니다. DOM API는 프로그래밍 방식으로 문서를 탐색하고 조작하기 위한 기능을 제공합니다. "DOM은 구문 분석된 HTML 문서에 대해 일관된 계층 구조를 생성합니다. 하위 요소를 노드 또는 DOM 노드라고 합니다." 사람들이 DOM에 대해 이야기하는 것을 듣는다면 실제로는 DOM 스크립트에 대해 이야기하고 있는 것입니다. 이전에는 JavaScript를 통해 DOM에 액세스하고 조작하는 것을 설명하는 용어였습니다. 이것이 오늘날 볼 수 있는 대부분의 최신 웹사이트와 앱의 기반이 되는 기술입니다.
관련 독서
JavaScript와 DOM 시리즈: 1과
자바스크립트와 DOM: 2과
Dom is a Mess – John Resig의 강의
E——이벤트
최신 웹 애플리케이션은 이벤트 중심적입니다. 그럼 이벤트란 무엇인가? 웹페이지에서 수행하는 대부분의 작업은 이벤트를 형성합니다. 링크 위에 마우스를 놓는 것, 버튼을 클릭하는 것, Tab 키를 누르는 것 등은 모두 유효한 이벤트입니다. 이벤트 처리는 이벤트가 발생할 때 지정된 코드 조각을 실행하는 것을 의미합니다. 이는 또한 여러분이 숙달해야 하는 최신 웹 개발의 기본 개념이기도 합니다.
관련 독서
Null의 JavaScript: 5장 – 이벤트
기초부터 JavaScript 이벤트
Null의 JavaScript: 크로스 브라우저 이벤트 바인딩
4분 만에 JavaScript 이벤트 위임
F——방화범
일꾼이 일을 잘하고 싶다면 먼저 도구를 갈고 닦아야 합니다. 웹 개발자도 마찬가지다. 매우 강력한 도구는 Firebug입니다. Firebug는 작업 전반에 걸쳐 작동하는 Firefox 확장입니다. 이를 통해 페이지의 모든 측면을 즉시 편집하고 모니터링할 수 있습니다. 여기서는 기능에 대해 자세히 설명할 수 없으므로 아래 링크를 클릭하세요.
관련 독서
Firebug를 사용해야 하는 10가지 이유
Firebug를 사용하여 CMS 테마를 지정하는 방법
방화범: 흰색에서 검은색 벨트까지
G - 그리드
그리드는 페이지를 구성하기 위한 시각적 프레임워크입니다. 한때 발전했던 인쇄 산업을 이식한 것이며, 그리드는 현재 웹 개발의 필수적인 부분입니다. 매우 많은 수의 페이지와 레이아웃에 대해 집중적인 연습이 필요한 그리드 기반 레이아웃을 만드는 데 사용할 수 있는 CSS 프레임워크가 많이 있습니다.
관련 독서
960 CSS 프레임워크 자세히 살펴보기
Blueprint CSS 프레임워크 자세히 살펴보기
단기집중과정: YUI 그리드 CSS
960 그리드 시스템 마스터하기
H——HTML
지금 이 글을 읽고 계신다면, 그 개념이 어느 정도 막연하게 느껴지실 수도 있습니다. 이 링크에 속으셨다면 계속 읽어보시기 바랍니다. 그런데 rockux를 방문하신 모든 분들을 환영합니다. 우리는 웹 개발에 관한 많은 기사를 제공합니다. HTML은 Hypertext Markup Language의 약자로 웹 언어의 사실상 표준입니다. HTML은 태그, 태그 속성, 태그 내에 포함된 콘텐츠 등 여러 구성 요소 또는 요소로 구성됩니다. HTML 표준의 최신 버전인 HTML5는 많은 새로운 기능을 제공하고 일부 호환성 문제를 해결합니다.
관련 독서
"HTML5와 당신" 강좌
초보자를 위한 30가지 HTML 모범 사례
꼭 알아야 할 28가지 HTML5 기능, 팁, 기술
초보자가 사용하지 않는 10가지 HTML 태그
나 - IE
아, 인터넷 익스플로러요. 그 이름은 경외심과 분노를 불러일으킵니다. 이는 업계 전체를 발전시키는 네 가지 흥미로운 새 기능을 가져온 영웅이었으며 브라우저 침체의 역사도 종식시켰습니다. 오늘날까지도 여전히 프론트엔드 개발자를 이끌고 있습니다. 10년 간의 전쟁 끝에 IE의 마지막 버전은 9이며, 혁신의 올바른 방향으로 돌아왔습니다. IE에 대한 귀하의 태도와 상관없이, IE는 여전히 웹 개발 프로세스에서 피할 수 없는 부분입니다.
관련 독서
Internet Explorer의 올바른 점
9가지 가장 일반적인 IE 버그 및 수정 방법
Internet Explorer가 박스 모델을 제대로 얻었습니까?
J - 자바스크립트
JavaScript는 기본 웹 개발 삼중 요소의 마지막 구성원입니다. Java가 아닌 JavaScript는 웹의 스크립팅 언어입니다. 이를 사용하는 수십억 개의 웹페이지가 있으며, 더 중요하게는 주장을 뒷받침하는 웹사이트가 있습니다. JavaScript를 통해 동작을 정의하고, 이벤트를 관리하고, DOM을 조작하고, 서버와 상호 작용합니다. jQuery와 같은 놀라운 라이브러리의 사용 덕분에 JavaScript에 대한 이해와 지식이 매년 늘어나고 있습니다. 나는 JavaScript가 모든 현대 웹 개발자에게 절대적으로 필요한 것이라고 말하는 것이 적절하다고 생각합니다.
관련 독서
초보자를 위한 24가지 JavaScript 모범 사례
Null의 JavaScript: 비디오 시리즈
JavaScript 중독자로 반드시 구독해야 할 개발자 33인
K——키워드 최적화(키워드 최적화)
SEO는 웹 개발에만 관련이 있지만, 그렇더라도 웹 개발자가 SEO가 무엇이고 무엇을 할 수 있는지에 대한 기본 지식을 갖는 것이 중요합니다. 키워드 최적화란 귀하의 웹사이트에 적합한 키워드를 선택하고 방문자가 귀하의 웹사이트를 찾을 수 있도록 최적화하는 것을 의미합니다. 그리고 모든 SEO 원칙에 들어갈 때 기억하세요: 콘텐츠가 왕입니다. SEO는 훌륭하지만 콘텐츠가 좋지 않으면 사용자가 귀하를 찾았지만 빨리 떠날 수 있습니다. 좋은 콘텐츠가 있으면 사용자가 당신을 찾고 머무를 것입니다.
관련 독서
당신에게 필요한 유일한 SEO 도구
엘——덜
Less는 가시가 많은 장미 스타일의 언어입니다. 그들의 웹사이트에서는 LESS를 변수, 믹스인, 연산자 및 함수와 같은 CSS의 동적 동작을 확장하는 것으로 설명하고 있으며 저는 이 접근 방식을 선호하는 경향이 있습니다. LESS는 단백 동화 스테로이드의 CSS입니다. 예, 제게는 더 좋게 들리지만, 그게 무슨 뜻인지 아실 겁니다. 동적 언어의 특성을 CSS에 추가하여 스타일 시트를 더욱 강력하고 관리하기 쉽게 만듭니다.
관련 독서
LESS를 최대한 활용하는 방법
LESS.js를 확인해야 합니다.
공급업체 접두어를 다시 입력하지 마세요.
남——MVC
MVC 패턴으로 더 잘 알려진 모델 뷰 제어 패턴은 웹 개발에서 가장 많이 사용되는 패턴 중 하나입니다. 이는 보다 쉬운 유지 관리를 위해 웹 애플리케이션의 각 부분을 논리적 청크로 분할하는 아키텍처 패턴입니다. 모델은 데이터를 처리하고 뷰는 프레젠테이션을 처리하며 컨트롤러는 두 부분 간의 데이터 흐름을 담당합니다.
최신 웹 개발 프레임워크를 사용하는 경우 MVC를 사용합니다. Ruby on Rails, Code Igniter 및 Zend Framework는 모두 이 패턴을 사용합니다.
관련 독서
멍청한 놈들을 위한 MVC
PHP로 첫 번째 Tiny MVC 상용구 만들기
처음부터 asp.net: MVC
N - node.JS
node.JS는 웹 개발을 새로운 시대로 이끌고 있습니다. 이를 통해 매우 빠른 VM(V8) 엔진에서 JavaScript를 실행할 수 있습니다. 이러한 사고 패턴의 변화로 인한 결과는 즉각적으로 드러나지 않을 수도 있지만, 시간이 지나면서 장점이 분명해질 것입니다.
수천 개의 동시 IO 이벤트를 관리할 수 있는 놀라운 속도와 능력은 전 세계 JavaScript 개발자의 주요 화두입니다.
관련 독서
Node.js로 서버 측 JavaScript 학습
Node.JS 공식 사이트
오——개체
객체 지향 프로그래밍은 유연성 때문에 프로그래밍 커뮤니티에서 널리 받아들여졌습니다. OOP를 사용하면 더 적은 수의 코드를 작성할 수 있으므로 코드가 더 깔끔하고 유지 관리가 더 쉬워집니다. 그런데 객체란 정확히 무엇입니까? 한두 문장으로 명확하게 설명하기는 어려우니 아래 링크를 참고하세요.
관련 독서
초보자를 위한 객체지향 PHP
객체 지향 JavaScript의 기본
위키피디아 링크
피——PHP
PHP는 의심할 여지 없이 가장 널리 사용되는 서버측 언어입니다. PHP는 수백만, 어쩌면 수십억 개의 웹 페이지와 애플리케이션을 지원합니다.
웹 애플리케이션 작성을 위한 더 나은 선택이라는 수많은 업데이트와 논쟁에도 불구하고 PHP는 살아남았을 뿐만 아니라 번성했습니다. WordPress, Joomla, Drupal, MediaWiki는 모두 PHP를 백엔드 언어로 사용합니다. 주된 이유 중 하나는 배포가 쉽고 PHP를 지원하는 호스트를 비교적 쉽게 찾을 수 있다는 것입니다.
관련 독서
초보자를 위한 30개 이상의 PHP 모범 사례
당신이 나쁜 PHP 프로그래머인 이유
알아야 할 9가지 유용한 PHP 함수 및 기능
질문——질문
우리 기사의 쿼리는 많은 것을 의미할 수 있습니다. 쿼리 언어는 외부 시스템에서 데이터를 얻는 데 사용되는 인터페이스입니다. SQL은 관계형 데이터베이스에서 정보를 얻는 좋은 예입니다.
반면 쿼리 문자열은 URL의 일부로 웹 애플리케이션에 전달되는 부분입니다. 이 데이터는 사용자가 ID나 거래를 확인하기 위해 액세스하는 페이지의 모든 것일 수 있습니다. 쿼리 문자열은 키-값 쌍으로 형식화됩니다.
관련 독서
처음부터 CodeIgniter: 쿼리 문자열이 없는 검색 결과
WordPress의 "댓글 수별 인기 게시물" SQL 쿼리
R - 정규식
정규식은 지정된 패턴에 따라 텍스트의 문자열을 일치시키는 유연한 방법을 제공합니다. 특정 언어로 작성되고 통역사에 의해 구문 분석됩니다. 모든 현대 언어는 정규식을 지원합니다.
관련 독서
초보자를 위한 정규 표현식: 스크린캐스트 시리즈
당신은 정규 표현식에 대해 아무것도 모릅니다: 완전한 가이드
고급 정규식 팁 및 기술
S - 소스 제어(소스 제어)
소스 제어는 어떤 측면에 중점을 두더라도 팀의 개발 프로세스 내에서 널리 사용되는 방식입니다. 모든 분야의 프로그래머는 소스 제어를 사용합니다. 하지만 정확히 무엇입니까? 간단히 말해서, 소스 제어를 통해 개발자 팀은 파일 모음을 작업하고 각 구성원의 변경 사항을 추적하고 식별할 수 있습니다. 각 코드 버전을 비교, 병합 또는 복원할 수 있습니다.
관련 독서
우리 모두를 위한 터미널, Git, GitHub: 스크린캐스트
Git에 대한 시각적 소개
Git으로 간편한 버전 관리
GitHub 사용법 익히기
T - TDD(테스트 주도 개발)
이는 다시 모든 개발자의 공통 요소입니다. TDD는 테스트 주도 개발(Test-Driven Development)의 약어로, 코드를 실행하는 동시에 해당 코드에 대한 테스트 케이스를 자동화하는 프로세스를 말합니다. 이는 지루한 소프트웨어 테스트를 많이 없애고 개발자가 더 많은 테스트를 하도록 장려합니다.
관련 독서
테스트 주도 개발을 위한 초보자 가이드
테스트 기반 JavaScript 개발 실습
QUnit으로 JavaScript 코드를 테스트하는 방법
U —— 단위 테스트(단위 테스트)
단위 테스트는 작은 단위의 코드를 테스트하여 릴리스 가능한지 확인하는 일련의 TFF입니다. 그러나 단위 테스트는 OPP의 메서드와 관련이 있는 경우가 많습니다. OPP는 일반적으로 독립적으로 테스트할 수 있는 프로그램의 가장 작은 단위를 의미합니다.
관련 독서
QUnit으로 JavaScript 코드를 테스트하는 방법
V——빔
VIM은 매우 극단적인 텍스트 편집기입니다. Vim은 무료 오픈 소스이며 선택할 수 있는 수많은 기능 패키지가 있습니다. 반면, 학습 곡선은 거의 견딜 수 없을 정도로 가파르고 좋은 리소스가 없으면 오랫동안 길을 잃을 수 있습니다. 아래 링크를 클릭하여 왜 가치 있는 일인지 알아보세요.
W-워드프레스
WordPress는 최소한의 블로그 시스템으로 시작했지만 지금은 엄청나게 확장되었습니다. 확장성을 통해 CMS부터 전자상거래 시스템까지 모든 분야에 사용할 수 있습니다. 또한 개발자와 디자이너를 포함하여 향후 웹사이트에서 신뢰할 수 있는 플랫폼으로 만들고 싶어하는 많은 열성팬과 추종자가 있습니다.
관련 독서
WordPress 테마를 처음부터 만드는 방법
모든 WordPress 설치를 위한 필수 플러그인
높은 트래픽을 위한 WordPress 확장
상위 50개 WordPress 튜토리얼
8가지 훌륭한 WordPress SEO 플러그인
X——XSS
XSS는 교차 사이트 스크립팅을 의미합니다. 이것은 웹사이트를 만들 때 물어볼 수 있는 많은 보안 질문 중 하나입니다. XSS는 권한을 상승시키거나 민감한 정보를 얻기 위해 악성 스크립트가 포함된 취약한 웹사이트나 프로그램을 로드하는 행위를 의미합니다.
관련 독서
자신의 사이트를 해킹할 수 있나요? 몇 가지 필수 보안 고려 사항을 살펴보세요.
처음부터 CodeIgniter: 보안
보안 PHP 애플리케이션 생성을 위한 5가지 유용한 팁
Y——유이
Yahoo 사용자 인터페이스 라이브러리는 대화형 웹사이트를 만드는 과정을 단순화하는 JavaScript 라이브러리입니다. 대부분의 최신 라이브러리와 마찬가지로 DOM 조작 및 즉시 사용 가능한 AJAX를 제공합니다. jQuery만큼 유명하지는 않지만 YUI는 여전히 매우 큰 사용자 기반을 보유하고 있으며 적극적으로 개발되었습니다.
관련 독서
YUI 소개
2010 유이극장을 통해 본
Z---Z 색인
Z-Index는 페이지에서 요소가 쌓이는 방식을 정의하는 CSS 속성입니다. 즉, 요소가 뷰포트 상단에 얼마나 가까이 있는지를 정의합니다. 값이 크면 값이 작은 요소 위에 표시된다는 의미입니다. 이 속성은 비교적 전문적일 수 있지만 위젯이나 더 복잡한 웹 디자인을 만들 때 즉시 작동합니다.