codeStates front-end
-
[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..
-
Daily Coding 5codeStates front-end/Algorithm 2023. 1. 18. 11:24
📍문제5( firstReverse ) 문자열을 입력받아 순서가 뒤집힌 문자열을 리턴해야 합니다. 📥입력 인자1 : str string 타입의 문자열 📤 출력 string 타입을 리턴 ❗️주의사항 string 타입을 리턴해야 합니다. 나의 생각 문자열을 구분해서 뒤집고 string 타입으로 리턴하면 된다고 생각했다 허나 함수 join: 배열의 모든 요소를 연결해 하나의 문자열로 반환까지 해주어야 순서가 뒤집힌 문자열을 리턴해준다! 나의 코드 function firstReverse(str) { return str.split('').reverse().toStirng(); } 래퍼런스 function firstReverse(str) { return str.split('').reverse().join(''); }
-
[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 값: 임의..
-
Daily Coding 4codeStates front-end/Algorithm 2023. 1. 17. 14:44
📍문제4( firstCharcter ) 문자열을 입력받아 문자열을 구성하는 각 단어의 첫 글자로 이루어진 문자열을 리턴해야 합니다. 📥입력 인자1 : str string 타입의 공백이 있는 알파벳 문자열 📤 출력 string 타입을 리턴 ❗️주의사항 단어는 공백 한 칸으로 구분합니다. 연속된 공백은 없다고 가정합니다. 빈 문자열을 입력받은 경우, 빈 문자열을 리턴해야 합니다. 나의 생각 문자열을 입력받아 -> '' 입력받아 문자열을 구성하는 각 단어의 첫 글자로 이루어진 -> 단어의 길이를 다 돌아서 첫글자만 뽑아내! 문자열을 리턴 -> string 타입 리턴 result = '' 단어는 공백 한칸으로 구분 -> split(' ') 빈 문자열을 입력 받은 경우 빈 문자열 리턴 -> 조건문 써서 str =..