전체 글 23

[Node.Js] fetch,Promise 객체, callback 함수 개념 사용예제

2020.06.01(화) 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 57번째날 오늘은 이전에 배웠던 개념들을 다시 한번 잡고 넘어가는 시간을 가졌다!!!! 1.fetch fetch는 주로 정보를 가지고 올때 쓴다 fetch(url,options) fetch(url, { method: 'GET', headers: { 'Content-Type': 'application/json' } }) method : 사용 할 메소드 선택 (GET, POST, PUT, 기타등등) headers : 헤더에 전달할 값 body : 바디에 전달할 값 fetch로 가져오는 값은 Promise객체로 저장된다!! 그런데 Promise 객체가 뭐였는지 기억이 잘 나지 않는다. 마침 교수님이 다시 Promise 객체와 콜백함수..

Node.Js 2021.06.01

[Node.Js] Web socket 사용방법

2020.05.31(월) 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 56번째날 1. 웹소캣이란? 요청을 보낸 사람 이외의 사람에게도 응답을 보낼 수 있음 -> 요청없이도 응답을 줄 수 있다는 뜻 서버가 요청을 보낼 수도 있게 됨 -> 쌍방향 통신이 가능하게 됨 2. 기본셋팅 1) npm install express 2) npm install socket.io 3. socket.io명령어 (?) socket.on('이벤트명', 받을정보 변수명 설정 ) -> 정보 받기 socket.emit('이벤트명',내보낼 정보) -> 정보 내보내기 socket.broadcast.emit('이벤트명',내보낼 정보) -> 나 빼고 다른 로컬에만 정보 내보내기 connection - connect는 한쌍!!! 최초 ..

Node.Js/Web socket 2021.05.31

카카오개발자 사이트에서 api 키 발급받는 방법!

2020.05.26(수) 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 쉰세번째날 오랜만에 블로그 포스팅!! 오늘은 자바스크립트에서 카카오디벨로퍼 api 키 발급받는 방법 설명!!! 1. 카카오디벨로퍼 로그인 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 기존의 카카오 아이디로 로그인해주시면 됩니다! 2. 애플리케이션 만들기 로그인 하신 후에 메인화면의 시작하기 버튼을 누르고! 애플리케이션 추가하기를 누릅니다! 앱 아이콘에 넣고 싶은 이미지가 있으시다면 넣으시고!(저는 생략했습니다) 앱..

Node.Js/API 2021.05.27

[JS] 자바스크립트 텍스트 규칙적으로 증가시키기(이중for문, array)

2020.03.31(수) 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 열네번째날 특정텍스트를 일정하게 늘릴때, 이중 for문을 사용해도 되고, 배열을 사용해도 된다. 10줄 이내일때는 배열이 편하고, 10줄이 넘어가면 이중for문 사용하는 것이 편할듯 이중for문을 사용하면 코드가 길어지는 단점이 있다. 이중for문 사용해서 * 하나씩 늘려서 작성할때, 그리고 4번째 줄에 Hello world 나오게 할 때 for(let i=0; i

JS 2021.03.31

[JS] javascript 변수선언(var, let, const)

2020.03.31(수) 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 열네번째날 1. var ( 옛날에 많이 쓰던 변수선언 방식, 최근에는 덜 쓰는편! ) 2. let let을 붙이면 사용현위치에 따라서 사용범위가 달라짐 최상위구간에 let을 사용하면 전체에서 사용, function안에서 쓰면 function안에서만 사용, fuction 안에 있는 let이 먼저 인식 let으로 전역변수에는 index에 값 10을 주고, 지역변수에는 0을 주게 되면, 지역변수 let을 우선인식한다. 3. const 상수라는 의미로 변하지 않는 변수이다. index ++같이 변수에 변화를 주는 것을 적용하게 되면 에러가 나옴 만약 index ++; 를 빼주면 다음과 같은 결과값이 나오게 된다.

JS 2021.03.31

[JS] 자바스크립트로 HTML이미지 옆으로 넘기기

2020.03.29(월) 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 열두번째날 CSS *{ margin: 0; padding: 0; } ul,li{ list-style: none; } a{ text-decoration: none; } img{ display: block; line-height: 0; } #wrap{ width: 100%; } #header_wrap{ width: 100%; background-color: red; } #header{ width: 1200px; margin: 0 auto; height: 100px; background-color: blue; } #snb_wrap{ width: 100%; height: 200px; position: absolute; backgroun..

JS 2021.03.30

[JS] javascript mouseover, mouse out

2020.03.26(금) 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 열한번째날 오늘은 자바스크립트로 마우스가 올라가면 메뉴바가 튀어나오고, 마우스가 나가면 메뉴바가 사라지는걸 만들어 보았음 mouseover : 해당객체에 마우스가 올라갔을때 효과 나타내기 mouseout : 해당 객체에 마우스가 나갔을때 효과 나타내기 학교소개 교육과정 취업정보 커뮤니티 상담신청 word 인사말 연혁 교직원소개 시설소개 오시는길 과정안내 취업자인터뷰 취업현황 포트폴리오 공지사항 수강후기 KI이야기 KI기자단 교수칼럼 상담게시판 지원하기 자주묻는질문 *{ /*전체 엘리먼트를 지정*/ margin: 0; padding: 0; } ul,li{ list-style: none; } a{ text-decoration: no..

JS 2021.03.29

[JS] 자바스크립트 움직이는 배너 만들기

2020.03.25(목) 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 열째날 시간이 넘나 빠르다,,,벌써 열흘차라니,,,ㅠㅠㅠ 단시간내에 많은걸 배웠지만 내가 정확히 이해했는지 확신이 없다ㅠㅠ 오늘은 경일게임아카데미 사이트에 있는 배너처럼 계속 돌아가는걸 자바스크립트를 이용해서 만드는걸 해봤음!!! var index = 0; -> index 변수값 0부터 시작 banner(); -> banner 함수를 창 열자마자 실행 function banner(n){ console.log(n); bannerImg = document.querySelectorAll('.banner1>li'); ->banner1의 리스트들 가져와서 배열로 변환 if (index >= bannerImg.length){ index =..

JS 2021.03.29

[JS] 자바스크립트 querySelectorAll 활용해서 이미지 바꾸기

2020.03.24(수) 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 아홉째날 어제 오후시간에 해보라고 하셨던건데 난 결국 못했다ㅠ 배열에 대한 개념이 정립이 안되어있어서 그랬던 듯하다 li = document.querySelectorAll('#puppy > li'); -> querySelectorAll을 사용하면 puppy안에 있는 정보들을 각 속성값 형식 그대로 배열 형식으로 변환해준다. img들은 Element형식이었기때문에 [Element,Element,Element] 다음과 같은 형태로 가져오는 것! setInterval(moving,2000); ->내가 설정한 함수를 2초마다 실행해주도록 설정한것이다! (2000=2초, 3000=3초,4000=4초) * 결과물

JS 2021.03.24