저장을 습관화
230602 TIL 본문
1. input 입력값 가져와서 출력하기
https://hianna.tistory.com/411
https://velog.io/@woosungkim0123/%EB%B6%84%EA%B8%B0%EC%B2%98%EB%A6%AC-%EA%B8%B0%EB%8A%A5
2. getElementbyId
https://kyounghwan01.github.io/blog/JS/JSbasic/getElementById/
id를 가지는 태그에 접근하는 함수
해당 id가 없을 경우 null 에러 발생
주어진 id와 일치하는 dom 요소를 나타내는 element를 반환하거나 주어진 id와 일치하는 dom요소가 없다면 null 반환
하지만 그대로 사용하면 원하지 않는 결과가 발생하는데
예시)
var test = document.getElementbyId('testId')
window.alert(test)
// [object HTMLInputElement]
이는 객체의 실체값이 아닌 객체 자체를 사용하였기 때문이며
'이것은 오브젝트 객체인데 html의 input 요소이다.' 라는 의미이다.
var test = document.getElementbyId('testId').value 라고 미리 적어주거나
사용할 때 window.alert(test.value)로 라고 적어주어야 한다.
3. event.preventDefault(), submit button을 눌렀을때 페이지 새로고침 막기
https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault
4. 네이밍 규칙
4-1. 카멜식(camel case) 낙타의 혹처럼 중간중간이 높아지는 형태라서 붙은 이름
첫단어는 소문자로 시작하고, 두번째 단어부터는 첫 알파벳이 대문자로 시작한다.
let exampleName //카멜식
4-2. 파스칼식(pascal case)
카멜식과 비슷하지만 첫단어도 대문자로 시작한다
let ExampleName //파스칼식
4-3. 케밥식(kebab case)
단어 사이사이 -가 들어간 모습이 꼬치에 끼어진 고기같아서 붙은 이름
let example-name // 케밥식
4-4. 스네이크식(snake case)
케밥식과 비슷하지만 _를 사용한다
let example_name
어떤 방법을 쓰던 컴퓨터가 읽는데 문제는 없지만 다른 사람과의 협업에서 중요한 규칙이다
팀내 분위기를 파악하고 어떤 식으로 쓸지 판단하자
[내용출처]
5. [CSS] reset.css
css 스타일링을 초기화 하는 문법
시장에 여러 브라우저가 있는데
각 브라우저 마다 html 디폴트 설정값이 상이하다
개발자가 모든 브라우저의 html 설정을 알고 있기는 힘드므로
이를 아예 초기화하고, 모든 브라우저를 개발자의 설정에 따라가게 만든다.
6. HTML에서 <script>는 <head>, <body> 어디에 들어가야할까?
기반 지식 - parsing 이란?
[JS] Script삽입 위치(head, body, async, defer 비교)
HTML에서 스크립트를 직접 장성하지 않고 외부 스크립트 파일을 로드할 때 로드 방법에 대해 알아보도록 한다.
velog.io
지금 하고 있는 대로 <body> 밑에 쓰는것도 나쁘지는 않지만
HTML 파일이 너무 큰 경우에는 JS의 실행까지 기다리는데 오래걸릴 수 도 있다.
따라서 <head> 태그 밑에 두되, async나 defer 속성을 붙여주는 것이 좋다.
6-1. async
async 속성은 HTML의 파싱과 JS 불러오기를 병렬적으로 진행한다.
시간은 절약할 수 있지만 불러오기가 완료된 JS를 실행시키는 과정에서 HTML의 파싱을 중단하기 때문에
HTML이 모두 실행되기 전에 JS가 실행되게 된다.
스크립트 파일이 많다면 다운로드가 완료되는 순으로 JS파일을 실행하기 때문에
파일간 서로의 순서에 의존하는 경우에는 문제가 발생할 수 있다.
<head>
<script async src="file.js"></script>
</head>
6-2. defer
defer 속성도 async속성처럼 HTML의 파싱과 JS의 불러오기를 병렬적으로 수행하나
JS의 실행은 HTML의 파싱이 모두 완료된 후 진행된다.
병렬 처리로 시간도 절약하고 JS 파일도 순서대로 실행하기때문에 의존적인 문제를 보완할 수 있다.
<head>
<script defer src="file.js"></script>
</head>
'공부 > TIL' 카테고리의 다른 글
| 230607 TIL (0) | 2023.06.08 |
|---|---|
| 230606 TIL - 모듈 Module (2) (0) | 2023.06.06 |
| 230605 TIL - 모듈 Module (0) | 2023.06.05 |
| 230601 TIL (0) | 2023.06.02 |
| 230530 TIL (0) | 2023.05.30 |
