Javascript

[리액트] 환경설정

요약: npx create-react-app 폴더명 npm start 싱글페이지애플리케이션인 리액트는 매 페이지를 전환하는 것이 아니라 자바스크립트로 하나의 HTML 페이지 안에서 계속 새로운 그림을 그려나가는 형식(안에 있는 내용만 계속 바꿔줌)으로, 페이지가 여러개인 것처럼 보이게끔 한다. 즉, 웹을 앱처럼 보여주게 만드는 눈속임을 가능케 한다. 1: Nodejs 설치하기 node -v 명령어를 통해 nodejs가 설치 확인 npm : Node Package Manager. NodeJS로 개발된 모듈들을 설치하고 관리해주는 패키지 매니져 nodeJS로 만들어진 유용한 모듈들을 가져다 쓰고 관리 2: 프로젝트 시작 : 리액트에 필요한 패키지를 자동으로 설치해주는 명령어 입력 프로젝트를 설치하고싶은 경로..

[자바스크립트] how to set query in url javascript

Adding a parameter to the URL with JavaScript - Stack Overflow Adding a parameter to the URL with JavaScript In a web application that makes use of AJAX calls, I need to submit a request but add a parameter to the end of the URL, for example: Original URL: http://server/myapp.php?id=10 Resulting URL... stackoverflow.com You can use one of these: https://developer.mozilla.org/en-US/docs/Web/API/U..

자바스크립트 라이브러리 목록

https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC_%EB%AA%A9%EB%A1%9D 자바스크립트 라이브러리 목록 - 위키백과, 우리 모두의 백과사전 자바스크립트 라이브러리 목록 위키백과, 우리 모두의 백과사전. ko.wikipedia.org https://ko.khanacademy.org/computing/computer-programming/html-css-js/using-js-libraries-in-your-webpage/a/the-world-of-js-libraries JS 라이브러리의 세계 (개념 이해하기) | Kh..

[자바스크립트] for문과 foreach 실전 예제 비교

for문 let tabs = document.querySelectorAll(".task-tabs div"); for (let i = 1; i menu.addEventListener("click", (event) => getNewsByTopic(event)) ); const getNewsByTopic = (event) => { console.log("클림됨", event.targe..

[자바스크립트] Array.from( {length} 구문에서 {length}은 유사배열?

https://velog.io/@teihong93/Array.from%EC%9D%84-%ED%86%B5%ED%95%9C-%EB%B0%B0%EC%97%B4%EC%9D%98-%EC%B4%88%EA%B8%B0%ED%99%94

[자바스크립트] 자료구조 큐,스택, 트리 구현

출처 : https://helloworldjavascript.net/pages/282-data-structures.html 큐, 스택, 트리 | JavaScript로 만나는 세상 처음 시작하는 사람들을 위한 JavaScript 교재 helloworldjavascript.net 큐, 스택, 트리 어떤 데이터의 구체적인 구현 방식은 생략한 채, 데이터의 추상적 형태와 그 데이터를 다루는 방법만을 정해놓은 것을 가지고 ADT(Abstract Data Type) 혹은 추상 자료형이라고 합니다. 이 챕터에서는 널리 사용되는 ADT인 큐, 스택, 트리에 대해 배웁니다. 큐 (Queue) 큐(queue)는 다음과 같은 성질을 갖는 자료형입니다. 데이터를 집어넣을 수 있는 선형(linear) 자료형입니다. 먼저 집어넣..

[자바스크립트] web api 불러오기

해당 패턴을 잘 기억하면 된다. API호출하고 싶을 때 const callAPI = async() =>{ let url = new URL(`url주소`) let header = new Headers({헤더내용}) // 이건 필요한 경우만 let response = await fetch(url,{headers:header}) let data = await response.json() } - 1. 크롬v8 스택 : url 준비 - 2. 크롬v8 :스택 헤더 준비 - 3. WebApIs로 넘어감 : 백엔드, 서버에 요청 - 4. 백엔드에서 받은 데이터를 확인(단, 3번 행위를 기다려야 함. 기다리기 위해서 async/awiat을 이용) 1. 자바스크립트에서 제공해주는 URL 클래스를 new로 쓰면 된다. co..

[React] index.html 에 리액트와 바벨 불러오기

참고 페이지 : React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 (reactjs.org) React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 1. 리액트 불러오기 2. 바벨 불러오기 3. 리액트 적용할 script 에 다음과 같이 타입지정

[자바스크립트] 제너레이터

Generator 제너레이터 함수는 여러 개의 값을 생성하는 편리한 기능을 제공한다. 제너레이터 함수를 이용하면 값을 생산하는 속도도 정교하게 조정할 수 있다. 제너레이터 함수는 게으르게 동작(즉, 소비자가 요청해야만 다음 값을 계산)하기 때문에 무한의 목록 생성하기 같은 까다로운 기능을 제공할 수 있다.) 제너레이터 함수는 다음처럼 동작한다. //함수명 앞에 붙은 * 은 이 함수가 제너레이터임을 의미한다. //제너레이터를 호출하면 이터러블 반복자가 봔환 function* createFibonacciGenerator() { let a = 0; let b = 1; while (true) { yield a; [a, b] = [b, a + b]; } } //다음 피보나치 숫자를 계산하기 위해 a에 b를, b에..

[자바스크립트] how to remove array element javascript

구글신 There are different methods and techniques you can use to remove elements from JavaScript arrays: pop - Removes from the End of an Array. shift - Removes from the beginning of an Array. splice - removes from a specific Array index. filter - allows you to programatically remove elements from an Array. splice(시작점, 지울갯수) 코드 예시 function deleteTask(id) { for (let i = 0; i < taskList.length; i++) ..