빠르게 성장하는 개발자

const s = "hello" const s_array = s.split("") console.log(s_array) ["h", "e", "l", "l", "o"]python과 마찬가지로 split이라는 method를 통해서 Array로 변환할 수 있다.python에서는 그냥 .split()을 하면 자동으로 빈칸을 기준으로 분리했는데, js에서는 매개변수를 전달하지 않으면 그냥 크기가 1인 배열, 즉 [”hello”] 를 반환하는 것을 확인할 수 있었다.반드시 빈문자열 (””) 을 매개변수로 전달해서 문자열을 문자로 구성된 배열로 반환해야 한다.spread 연산자를 활용하는 방법도 있다. const s = "hello" const s_array = [...s] console.log(s_array) ["..

1. JSON?2. Object to JSON1.stringify3. JSON to Object1. parse1. JSON?: JavaScript Object Notationkey- value로 이루어져 있다. (object와 같은 구조)간단하게 data를 교환할 떄 쓰이는 formatprogramming language, platform에 상관없이 사용할 수 있다https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON 2. Object to JSON1.stringify let json = JSON.stringfy(true) let json = JSON.stringfy(['apple','banana'])symbol이나 내부의 함수는 j..

1. What is AJAX?Asynchronous Javascript And XML즉, 비동기 통신 웹 개발 기술즉, 화면 전체를 새로고침 하지 않아도, 일부만 서버로 요청을 보내고 데이터를 받아서 화면의 일부분만 업데이트를 할 수 있게 하는 것⇒ 이런 비동기 웹 통신을 위한 라이브러리가, 앞에서 말한 Axios 이다 2. HTML → JS 로 어떻게?⇒ Data set 사용하기 3. csrftoken 처리는?⇒ hidden으로 숨겨져있는 csrf 값을 가진 input태그를 선택AJAX로 csrftoken을 보내는 방법 참고axios의 headers 부분에 object를 추가한다. Uploaded by N2T

프로미스 (Promise)Callback Hell문제를 해결하기 위해 등장!!작업이 끝나면 실행시켜줄게 라는 약속!!!비동기 작업의 완료 또는 실패를 나타내는 객체⇒ 프로미스를 이용하면, 우리가 일반적으로 쓰는 위에서 아래로 코드를 적는 방식으로 비동기처리를 할 수 있다! 그런데.. 이미 사용하고 있었다!? 💡Axios.then(callback)요청한 작업이 성공하면 callback 실행연속적으로 chaining을 할 수 있다. (.then → .then → …) chaining을 하려면 반드시 ‘return’ 값을 줘야 한다. 이전 작업의 성공 결과를 인자로 전달 받는다..catch(callback)then()이 하나라도 실패하면 callback 실행이전 작업의 실패 객체를 인자로 전달받음. Uploa..

1. Axios?1. Axios 기본구조2. Axios 사용하기 (요청 Config)3. 콜백함수 1. Axios?1. Axios 기본구조Python의 requests처럼, JS에서는 axios를 사용한다.get, post 등 여러 method 사용 가능하다.then을 이용해서 성공하면 수행할 로직을 작성한다.catch를 이용해서 실패하면 수행할 로직을 작성한다.2. Axios 사용하기 (요청 Config)https://axios-http.com/kr/docs/req_config공식문서를 참고하자! 3. 콜백함수다른 함수의 인자로 전달되는 함수💡비동기 콜백함수?시간이 걸리는 비동기 작업이 완료된 후 실행할 작업을 명시하는데 사용되는 콜백함수비동기 처리를 순차적으로 동작할 수 있게 한다! 콜백 지옥!!비동..

1. Single Thread💡Thread?작업을 처리할 때 실제로 작업을 수행하는 주체JavaScript는 Single Thread 언어로, 동시에 여러 작업을 처리할 수 없다. 2. JavaScript RuntimeJavaScript가 비동기 처리를 할 수 있도록 도와주는 환경이 필요하다⇒ Browser, Node.js 에서 처리한다. 3. JavaScript의 비동기 처리브라우저 환경에서 JS의 비동기모든 작업은 Call Stack으로 들어간 후 처리된다.오래 걸리는 작업이 들어오면, Web API로 보내 별도로 처리하도록 한다.Web API에서 처리가 끝난 작업은 곧바로 Call Stack으로 들어가지 못하고, Task Queue에 순서대로 들어간다.Event Loop가 Call Stack이 비어..

1. 동기모든 일을 순서대로 하나씩 처리하는 것⇒ 즉, 이전 작업이 끝나고 다음 작업을 시작하는 것!Python은 모두 동기식이다.만약, Web에서 요청과 응답을 동기식으로 처리한다면?⇒ 응답이 올 때까지 기다려야 한다! 2. 비동기작업 시작 후 결과를 기다리지 않고 다음 작업을 처리하는 것요청을 보내고 응답이 빨리 오는 작업부터 처리예를 들어 홈페이지를 접속할 때에도, 위에서부터 순서대로? (x)⇒ 먼저 처리되는 대로 이미지가 나타난다. 3. 비동기를 사용하는 이유사용자 경험 때문이다!⇒ 아주 큰 데이터를 불러온 뒤에 실행되는 앱이 있을 때,비동기로 처리한다면 처리되는 부분부터 보여줄 수 있기 때문에사용자 경험에 긍정적인 효과를 볼 수 있다. 💡웹기능은 비동기식으로 처리되어있다! Uploaded by ..

1. Javascript 시간 객체 만들기현재 시간을 나타내는 객체 만들기const now = new Date() // 출력 : Oct 25 2022 16:43:24의외로? 쉬운 시각, 분 가져오기 (슬라이싱을 안써도 된다니! 신세계라고 할 수 있겠다.)let hour = now.getHours // 16 let minute = now.getMinutes // 45 let day = now.getDate // 25이런식으로 숫자로 출력하게 된다.내가 출력하고 싶은 포맷은? 오후 04:47:45 이런식으로 출력하고 싶다. 이때 사용하는 함수는?toLocaleTimeString() 2. random 배경화면 만들기lodash 를 이용해서 랜덤으로 추출한다._.sample([1,2,3,4,5,6]) ⇒ 1~6..

에러 발생 상황🚨 컬러 버튼을 누르면 테마가 바뀌게 만들고 싶은 상황 이런식으로, 에러 해결정말 어이없게도 ""를 작성하지 않아 생긴 문제였다. 수정 전 코드const bodyTag = document.querySelector("body") grayBtn.addEventListener("click", function(event){ bodyTag.style.backgroundColor = gray; bodyTag.style.color = white; })수정 후 코드const bodyTag = document.querySelector("body") grayBtn.addEventListener("click", function(event){ bodyTag.style.backgroundColor = "gray"..

for each, setAttribute를 활용해서 모든 input 요소에 클래스 추가하기내가 아는 forEach는 array에 활용할 수 있는 메서드라고 알고 있었다.그렇다면 먼지 array 형태로 가져와야 하지 않을까? ⇒ querySelectorAll()을 활용하기 결과물const elementList = document.querySelectorAll("input") elementList.forEach((element) =>{ console.log(element) element.setAttribute('class','myInputs') }) Uploaded by N2T