소프트웨어 개발이야기
from teddy8-
JavaScript POST GET Request
In html
<form method="post" action="/login.php"> <div> <label for="id">ID </label> <input type="text" name="id"/> </div> <div> <label for="pw">PW </label> <input type="text" name="pw"/> </div> <div class="button"> <button type="submit"> login </button> </div> </form>html의 form 요소에서 method에 전달방식(post/get)과 action에 url을 입력한 후, submit버튼을 클릭하면 입력값에 대한 데이터 값들을 해당 url에 request하게 된다. js에서 이러한 기본로직을 막고 싶다면 preventDefault() 메소드를 호출하면 된다. 추가로, method와 url도 js에서 설정할 수 있다. 예제소스는 다음과 같다.In Javascript
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML 폼 활용하기 예제</title> </head> <body> <form name="order"> <fieldset name="productInfo"> <legend>상품 정보</legend> 상품명: <input name="productName" type="text"> 색상: <select name="color"> <option value="black">검은색</option> <option value="yellow">노란색</option> </select> </fieldset> <button type="submit">submit 제출</button> </form> <script> const orderForm = document.forms.order, productField = orderForm.elements.productInfo; orderForm.addEventListener('submit', e => { e.preventDefault(); // html에서 form의 기본 로직 방지 const { productName, color } = productField.elements; console.log(`${productName.value} 상품 ${color.value}색을 주문합니다.`); orderForm.method = 'GET'; // 전달방식 설정 //orderForm.action = 'url' // url 설정 (생략 시 해당파일에 보냄) orderForm.submit(); // request }); </script> </body> </html>XMLHttpRequest 객체를 사용하는 방법도 있다. 그건 추후에 포스팅 예정이다.
-
JavaScript 버블링(Bubbling) vs 캡처링(Capturing)
이벤트 흐름제어 개념
DOM에서 이벤트가 발생하면 이벤트가 부모에서 자식으로 가는지 자식에서 부모로 가는지에 따라 버블링과 캡처링으로 구분된다. 특징을 정리하자면 다음과 같다. 버블링 : Top-down 캡처링 : Bottom-up예제
<div id="A" class="box"> <div id="B" class="box2"></div> </div> <div id="C" class="box"> <div id="D" class="box2"></div> </div> <script> element1.addEventListener('click', e => console.log('1')); element2.addEventListener('click', e => console.log('2')); element3.addEventListener('click', e => console.log('3'), true); element4.addEventListener('click', e => console.log('4')); </script>위처럼 A, B, C, D의 id를 부여한 4개의 div영역을 생성한다. 또한, 클릭 시 1, 2, 3, 4가 출력되게 이벤트리스너를 등록한다.
A 클릭 시 1 C 클릭 시 3 이 출력된다. 하지만 B 클릭 시 2 1 D 클릭 시 3 4 가 출력 된다. 그 이유는 A, B는 버블링(Top-down) 단계에서 호출 되지만 C, D는 캡처링(Bottom-up) 단계에서 호출된다. (C의 리스너에 인자로 TRUE 전달) 즉, 캡처링 단계에서 흐름을 제어하고자 한다면 인자로 TRUE를 전달하면 된다.이벤트 전파 제어
이벤트 흐름제어는 캡처링과 버블링으로 구분한다. 그리고 이벤트 전파제어 방법에 대해 설명한다 위에서 D를 클릭하면 3과 4가 출력된다. 그렇다면 3만 출력하고 싶다면 어떻게 해야할까? 다음과 같이 stopPropagation() 메소드를 통해 해결할 수 있다.<div id="A" class="box"> <div id="B" class="box2"></div> </div> <div id="C" class="box"> <div id="D" class="box2"></div> </div> <script> element1.addEventListener('click', e => console.log('1')); element2.addEventListener('click', e => console.log('2')); element3.addEventListener('click', e => { console.log('3'); event.stopPropagation(); // 전파 방지(캡쳐링) }, true); element4.addEventListener('click', e => console.log('4')); </script>추가로 이벤트의 리스너가 contextmenu로 등록되있을 때, preventDefault() 메소드를 통해 브라우저의 기본행위를 막을 수 있다. (쉽게 말하면 우클릭 방지)event.preventDefault();
-
Youtuber 제로초님 이벤트 포스팅
유튜버 제로초
웹을 처음 공부하시는 분이라면 이분의 유튜브 채널에서 많은 도움을 얻을 수 있을겁니다.
저도 웹공부를 이제 시작하고 있는 단계라 많은 도움을 받고 있는데요
react 공부할려는 찰나에 구독자 5000명 이벤트를 열어주셔서 이렇게 참여해봅니다.
아래는 제가 제일 관심있어하는 영상인데 당첨의 행운이 찾아왔으면 좋겠네요!
물론 당첨이 안되더라도 추후에 꼭 수강할려고합니다!ㅋ
-
JavaScript Async
Async란?
async함수는 ECMAScript2017(ES8)에 추가되었습니다. 그 이유는 promise는 여전히 코드의 가독성이 좋지 않기 때문입니다. async함수 안에 있는 await구문과 함께 비동기 작업을 제어할 수 있습니다. async함수의 동작방식은 처음 async함수가 호출되고, await키워드가 붙은 promise를 실행하면 비동기 작업을 처리합니다. 그 후, async함수는 일시 중지 상태로 promise의 해결(resolve)을 기다립니다. 이 작업이 완료되면 async함수가 다시 실행되고 함수 결과를 반환합니다.예제
Async예제는 위의 promise 예제와 비교하여 보시면 좋습니다.example.js
function doWork(name, server) { return new Promise((resolve, reject) => { setTimeout(() => { if (server.traffic > 30) { server.traffic -= 30; resolve({ result: `${name} exec` }); } else { reject(new Error(`${name} failed`)); } }, 1000); }); }; const server = { traffic: 100 }; const execute = async function () { try { let v = await doWork('work1', server); console.log(v.result); v = await doWork('work2', server); console.log(v.result); v = await doWork('work1', server); console.log(v.result); v = await doWork('work2', server); } catch (e) { console.log(e); } } execute(); console.log("hello");출력 결과
hello work1 exec work2 exec work1 exec Error: work2 failed
-
JavaScript 프로미스(Promise)
프로미스란?
ES6에 추가 된 비동기 처리 객체입니다. 프로미스가 나오기 이전에는 콜백 함수로 처리했습니다. 하지만 비동기 처리가 완료된 후 결과값에서 또 다른 비동기 처리를 수행해야하는 경우가 많은데 이렇게 비동기 처리가 중첩되다 보면 코드가 점점 안쪽으로 파고 들어가는 피라미드 형태의 코드( 콜백지옥이라고도 불림 )가 만들어집니다. 프로미스는 이런 가독성이 안좋은 코드에 대한 니즈에 의해 소개된 것입니다.동기 vs 비동기
동기와 비동기를 쉽게 비유하여 설명하자면 동기(sync)는 무전기, 비동기(async)는 전화기로 예를 들 수 있습니다. 무전기는 상대가 응답해야 다음 대화를 진행할 수 있지만, 전화기는 상대가 듣던 말던 내가 하고 싶은 말을 내뱉으면서 요리를 할 수도 있고 다른일을 동시에 진행할 수 있습니다.프로미스의 상태 및 메소드
프로미스는 다음과 같은 3가지 상태를 갖습니다. 1. 대기중(Pending) - 아직 결과가 없는 상태 2. 이행됨(Fulfilled) - 비동기 처리가 성공적으로 완료되어 약속을 이행한 상태 3. 거부됨(Rejected) - 비동기 처리가 실패한 상태 프로미스는 다음과 같은 2가지 메소드를 갖습니다. 1. then(onFulfilled, onReject) - 약속이 완료됐을 때 호출될 함수 2. catch(onReject) - 약속이 거부됐을 때 호출될 함수예제
server라는 객체를 만들고 server의 여유 트래픽이 100이라고 가정하겠습니다. 하나의 작업을 비동기처리로 완료할 때마다 30의 트래픽이 깎인다고 했을 때, 트래픽이 30이하면 감당할 수 있는 트래픽이 초과되니 promise에서 거부를 하도록 하겠습니다.example.js
function doWork(name, server) { return new Promise((resolve, reject) => { setTimeout(() => { // 여유트래픽이 30보다 많이 남았으면 이행 if(server.traffic > 30) { resolve({ result: `${name} exec`, num: 30 }); } // 30이하면 거부 else { reject(new Error(`${name} failed`)); } }, 1000); }); }; const server = { traffic: 100 }; // 여유 트래픽 100 doWork('work1', server) // 'work1'라는 이름의 promise 생성 .then(v => { console.log(v.result); server.traffic -= v.num; return doWork('work2', server); // traffic 70 }) .then(v => { console.log(v.result); server.traffic -= v.num; return doWork('work1', server); // traffic 40 }) .then(v => { console.log(v.result); server.traffic -= v.num; return doWork('work2', server); // traffic 10 (30보다 낮아서 거부) }) .catch(e => console.error(e));출력 결과
work1 exec work2 exec work1 exec Error: work2 failed 트래픽이 100에서 70, 40이 됬다가 10이 됬을 때, 거부당하는 것을 확인할 수 있습니다.
-
2019 vscode 플러그인 추천
Goal
2019 vscode의 인기있는 플러그인을 알아봅니다.
각각의 특징에 대해서도 간략히 서술합니다.
너무 많아서 간략히만 작성했기에 설명이 부족할 수 있습니다.
그리고 추가로 좋은게 있다면 댓글 남겨주세요!!
플러그인 목록
Auto Close Tag 말그대로 닫힘 태그 자동으로 만들어줌 Auto Import 임포트 해야되는 상황에 자동으로 임포트해줌 https://www.youtube.com/watch?v=y-CtH4lu4uI Indenticator 들여쓰기의 깊이를 표시해줌 Node.js Extension Pack nodejs용 각종 확장팩 Output Colorizer output창의 글자가 대부분 흰색인데 컬러풀하게 가독성 올릴 수 있음 React Extension Pack React용 각종 확장팩 vscode-icons (Material Icon이 취향인 사람이 더 많다고 한다) 아이콘 미리보기 기능제공 Bracket Pair Colorizer 소, 중, 대괄호의 색상 지정으로 가독성을 올릴 수 있음 TODO Highlight 주석달 때, todo문을 하이라이트 해준다 코드가독성 관련 Beautify vscode-styled-components Prettier Code formatter Prettier Now CSS Formatter Docker docker확장팩으로 docker파일생성과 일반적인 명령 수행 가능 ESLint (JSLint, JSHint 보다 대세) 자바스크립트 문법의 에러 표시 기능 또한, 코드작성의 규칙을 지정하여 팀원간의 협력도구로도 사용 GraphQL for VSCode graphql 스키마 작성, 자동완성 등 graphql에 대한 다양한 기능 Import Cost import를 하는 코드 작성 시, 그 모듈의 데이터 size 자동표시기능 Polacode code의 특정 부분 캡쳐 기능 REST Client request를 날렸을 경우의 response의 내용을 preview로 확인 가능 Settings Sync 이름그대로 셋팅을 동기화해주는 툴. vscode에서 유용한 익스텐션이 많아짐에 따라 이것들을 관리하는 것도 일이 되버렸다. vscode를 새로 깔았을 때 익스텐션을 일일히 다시 깔고 설정을 다시 맞춰줘야하는 수고를 덜어주는 고마운 툴. Version Lens package.json에서 npm, jspm, dub, dotnet core에 대한 패키지 version정보를 보여준다. gitlens 이 코드는 언제 누가 수정했고 이런거 다 알려줌References
https://junhobaik.github.io/vsc-plugin-list/ https://velog.io/@rtyu1120/%EB%82%B4%EA%B0%80-%EC%93%B0%EB%8A%94-Visual-Studio-Code-%EC%9D%B5%EC%8A%A4%ED%85%90%EC%85%98-%EB%AA%A8%EC%9D%8C%EC%A7%91-kmjtvc7xp8 카카오톡 오픈채팅방(nodejs방, react방)
Recent Posts
Categories
Tags