오늘도 어제와 같이 to do list 를 만들고 있었습니다.
https://freshman.tech/todo-list/ 의 예제를 따라 해서 만들고 있었으나 완성도 못하였고 대략적인 맥락만 이해하고 있습니다.
Facts
form 태그
form 요소에 들어간 속성을 보면, action과 method가 있습니다. 이 중에 action 속성은 이 폼을 전송할 URL을 지정합니다.
method 속성, GET과 POST
- method 속성은 폼에 전송할 방식을 지정합니다.
GET 방식은 주로 서버에서 받아오는(get) 방식에 (주로 페이지를 검색/조회) 사용되고, POST 방식은 서버에 올리면서(post) 수행하는 방식(글 쓰기나 글 삭제 등과 같이 서버의 값을 변화 시키는 작업)에 사용 됩니다.
form 요소의 속성
- action: 폼을 전송할 URL을 입력합니다.
- method: 전송 방식을 결정합니다. (get 또는 post)
- autocomplete: 폼 내부 요소의 자동 완성 기능을 사용할지 안할지 결정합니다.
- accept-charset: 폼 전송 시 인코딩 방식을 명시합니다. (utf-8, euc-kr 등)
- enctype :인코딩 방법을 지정합니다.
- accept-charset과 달리 어떤 문자를 인코딩할 지 등을 결정합니다.
form 안의 input 요소
- 텍스트 입력 뿐 아니라, 전송 버튼, 라디오 버튼, 체크 박스 등 여러 가지로 표현될 수 있습니다. type 속성에 따라 결정됩니다.
input type=“text” name=“uri” /
name
속성은 데이터가 서버로 전송될 때 할당되는 변수의 이름입니다
만약 name 값이 ‘abc’이고, 해당 form이 GET 방식으로 전송한다면, URL 주소에 ‘abc=값’이 붙어서 전송이 됩니다
input type=“submit” value=“전송” /
submit 타입의 요소를 클릭할 경우, 해당 폼 안에 있는 값들이 해당 서버로 전송이 됩니다
(텍스트 타입 type=“text”에서 쓰일 경우, 기본으로 적힌 텍스트 값입니다.)
버튼 형태에서는 해당 버튼에 표시되는 텍스트 입니다. 만약 submit 타입이 value 속성 값이 없을 경우는, 해당 브라우저의 기본 텍스트로 보여집니다
label 요소
이 label 요소는 해당 폼 요소에 어떤 값을 넣어야 하는지 라벨을 붙여주는 요소입니다
symbol()
symbol 의 id는 아이콘 생김새,view box는 크기, path는 위치
Number()
함수는 문자를 숫자로 바꿔줌
===
피연산자들이 같은 타입일 때 동등 비교를 하도록 되어있다
filter()
메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다
Feelings
복잡하다 머리 아프다
Findings
예제에 불필요한 요소가 꽤 있는것 같다 알아서 걸러야 할듯 싶다. 그냥 깔끔 하게 정리 용도 인것 같은데 초보인 나로써 하나하나가 큰 의미를 갖고 있는줄 착각하고 있었다.
Future Action Plan
빨리 하도록 하자. 예제 완벽하게 이해할려면 css 도 봐야한다 물론 다른것도 좀 더 봐야겠지만. 아무튼 빨리 하자.
Feedback
난 누구 여긴 어디?