🍭 코딩 컨벤션 / 코드 작성 규칙 / 코딩 규칙 (w. 웹 개발) + 개발 업무 규칙

💡 "나만의 코딩 규칙"입니다. 참고만 해주세요
▪ 11년 숙성시킨 유산균 규칙 입니다
▪ PHP, Javascript, CSS, MySQL 웹 개발을 기준으로 작성하였습니다.

💥 본인 만의 코드 규칙이 아무리 좋아도 회사에서는 회사의 규칙을 따르는 것이 아주 좋습니다.

화목한 팀워크를 위해

---

공통

▫ 속성이 많아져도 괜찮다
▫ 명칭이 길어져도 괜찮다
▫ 가독성은 중요하다
▫ 유지보수는 중요하다
▫ 의견은 언제나 환영이다
▫ 전부 지킬 필요는 없다

웹 표준 준수

• W3C HTML 마크업 테스트
• W3C CSS 테스트

MVC 패턴 및 기능 묶음

• 페이지 또는 컨트롤러에 속하도록 코드를 묶는 것보다
• 해당 기능을 재 활용할 수 있도록 묶어서 개발 필요
• 묶음 처리에 시간이 지체될 경우 개발 진행 후 묶음 처리하는 것을 추천

표기법

• 기본 적으로 아래 두가지 타입의 표기법을 사용하고 특별한 경우 대상 규칙을 지킨다.
• camelCase, CamelCase 낙타 표기법
• snake_case 소문자의 언더바 표기법

들여쓰기

• 탭 (Tab)

// 올바른 예
function test(){
	console.log('tab');
}

// 잘못된 예
function test(){
    console.log('space');
}

✅ IDE 에서 간격이 표시되어 가독성이 좋다

✅ 스페이스보다 사용되는 리소스가 적다는 아주 오래전 카더라 통신

폼 검증

CSRF 기능 사용 시 주의 필요

• 선택 : 1차 HTML 폼 기본 기능
• 필수 : 2차 js 스크립트에서 검증
• 필수 : 3차 php 서버 사이드에서 검증

접근 제어 및 권한 확인 필수

• 예) API 가 아닌 경우 웹에서 바로 접속 시 수정 되거나 하면 안됨
• 예) 권한을 체크 해야하는 수정 일 경우 권한 확인 필수

세션 만료 주의

• 폼 전송, 페이지 이동, 비동기 등 세션 만료 확인 주의
• 비동기 세션 체크 예제 (w. jQuery)

$.ajaxSetup({
    statusCode: {
        401: function(){
					
        }
    }
});

조건 여러개 중 하나만 특정 조건 일 때

// 아래 데이터 사용 시 a 일 경우에만 조건을 확인 할 경우
$type = ['a', 'b', 'c'];

// 올바른 예
if( $type == 'a' ){
	// 조건 a
} else {
	// 조건 미달성 = 나머지
}

// 잘못된 예
if( $type == 'b' || $type == 'ㅊ' ){
	// a 가 아닐 경우
} else {
	// a 일 경우
}

✅ 고유 조건이 추가 되는 경우 보다 다중 조건이 추가 되는 경우가 더 많기 때문

문서화

• 모든 개발 정보를 문서화 할 필요는 없으나 이슈 사항과 개발시 필요한 정보가 담겨진 문서는 작성하여 문서화 한다.

주석

• 기본 doc 주석과 함께 요청사항 등 으로 발생하는 이슈가 존재 할 경우 추가로 작성 해 둔다

---

HTML

레이아웃 구조

HTML에 기록 해두어야 할 데이터가 필요한 경우

data 속성 사용 및 input type hidden 사용
타 라이브러리 에서 data 속성 사용이 있다면 고유 코드 추가 추천

‼ 주의) 중요 데이터는 표시 금지

‼ 꼭 필요한 경우 암호화 진행, 암호화 진행 시 decode 해석은 서버에서

• data 속성 사용
• data 속성은 (-) 대시를 사용
• 추천 : 고유 코드 추가

<!-- 올바른 예 -->
<a href="#" data-camp-id="3">캠페인 이름</a>
<a href="#" data-ss-camp-id="3">고유코드 ss 추가</a>

<!-- 잘못된 예 -->
<a href="#" data_camp_id="3">캠페인 이름</a>
<a href="#" class="camp_id 3">캠페인 이름</a>

✅ 기본 적으로 사용하는 언더바, 카멜과 구분 되도록 - 대시를 사용

• hidden input 사용

<input type="hidden" name="camp_id" value="3">
<input type="hidden" class="camp_id" value="3">

class 규칙

• 기본 표기 : 소문자 언더바 표기법

<!-- 올바른 예 -->
<div class="class_class">소문자 언더바 표기법</div>

<!-- 잘못된 예 -->
<div class="class-class">소문자 대시 표기법</div>

• 자바 스크립트에서 사용되는 class
• 소문자 시작 낙타 표기법 camelCase

<!-- 올바른 예 -->
<div class="btn_wrap_class btnBox">
	<div>
		<a class="btn_target btnScript" href="#">이 버튼에 스크립트 적용</a>
	</div>
</div>

CSS 에서 언더바 표기법 class 를 사용하고 js 에서 낙타 표기법을 사용

id 규칙

• 웹 표준 준수 : 한 페이지에 하나의 id 속성만 존재

---

Javascript

주석

• 함수나 Class 에 JSDoc 규칙 주석을 사용한다. (✅ IDE 에서 주석을 분석하여 힌트가 표시된다)
• 나머진 일반 단일주석 사용 // 하거나 필요시 JSDoc 주석을 사용한다
• 함수나 객체등등 인자나 주요 값 변수의 설명을 꼭 적어둔다

/**
 * 새로운 창 생성
 * @param {string} url 주소
 * @param {int} width 가로 사이즈
 * @param {int} height 세로 사이즈
 * @param {string} winName 윈도우명
 **/
openWindow: function (url, width, height, winName, left, top) {
	if (!width) width = 400;
	if (!height) height = 300;
	if (!winName) winName = '';
	if (!left) left = '';
	if (!top) top = '';
	var newWin = window.open(url, winName, 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top + ',history=yes,resizable=yes,status=yes,scrollbars=yes,menubar=no');
	if (newWin != null) {
		newWin.focus();
	}
	return newWin;
}

요소 선택 사용

• 선택 대상을 변수에 담아 사용한다. (✅ 메모리를 줄일수 있다)

// 올바른 예
var el_test = $("#test");
let el_test_2 = document.querySelector("#test_2");

중괄호 종료 지점에 세미콜론을 사용한다

• Object 중괄호 종료 후
• 함수 사용시 인자로 Object 입력 후

// 올바른 예
SuperAdmin = {};
functionTest(function(){
	console.log("function 사용 종료 지점 확인");
});

// 잘못된 예
SuperAdmin = {}
functionTest(function(){
	console.log("function 사용 종료 지점 확인");
})

✅ 자바스크립트의 경우 세미콜론을 제외 하여도 동작은 하지만 min 버전 생성이나 기타 상황에서 발생하는 오류를 줄이기 위해서 세미콜론을 사용하는것이 좋다

---

PHP

주석

• 함수나 Class 에 phpDoc 규칙 주석을 사용한다. (✅ IDE 에서 주석을 분석하여 힌트가 표시된다)
• 나머진 일반 단일주석 사용 // 하거나 필요시 phpDoc 주석을 사용한다
• 함수나 객체등등 인자나 주요 값 변수의 설명을 꼭 적어둔다

/**
	* Curl 기본 통신
	* @param string $url
	* @return bool|string
*/
protected static function getCurlContents($url){
	$crl = curl_init();
	$timeout = 5;
	curl_setopt($crl, CURLOPT_URL, $url);
	curl_setopt($crl, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($crl, CURLOPT_CONNECTTIMEOUT, $timeout);
	$ret = curl_exec($crl);
	curl_close($crl);
	return $ret;
}

---

MySQL(MariaDB)

쿼리 작성시 예약어

• 예약어는 대문자 사용

SELECT TABLE_COMMENT FROM information_schema.tables 
WHERE table_schema = 'asss' 
	AND table_name = 'bbbb';

DB, 테이블, 컬럼 명칭 표기법

• 소문자 언더바 표기법 사용

db_name, table_name, column_name

✅ mysql 기본 설정에서는 대문자가 불가능 하여 단순 하게 소문자 언더바 표기

자동 증가 PK 컬럼 명칭

• seq 시퀀스 사용
• id 의 경우 타 컬럼에 필요한 경우가 생길 가능성이 존재

member 테이블의 PK설정시
올바른 예 : member_seq
잘못된 예 : member_id

---

CSS

자식 선택자

• 좌우 공백 한칸 사용

/* 올바른 예 */ 
.this > div{display:block; margin:0}

/* 잘못된 예 */
.this>div{display:block; margin:0}

✅ 브라우저 개발 도구에서 표시되는 방식과 동일하게 해서 검색하기 좋도록 하기 위함

다중 선택자

• 콤마(,) 이후 공백 하나

/* 올바른 예 */
.this, div{display:block; margin:0}

/* 잘못된 예 */
.this,div{display:block; margin:0}

✅ 브라우저 개발 도구에서 표시되는 방식과 동일하게 해서 검색하기 좋도록 하기 위함