코칭스터디(TRACK A) - '푸드위드 회원가입' 만들기

제출

• main
  
• signup
  

❗ 마우스 오버시

• 상단바부분
  - 회원가입 글자 bold로 변경
  - 회원가입 클릭하면 signup으로 이동
  - 로고 클릭하면 main으로 이동
  
• 리스트부분
  - 상품상자 클릭시 네이버 메인화면으로 이동
  - 딤드레이어와 할인율 정보가 나타남
  

코드리뷰

💬 1차

css

• 사실 헤더, 푸터와 같은 기본 레이아웃은 메인페이지와 회원가입 페이지 모두 같죠. 즉, css파일을 분리 후 둘 다 선언하게 된다면 프로젝트 확장성에서 문제가 있을 수 있습니다. 헤더의 레이아웃이 조금만 변해도 모든 css파일들을 뒤적여 header부분 코드를 수정해줘야 할테니까요. 현업에서는 이런 불편함을 막고 프로젝트의 확장성을 위해 전 코드에 동일한 영역을 common.css 파일로 만들어 선언 후 관리해줍니다.

html

• HTML의 id에는 카멜케이스를 사용하고, class에는 케밥케이스 혹은 스네이크 케이스를 사용한다. id 명명 컨벤션은 카멜케이스에 맞게 작성하셔야 합니다. phone_No가 아니라 phoneNo이 될 수 있을 것입니다.
• id의 명명 컨벤션과 name의 명명 컨벤션이 같은 것이 아쉽습니다.
  id, class, name등은 이름만 보고도 이게 id인지 class인지 name인지 구분 될 수 있어야 합니다.
• textarea태그의 글자 수를 제한할 수 있는 방법에는 어떤 것들이 있을까요? 글자 수 제한이 왜 필요한지에 대해 생각해보셨나요?
  사용자로부터 보내진 입력값은 내부적으로 백엔드를 거쳐 DB에 저장될 것입니다. DB에는 해당 입력창에서 보내진 값을 담는 필드가 있을 거고요. 웹 아키텍처를 설계할 때 아키텍처는 DB 필드 각각의 사이즈를 정하게 됩니다.
  즉, id는 몇 글자 이내의 변수, pw는 몇 글자 이내의 변수, 텍스트입력창은 몇 글자 이내의 변수 이처럼 말이죠. 이때, 해당 크기 이상의 값을 보내면 디비는 오류를 뿜습니다. 그렇기에 글자수 제한이 필요하겠죠.
  이런 이유 말고도 사용자가 입력값을 무작위로 길게 해서 백엔드로 보내면 이는 DOS공격과 다름 없어지기에 입력 값 크기에 대한 관리가 필요하게 됩니다. input태그를 사용한다면 maxlength라는 속성으로 입력 값에 대해 제한할 수 있으며 textarea태그는 cols, rows속성으로 입력값 제한이 가능합니다.
  

<button class="button_style join_button">
    가입하기
</button>

• type="submit"을 명시적으로 선언해주시는 편이 낫습니다.

💬 2차

⛔ 문제

개발자 도구에서 확인해보면 마진 외의 공백이 존재한다.

✅ 해결

<span class="select_box">
	<select id="yy" class="sel" aria-label="년도">
	<option value>년도</option>
	</select>
    /*span태그 사이의 들여쓰기와 개행을 없애줌*/
</span><span class="select_box">
	<select id="mm" class="sel" aria-label="월">
	<option value>월</option>
	</select>
    /*span태그 사이의 들여쓰기와 개행을 없애줌*/
</span><span class="select_box">
	<select id="dd" class="sel" aria-label="일">
	<option value>일</option>
	</select>
</span>

💬 3차

⛔ 수정 전

<h2 class="join_tit">
	<label for="genderM">성별</label>
</h2>
<span class="radio_box">
	<input type="radio" id="genderM"  name="gender_m" title="성별">남자
</span>
<span class="radio_box">
	<input type="radio" id="genderW"  name="gender_w" title="성별">여자
</span>

✅ 수정 후

<h2 class="join_tit">성별</h2>
<span class="radio_box">
	<input type="radio" id="genderM"  name="gender_m" title="성별">
	<label for="genderM">남자</label>
</span>
<span class="radio_box">
	<input type="radio" id="genderW"  name="gender_w" title="성별">
	<label for="genderW">여자</label>
</span>

💬 4차

css

 .section_join .input_box{
        display: block;
        width: 100%; /*불필요한 재지정*/
    }

• display: block으로 지정한 이상 width: 100%는 기본적으로 포함됩니다. 즉, 불필요한 재지정입니다.
• cursor:pointer와 같은 부분들도 리셋css에 포함할 수 있을 것입니다.

html

• form태그를 잘 작성해주셨습니다. 회원가입과 같이 중요한 데이터를 백엔드로 보낼 땐 method="post"로 합니다.
• 추가적으로 felidset, legend 태그들을 학습해 보시면 도움되실 것 같습니다.

 <input type="tel" id="authNo" name="auth_No" 
 	class="input_contents" title="인증번호"
    	placeholder="인증번호를 입력해주세요.">

• type="text"로 작성하시는 편이 적합합니다.