JavaScript
-
React. 쉬운 시작. 마인드 셋.JavaScript 2024. 4. 27. 19:55
html 파일에 직접 짜지 않고 html 요소를 javascript에서 작성해서 html파일에 넣어주는 것의 일종인데 이렇게 작업하는 이유는 관리의 유용함. 재사용성을 높이기 위함. 순수 자바스크립트로는 매번 queryselector 함수와 innerHtml 함수의 파티로 복잡해간단하게 작성 할 수 있게 해준 것이 vue니 react니 하는 프레임워크들이려나.. jquery도 간단하게 작성해주는 도구. html을 javascipt파일에 작성하다 보니 아래와 같은 충돌이 생겨 규칙이 생겨남! 1. 태그에 class="" 를 쓰면 자바스크립트 class랑 같아 className=""으로 작성할 것.2. 변수를 {} 중괄호 안에 넣어 데이터를 전달 할 수 있다.3. 태그에 className 대신 인라인 스타..
-
Asynchronous JavaScript (1) - 싱글 스레드, blocking(블로킹) 현상JavaScript 2021. 8. 16. 23:30
🌱 공부 주제: 싱글 스레드, 동기적 프로그래밍, 동기적 프로그래밍에서 발생하는 문제 📝 공부를 하게 된 동기: 자바스크립트랑 관련있고 async await 검색하다가 단번에 이해가 안되서 ✅ 공부 자료: MDN - General asynchronous programming concepts, MDN - Asynchronous JavaScript, JAVASCRIPT.INFO - Introduction: callbacks Introduction: callbacks javascript.info 1. 스레드(Thread)란? 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스 하나의 스레드는 '순차적으로' '한 번에 하나의 작업만' 수행한다.작업 A -> 작업 B -> 작업 C 위와 같이 한 번에 하나..
-
로그인 구현JavaScript 2021. 8. 15. 01:00
프롬프트(prompt) 대화상자를 이용해 간이 로그인 창을 구현해보세요. 사용자가 "Admin"를 입력하면 비밀번호를 물어보는 프롬프트 대화상자를 띄워주세요. 이때 아무런 입력도 하지 않거나 Esc를 누르면 "취소되었습니다."라는 메시지를 보여주세요. 틀린 비밀번호를 입력했다면 "인증에 실패하였습니다."라는 메시지를 보여주세요. 비밀번호 확인 절차는 다음과 같습니다. 맞는 비밀번호 "TheMaster"를 입력했다면 "환영합니다!"라는 메시지를 보여주세요. 틀린 비밀번호를 입력했다면 "인증에 실패하였습니다."라는 메시지를 보여주세요. 빈 문자열을 입력하거나 입력을 취소했다면 "취소되었습니다."라는 메시지를 보여주세요. 순서도는 다음과 같습니다. 중첩 if 블록을 사용하고, 코드 전체의 가독성을 고려해 답안..
-
OR 연산자의 피연산자가 alert 라면?JavaScript 2021. 8. 15. 00:17
alert( alert(1) || 2 || alert(3) ); 얼럿 창엔 1, 2가 차례대로 출력됩니다. alert( alert(1) || 2 || alert(3) ); alert 메서드는 값을 반환하지 않습니다. 즉, undefined를 반환하죠. 첫 번째 OR || 은 왼쪽 피연산자인 alert(1)를 평가합니다. 이때 첫 번째 얼럿 창에 1이 출력되죠. alert메서드는 undefined를 반환하기 때문에, OR 연산자는 다음 피연산자를 평가하게 됩니다. truthy를 찾기 위해 말이죠. 두 번째 피연산자(오른쪽 피연산자)인 2는 truthy이기 때문에 실행이 멈추고 2가 반환됩니다. 반환된 값 2는 제일 바깥 alert의 피연산자가 되어 두 번째 얼럿창에 출력됩니다. 평가가 alert(3)까지 ..
-
비교 연산자JavaScript 2021. 8. 12. 11:52
https://ko.javascript.info/comparison 비교 연산자 ko.javascript.info
-
기본 연산자와 형 변환JavaScript 2021. 8. 12. 00:15
"" + 1 + 0 "" - 1 + 0 true + false 6 / "3" "2" * "3" 4 + 5 + "px" "$" + 4 + 5 "4" - 2 "4px" - 2 7 / 0 " -9 " + 5 " -9 " - 5 null + 1 undefined + 1 " \t \n" - 2 위 질문들에 답을 잘찾는다면 연산자에 의한 형변환을 이해한것이다. "" + 1 + 0 // ""는 문자열. 문자열과 숫자의 덧셈은 문자형으로 형 변환이 되어 문자열이 합쳐진다. "1" + 0. "10". "" - 1 + 0 // ""는 문자열. 문자열과 숫자의 뺄셈은 숫자형으로 형 변환이 되기 때문에 ""은 0이다. 0 -1 +0. -1. true + false // 1 + 0 = 1. 6 / "3" // 2 "2" * "..
-
querySelector, querySelectorAll 차이JavaScript 2021. 1. 20. 17:43
querySelector("") 는 먼저 검색되는 요소 하나를 선택한다. querySelectorAll("")은 해당하는 요소전부를 가져온다. 중요한 점은 요소전부를 NodeList 배열형식으로 가져오기 때문에 for, forEach문으로 요소 각각에 대해서 처리를 해주어야 한다. 제이쿼리랑 비교해서 정리하면, $("a")는 모든 a태그를 선택한다. querySelector("a")는 문서상 가장 앞에 있는 a태그 하나를 선택한다. querySelectorAll("a")는 모든 a태그를 선택하는것 외에도 전부 nodeList배열 형식으로 저장해서 가져온다. 그래서 각각에 대해 핸들링하기 위해 forEach,for구문을 사용하는 것이다.