웹 개발 가이드

웹 개발 시 필요한 내용들을 가이드한다. 본 문서는 코딩협약, 디버깅, 테스트 등과 같이 기본적인 내용부터 의존성 관리 및 압축까지의 개발 전반에 대한 내용을 다룬다.

목차

• 1. 용어
• 2. 네이밍
• 3. HTML 코드 작성 규칙
• 4. CSS 코드 작성 규칙

1. 표기법

언어마다 권장하는 표기법이 다르고, 하나의 프로젝트에서 여러 표기법을 혼용하여 사용 할 경우 가독성이 좋지 않다.

1.1. 소문자 lowerCamelCase, headlessCamelCase

단봉낙타 표기법이라고도 한다. 보통 카멜 케이스라고 하면 lower 카멜 케이스를 의미한다. 각 단어의 첫 문자를 대문자로 표시하되, 이름의 첫 문자는 소문자로 적는다.

일반 표기법		소문자 카멜 케이스 표기법
Class Name	className	클래스 명
object Type	objectType	클래스 명
background Color	backgroundColor	클래스 명

1.2. 대문자 카멜 케이스 (UpperCamelCase), 파스칼 케이스 (PascalCase)

CamelCase, BackgroundColor, ClassName 쌍봉낙타 표기법이라고도 한다. 전체 이름의 첫 문자를 포함한 각 단어의 첫 문자를 대문자로 표시한다.

1.3. 스네이크 케이스 (snake_case)

camelcase, backgroundcolor, class_name 각 단어의 사이를 언더바_로 구분해주는 표기법이다.

1.4. kebab-case, spinal-case, Train-Case, Lisp-case

1.5. 헝가리안 표기법 (Hungarian Notation)

컴퓨터 프로그래밍에서 변수 및 함수의 이름 인자 앞에 데이터 타입을 명시하는 표기법이다. 80년대 당시에는 IDE라는게 다들 부실했기 때문에 사용되기 시작했지만 지금은 MS도 공식 가이드라인에서 사용하지 말 것을 권고하고 있다.

장점

• 데이터 유형을 변수명에서 바로 추정 할 수 있다.
• 같은 의미를 가지는 서로 다른 유형의 변수가 있을때 충동을 방지 할 수 있다.

단점

• 데이터 유형이 변경될 경우 변수 및 함수 명을 변경해야 한다.
• 인자의 명칭을 기억하기 쉽지 않다.

공통

접두사	데이터 유형	설명
b	byte, boolean, bit	참, 거짓
n	int, short	정수
i	int, short	인덱스
c	int, short	크기
l	long, bigint	-
f	float	-
d, db	double	-
ld	long double	-
w	word	-
dw	double word	-
qw	quad word	-
ch	char	-
sz	quad word	NULL로 끝나는 문자열
str	string	NULL로 끝나는 문자열
arr	quad word	NULL로 끝나는 문자열
p	pointer	16bit, 32bit
lp	long pointer	64bit
psz	long pointer	16bit, 32bit
lpsz	long pointer	64bit
fn	function	함수
pfn	pointer function	16bit, 32bit
lpfn	long pointer function	64bit

OOP

접두사	데이터 유형	설명
g_	-	네임스페이스의 전역 변수
m_	-	클래스의 멤버 변수
s_	-	클래스의 static 변수
c_	-	함수의 static 변수

예

일반 표기법	소문자 카멜 케이스 표기법	설명
Class Name	strClassName	클래스 명 문자열
Sale Price	nSalePrice	판매 금액 정수
object Type	g_arrType	전역 유형 배열

목차로 돌아가기

2. 소스 파일 기본 사항

파일 명

파일 이름은 모두 소문자 여야하며 밑줄 ( _) 또는 대시 ( -) 가 포함될 수 있지만 추가 구두점 은 포함될 수 없습니다. 프로젝트에서 사용하는 규칙을 따릅니다. 파일 이름의 확장자가 있어야합니다 .js.

파일 인코딩 : UTF-8

소스 파일은 UTF-8 로 인코딩됩니다

목차로 돌아가기

3. IDE(통합 개발 환경) 및 에디터

Notepad++

무료 에디터 중 가장 알려진 오픈소스 에디터로 Syntax highlighting 등 기본적인 에디터 기능을 포함하며 FTP 를 포함한 여러가지 플러그인을 제공한다.

참고
공식 사이트 및 다운로드 : http://notepad-plus-plus.org/

Brackets

Adobe에서 개발한 오픈소스 웹 에디터로 실시간 미리보기(크롬에서만 지원)을 지원하고, JS 편집 시 JSLint가 바로 적용되는 등 HTML, CSS, JS에 대해 다양하고 강력한 편집 기능을 제공한다.

참고
공식 사이트 및 다운로드 : http://brackets.io/

Atom

참고
공식 사이트 및 다운로드 : https://atom.io/

Visual Studio Code

참고
공식 사이트 및 다운로드 : https://code.visualstudio.com/

목차로 돌아가기