거의 1주일 꼬박걸려 크롬앱 클론코딩 강의를 완료하였다.
사실 완료라기보다는 그냥 강의를 끝까지 들었다 정도?
매일매일 나의 멍청함을 느낀다. 진짜 싫다...
오늘 기록하는 내용은 클론코딩 강의를 들으면서 추가적으로 기억할 내용들을 메모하였다.
- 가장 먼저 뭘 해야할지 모르겠다면 : html 만들고, html을 js로 가져오기 즉 변수 선언하기
-
form 태그 : submit이라는 기본기능을 내장하는 하나의 묶음에 불과하다. 따라서 input태그를 넣어 타이핑 할 수있는 기능을 추가해야한다.
그렇다면 form을 왜 쓰는걸까? 서버와 통신하기 위해 쓰는것이다. -
event.preventdefuault()를 하는 이유: 예를 들어 투두리스트를 1000번 작성하면 새로고침이 1000번 발생하게된다. --> 불편
-
보통 인풋박스 만들때 세트
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = ""; -
input박스의 기본작성 예시
input type="text" placeholder="Write a To Do and Press Enter" required> // . required는 필수값이라는 의미.
-
function paintToDo(newToDo){} // 뭘 해야할지 모를땐 인자를 주기 object --> 사실 이부분이해가 조금 어려웠다.
-
JSON.stringify : 어떤 코드간에 string으로 만들어줌.
local storage에 array로 저장이 안되기 때문에 JSON.stringify로 array처럼 생긴 string으로 저장한 후 다시 JSON.parse 이용해 array로 꺼내는 방법을 사용함. -
지역변수 : 한 지역내에서만 사용할 수 있는 변수
여기서 그 지역은 {}에 의해 만들어지는 영역
--> function함수가 실행될때 variable이 정의되고, function이 끝이 날 때 없어진다. -
화살표함수 :
let func = (arg1, arg2, ...argN) => expression을'
let func = function(arg1, arg2, ...argN) {
return expression;
};
이렇게 함수를 간결하게 만들어줌
let welcome = (age < 18) ?
() => alert('안녕') :
() => alert("안녕하세요!");
welcome();
이런 식으로 만든다. -
Date.now(): 밀리초를 주는 함수. 랜덤 id를 만들어주고 싶을때 사용
-
inline
inline-flex: css의 display에는 2가지 속성이 있습니다. flex 와 inline-flex 가 있죠.간단히 요약하자면 컨테이너를 세로로 나열할지 가로로 나열할지 결정해줍니다.컨테이너 안의 아이템들은 부모인 컨테이너가 flex나 inline-flex를 가지고 있으면 가로 나열이 되겠지만,
인접한 컨테이너를 세로로 나열할지 가로로 나열할지 결정을 하고 싶다면?
컨테이너를 가로로 배치하려면 display:inline-flex를 사용하고,
컨테이너를 세로로 배치하려면 display:flex를 사용하면 되는 것이죠.
출처: https://wooncloud.tistory.com/10 [Wooncloud Blog] -
opacity: 투명도
-
요소의 중앙집결방법: transform: translate(-50%,-50%)
위치조정이 어려울땐-모두 앱솔루트로 잡고, transform으로 가운데 조정하기
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
