codeStates front-end/Java Script
-
[JS] chapter23. Tree UIcodeStates front-end/Java Script 2023. 2. 14. 20:39
📌 Tree UI 📍 트리구조 화면을 구성할 때 재귀를 사용하는 가장 대표적인 예시 DOM의 대해 학습 후 실습 진행 [JS] chapter11. DOM/DOM 다루기(CRUD) DOM (Document Object Model) HTML 요소를 object 처럼 조작할 수 있는 모델 즉, DOM으로 HTML을 조작 가능하다. HTML안의 JS 파일을 적용하기 위해 ----------------------------------------------------------------------------------- hwantech.tistory.com 재귀에 대해 학습 후 실습 진행 [알고리즘] 재귀 함수 📌 재귀 📍재귀의 이해 재귀 : 원래의 자리로 되돌아가거나 되돌아옴 🔗 재귀의 코드 function r..
-
[JS] chapter22. 비동기4 - AxioscodeStates front-end/Java Script 2023. 1. 19. 17:51
📌 비동기 비동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 수행하는 것 js는 싱글 스레드 기반 동작 언어라서 동기적 작동이지만 환경(런타임)에서 비동기 처리를 도와주기 때문에 비동기 처리 또한 가능하다. 💻 Axios fetch API와 비슷한 역할을 하는 라이브러리 Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 Fetch API vs Axios Axios Fetch API 써드파티 라이브러리로 설치가 필요합니다. 빌트인 API라 별도의 설치 필요없습니다. 자동으로 JSON데이터 형식으로 변환됩니다. .json() 메서드를 사용해야 합니다. Axios 사용법 npm install axios // axios 설치 ..
-
[JS] 실습 - fetch APIcodeStates front-end/Java Script 2023. 1. 19. 17:35
📌 fetch API 📖 학습 목표 Part 3는 Node.js 환경을 떠나, 브라우저에서 진행합니다. Node.js 환경에는 fetch API가 내장 모듈로 제공되지 않습니다. 이번에는 fetch를 이용해 HTTP 요청을 보내고, 응답을 받는 연습을 합니다. Part 3는 Part 2와 비슷하게 구성되어 있습니다. 다만 callback 형태의 요청이 존재하지 않으므로, chaining과 Promise.all 그리고 async/await을 이용합니다. npm run server:part-3 으로 서버를 실행해 url을 통해 정보를 얻어 올 수 있었다 1. Chaining Test var newsURL = 'http://localhost:5000/data/latestNews'; var weatherURL ..
-
[JS] chapter21. 비동기3 - fetch APIcodeStates front-end/Java Script 2023. 1. 19. 17:35
📌 비동기 비동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 수행하는 것 js는 싱글 스레드 기반 동작 언어라서 동기적 작동이지만 환경(런타임)에서 비동기 처리를 도와주기 때문에 비동기 처리 또한 가능하다. 💻 fetch API 비동기 요청의 가장 대표적인 사례는네트워크 요청이다. 그 중 URL 요청하는 것을 가능하게 해 주는 API가 fetch API이다. fetch API - 특정 URL로부터 정보를 받아오는 역할 예제 코드 let url = "https://koreanjson.com/posts/1"; fetch(url) .then((response) => response.json()) .then((json) => console.log(json)) .catch((error)..
-
[JS] chapter20. 비동기2 - node.jscodeStates front-end/Java Script 2023. 1. 19. 17:26
📌 비동기 비동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 수행하는 것 js는 싱글 스레드 기반 동작 언어라서 동기적 작동이지만 환경(런타임)에서 비동기 처리를 도와주기 때문에 비동기 처리 또한 가능하다. 💻 node.js 모듈 브라우저에서 사용할 수 있는 비동기 흐름은 타이머 또는 dom 이벤트 등 다소 한정적이지만, node.js 경우 많은 API가 비동기로 작성되어 있다. node.js 란? 비동기 이벤트 기반 javascript 런타임 node.js 모듈 모듈 - 어떤 기능을 조립할 수 있는 형태 fs 모듈 - pc의 파일을 읽거나 저장하는 등의 일을 도와줌 내장 모듈을 사용하는 방법 - 링크 Node.js v16.14.2 Documentation Index | Nod..
-
[JS] 실습 - 타이머 APIcodeStates front-end/Java Script 2023. 1. 18. 11:07
📌 타이머 API 📖 학습 목표 각 함수들을 실행해보고 어떤 함수들인지 주석 달기 delay함수와 sleep함수의 차이점을 확인 다음 질문에 대한 답을 찾아보기 callback 버튼은 runCallback 함수를 실행합니다. promise 버튼은 runPromise 함수를 실행합니다. async & await 버튼은 runAsync 함수를 실행합니다. 📍 delay함수와 sleep함수의 차이점 callback.js const delay = (wait, callback) => { setTimeout(callback, wait); } promiseConstructor.js const sleep = (wait) => { return new Promise((resolve) => { setTimeout(resol..
-
[JS] chapter19. 비동기1 - java scriptcodeStates front-end/Java Script 2023. 1. 17. 15:52
📌 비동기 - 동기(synchronous) 동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것 - 비동기(asynchronous) 비동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 수행하는 것 js는 싱글 스레드 기반 동작 언어라서 동기적 작동이지만 환경(런타임)에서 비동기 처리를 도와주기 때문에 비동기 처리 또한 가능하다. 비동기는 순서대로 작동하지 않는 것을 기억하자! ⏱ 타이머 관련 API 비동기 첫번째 단계 타이머 관련 API setTimeout(callback, millisecond) 일정 시간 후에 함수를 실행 매개변수(parameter): 실행할 콜백 함수, 콜백 함수 실행 전 기다려야 할 시간 (밀리초) return 값: 임의..
-
[JS] 알아두면 쓸모있는 신비한 JS용어사전codeStates front-end/Java Script 2023. 1. 17. 14:14
📖 용어사전 자주 사용하는 용어들을 내 기준 정리하여 정리한 용어사전 은근히 많이 사용되는 문법만 간단하게! 0️⃣ 문자열 split() : 문자열을 일정한 구분자로 잘라서 배열로 저장 1️⃣ 배열 push() : 새로운 값을 추가 pop() : 마지막 요소 제거 sort() : 배열 요소 정렬 - 오름차순 splice() : 배열의 특정 위치에 배열 요소를 추가하거나 삭제 (start(수정할 배열 요소의 인덱스), deleteCount(삭제할 요소 개수, 없음 0), el(배열에 추가될 요소)) slice() : begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환 reverse() : 배열 요소 순서 반전 isArray() : 배열인지 확인 2️⃣ 객체 지향 언어 constructor() ..