본문 바로가기

javascript

(20)
자바스크립트 배열의 내장 함수 pop 함수를 사용하여 배열의 마지막 요소 삭제 var nums =[100,200,300,400,500]; var pop= nums.pop(); //500 pop 함수는 반환값이 삭제 된 요소의 값 shift 함수를 사용하여 배열의 첫 번째 요소를 삭제 var nums =[100,200,300,400,500]; var shift = nums.shift(); //100 splice 함수를 사용하여 배열 요소를 삭제 var nums = [100,200,300,400,500]; nums.splice(3,2); //[100,200,300] 첫번째 인수는 제거할 배열 요소의 위치(인덱스)를 설정 두번째 인수는 제거할 배열 요소의 개수를 설정합니다. * 첫번째 인자를 0으로 지정하고 두번째 인자를 생략하면 모든 배..
javascript hacker new app 라우터?화면 만들기 //xmlhtpp을 저장 할 저장소 생성 const ajax = new XMLHttpRequest(); const content = document.createElement('div'); const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json'; const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json' const container = document.getElementById('root'); function getData(url){ ajax.open('GET', url, false); ajax.send(); // 데이터 가져오기 return JSON.parse(ajax.response); } const news..
javascript hacker new app 문자열을 활용한 html 다루기 현재 코드를 보면 구조가 명확하지 않아 구별하기 힘들다. li 하위에 a 태그가 있구나라고 코드를 살펴보면 진행 과정들을 읽어봐야 파악할 수 있다. DOMAPI를 최대한 사용하지 않기 문자열만을 가지고 UI를 만드는 방식 활용 innerHTML 문자열을 넣고 문자열 안에 html 태그가 있으면 domapi로 즉, html로 실제로 변환하는 것으로 자동으로 처리 chlidren(배열)이라는 속성을 이용 //xmlhtpp을 저장 할 저장소 생성 const ajax = new XMLHttpRequest(); const content = document.createElement('div'); const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json'; const CONT..
javascript hacker new app 두개의 화면 웹앱 만들기 //xmlhtpp을 저장 할 저장소 생성 const ajax = new XMLHttpRequest(); const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json'; const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json' ajax.open('GET', NEWS_URL, false); ajax.send(); // 데이터 가져오기 //responce에 있는 데이터를 preview 탭에있는것처럼 바꿀것이다. // 객체로 변환 json형식만 변환 가능 const newsFeed = JSON.parse(ajax.response); const ul = document.createElement('ul'); window.add..
javascript를 이용한 해커 뉴스앱 만들기 parcel 실행 parcel.js 가 app.js를 변환해서 다른 파일로 만들고 그 다른 파일을 가지고 브라우저에서 로딩되게끔 하였다. HTML을 조작하는 도구처럼 서버라고 하는 네트워크 너머에 있는 데이터를 가지고 오는 도구도 제공이 된다. 바로 그 도구고 ajax 입니다. https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest XMLHttpRequest - Web API | MDN XMLHttpRequest 는 이름으로만 봐서는 XML 만 받아올 수 있을 것 같아 보이지만, 모든 종류의 데이터를 받아오는데 사용할 수 있습니다. 또한 HTTP 이외의 프로토콜도 지원합니다(file 과 ftp 포함). developer.mozilla.org xhr는 ..
javascript의 실행 방식 script 태그가 javascript 파일을 로딩하는, 불러들이는 역할을 하는 태그 export,import를 쓰기에는 2가지 문제점이 존재 브라우저 호환성 이슈 모듈 스펙 엔지니어링 시도 엔지니어링이란? nodejs , npm 더보기 bundler(소프트웨어)는 기본적으로 시작되는 javascript파일 안에서 다른 javascript를 파일을 불러준다. 모듈이라고 하는 스펙을 이용하여 다 구문 해석해서 javascipr 코드를 하나의 파일로 만들어준다. 브러우저에서 로딩하기 전에 미리 브라우저에서 실제로 javascript 파일을 불러들이기 전에 미리 많은 파일들을 하나의 파일로 만들어준다. 번들러중 가장 많이 쓰이는 도구는 webpack 트랜스 파일링 개발자들이 코드를 작성할때 컴퓨터가 실행시킨다..
프론트엔드 javascript 와 typescript Essential 개발환경 배달의민족 김민태 기술이사님의 js와 ts 강의를 개인적으로 정리할 내용들 입니다. vsc code plugin dubeggur chrome node.js bundle의 parcel 설치 npm install -g parcel-bundler https://ko.parceljs.org/getting_started.html 🚀 시작하기 ko.parceljs.org ts 설치 npm install -g typescript https://www.npmjs.com/package/typescript
javascript 기초문법 3 function f1(){ return { a:10, f:function(){} } } let obj1 = f1(); let obj2 = f1(); console.log(obj1.f === obj2.f) javascript에서 함수 선언 중 앞글자가 대문이자이면 클래스라고 생각하자. function F1(){ this.a = 10; this.f = function(){} } let ins1 = new F1(); //인스턴스 let ins2 = new F1(); console.log(ins1.f === ins2.f); 메모리를 최소한 절약 function F2(){ this.a = 10; } //외부에서 공용함수를 만든다 let ins3 = new F2(); let ins4 = new F2(); F2.pr..