본문 바로가기

학원수업/2월21

02/13 51회차 JavaScript 수업 노트 정리(동기 비동기) https://cotak.tistory.com/103 [Node.js] 모듈화에 사용되는 module.exports와 exports의 차이 module.exports와 exports의 차이를 살펴보던 중 쉬운 설명과 깔끔한 코드로 간단하게 설명해준 글(링크)이 있어 공부차 참고하여 포스팅하게 되었다. 1. 모듈이란? 모듈은 특정한 기능을 하는 함수나 cotak.tistory.com 1. 모듈이란? 모듈은 특정한 기능을 하는 함수나 변수들의 집합이다. 코드의 길이를 줄이고, 유지보수를 용이하게 할 수 있다는 장점이 있다. 이러한 모듈을 export하는 두 가지 방법인 module.exports와 exports의 차이점을 알아보자. 반드시 package.json에 type : "module"을 추가해준다. .. 2023. 2. 13.
02/13 OpenWheather API/ KakaoMap API 사용하기 1.날씨 API 사용하기 https://home.openweathermap.org Members Enter your email address and we will send you a link to reset your password. home.openweathermap.org 무료 날씨예보 API를 사용할수있는 사이트^^ 제이쿼리 이용해서 html만들어준다. 1) 날씨 아이콘넣기 https://openweathermap.org/weather-conditions Weather Conditions - OpenWeatherMap Weather Conditions Home Weather Conditions openweathermap.org 2) 시간과 온도 정보 가져오기 현재시간 => 현재온도 => 최고온도 =.. 2023. 2. 13.
02/09 자바스크립트 JSP React 자바스크립트에서 배열은 매우 중요하다. 자바보다 훨씬 더 중요 자바스크립트에서 instance of 로 타입을 체크해줘야된다. 왜냐하면 컴파일을 안한다. 내가 타입체크를 해야된다 Nullish문제 Nullish병합 연산자(??)를 이용하면 (undefined ?? 2) ->2 세번째는 있으나 마나 하다. 첫번째가 널이면 다음꺼로 치환된다. 논리비교 == === 세개짜리는 타입비교까지 한다. ===쓰는것이 더 안전하다. !== !=== 객체는 데이터를 Property라는 인덱싱을 통해 구조적으로 묶어놓은 형태이다. let car={ name: "깜찍" age:(프로퍼티 인덱싱) } 배열 추가하는 메소드 push 맨 뒤에 추가해준다. 자바스크립트에서는 객체나 함수를 생성할때 function사용 선언이 안되어.. 2023. 2. 9.
Youtube API 사용하기 https://developers.google.com/youtube/v3/getting-started?hl=ko 시작하기 | YouTube Data API | Google Developers 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 소개 이 문서는 YouTube와 상호작용할 수 있는 애플리케이션을 개발하려는 개발자를 위해 작성되었 developers.google.com https://developers.google.com/youtube/v3/docs/?apix=true API Reference | YouTube Data API | Google Developers API Reference 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하.. 2023. 2. 9.
02/08 jQuery JSON.parse() JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다. 선택적으로, reviver 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있습니다. submit이슈 이 경우는 submit에 대한 이슈가 없음 이 경우도 submit에 대한 이슈가 없음 전송 submit이슈가 있음-주의할것 반드시 event.preventDefault()를 호출하여 이벤트 버블링 방어할것 문제상황 페이지 새로고침이 발생함 화면이 하얗게 변했어요 화면이 계속 렌더링되고 있어요-F5-새로고침 기본 동작 막기 브러우저의 기본 태그들은 기본 이벤트를 갖고 있는 경우가 많습니다. 예로 태그는 클릭시 해당 URL로 이동하고 은 submi.. 2023. 2. 8.
02/07 48회차 Ajax, 비동기 통신 함수 1. 선언적함수 2. 익명함수 3. 대입형함수 -일급함수: 변수에 익명함수가 대입된 형태, 고차함수 4. 즉시실행함수-호이스팅과 관련 함수는 자바스크립트에서 객체이다. 호이스팅 이슈 중간에 선언된 변수가 전역변수 화 되는것 let이나 const로 바꾸게 되었다. 익명함수가 들어가는 위치는 콜벡함수자리이다. 일급함수는 자바스크립트 뿐만아니라 다른언어에도 쓰인다. 자바에는 없다. 자바스크립트는 void 가 없다. 버튼 타입 = 버튼? Q. button에 type="button" 을 지정해주는 이유? A. 그게 디폴트가 아니니까요! button의 type에는 3가지 값을 지정해 줄 수 있는데 각각 submit, reset, button입니다. 만약 아무런 값도 지정하지 않았다면 기본값은 submit이 됩.. 2023. 2. 7.
02/07 48회차 Google API사용하기 https://console.cloud.google.com/apis/ Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com firebase로 googleapi 키 만들어 준다. https://firebase.google.com/?hl=ko Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com terminal에서 npm install firebase 파이어 베이스 설치해준다. 구글에 자동으로 firebase에서 생성된 키가 들어온다 도메인주소랑 Oauth ID 발급은 firebase console에서 -> Authentication->.. 2023. 2. 7.
02/03 47회차 수업 오늘은 웹서비스에 필요한 컨셉을 느껴보는 시간^^ DOM 이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. html문서 전체를 가리키는 내장객체가 있다. BOM 브라우저의 내장객체 브라우저 객체 모델(Browser Object Mode.. 2023. 2. 3.
02/02 JavaScript (forEach, filter) Node.js V8은? 오픈소스 자바스크립트 엔진이다. 구글이 만들었다. 버블링과 캡쳐링 부모한테 이벤트가 발동되는것 : 버블링 자식한테 이벤트가 타고 내려오는것 : 캡쳐링 태그-순서가 없다. 비상태 Query String 쿼리스트링이란? 사용자가 입력 데이터를 전달하는 방법중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다. query parameters( 물음표 뒤에 = 로 연결된 key value pair 부분)을 url 뒤에 덧붙여서 추가적인 정보를 서버 측에 전달하는 것이다. 클라이언트가 어떤 특정 리소스에 접근하고 싶어하는지 정보를 담는다 물음표 뒷부분이 쿼리 스트링이다. get방식으로 가져온다. Restful API를 사용해서 가져오는것이다. Object J.. 2023. 2. 2.
02/01 naver API 이용신청하기 환경 기억해놓기 포스트맨에 가서 request 랑 npm express가 설치 되어있어야한다. 랜덤으로 네이버에서 캡차 이미지를 계속 받아온다. 로그인기능 구현시 API활용이 가능하다. 유저가 요청을 하면 네이버 서버에서 보여준다. 굳이 내가 이미지를 다운 받지않는다. const express = require("express"); const app = express(); const client_id = "RDDdbMBfUtlavWmyBD_e"; //개발자센터에서 발급받은 Client ID const client_secret = "비밀^^"; //개발자센터에서 발급받은 Client Secret const code = "0"; app.get("/captcha/nkey", function (req, res).. 2023. 2. 1.

티스토리툴바