본문 바로가기

전체 글

[TIL-50] 노마드코더 크롬앱(JS) 클론코딩 #8.0~#8.2 (완강) 보호되어 있는 글입니다. 더보기
[TIL-49] 노마드코더 크롬앱(JS) 클론코딩 #7.6~#7.8 #7 To-do 리스트 ToDo 삭제하기 todo 지울 때 로컬스토리지도 업데이트해야 함. 로컬스토리지는 데이터베이스 아님. toDos 배열이 데이터베이스. 배열의 아이템을 지워야 함. 같은 아이템이 두 개일수도 있음. 뭘 지웠는지 구분할 수 있어야 함. [나] 삭제된 리스트 태그의 자식 번호를 구해서 해당 인덱스의 toDos 배열 아이템을 삭제하고 로컬스토리지에 업데이트 함. [참고] 배열에서 특정값 삭제하기 https://hianna.tistory.com/489 function deleteToDo(event) { const li = event.target.parentElement; li.remove(); toDos.splice(li.childElementCount, 1); console.log(li... 더보기
[TIL-48] 노마드코더 크롬앱(JS) 클론코딩 #7.3~#7.5 #7 To-do 리스트 ToDo 저장하기 배열 필요함. newTodo를 만들 때마다 toDos 배열 안에 push해서 저장함. toDos.push(newTodo); 로컬스토리지에 저장. 함수를 통해 배열의 정보를 로컬스토리지에 넣음. localStorage.setItem("todos", toDos); 그런데 배열의 형태로 저장되지 않음. 겉보기엔 배열처럼 만들어도 사실 그냥 텍스트. JSON.stringify(객체나 배열 등 js 코드) : ( ) 안을 string으로 만들어줌. toDos 배열을 JSON.stringify(toDos)로 쓰면 배열의 모양으로 저장됨. 중복된 문자 입력도 가능. 로컬스토리지에 이렇게 저장된 걸 이제 가져올 수 있으면 됨. 또 다른 문제, 페이지 새로고침하면 todo 리스트.. 더보기
[TIL-47] 노마드코더 크롬앱(JS) 클론코딩 #6.1~#7.2 #6 명언과 배경 배경 준비 js 파일 만들어서 html에 연결. 이미지 파일들 따로 폴더 만들어서 넣어둠. js images 배열 만들어서 안에 이미지 파일의 이름들 넣음. 배열에서 가져올 이미지 이름을 랜덤 인덱스로 뽑음. 이전까지는 html에 만들어놓은 요소를 js에서 찾았음. 근데 이번엔 js에서 만들고 나서 html에 추가해야 함. document.createElement("img") : img 태그를 만들 수 있음. elements 탭에서 찾을 수 없는데(페이지에 존재하지 않음) 만들었으니 일단 존재함. 변수로 정의하면 img 태그를 객체로, 그 안의 src도 찾을 수 있음. string으로서 태그 만들어놓고 html 에 추가. document.body.appendChild(추가할 태그) bo.. 더보기
[TIL-46] 노마드코더 크롬앱(JS) 클론코딩 #5.0~#6.0 #5 시계 Intervals 파일 세팅 css는 css폴더에, js는 js 폴더에 js 파일은 greeting, clock 등으로 기능별로 쪼개서 만듦. 각각 html 파일에 잘 연결시키기 html clock 아이디 가진 h2 태그 만듦. "00시 00분"을 디폴트값으로 둠. js h2 태그 불러와 텍스트 집어넣기. interval : 매번 일어나야 하는 무언가. 예) 매 2초 setInterval(실행할 함수, 함수가 호출될 간격 ms); Timeouts and Dates timeout : interval과 달리 일정 시간이 지난 후 한번만 실행. setTimeout(sayhello, 5000ms); date new Date() : 오늘 날짜 가져옴. Date.prototype.필요한함수() getFu.. 더보기
[TIL-45] 노마드코더 크롬앱(JS) 클론코딩 #4.4~#4.7 #4 로그인 getting username username 입력받고 나면 form 없애기 html 요소 자체를 없앰. css를 통해 없앰. .hidden {display: none;} form에 submit event 발생 시 작동하는 함수에 hidden 클래스 추가하는 코드 작성. 표시할 텍스트(username)가 있으면 h1이 표시되게 하기 h1은 hidden 클래스 있어서 숨겨진 상태. h1에 greeting 아이디 추가해서 JS에서 찾음. 변수로 정의해둠. const greeting = document.querySelector("#greeting"); h1 안에 텍스트 입력. greeting.innerText = "Hello " + username; hidden 클래스는 여러 번 사용되었으므로 변.. 더보기
[TIL-44] 노마드코더 크롬앱(JS) 클론코딩 #4.0~#4.3 #4 로그인 input values input과 button 생성 일단 html에 작성하고 js에서 가져와야함. 이 앱에는 인풋과 버튼 많음. 구분을 위해 div로 묶어서 클래스나 id 추가해줌. 요소 가져오기. loginForm(div)를 정의하고 나면, 이 변수를 이용해서 그 안의 input과 button도 검색할 수 있음. loginForm은 HTML element이기 때문. 혹은 loginForm 변수 없이 input과 button 각각을 쿼리셀렉터로 검색해서 정의. button 클릭 이벤트 발생 시, input의 값 출력 console.dir(loginInput)으로 확인해보면 값 property의 이름은 value. 따라서 function {} 안에 console.log(loginInput.v.. 더보기
[TIL-43] 노마드코더 크롬앱(JS) 클론코딩 #3.6~#3.8 #3 JS로 브라우저에 HTML과 상호작용하기 클릭하면 파란색, 한 번 더 하면 빨간색, 또 하면 파란색으로 반복되게 하기 어떤 조건이 true인지 확인해줘야 함. 즉, if 조건문 필요! function handleTitleClick() { if (title.style.color !== "teal") { title.style.color = "teal"; } else { title.style.color = "tomato"; } } title.style.color를 변수 이용해서 코드 개선 function handleTitleClick() { const currentColor = title.style.color; let newColor; if (currentColor !== "teal") { newColo.. 더보기

티스토리툴바