본문 바로가기

Java Script59

DOM and Virtual DOM 다음은 리액트로 만들어진 사이트이다. re-render를 했을 때 왜 좋은 선택인가 이 사이트 Elements를 살펴보면 html 태그들로 구성되어 있는 레이아웃을 볼 수 있다. 이들을 DOM tree 라고 한다. Document Object Model Tree 이다. App 안에 3개의 children이 있다. 이 3 children 끼리는 sibiling 이다. card-list 안으로 들어가면 많은 children들이 들어있다. html으로 된 Real DOM tree 로 나타내면 다음과 같은 형태로 나타낼 수 있다. 여기서 내용을 추가하거나 변경을 하고자 할 때 real DOM에서 직접하는 것은 어렵다. 변경할 내용을 DOM에서 뽑아내 내용을 변경하거나 DOM에서 바꾸는 과정은 computatio.. 2022. 5. 31.
[JS] 비동기3 | async, await async, await asynchonous인 Promise를 좀 더 간결하게 만들어 synchronous인 것처럼 만들어주는 API 이자 Syntactic Sugar이다. 모든 경우 async, await이 좋은 게 아니라 Promise를 써야 좋은 경우도 있긴하다. Syntactic Sugar 새로운 코드가 아니라 기존의 코드를 좀 더 간편하게 쓸 수 있게 하는 코드를 말한다. ex) class: proto 타입을 더 보기 편하게 만들어 주는 역할 백엔드에서 네트워크와 연결해 오기 까지 10초정도 걸리는 함수가 있다고 가정해 보자. 실행 되었을 때 'Jane' 유저의 이름을 반환해 준다. 함수를 호출하고 콘솔에서 출력을 해보자 이렇게 동기적으로 처리를 하면 네트워크에 연결되는 10초 동안 다음 코드는.. 2022. 5. 22.
[JS] 비동기2 | Promises란? | 프라미스 체인닝 Promises 란? 1. 콜백 함수 대신 비동기를 간편하게 처리할 수 있게 도와주는 오브젝트 2. 정해진 기능을 수행시 성공하면 성공의 메세지와 처리된 결과값을 전달해 주고, 실패 시 에러를 전달해준다. 3. network 통신을 하거나, 파일 읽어서 올 때 등 무거운 오퍼레이터를 수행시 프라미스를 사용하면 수행하는 동안 다음 코드들도 수행될 수 있다. 1.state 프로세스가 무거운 오퍼레이션을 수행하는 중인지 기능 수행이 완료되어 성공했는지 실패했는지 상태에 대해 알려준다. state: pending operation이 수행 중일 때 state: fulfilled / rejected operation 완료 / 실패 2. producer / consumer 차이 producer: 원하는 데이터를 제공.. 2022. 4. 27.
[JS] 비동기1 | 콜백 | 콜백 지옥 이 3가지를 알면 네트워크 통신 편하게 할 수 있다. 1. callback 2. promise 3. async, await Synchronous 자바스크립트는 동기적 언어이다. 이 말은 hoisting이 된 이 후부터 순서대로 코드가 실행된다는 말이다. 장점은 앞 코드 작업이 다 끝나야 다음 코드가 실행되기 때문에 코드의 흐름을 빨리 파악할 수 있다. 하지만 앞 코드 실행이 오래 걸리면 뒤에 있는 코드는 실행되기까지 한참을 기다려야 한다. Asynchronous 코드 순서와 상관없이 자신의 시간표 대로 움직인다. 멀티태스킹으로 실행되기에 코드 흐름 파악은 좀 걸려도 시간이 적게 걸린다. 언제 끝날지 모르는 명령이나 메인 흐름이 되는 작업이 아닐 때 비동기 처리 많이 한다. 서버와 웹브라우저가 서로 통신할.. 2022. 4. 26.
[JS] statement VS expression expression 10+13; 'hello'; 10 > 9; 10 < 20; true; a===20 && b===30; average = 55; statement는 컴퓨터가 특정 액션을 하도록 하는 것 변수 만들기, 함수 만들기, loop include creating a variable or a function, looping through an array of elements, evaluating code based on a specific condition etc. JavaScript programs are actually a sequence of statements. -- 출처 -- https://medium.com/launch-school/javascript-expressions-and-sta.. 2022. 4. 15.
[JS] Math.max() Math.min() Math.ceil() Math.max(a, b) a, b 중에 큰 수를 반환해준다. console.log(Math.max(5, 10)); //10 Math.min(a, b) a, b 중에서 작은 수를 반환해준다. console.log(Math.min(5, 10)); // 5 Math.ceil(3.92384) 소수점 달린 숫자 round up 하기 console.log(Math.ceil(32.65)); // 33 console.log(Math.ceil(8.1)); // 9 console.log(Math.ceil(-4.2)); // -4 2022. 4. 10.
자바스크립트 동작원리 stack, queue 자바스크립트를 작성하면 크롬, 사파리, 파이어팍스,,,같은 웹브라우저가 실행을 시킨다. html, css, js를 해석해 주는 엔진이 바로 브라우저 브라우저는 js를 해석하는 순서가 다른 언어와 다르다. 다른 언어들은 코드 쓴 순서대로 실행이 되지만 자바스크립트는 먼저 끝나는 것부터 결과가 나온다. 그 브라우저 동작원리에 대해 알아보자. 브라우저 동작원리 1. stack 브라우저가 js를 해석하는 단계가 있다. stack : 명령어 모아서 실행. 한 군데 밖에 없어서 한번에 한 줄밖에 실행을 못한다 (single threaded language) heap: 변수는 따로 저장해서 stack이 물어보면 알려줌 대기실로 보내지는 명령어 여기서 setTimeout같은 명령어는 기다렸다 실행해야하므로 stack에.. 2021. 9. 22.
jQuery] 사이먼 게임 만들기 The Simon Game 먼저 기계에서 랜덤 컬러 하나가 선택된다. 사용자는 기계가 선택해 준 컬러를 클릭해야한다. 또 기계에서 랜덤 컬러 하나가 선택된다. 사용자는 첫번째 컬러와 방금 선택된 컬러, 두 개를 순서대로 클릭해야한다. 또 기계에서 랜덤 컬러 하나가 선택된다. 사용자는 첫번째, 두번째 컬러와 방금 선택된 컬러, 세 개를 순서대로 클릭해야한다. 계속 이렇게 진행되고 사용자가 기계에서 나온 순서와 다른 컬러를 선택하면 게임이 끝난다. 자바스크립트, 제이쿼리 이용해서 코드 짜기 기계에서 랜덤 컬러 선택하기 ✔️ 색이 들어가는 array를 하나만든다 -> buttonColours ✔️ 0~3 랜덤 숫자를 뽑아서 randomNumber에 담는다. ✔️ 나온 숫자로 buttonColours array에서 해당 컬러 뽑아낸 후 .. 2021. 9. 8.
jQuery] 애니메이션 효과 hide( ), show( ), toggle( ) hide( ): 숨기기 기능 h1 클릭시 h1 숨김 show( ): 숨은 글자 다시 보이게 하기 toggle( ): 접었다 폈다하기 접었다 폈다 토글하기 버튼 눌렀을 때 h1이 생겼다 사라졌다하기 fadeOut( ), fadeIn( ), fadeToggle( ) fadeOut() : 천천히 사라짐 fadeIn(): 천천히 나타남 fadeToggle( ): fade in, fade out 됨 slideUp( ), slideDown( ), slideToggle( ) slideUp( ): 아래에서 위로 접힘 slideDown( ): 위에서 아래로 펴짐 slideToggle( ): 위 아래로 접었다 펴졌다함 animate( { css내용 } ) 숫자 벨류를 갖는.. 2021. 9. 7.
jQuery] elements 추가, 삭제하기 다음과 같은 웹사이트가 있다. elements 추가하기 before( ) h1 앞에 버튼 element를 추가하고 싶다면 before( ) 메소드를 사용한다. 버튼이 생성되었다. after( ) h1 뒤에 버튼 element를 추가하고 싶다면 after( ) 메소드를 사용한다. 버튼이 생성되었다. prepend( ) h1 안 text 앞에 버튼이 생긴다 append( ) h1 안 text 뒤에 버튼이 생긴다 elements 제거하기 2021. 9. 7.
jQuery] eventListener 추가하기 / on( ) / loop 하는 법 자바스크립트에서의 eventListener 어떻게 써줄까? 타겟.eventListener("이벤트","함수") 자바스크립트에서 h1 클릭시 글자색을 바꾸고 싶다면 아래처럼 코드를 작성해야 했다. 하지만 제이쿼리에서는 eventListener를 써주지도 않는다. 타겟 뒤에 바로 어떤 event할 지 써주고 나서, 함수를 바로 써주면 된다. 자바스크립트에서 eventListener + for loop 조합을 제이쿼리에서는 어떻게 할까? eventListener + for loop 조합이었을 때 button 5개에 eventlistener가 적용될려면 querySelectorAll("button")[i]를 for loop으로 돌려서 하나씩 적용되도록 하였었다. 하지만 jquery에서는 선택된 모든 아이템에 c.. 2021. 9. 5.
jQuery] attributes 변경하기 HTML가 이렇게 세팅되어있을 때 빨간 박스가 attributes이다. jQuery로 attribute 보는 법 이미지 태그 안 scr attribute보기 drum.png라고 나옴 a 태그 안에 있는 attribute보기 클래스 보기 class도 attribute이다. jQuery로 attribute 세팅 하는법 href를 구글에서 네이버로 변경해보기 attr() 메소드의 첫 번째 인풋은 뭘 바꿀지 두 번째 인풋은 뭘로 바꿀지를 적으면 된다. 클래스 추가/ 삭제는 .addClass("") .removeClass("")로 한다. 2021. 9. 3.
jQuery] 텍스트 변경하기 텍스트 변경 text 메소드를 사용한다. 1) hi로 된 텍스트를 bye로 바꾸기 2) 버튼 안 텍스트 변경 텍스트 포함 다른 태그 추가 변경 html 메소드를 사용한다. 2021. 9. 3.
jQuery] elements 선택, css 효과주기, 클라스 추가 삭제 element 선택하기 1 element 하나 선택할 때 2. element 2개 이상 선택할 때 이 것을 제이쿼리로 간편하게 이렇게 한다. 제이쿼리에서 css 스타일 주기 ✔️ css에 인풋 하나인 경우 해당 property의 value를 알려줌 ✔️ css에 인풋이 두개인 경우 첫 번째는 property, 두 번째는 value로 값이 세팅이 됨 $("h1").css("color", "green"); ✔️ 하지만 스타일 변경은 CSS에서 하기 자바스크립트(제이쿼리)에서 css 벨류를 넣어주는 것은 코드가 지저분해 보인다. css 관련 입력 사항은 css에 저장하고 클래스를 만들어서 자바스크립트(제이쿼리)에서는 클래스를 추가 했다 제거했다 하는 것이 좋다. ✔️ 클래스 2개 동시에 만들고 제거하기 ✔️ .. 2021. 9. 3.
JQuery 소개, 시작 JQuery (제이퀘어리) 수 천가지의 자바스크립트 가운데 가장 인기 많은 라이브러리이다. Jquery를 만든 John Resig은 너무 긴 자바스크립트 코드를 간단하게 바꾼 사람이다. document.querySelector("h1") = jQuery("h1") = $("h1") 내가 만드는 웹사이트에 jQuery 연결하는 법 1. 모든 jQuery 파일을 다운 받거나 2. 부트스트랩에서 했던 것처럼 jQuery CDN을 연결해준다. 가장 많이 사용되는 google CDN을 쓰도록 하자. 인기많은 구글 CDN을 사용하는 이유는 유저가 내 웹사이트 들어오기 전에 다른 웹사이트에서 구글 jQuery CDN를 연결해 놓았다면 유저의 브라우저에 이미 cashed 되고 저장되어 있다. 내 웹사이트에서 다시 제이.. 2021. 9. 2.
JS] 애니메이션 효과 | setTimeout( ) | 버튼 클릭시 효과 버튼을 눌렀을 때 효과를 주려고 한다. CSS 일단 css에 클래스명 하나 정해서 효과를 설정해준다. JavaScript 버튼 클릭시 효과를 주기 위해 함수를 하나 만들었다. 파라미터를 currentKey로 이름 지을 것이고, 이 currentKey는 무슨 키를 눌렀는지를 나타내는 것이다. 무슨 키를 눌렀는지는 위에 있는 함수에서 내용을 받아올 것이다. 1번 buttonAnimation(buttonInnerHTML) 위에 있는 함수는 마우스 클릭시 실행되는 함수인데 이 함수가 실행될 때 buttonAnimation()함수도 같이 실행하게 하였다. 파라미터로 buttonInnerHTML를 받으면 buttonAnimation(currentKey)로 들어가서 실행된다. 2번 buttonAnimation(eve.. 2021. 8. 31.
JS] switch statement | switch, case, break, default switch statement variable의 value에 따라 다른 트랙으로 가는 것 각 버튼에 다른 소리가 나게 하려면 switch statement가 필요하다. if statement를 쓸 수도 있지만 그럼 if, else를 너무 많이 써야하니 switch를 쓴다. 참고) 7개의 드럼 html 코드 switch bare bones 7. 각 버튼의 innerHTML을 뽑아서 buttonInnerHTML에 담았다. 각 letter를 뽑아서 buttonInnerHTML에 담는 것이다. 8. switch (expression) switch on 할 variable을 넣는다. switch(buttonInnerHTML) : 각 letter를 담은 variable에 스위치 온할 것이다. 9,10,11 case.. 2021. 8. 29.
JS] 오브젝트란? / Constructor function 게임에서 호텔을 운영하게 되었다. 직원을 뽑아야 한다. 우선 벨보이를 뽑았다. 벨보이 한 명이 왔다 이름은 Jack이다. 나이는 23세이다. 워크퍼밋이 있다. 언어는 영어, 프랑스어를 한다. 이 벨보이에 관한 정보를 입력해야 한다면 다음과 같이 적을 수 있을 것이다. var bellBoy1Name = "Jack"; var bellBoyAge = 19; var bellBoy1Has WorkPermit = true; var bellBoy1Languages = "French","English"; 호텔이 잘되서 벨보이 2명을 더 뽑았다. 직원 정보를 하나 하나 적어주었다. var bellBoy1Name = "Alex"; var bellBoyAge = 22; var bellBoy1Has WorkPermit = t.. 2021. 8. 28.
JS] this 여기 드럼 버튼들이 있다. 드럼 버튼 하나를 눌렀을 때 eventlistener가 불러지고 거기에 연결된 함수가 호출되어 소리가 난다. 아래의 경우 드럼 버튼은 여러 개지만, 한 가지 소리에만 연결되어 있는 코드이다. 그럼, 각 드럼 버튼에 각각 다른 소리가 나게 할 수 없을까? 이 때 필요한 것이 this 이다. 이 때 this는 각 버튼의 아이덴티티이다. this를 좀 더 살펴보자 this가 콘솔에 나오게 중간에 있던 코드를 console.log(this); 로 바꿔보았다. 그러면 내가 누른 버튼의 내용이 콘솔에 나온다. 각 버튼의 텍스트만 콘솔에 나오게 하기 this는 클릭한 버튼이라 target이 된다. this 다음에 원하는 내용을 덧붙여준다. 버튼 클릭하면 글자가 흰색으로 바뀌게 하기 그럼 다.. 2021. 8. 27.
JS] 오디오 함수 자주 쓰는 문형 태그 안에서 일어나는 일 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio What this line of code will do behind the scenes is it will actually construct an HTMLAudioElement. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement This HTMLMediaElement that we create has a whole bunch of properties and methods. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaEleme.. 2021. 8. 27.
JS] debugger; 알아보기 크롬 개발자 툴에서 좋은 기능을 가지고 있다. 함수 단계별로 어떤 일이 벌어지는지 알 수있다. 콘솔에서 debugger;를 쓰고 shift + enter를 눌러서 다음 줄로 내리고 함수를 불러본다. 그럼 source 창으로 넘어가서 아래와 같은 내용이 나온다. 새 창 열리면서 자세히 설명 f = function calculater함수 바디에 놓고 또 아래화살표 누른다. 새창이 열리면서 바디 안에는 무슨 일이 일어나는지 설명이 되고 있다. 2021. 8. 26.
JS] 계산기 / higher Order Functions and Passing Functions as Arguments 이 전에 .addEventListener( ) 에서 함수를 인풋으로 사용하는 것을 보았다. 여기서 .addEventListener( ) 같이 다른 함수를 인풋으로 받는 함수를 higher order function이라고 한다. 아래는 클릭이 됐을 때 뭘할 지를 나타내는 코드이다. 여기서 주의 할 점은 인풋으로 들어갔을 때의 함수는 괄호( )를 사용하지 않는다는 것이다. handleClick안에 파라미터가 없다면 괄호를 쓰지 않는다. document.querySelector(".drum").addEventListener("click", handleClick ); ⭕️ document.querySelector(".drum").addEventListener("click", handleClick( )); ❌ 여.. 2021. 8. 26.
JS] anonymous function 익명 함수 anonymous 어나'너머스 function 일반 함수 사용시 함수를 따로 만들고 이름을 불러 실행 시킨다 document.querySelector(".drum").addEventListener("click", handleClick); function handleClick() { alert("I got clicked!"); } 익명 함수 사용시 익명 함수는 함수인데 이름이 없다. 그냥 function() 자체를 써준다. 함수를 따로 떼서 안만들고 실행까지 한 큐에 해결한다. function(){alert("I got clicked!")} 위에 있는 일반 함수 코드를 더 간단하게 이렇게 만들 수 있다. 2021. 8. 25.
JS] .addEventListener( ) .addEventListener( ); .addEvenListener( ) 메소드 자세히 보려면 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener method: action 표현 input 1 : event type 마우스 클릭등 어떤 액션을 취할 때일지를 적어준다 https://developer.mozilla.org/en-US/docs/Web/Events input 2: 보통 js 함수 마우스 클릭 같은 이벤트가 벌어졌을 때 뭘 할지를 적어준다. 2-1 함수를 만들고 이름을 넣기 이벤트리슨너 메소드의 파라미터에서 자바 스크립트 함수를 넣을 때 주의 할 점은 ( ) 를 넣지 않는다는 것이다. document.quer.. 2021. 8. 25.
JS] 드럼 킷 만들기 클릭하거나 해당 키보드 치면 드럼 소리나오게 하기 이미지, 사운드, html, css 는 강의 자료에서 가져옴 html, css는 기본 세팅해주심. 맨아래에 있음. 자바스크립트 편집 각 드럼 클릭시 반응하기 1. 클래스 drum에 해당하는 아이템 중에 querySelector로 첫번째 것만 클릭시 alert가 뜨게 해본다. querySelector를 button 태그보다는 클래스, Id로 하는 것이 좋다. 나중에 다른 곳에 button 태그가 생성되어서 엉뚱한 곳에 선택될 수가 있다. 2. 함수를 따로 만들지 않고 anonymous function으로 코드를 간단하게 해준다. 3. 첫번째 것만이 아닌 7개 전부 클릭시 alert가 뜨게 해본다. loop을 이용하면 편하다. for loop으로 drum 클.. 2021. 8. 25.
JS] 주사위게임 player 1, player 2가 서로 주사위 던져서 숫자 많은 쪽이 이겼다고 멘트 적어주기 index.js 파일을 만들고, html body 맨 마지막에 script를 붙여준다. js에서 랜덤 넘버를 만들어 담는다. 코드가 잘 적었나 확인해보려면 콘솔에서 테스트 해볼 수 있다. 랜덤 숫자가 나왔을 때 이미지 파일명에서 선택되어야 한다. 그 때 그 때 변경해야하므로 html의 기본 틀을 건드리지 않고 js에서 코딩을 한다. 랜덤으로 숫자가 나오면 이미지 소스에 들어가서 랜덤 이미지가 선택된다 이제 image sourrce attributes를 변경해야 한다. 이미지태그 모두를 불러온 후 첫 번째 이미지 태그 소스 변경하기 attributes 셋팅하기 ("변경하고 싶은 attributes 이름", 뭘로 .. 2021. 8. 23.
JS] Manipulating HTML Element Attributes attributes란? 각 태그 이름(h1, input, a..) 안에 하늘색에 해당하는 부분이 attributes이다. 태그 안에 뭐 있나 보기 document.querySelector("a"); 태그 안에 있는 모든 attributes 검색하기 태그 안에 1개의 href가 있다 document.querySelector("a").attributes; href attribute에는 뭐 있나 보기 document.querySelector("a").getAttribute("href"); 구글 클릭했는데 네이버 나오게 하기 href attribute 내용 바꾸기 2021. 8. 22.
JS]자바스크립트로 텍스트 조종하기 innerHTML vs textContent Text Manipulation and the Text Content Property html안에 있는 text를 변경하는 것은 innerHTML과 textContent가 있다. 둘의 차이점 innerHTML: 그 안에 있는 태그까지 같이 나온다. h1에 내용 추가 할 때도 태그까지 입력할 수 있다. textContent: 딱 텍스트만 빼온다 2021. 8. 22.
JS] 클래스 추가, 삭제, 토글/Structure, Style, Behaviour Structure : HTML Style : CSS Behaviour : Javascript 클래스 추가 .add( ) 1. 버튼 element에 클래스 추가하기 button element에 클라스 리스트로 invisible이라는 클라스 추가한다. 2. 추가된 invisible 클래스에 효과넣기 클래스 삭제 .remove( ) 3. 클래스 삭제하기 클래스 토글 .toggle( ) 토글 계속 복붙하면 버튼 생겼다 없어졌다함 이 방법으로 하면 디버깅하기가 매우 쉬어진다. 기본으로 정해 놓은 스타일을 변경하고 싶으면 stylesheet로 가서 고치고 behaving을 변경하고 싶으면 자바스크립트로 가서 고치면 된다. 2021. 8. 22.
JS] 자바스크립트에서 css 변경하기 모든 style 관련해서는 CSS 안에 있는게 좋지만, 만약 유저가 클릭했을 때 백그라운드 색을 변경하고 싶다면 이럴 때는 자바스크립트와 style property를 이용한다. 그럼, DOM을 이용해서 자바스크립트로 css style을 변경해보자. Style Properties of every DOM object 찾아보기 https://www.w3schools.com/jsref/dom_obj_style.asp 1) 콘솔에서 DOM으로 원하는 element를 선택한 후 .style.property 로 써준다. 2) value는 "string" 스타일로 써준다. "red" "10rem" li 안에 있는 a 태그의 색을 빨간색으로 바꿔보기 li 안에 있는 a 태그의 폰트 사이즈를 10rem으로 바꿔보기 css.. 2021. 8. 19.

티스토리툴바