본문 바로가기

Front-End/JavaScript

(9)
[Javascript] async, await async, await 만 보면 회피하는 습관이 있었는데 이 기회에 두려움을 없애보고자 한다. 캡틴 판교님을 예전에 프론트엔드 컨퍼런스에서 뵌 적이 있는데 완전 유명하신 분이라고 들었다. 근데 왜 유명하신지 알 것 같다. 글이 완전 이해가 쏙쏙~~ https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/ 자바스크립트 비동기 처리와 콜백 함수 (중급) 중급 자바스크립트 개발자가 되기 위한 자바스크립트 비동기 처리와 콜백 함수 이해하기. 콜백 지옥과 해결 방법 등 joshua1988.github.io https://joshua1988.github.io/web-development/javascript/pr..
[Javascript] Testing code Describe, it, expect 구문을 알기 위해서 찾아봤다. https://velog.io/@velopert/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%85%8C%EC%8A%A4%ED%8C%85%EC%9D%98-%EA%B8%B0%EC%B4%88 자바스크립트 테스팅의 기초 자바스크립트로 작성된 프로젝트에 테스트 자동화를 사용 할 때 사용 할 수 있는 도구는 다양합니다. 리스팅을 해보자면 다음과 같습니다. - Karma - Jasmine - Jest - Chai - Mocha 종류가 정말 다양하지 velog.io 위에 나온 개념들 https://medium.com/@chullino/require-exports-module-exports-%..
[JavaScript]Todo-List 만들기(2) 어느정도 왠만한 todo-list 같아졌다. 아래는 js 파일. index.js let todoList = []; let completedList = []; let num =1; //returnId는 string const todoListElement = document.querySelector(".todo-list"); const completedListElement = document.querySelector(".completed-list"); const initTodoDivElement = document.querySelector(".todo-initDiv"); const initTodoFormElement = document.querySelector(".todo-item"); const initT..
[JavaScript] Todo-List 만들기(1) 자바스크립트 코드는 다음과 같다. index.js // 여기에서 코드를 작성하세요! let todoList = []; let num =1; let controlNum; let controlTodo; const todoListElement = document.querySelector(".todo-list"); const initTodoFormElement = document.querySelector(".todo-item"); const initTodoInputElement = document.querySelector("input"); const proposeNewTodoElement = document.querySelector(".todo-item-add"); // console.log(proposeNew..
[JavaScript] 230327 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 1. html의 도움을 받으려면 태그를 써주는 것이 좋다. form이 submit될 때마다 페이지는 새로고침된다. 2. const loginInput = document.querySelector("#login-form input:first-child"); const loginButton = document.querySelector("#login-form input:last-child"); function onLoginSubmit(tomat..
[JavaScript] 230326 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 1. document를 이용하면 JavaScript에서 html에 접근할 수 있다. 2. html 속에 있는 내용을 id로 가져오기. 실행할 html 파일이다. Grab me! 그리고 html을 실행하고 나서 콘솔에서 document.getElementById("title"); 을 입력해주면 3. 하 망했다. html 파일을 liveserver 이라는 VScode 확장 프로그램을 사용해서 실행했었는데 const title = documen..
[JavaScript] 230324 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 1. array 배열 파이썬의 list 같은 개념이다. 숫자, string, bool 등 여러 자료형이 하나의 array에 함께 들어갈 수 있다. 시작과 끝에 대괄호를 붙인다. [와 ] const mon = "mon"; const tue = "tue"; const wed = "wed"; const thu = "thu"; const fri = "fri"; const sat = "sat"; const sun = "sun"; const days..
[JavaScript] 230323 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 1. 자바스크립트에서는 string을 써줄 때 큰 따옴표, 작은 따옴표 모두 가능하다. "hi" 'hi' 2. app.js에 이렇게 써줬다. console.log("이건 콘솔에 나타날 거야."); 그리고 나서 아래의 app.js를 연결시킨 index.html를 실행하면 이렇게 콘솔에 뜬다. console.log(출력할 내용); 를 하면 괄호 안에 있는 것들이 콘솔창에 출력된다. 3. 변수 만들기 (1) const const는 constan..
[JavaScript] 230322 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 자바스크립트를 배우는 건 오늘이 처음이다. 열심히 해보쟈. 1. 자바스크립트를 다루는 방법 중 하나는 브라우저의 console을 이용하는 것. 자바스크립트는 브라우저에 이미 설치되어있음. 오른쪽 마우스 > 검사 눌러서 이렇게 콘솔을 눌러주면 된다. 맥 기준 fn + F12 를 눌러도 바로 콘솔창으로 갈 수 있다. 2. console에 alert("HI") 를 쳤더니 이렇게 뭐가 떴다 자바스크립트를 이용해서 내가 브라우저에 영향을 미친 것이..