nomadcoders7 노마드 코더 바닐라JS로 크롬 앱 만들기 후기 (11.21~12.04 챌린지 졸업) https://nomadcoders.co/javascript-for-beginners/lobby 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 까먹기 전에 작성하는 완강 후기! 두 달 전쯤 개발을 본격적으로 배워보려고 다양한 강의와 자료들을 찾아보던 중, 노마드 코더의 클론코딩 강의에 대해 알게 되었다. 이제 막 입문한 초보이지만 무언가 결과물을 만들어 보고 싶었기에 해당 강의들을 들어보기로 했고, 지원한 부트캠프의 시작일 전까지 바닐라JS 강의까지의 완강을 목표로 공부하기 시작했다. 먼저 코코아톡 클론코딩을 듣고 있던 와중에 바닐라JS 챌린지가 시작되었다. 다음에 다시 할까 하다가 일단 같이 진행해 보기로 했.. 2022. 12. 27. 노마드 코더 코코아톡 클론코딩 복습용 정리(2) #3 CSS를 배워보자. CSS를 HTML에 추가하는 방법은 1) 같은 파일에 두는 방식과 2) 다른 파일로 분리하는 방식이 있다. 분리하는 방식을 추천하는데, 그 이유는 만들어진 CSS 파일을 link하면 다른 HTML페이지에서도 사용할 수 있기 때문이다. 물론 보기도 좋다. 1) head 안에 style 태그 작성. 2) CSS 파일을 생성하여 link 하기. ☞ CSS 코드 작성하는 법 : selector(가리키는 대상)를 쓰고, 중괄호{ }를 사용하여 속성을 작성. ※ 브라우저는 CSS를 위에서부터 읽는다. (CSS의 cascading한 성질) 즉, 맨 마지막에 작성된 코드가 최종적으로 보이게 됨. ▶ box 1) block : box, p 등은 그 옆에 아무것도 오지 않는다. 한 줄에 하나만! .. 2022. 12. 13. 노마드 코더 바닐라JS로 크롬 앱 만들기 복습용 정리(4) toDo.id !== parseInt(li.id)); saveToDos(); } function paintToDo(newTodo) { const li = document.createElement("li"); li.id = newTodo.id; const span = document.createElement("span"); span.innerText = newTodo.text; const button = document.createElement("button"); button.innerText = "❌"; button.addEventListener("click", deleteToDo); li.appendChild(span); li.appendChild(button); toDoList.appendChild(.. 2022. 12. 5. 노마드 코더 바닐라JS로 크롬 앱 만들기 복습용 정리(3) 위와 같은 작업을 HTML 기본 기능을 이용하여 할 수도 있다. ● required : 해당 input을 필수 입력 항목으로 만들어 줌. ※ input의 유효성 검사를 작동시키기 위해서는 input이 form 안에 있어야 한다. → 다만 위 상황에선 input 안에 있는 button을 누르거나 type이 submit인 input을 클릭하면 페이지가 새로고침된다. ( + 엔터 ) 즉, 이 상황에선 click에 신경 쓸 필요가 없다. form을 submit하는 것에 관심을 두어야 한다. 이렇게 preventDefault를 이용하면 새로고침되지 않으며(브라우저의 기본 동작을 막는 것), event를 쓰는 것이 관행이다. (참고) 일반적으로 string만 포함된 변수는 대문자로 표기하고, string을 저장하고.. 2022. 12. 1. 노마드 코더 바닐라JS로 크롬 앱 만들기 복습용 정리(2) - JavaScript는 HTML에 이미 연결되어 있다. JavaScript로 HTML을 변경할 수 있음. - 우리의 web site를 의미하는 document가 모든 것들의 시작점이다. > - getElementById : HTML에서 id를 통해 element를 찾아주는 함수. 참고) log 대신 dir 을 사용하면 더 자세한 정보를 가져올 수 있다. - 많은 element를 한 번에 가지고 와야 하는 경우에는 getElementsByClassName()을 사용하면 된다. - getElementsByTagName : tag name을 가지고 element들 가지고 오기. (tag는 anchor, div, section, button 같은 것들을 의미함.) - querySelector : element.. 2022. 11. 25. 노마드 코더 바닐라JS로 크롬 앱 만들기 복습용 정리(1) - 자바스크립트를 배우면 웹, 앱, 게임, 머신러닝 등 다양한 개발을 할 수 있다. 이제는 백엔드도 구현할 수 있음. - 자바스크립트를 다루려면, 브라우저의 console을 사용하면 된다. 자바스크립트는 브라우저에 이미 설치되어 있기 때문. 하지만 긴 코드를 다루기에는 불편하므로 파일을 만들어 VSCode를 이용해 작성할 수도 있다. - 물론, 자바스크립트 파일이나 CSS 파일을 브라우저에서 직접 연다고 실행되는 것은 아니다. 브라우저는 HTML을 열고, HTML은 CSS와 자바스크립트를 가져온다. 이런 식으로 HTML 파일에 자바스크립트 파일을 연결해 주면 된다. 참고) 일반적으로 자바스크립트 파일은 맨 위에서 가져오지 않는다. - console.log(); 콘솔 출력 코드. - 데이터 타입 (프로그래.. 2022. 11. 24. 노마드 코더 코코아톡 클론코딩 복습용 정리(1) ~ 간단한 이론 ~ 웹사이트를 만드는 데 필요한 도구는 HTML, CSS 그리고 JavaScript. HTML이 뼈대라면 CSS는 뼈대에 붙는 근육, 즉 디자인이고 JavaScript는 동적인 부분을 담당하는 뇌라고 할 수 있다. (참고로 이중 자바스크립트만 프로그래밍 언어임.) #2 HTML을 배워보자. ! 주의할 점 ! 파일 경로 같게 하기. 폴더명과 파일명은 소문자로. 파일명 뒤에 .html(확장자)을 쓰면 html파일을 만들 수 있음. 비주얼 스튜디오 코드의 동그라미 표시는 저장을 안 했다는 뜻. 저장을 습관화하자 ctrl+s 참고로 VSCode는 다양한 확장 프로그램을 사용할 수 있다. 태그(tag) ● h1~6 : header number1~6 ● list (종류는 두가지 ① ordered l.. 2022. 11. 14. 이전 1 다음
