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. 이전 1 2 3 다음
