전체 글
-
vue0.(vue/라이프사이클)JS/vue.js 2022. 2. 21. 23:13
VUE ▶SPA : Single Page Application ▶화면 전환이 부드러움 / 새로고침없이 모바일 앱같은 느낌 ▶vue 의 경우 html 렌더링이 더 빠름 ! (than React) 라이프사이클 : 인스턴스나 컴포넌트가 생성된 후 보여지고, 사라지기까지의 단계 : 페이지를 구성하는 과정 Vue 1. create(생성: 데이터만 존재) -> 2. mount(template→DOM에 부착) -> 3.update(업데이트: data변화시 rerendering) -> 4.destroy(제거) Hook : beforeCreate(), created(), beforeMount(), mounted(), beforeUpdate(), updated(), beforeUnmount(), unmounted() be..
-
JS기본(promise)JS 2022. 1. 31. 23:48
JS는 한 번에 하나의 테스크만 실행할 수 있는 싱글 스레드 방식으로 동작! 따라서 비동기 작업을 하기 위해 promise 객체를 생성해서 작업해준다. ●콜백 함수 1.가독성이 나쁘고 2.비동기 처리 중 발생한 에러의 처리가 곤란 3.여러 개의 비동기 처리를 한번에 처리하는 데도 한계O ○promise 1.단점 보완 2.비동기 처리 시점을 명확하게 표현 가능 Promise promise는 프로미스를 생성하고 종료될 때까지 3가지 상태(states)(프로미스의 처리 과정)를 가진다. 대기(pending), 이행(fulfilled), 실패(rejected) const promise = new Promise((resolve, reject) => { ~ }); 다음과 같이 new Promise로 promise ..
-
JS숫자추측게임1JS 2022. 1. 14. 02:53
순서! 1.처음 prompt에 최댓값 받기 2.입력값이 random값 보다 크면-> "그거보다 작아" / 작으면 -> "그거보다 커" 라고 prompt에 문구가 나오고 맞출때까지 무한반복 3.그만두고 싶다면 "q"입력 4.총 시도한값도 같이 출력 "{try}했어!" 1.처음 prompt에 최댓값 받고, max 범위 안에서 숫자 랜덤값 정하기 function init() { let maximum = parseInt(prompt("maximum 숫자 입력해봐!")); const targetNum = Math.floor(Math.random() * maximum) + 1; } ++숫자로 제대로 입력하라고 while문으로 반복! while (!maximum) { maximum = parseInt(prompt("..
-
JS (web API's, event)JS 2022. 1. 14. 02:45
챌린지에서 학습한거! web API's를 확인하고 이용하는 과정으로 mouseenter, mouseleave, resize, contextmenu 이벤트를 이용하여 text와 color를 바꾸는 연습을 했다. const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"]; const hh = document.querySelector("h2"); const superEventHandler = { handleMouseEnter: function () { hh.innerHTML = "The mouse is here!"; hh.style.color = colors[0]; }, handleMouseLeave: function () { hh.inner..
-
JS(this배우기)JS 2022. 1. 13. 04:57
const dog = { name : "kong", age : 2, color : "black", bark() { console.log(`${this.name} says walwal!!!!!!`) } } const bark2 = dog.bark; 1. bark2 를 입력하면 dog.bark 함수에 대해 나오고 2.bark2()를 입력하면 dog.bark 함수가 실행된다. 3. dog.bark 입력하면 마찬가지로 dog함수의 bark에 대해 나오고 4. dog.bark() 실행하면 this로 앞에 쓰인 dog["name"]을 가져와서 "kong"이 입력된다! this를 사용한 예제를 하나 더 해보면 1. hen 객체 생성 2. name 은 King, eggcount 는 0 3. layAnEgg 메소드를 만..
-
SC50-1.컴퓨팅사고CS공부 2022. 1. 11. 20:18
1.2진법 0,1,2,3,4,5,6,7,8,9,10 : 10진법 컴퓨터에서는 0과 1로만 데이트럴 표현 -> 2진법 사용 컴퓨터에는 많은 스위치(트렌지스터)가 있고 -> on/off 상태를 통해 -> 0과 1을 표현한다. 이건 중요해보이지는 않지만 흥미로워서.. ->부호와 크기 표현법 : 한 비트를 부호에 사용하고 나머지 비트를 수의 크기를 표현하기 위해 사용하하는 방법 +1 | 0 0 0 1 -1 | 1 0 0 1 -------------- -2 | 1 0 1 0 ->2진 코드화한 10진수 시스템(BCD) : 4비트를 사용해 10진 숫자를 하나 표현 EX) 12(2진수로)->1100 (BCD)->0001 0010 2.비트 컴퓨터의 측정 단위로 -> 0과 1 두가지 값만 가질 수 있다 자연어에서는 '문자..
-
JS연습하기(유저정보테이블 만들기3)JS 2022. 1. 9. 22:52
이전글과 같은 data를 이용해서 1. 한국인들 이름만 배열로 추출 2. 첫번째 한국인만 추출 3. 모든 동아시안 중에 마지막 사람 이름만 추출 4. 모든 홀수 tr은 하얀색으로 모든 짝수 tr은 #efefef 배경 색상으로 바꾸기 를 하려한다! 1. 한국인들 이름만 배열로 추출 const korean = [] mockData.forEach((item,idx) => { if (item.country === "South Korea") { korean.push(item.name) } console.log(korean) ... forEach문 안에 if문을 써서 korean배열에 넣어주기 2. 첫번째 한국인만 추출 시간이 제일 오래 걸렸다. item.country === "한국" 인 객체를 / 새로운 배열에 ..
-
JS연습(유저정보테이블 만들기2)JS 2022. 1. 9. 20:05
5.mockData에서 100번째 유저에게 경품당첨을 한다고 가정. 100번째 유저의 이름을 console.log로! 6.100번째, 200번째, 300번째, 그리고 마지막 유저에게 경품을 준다고 가정했을 때 그 사람들의 이름을 배열로 추출 를 계속 해보겠다 5.mockData에서 100번째 유저에게 경품당첨을 한다고 가정. 100번째 유저의 이름을 console.log로! ==>if문 이용하기 if (item.id === 100) { console.log(`${item.name}! 100번째 사용자입니다!`) } 처음에 인덱스라 생각해서 99를 넣었는데 id가 99인 99번째 유저가 나와서 100으로 수정했다. 인덱스라 생각하면 mockData.forEach((item,idx) => { ..... if..