728x90 개발/javascript8 if문 제거하기 코드를 작성할때 항상 클린코드로 작성하기 위해 고민을 했다면 한번 쯤은 고려해볼만한 작업이다. 이번에는 객체 기반 언어인 자바스크립트에서 가독성을 높이기 위해 if문을 객체의 리터럴로 표현해보자. (다양한 객체 생성 방식 중 객체 리터럴이란, 하나 이상의 속성과 속성값들을 중괄호{}를 사용하여 하나의 객체로 표현한 방식) 예제 소스 1 function executeApp(name) { if(name === "CALL"){ return "전화 앱 실행" }else if(name === "CAMERA"){ return "카메라 앱 실행" }else if(name === "MESSAGE"){ return "문자 앱 실행" }else if(name === "MUSIC"){ return "음악 앱 실행" } } .. 2022. 11. 14. addEventListener() 사용 방법 오늘은 실무에서 경험한 addEventListener()에 대해 정리하고자 한다. addEventListener()는 나름의 노하우가 아닌 노하우가 필요했다.. 결론부터 정리하자면 addEventListener()를 사용할때는 꼭 removeEventLister()가 필요한지 여부를 생각하고 더 이상 추가해준 이벤트가 필요 없을 시 반드시 제거해주어야 한다. 그 이유는 간단하다. 추가한 이벤트를 제거하지 않고 addEventListener() 로직을 다시 타게 된다면 이벤트가 중복으로 발생할 것이다. 필자 또한 실무에서 해당 문제로 점점 중복된 이벤트가 발생했던 경험이 있다.. 저와 같은 다른 주니어 개발자들은 이런 불상사가 생기지 않기 위해 글을 정리했다. 그럼 이벤트 추가 방법과 제거 방법 모두 살펴.. 2021. 11. 1. ES5, ES6이란? ES(ECMAScript)란? JavaScript가 표준화된 규격, 즉 ECMAScript를 줄여 ES라고 하고 5, 6은 버전을 의미한다. ES가 생긴 배경 Javascript는 넷스케이프 커뮤니케이션즈에서 개발이 되고, MS에서도 JScript를 개발하여 두 언어가 호환되지 않는 경우(크로스 브라우징 이슈)를 해결하기 위해 표준화하였다. ES5와 ES6 버전의 차이점 요약 ES5과 다르게 ES6에서 가능한 것들 템플릿 리터럴 : console.log(`${변수명} 하세요.`) 화살표 함수 : var str = func => ({id : "1"}); this : 자신을 둘러싸고 있는 것을 바라봐 bind가 필요없다. var, const, let : const와 let 추가 모듈 : import와 exp.. 2021. 8. 20. stopPropagation 간단정리? event.stopPropagation란? 먼저 propagation이란 파동, 전파란 의미로 예측해보면 stopPropagation은 더이상의 전파를 막는다고 생각할 수 있다. 실제로 예측한 바와 같이 동작하는데 다음 코드를 보며 이해해보자. 위의 코드에서 div를 클릭하게 되면 ClickDiv()가 실행되는데 event.stopPropagation() 를 사용하면 li 태그를 거친 후 ul 태그까지 이벤트가 전달되는 것을 막아 ul의 ClickUl() 실행을 막아주는 역할을 수행한다. event.PreventDefault란? preventDefault 메소드는 현재 이벤트의 기본 동작을 중지 하기 위해 사용한다. a 태그를 예를 들어 보자. PreventDefault 테스트 $("#div").on.. 2021. 8. 5. [javascript] Promise란? Promise 예제 포스팅을 읽기 전 다음 포스팅 : javascript 비동기란? 을 참고하자 Promise란? Promise는 자바스크립트 비동기 처리에 사용되는 객체로 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 API를 사용합니다. 이때 데이터를 아직 받아오지 못했는데 화면에 데이터를 표시하려고 할때 발생하는 오류를 해결하기 위한 방법 중 하나이다. Promise 사용법(예제) function getSomeData(){ return new Promise(function(resolve, reject){ //데이터를 받으면 resolve 호출 / 실패 시 reject resolve(result); //가져온.. 2021. 7. 12. [javascript] 비동기란? 자바스크립트에서 사용되는 콜백함수, Promise, async & await 개념을 알기 위해서는 먼저 비동기 개념을 알아야 한다. 그럼 비동기가 무엇인지 살펴보자. 비동기 처리란? 자바스크립트에서 비동기 처리란 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다. 비동기 처리를 예로 Ajax, setTimeout 등이 있다. 자바스크립트는 single thread(싱글 스레드)이기 때문에 작업을 하나씩만 수행할 수 있다. 그럼 어떻게 비동기 처리를 할 수 있는가? 바로 이벤트 루프때문에 가능하다. setTimeout은 브라우저의 다른 비동기 함수들(addEventListener, XMLHttpRequest)이나 node.js들 모든 비동기 방식의 api들처럼 이.. 2021. 7. 8. WebSocket (웹소켓이란?) # 웹소켓이란? # javascript 웹소켓 개념 시작하는 말 글쓴이가 웹소켓을 처음 접하게 된 계기는 회사의 클라우드의 서버에서 단말과 연동하기 위해 사용되었기 때문이었다. 어떻게 서로 데이터를 주고받을 수 있는지 궁금했던 경험을 바탕으로 이번 포스팅에서는 양방향 통신을 지원하는 웹소켓에 대해 적어보려 한다. 웹 소켓(Web socket)이란? Stateful protocol - HTML5 순수 웹 환경에서 연결 지향 양방향 통신을 지원하는 것이다. ( 참고로 AJax, Comet은 모두 Polling 방식이라 한다 Stateless protocol ) 웹 소켓은 웹 서버와 웹 브라우저가 지속적으로 연결된 TCP라인을 통해 실시간으로 데이터를 주고 받을 수 있도록 하는 HTML5의 새로운 사양이다. .. 2021. 7. 7. Javascript Object태그란? 시작하기 전에 회사에서 라이브 커머스를 담당하게 되었는데 object 태그의 type을 video/mpeg를 써 data를 보내 구현하였다. 이때 처음 object를 접하게 되었는데 접하지 못한 개발자들을 위해 간단히 object에 대해 알아보자. object 태그란? object 태그는 HTML안에 멀티미디어 객체, 다른 HTML문서나 pdf, 플러그인을 넣을 수 있는 태그이다. 그러나 object는 iframe을 사용할 수 없을 상황에 쓰이는 퇴화 태그로 간주된다. object태그는 설정을 업데이트 해도 반영되지 않는다. vs iframe iframe도 마찬가지로 HTML 내에 다른 HTML 또는 플래쉬 플레이어를 넣어 재생 시킬 수 있는 태그이다. iframe은 HTML 4.01부터 모든 브라우저에.. 2021. 7. 3. 이전 1 다음 728x90
