CodingCredit

오늘의 에러들 .. 😹 DOM을 조작하면서 했던 삽질들을 기록한다. 주요 HTML 부분은 아래와 같다. Room: 로비 코드스테이츠 post 이벤트 'change' 안의 option이 바뀌는 이벤트 가 발생할 때마다 특정함수를 실행하고 싶었다. 처음에는 단순히 click이벤트를 입력해서 해보려했는데 잘되지가 않았다... 찾아보니, chang라는 이벤트를 입력하면 쉽게 가능했다. 이벤트에 대해 충분히 공부하지 않았던 것이 이번에 실감났다. 😵 출처:안전제일 버튼 type post버튼을 누를때마다 함수가 실행하도록 코드를 작성했다. fetch API를 통해 POST 요청을 제출하는 함수와 DOM에 메시지 하나를 추가하는 함수였는데, 위에 콘솔창에서 보이는 것처럼, 새로고침하듯이 자꾸 초기화되며..

서버는 왜 필요할까 웹/앱을 만들 때, 필요한 정보들은 서버에서 받아온다. 이렇게 생각할 수도 있다. 그냥 모든 정보를 담아서 만들면, 따로 서버에서 리소스를 받아올 필요도 없는데 왜 그러지 않을까? 그러나 그렇게 정보들을 웹/앱에 직접 담으면 많은 문제가 생긴다. 예를들어, 새로운 정보를 업데이트 하려면, 웹/앱 자체를 업데이트하여 버전업해야 하고, '결제'라는 행동은 은행 서버와의 연결이 반드시 필요한 행동이다. 클라이언트-서버 아키텍처 이렇게 리소스가 존재하는 곳(서버)와 리소스를 사용하는 곳(클라이언트)를 분리시킨 것을 2티어 아키텍처, 또는 클라이언트-서버 아키텍처라고 부른다. 클라이언트-서버 아키텍처에서는 클라이언트의 요청이 선행되고, 서버에서 응답이온다. 요청없이 응답이 오는 ..

Promise.all ? 복수의 URL에 동시에 요청을 보내고, 다운로드가 모두 완료된 후에 콘텐츠를 처리하고 싶을 때, Promise.all을 사용한다. let promise = Promise.all([...promises...]); Promise.all은 전체가 프라미스인 배열( 엄밀히 따지면 이터러블 객체이지만, 대개는 배열이다)을 받고 새로운 프라미스를 반환한다. 이 때, 반환되는 새로운 프라미스 배열의 순서는 전달된 프라미스 순서와 일치한다. 즉, Promise.all의 첫번째 프라미스가 가장 늦게 이행되더라도, 처리결과는 배열의 첫번째 요소에 저장된다. Promise.all 사용 작업해야할 데이터가 담긴 배열을 프라미스 배열로 매핑하고, 이 배열을 Promise.all 로 감싸는 트릭은 굉장히..

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리방식인 콜백함수와 프로미스의 단점을 보완한 문법이다.😃 코드 async function logName() { let user = await fetchUser('domain.com/users/1'); if (user.id === 1) { console.log(user.name); } } async & await 기본 문법 async function 함수명() { await 비동기_처리_메서드_명(); } 함수의 앞에 async라는 예약어를 붙인다. 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드앞에 await를 붙인다. 이때, 비동기 처리 메서드가 꼭 프로미스 객체를 반환해..

Promise Promise: 자바스크립트 비동기 처리에 사용되는 객체 자바스크립트의 비동기 처리를 위해서 크게 3가지가 사용된다. 콜백함수, Promise, async와 await 콜백함수로 처리 function getData(callbackFunc) { $.get('url 주소/products/1', function(response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(function(tableData) { console.log(tableData); // $.get()의 response 값이 tableData에 전달됨 }); Promise로 처리 function ge..

비동기 비동기란? 요청과 결과가 동시에 일어나지 않는 것. 따라서 다른 요청이 들어오면, 이전 요청의결과를 기다리지 않고 새 요청을 수행한다. 자바스크립트에서 비동기 처리가 필요한 이유를 생각해보자. 화면에서 서버로 데이터를 요청했을 때, 서버가 언제 그요청에 대한 응답을 줄지도 모르는데 다른 코드를 실행 안한 채, 무작정 기다리고 있을수는 없다. 비동기 처리방식의 문제점 function getData(){ let tableData; $.get('https://domain.com/products/1', function(response) { tableData = response; }); return tableData; } console.log(getData()); // undefined getData()를..