[유선향] - sprint4 #40
[유선향] - sprint4 #40
Conversation
login_signup.js 파일 작성, 핸들러함수를 계획하고, 각 함수가 쓰이는 html파일에 해당 js 파일을 연결, 그리고 해당 js 파일에 필요한 함수이름을 import 했다.
로그인 페이지의 비밀번호 부분 테두리 스타일과 8글자 이상 작성 에러메시지 , 빈값일 경우 에러메시지 기능 작성 중복되는 코드가 많아서 추후 정리 필요
기존에 border red 스타일이 간혹 사라졌다가 다시 나타나는 현상 수정함.
회원가입 버튼 활성화 부분 구현, - 디렉토리 구조 정리 - 눈모양 i태그클릭시 type을 password, text로 수정하는 password_hide 함수작성, - 에러메시지가 생김에 따라 i태그가 움직이는것 수정 -앞으로의 수정 : 코드의 중보정리, 모듈화 진행예정
중복되는 코드가 많아 signup_login.js 파일을 만들어 login.html, signup.html 두파일에 적용하려 했으나, 일부 기능이 잘 구현되지 않아 일단 test.js 파일을 작성하고 코드리뷰 이후 보완후에 util.js 파일로 지정하려 함.
|
스프리트 미션 하시느라 수고 많으셨어요. |
| switch (email_check(Email.value) && password_checked(password.value)) { | ||
| case true: | ||
| Btn.disabled = false; | ||
|
|
||
| break; | ||
| case false: | ||
| Btn.disabled = true; | ||
|
|
||
| break; | ||
| } |
There was a problem hiding this comment.
다음과 같이 조건문을 거치지 않고 코드를 간결하게 작성할 수 있습니다 !
| switch (email_check(Email.value) && password_checked(password.value)) { | |
| case true: | |
| Btn.disabled = false; | |
| break; | |
| case false: | |
| Btn.disabled = true; | |
| break; | |
| } | |
| Btn.disabled = !(email_check(Email.value) && password_checked(password.value)); | |
| } |
| } | ||
| } | ||
|
|
||
| function Email_focus_out(e) { |
There was a problem hiding this comment.
(제안) 함수명은 동사로 작성되며, 변수/함수명은 카멜케이스로 작성되는게 일반적이예요 😊
| function Email_focus_out(e) { | |
| function handleFocusOutEmailInput(e) { |
일반적으로 변수는 명사, 함수는 동사로 지어요.
boolean의 경우 isValidEmail와 같이 is, are, has로 시작하기도 합니다. =)
함수의 경우 다음과 같은 단어들이 접두사가 될 수 있어요:
- get
- fetch
- push
- update
- create
- calculate
- set
- 등등 ...
| function tag_delete(i) { | ||
| let isTag = Error_message[i].querySelector("a"); | ||
| if (isTag) { | ||
| Error_message[i].lastChild.remove(); | ||
| } | ||
| } |
There was a problem hiding this comment.
줄임말 보다는 의도를 명확히 전달해보는건 어떨까요?
| function tag_delete(i) { | |
| let isTag = Error_message[i].querySelector("a"); | |
| if (isTag) { | |
| Error_message[i].lastChild.remove(); | |
| } | |
| } | |
| function tag_delete(errorMessageIndex) { | |
| let isTag = Error_message[errorMessageIndex].querySelector("a"); | |
| if (isTag) { | |
| Error_message[errorMessageIndex].lastChild.remove(); | |
| } | |
| } |
물론 btn, pw 등 편의를 위해서 사용되기도 하나, 명확한 클래스 이름을 사용하시는게 더욱 의도된 바를 전달하기 쉽습니다.
이는 "닌자 코드"에 해당하는 문법입니다:
약어 사용하기
팀에 한 글자 짜리 변수나 모호한 변수명을 사용하지 못하게 하는 제약이 있다면 약어를 쓰는 기지를 발휘하세요. 변수명은 짧을수록 좋으니까요.
예시:
list → lst.
userAgent → ua.
browser → brsr.
등등…
모든 걸 줄여서 당신의 코드를 읽을 가치가 있는 직감이 뛰어난 개발자만 유지보수를 담당 할 수 있게 해 놓읍시다.
위 문서는 "이렇게 해라 !"가 아니라, "이를 지양하자 !"라는 것으로 작성된 문서 내용입니다. 😊
물론 oAuth(Open Authorization), sms(Short Message Service) 와 같이 내용이 길어서 통상적으로 줄임말을 사용하는 경우도 있기는 하기에 무조건 풀 텍스트를 사용하자 라는 차원은 아님을 전달드립니다. 😊
| function Password_focus_out(e, x) { | ||
| let input = e.target.value; | ||
| tag_delete(x); | ||
| if (!password_checked(input)) { | ||
| e.target.classList.add("input_red_border"); | ||
| const text = document.createElement("a"); | ||
| text.textContent = | ||
| input === "" | ||
| ? "비밀번호를 입력해주세요" | ||
| : "비밀번호를 8자 이상 입력해주세요"; | ||
| Error_message[x].prepend(text); | ||
| } else { | ||
| e.target.classList.remove("input_red_border"); | ||
| } | ||
| } |
There was a problem hiding this comment.
여기도 마찬가지로 카멜케이스, 동사, 그리고 줄임말을 방지하면 다음과 같이 적용해볼 수 있어요 😊
| function Password_focus_out(e, x) { | |
| let input = e.target.value; | |
| tag_delete(x); | |
| if (!password_checked(input)) { | |
| e.target.classList.add("input_red_border"); | |
| const text = document.createElement("a"); | |
| text.textContent = | |
| input === "" | |
| ? "비밀번호를 입력해주세요" | |
| : "비밀번호를 8자 이상 입력해주세요"; | |
| Error_message[x].prepend(text); | |
| } else { | |
| e.target.classList.remove("input_red_border"); | |
| } | |
| } | |
| function handleFocusOutPasswordInput(event, errorMessageIndex) { | |
| let input = event.target.value; | |
| tag_delete(errorMessageIndex); | |
| if (!password_checked(input)) { | |
| event.target.classList.add("input_red_border"); | |
| const text = document.createElement("a"); | |
| text.textContent = | |
| input === "" | |
| ? "비밀번호를 입력해주세요" | |
| : "비밀번호를 8자 이상 입력해주세요"; | |
| Error_message[errorMessageIndex].prepend(text); | |
| } else { | |
| event.target.classList.remove("input_red_border"); | |
| } | |
| } |
| function is_form_value() { | ||
| let array = []; | ||
| for (let i = 0; i < 4; i++) { | ||
| array.push(Boolean(Input[i].value)); | ||
| } | ||
| return array.every((x) => x == true); | ||
| } |
There was a problem hiding this comment.
해당 함수를 같이 분석해봅시다 !
먼저, 4라는 숫자가 무엇일까요? 의미를 파악하기 어려워요. 의미에 대한 힌트가 존재하지 않기에 가독성을 떨어트릴 수 있어요.
이를 마법수(*Magic Number)로 불려요.
*Magic Number: 이를테면, 은행에서 이자를 구하는 프로그램 코드 중간에 2.7182818 이라는 숫자가 등장했을 때, 수학을 좀 아는 사람은 이를 자연 상수(Euler's number) 로 생각할 것이다. 그런데 사실 작성자의 의도는 그냥 은행 정책에 따른 이율을 구하기 위해 필요한 숫자를 그냥 넣은 것이었다면? 이 경우 왜인지 추측하기 굉장히 헷갈리고 결국 이 코드를 작성했던 사람에게 가서 물어보는게 가장 정확하다. 이미 퇴사했다면 아마 진정한 의미는 영영 알 수 없을지도 모른다.
출처: https://jake-seo-dev.tistory.com/155 [제이크서 위키 블로그:티스토리]
There was a problem hiding this comment.
또한 4로 한정짓지 않고 Input의 length를 사용해볼 수 있어요.
아마 추측하기로는 의도하신 것은 "Input의 값을 모두 조회해라 !" 로 해석됩니다 !
| function is_form_value() { | |
| let array = []; | |
| for (let i = 0; i < 4; i++) { | |
| array.push(Boolean(Input[i].value)); | |
| } | |
| return array.every((x) => x == true); | |
| } | |
| function is_form_value() { | |
| let array = []; | |
| for (let i = 0; i < Input.length; i++) { | |
| array.push(Boolean(Input[i].value)); | |
| } | |
| return array.every((x) => x == true); | |
| } |
There was a problem hiding this comment.
더 나아가서, array라는 값도 결국 Input의 value들을 형변환하여 입력하는게 목적으로 보여요.
| function is_form_value() { | |
| let array = []; | |
| for (let i = 0; i < 4; i++) { | |
| array.push(Boolean(Input[i].value)); | |
| } | |
| return array.every((x) => x == true); | |
| } | |
| function is_form_value() { | |
| const inputArray = Array.from(Input); | |
| const inputArrayValues = inputArray.map((input) => Boolean(input.value)); | |
| return inputArrayValues.every((x) => x == true); | |
| } |
따라서 for문이 아닌 map으로 사용하게 된다면 배열의 처음부터 끝까지 조회할 수 있을거예요:
map()메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
예제:
const array1 = [1, 4, 9, 16];
// Pass a function to map
const map1 = array1.map((x) => x * 2);
console.log(map1);
// Expected output: Array [2, 8, 18, 32]There was a problem hiding this comment.
최종적으로 ! 🚀
| function is_form_value() { | |
| let array = []; | |
| for (let i = 0; i < 4; i++) { | |
| array.push(Boolean(Input[i].value)); | |
| } | |
| return array.every((x) => x == true); | |
| } | |
| function isFormValid() { // 카멜 케이스로 변경 | |
| return Array.from(Input).every((input) => Boolean(input.value)); | |
| } |
메써드 체이닝(*Method Chaning)을 통하여 개발할 수 있습니다. 또한 map의 역할을 every 내부에서 수행할 수 있을거예요.
*Method Chaning
메서드가 객체를 반환하게 되면 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출할 수 있다. 이러한 프로그래밍 패턴을 메서드 체이닝(Method Chaining)이라 부른다.
There was a problem hiding this comment.
질문에 대한 답변 !
공통적인 논리를 재사용하는 발상이 정말 좋습니다 ! 유지보수 차원에서 이러한 패턴은 좋은 패턴이지요 ! 👍
(의견) 핸들러(element를 직접 다루는)는 각 페이지마다, 그리고 유효성 검사와 같이 특정 공통적인 자원(비밀번호, 이메일 등)과 연관된 함수는 분리해볼 수 있겠네요 😊
(의견222) auth라는 키워드로 네이밍을 지어보면 어떨까요?
|
정말 수고 많으셨습니다 선향님 ! 앞으로도 함께 개선해서 개발 역량을 키워봅시다 ! 👍👍 |
|
그리고.. 충돌이 일어난 것 같아요 |
2 participants
요구사항
기본
로그인페이지
회원가입 페이지
심화
주요 변경사항
-create test.js file
스크린샷
멘토에게