API 명세서 작성하고 Front-end와 연결

백엔드 담당끼리 백엔드 파일 통합을 진행하는데 있어 아쉽게도 git-hub을 사용하지 못하였고, front-end 담당들에게 어떤 데이터를 주고 받을 API를 어떻게 구성하였는지 일목요연하게 전달할 필요성이 있었다. 따라서 원활한 개발을 위해 기존에 간략하게 작성해 두었던 API명세를 구체적으로 수정하는 작업을 거쳤다. (링크)

각 API에 대한 명세는 API 주소, front-end로부터 받을 데이터, front-end로 반환할 내용을 포함하고 있다.

front end와 원활히 연결하는 것은 API명세를 작성하였음에도 크고작은 충돌이 있어 쉽지 않았다. 가장 문제였던것은 git-hub을 사용하지 않아 코드의 형태관리, 버전관리가 되지 않았던 것이었다. 이를 빠르게 해소하기 위해 임시방편으로 live share를 사용하여 공동으로 코드를 편집하기로 하였다.

Truoble shooting 1: 부적절한 입력 거르기

기존에는 부적절한 입력을 거부하는것을 모두 back-end에서 처리하여 반응 속도가 조금 느린 경우가 있었다.
그러나 몇몇 부적절한 입력( 빈 문자열, url에 사용되는 입력값에 특수문자 포함)등은 프론트엔드에서 직접 처리하는 것이 빠르고 안정적임을 알게되었다. 따라서 몇가지 부적절한 입력을 front-end에서 처리하고 back-end에서는 이러한 기능을 일부 제거하여 꼭 DB에 접근할 필요가 있는 경우만 처리하도록 하였다.

특수문자 제거하기

특수문자의 입력을 감지하고 제거하는 것은 정규식을 이용해 가능하다.

//특수문자가 있는 경우
var special_pattern = /[`~!@#$%^&*|\\\'\";:\/?]/gi;
if(special_pattern.test(str) == true){
    alert('특수문자가 입력되었습니다.');
}

JS의 정규식

정규식은 /패턴/플래그형태를 띈다. 패턴 안에는 찾고싶은 패턴을 넣고 플래그는 정규식의 동작을 지정한다.

패턴 작성법 링크

플래그	설명
g	전체 문자열에서 일치하는 모든 패턴을 찾기.
i	대/소문자를 구분하지 않음.
m	여러 줄에서 일치하는 패턴을 찾습니다.
s	개행 문자가 . 과 일치함.
y	sticky 모드 활성화. 대상 문자열의 현재 위치에서 탐색을 시작.
u	유니코드 코드 포인트를 사용하여 패턴을 매칭.

Truoble shooting 2: 스크롤 고정된 배경 넣기

메인페이지에 테마와 어울리는 이미지를 배경으로 넣고, 스크롤을 내려도, 화면을 확대하고 축소해도 고정되어 표시되게 하고 싶었다. 이를 위한 CSS는 다음과 같았다.

/*body tag내 모든 요소들을 감싸는 구획에 적용*/
.wrap{
	width: 100%; height: 100vh;
    min-height: 100vh;
	background-image: url('');
	background-repeat: no-repeat; 
	background-size: cover; 
	background-position: center; 
	background-attachment: fixed; 
	}

height: 100vh는 브라우저 화면의 높이 기준 백분율을 의미한다. 따라서 브라우저 화면을 축소/확대하여도 화면 크기가 같다면 배경이미지의 사이즈가 변하지 않게된다. 또한 min-height: 100vh; 로인해 아무리 축소해도 배경이미는 화면 전체를 채우게된다.
background-attachment: fixed;는 브라우저에서 스크롤을 내려도 이미지가 고정되어 보이게 한다.

이렇게 해도, 잘 적용되지 않고 body 태그 안의 내용물들이 부모 태그가 차지하는 공간보다 더 많이 공간을 차지하게되어 빈 배경이 나타나는 경우, 아래 css를 적용하였다.

html{
	background-image: url('');
	background-attachment: fixed;
	background-repeat: no-repeat; 
	background-size: cover; 
	background-position: center;
	}

body tag 안에 있는 요소들 뒤의 배경 자체를 배경이미지로 바꿔준다.

다양한 선택자 사용하기

몇번 쓰이지 않는 요소에게 새로 스타일을 지정하거나, 모든 특정 종류의 요소에 스타일을 지정하거나, 특정 ID를 가진 요소만 스타일을 지정해야하는 경우가 있었는데, 기존에는 Class를 일일히 지정해서 사용하였으나 CSS에서 다양한 선택자 옵션을 제공함을 알게되어 유용하게 사용하였다. CSS의 선택자는 jQuery에서도 대부분 동일한 의미로 사용할 수 있다.

이름	형식	설명
ID 선택자	#[id]	id 속성으로 지정한다.
클래스 선택자	.[class]	class 속성으로 지정한다.
요소 선택자	[tag]	html 요소로 지정한다.
전체 선택자	*	문서내 전체 요소를 지정한다.
자식 선택자	[A]>[B]	A의 바로 아랫 자식 중 B요소를 지정한다.
후손 선택자	[A] [B]	A아래 있는 모든 B요소들을 지정한다.
인접형제 선택자	[A]+[B]	A요소와 형제인 바로 다음 B요소를 지정한다.
일반형제 선택자	[A]~[B]	A요소와 형제인 모든 B요소를 지정한다.
속성 선택자	[[속성이름="값"]]	html속성값을 지정하여 일치하는 모든 요소를 지정한다.
가상클래스 선택자	:[가상클래스]	특정 상태에 있는 요소를 지정한다. (예 : :hover)
가상요소 선택자	::[가상요소]	요소의 특정부분을 지정한다.(예: ::before)