<1주차 코드리뷰 피드백>
-
DOCTYPE 대소문자 사용에 대한 논의 (기능상 차이는 없으나 원칙적으로 대문자 선언)
-
생각없이 변수 명칭 선언, 약어 사용 지양하기
변수의 네이밍은 많은 고민이 필요하다 계속 고민하고, 다른코드의 명칭을 참고하다보면 조금씩 익숙해질 것이다
(이번 1주차 과제에서 str, cont , strIndex와 같은 명칭은 지양하기 => link / linkAddress, message / linkRemovedContent 등처럼 선언하기) -
코드를 주석으로 설명하는 것 지양
-
button의 type
-
코드가 길지 않을시에는 개행 없이 한줄로 작성하기
-
상수의 네이밍은 대문자로 명명
상수란 변수와 반대로 변하지 않는 값 const를 의미 -
함수의 네이밍 =
동사 + 명사형식 -
세미콜론 사용 유의하기
-
의미없는 개행 x
맥락이 달라서 코드를 구분 짓기 힘들경우정도에만. -
인덴팅 주의하기
-
CSS 프로퍼티 나열 방식
<1주차 정리해야할 내용>
1) 코드를 주석으로 설명하는 것 지양하기
주석은 코드로 설명하기 어려운 상황 (기획적 이슈, 이전 코드 히스토리 등) 설명 할 때 작성)
이번주차 과제에서 send 버튼을 클릭 할 때마다 웹페이지가 새로고침 되는 현상을 막기 위해 event.preventDefault()를 사용했었는데 노마드코더에서 본 기억이 생각나서 쓰게 되었다.
event.preventDefault란?
이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소한다
관련 이벤트 위임, 버블링, 캡처 자료 참고 👉
button의 타입을 지정해주지 않았기 때문에 기본적인 타입인 submit으로 설정이 되었고, 이 때문에 계속 웹페이지가 새로고침 되었던 것 같다
2) form + input, button
form과 함께 사용할 땐 아래의 코드 처럼 input type="submit"과도 함께 사용할 수 있다는 피드백
=> 즉, input type="submit" 과 <button>의 동일 기능
// 먼저 내가 작성했던 코드
<form id="chatt">
<input type="text" placeholder=" 메세지 보내기.." maxlength="1000px"/>
<button>Send</button> //form 안에 button 태그 사용
</form>
// 밑은 이런식으로도 사용이 가능하다고 알려주신 코드
<form id="chatt">
<input type="text" placeholder="메세지 보내기.." maxlength="1000px" />
<input type="submit" value="Send" /> //form 안에서 input 태그를 이용하여 버튼을 생성
</form>알려주신 코드를 구현하였을 때 이미지
내가 작성한 코드를 구현하였을 때 이미지
구현하였을 때 모습을 보면 동일하다는 것을 알 수 있다.
⛔ 하지만, form + button, form + input type="submit" 2가지에 큰 차이는 없지만,
form + input type="submit"이 표준이라고 한다
대신 button은 input 대비 css적으로 이점이 있다고 한다
버튼의 특성 중..
<form> 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다
2-1) form
버튼과 연결할 <form> 요소("양식 소유자").
같은 문서에 존재하는 <form> 요소의 "id 특성 값"을 사용해야 합니다.
form 특성을 지정하지 않았으나 조상 중 <form> 요소가 존재하면 해당 <form>과 연결됩니다.
form 특성을 사용하면 버튼을 <form> 요소에 "넣지 않고도 연결" 할 수 있고, 조상 중 <form>이 있더라도 소유자를 재정의할 수 있습니다.
2-2)
<input>: 입력 요소
HTML <input> 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, <input> 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나입니다.
input 태그는 닫는 태그가 없으며, 태그 안에 type 속성과 value 속성, 그리고 name 속성을 이용하여 작성하는데 각 속성이 하는 역할은 아래와 같다.
- type: 입력 태그의 유형
- value: 입력 태그의 초기 값을 말하며 사용자가 변경 가능하다
- name: 서버로 전달되는 이름이다
<input> 요소의 동작 방식은 type 특성에 따라 현격히 달라지므로, 각각의 유형은 별도의 참고 문서에서 더 자세히 확인할 수 있습니다. 특성을 지정하지 않은 경우, 기본값은 text입니다.
👉 아래 사진은 주로 쓰는 <input> type 속성 유형
input으로도 button을 만들 수 있는지 몰랐다..
input으로 버튼 모양을 만들 수 있는데 submit과 button타입을 이용하면 된다
⛔ <button>과 <input type=”button”>의 차이 위에서도 말했듯이 css적으로 이점이 있는 내용인 듯 하다
<button>의 arrtibute 중 type
피드백)
type은 별도로 지정해주지 않으면 의도한 submit으로 기본지정되지만, 그 외 type을 의도한다면 별도로 지정해주셔야합니다.
type
버튼의 행동 방식. 가능한 값은 다음과 같습니다.
submit: 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.reset:<input type="reset">처럼, 모든 컨트롤을 초깃값으로 되돌립니다.button: 기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.
✅ 양식 제출용 버튼이 아니라면 type 특성을 button으로 지정하는걸 잊지 마세요.
기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출(submit)하고, (존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다.
👉 즉, 아무 효과 없는 버튼을 만들 때에는 type을 button으로 양식데이터를 제출할 때엔 submit으로 값 지정하기
첫 주차 과제를 수행하면서 가장 충격적이었던 것이 바로 이 템플릿 리터럴이었다.
백틱의 존재를 알고는 있었지만 정확히 어떤 식으로 사용하는지는 몰랐었는데,
이를 이용해서 html 마크업도 자바스크립트상에서 바로 가능하고, 일반 문자열과 여러가지 값을 같이 작성할 수도 있는 아주 미친놈이다
Template literals
내장된 표현식을 허용하는 문자열 리터럴로
‘또는“같은 통상적인 따옴표 문자 대신백틱(backtick)문자 를 사용한다.
-
일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 white-space는 있는 그대로 적용된다.
-
아래 사진과 같이 html 마크업도 자바스크립트 상에서 바로 구현할 수 있다
-
문자열 인터폴레이션은
${ … }으로 표현식을 감싼다. 문자열 인터폴레이션 내의 표현식은 문자열로 강제 타입 변환된다.
아래와 같이 일반 문자열 텍스트와 같이 사용 할 수 있다는 뜻이다.
또, 이외에도 유의할 것들
상수란?
자바스크립트 상에서 변수를 선언하는 방법은 3가지가 있다.
=> var, let, const
그 중에서 const는 변하지 않고 고정된 값을 담을 때 사용하는 선언문이다
즉, constant 의 앞글자를 가져와 const 라는 키워드로 선언한다
var와 달리 상수는 반드시 선언과 동시에 값을 대입(초기화)해줘야 한다.
일반적으로 상수는 대문자 + 스네이크 표기법(snake_case)를 사용
함수의 네이밍) 동사 + 명사
// ❌ 원래 작성했던 코드
function sendBtnClick(event) {
event.preventDefault();
어쩌구..
}
// ✅ 수정한 코드
function clickSendButton(event) {
event.preventDefault();
어쩌구..
}
sendBtnClick 이란 함수명을 => clickSendButton 으로 수정
- 약어 사용도 지양하기,
- btn 이 아닌 button처럼 풀네이밍 사용하기
CSS의 property 나열 방식
정답은 없지만, 큰 거에서 작은 순으로? 정렬하는 것이 좋음
레이아웃 > 크기,간격 > 박스모양 > 폰트 > 기타 순으로 정렬
Ordering rules
- Position
- Layout
- Display
- Visibility
- Box model
- Color
- Text
- Animation
- Others
- Pseudo elements
참고해서 다시만들어보기
Q. [과제 관련] content가 url + 텍스트일 경우는 어떻게 처리해야할까요? 빈 값일 때 텍스트가 입력되는 부분은 어떻게 처리해야할까요?
2가지 질문에서의 제가 드릴 수 있는 힌트는 빈 sring 같아요.
(첫번째 질문의 url + 텍스트는 다시 말하면 url + ""(빈스트링) + 텍스트라고 구분할 수 있을 것 같고,
두번째 질문의 빈 값은 입력된 텍스트가 빈 값, 즉 textInput.value가 빈 값일때 라고 유추해볼 수 있을 것 같아요.)
빈 string을 어떻게 구분해야할지에 대해 고민해보시면 의외로 쉽게 풀릴 수 있을 것 같아요.
고민해보아도 너무 어렵다고 생각되면 오피스 멘토님들께 도움을 요청해보세요! 😉
음 아니면, 조건문을 해당하는 조건문만
적어놓고 그 외에는 채팅창을 입력할 수 없게 다시 구현해보기
