JavaScript27 [javascript] 자바스크립트의 이벤트루프? javascript는 대표적인 싱글스레드 언어입니다. 싱글스레드란 말 그대로 스레드가 하나라서 한번에 한가지 일밖에 못한다는 뜻입니다. 그런데 브라우저가 자바스크립트를 실행할 때 뭔가 동시에 여러가지 일을 하는 것 처럼 느껴지게 하지 않나요? 그 이유는 자바스크립트 엔진이 제공하지 못하는 여러 기능들을 제공하는데요 WebAPI, DOMAPI, setTimeout, HTTP Request 등 여러가지 브라우저가 제공하는 api들로 비동기처리를 도와줍니다. 1. 함수를 실행하면 콜스택에 우선 추가됩니다. 이 콜스택은 자바스크립트 엔진에 있는 건데요, 스택! 이기 떄문에 선입후출(FILO) 하게됩니다. 함수가 값을 return함과 동시에 콜스택은 그 함수를 pop 해버립니다. 2. setTimeout은 Web.. 2021. 4. 29. [quasar] 정말 유용한 q-table 컴포넌트 저는 요즘 quasar로 요즘 관리자 페이지를 개발하고 있는데요. 관리자페이지는 서비스의 여러가지 데이터를 CRUD해야하는 페이지들이 많기 때문에 대부분의 페이지에서 스크롤압박이 느껴지게 하는 목록형태가 빠짐없이 등장하곤합니다. 이러한 여러 필드가 있는 데이터들을 그려줄 때 quasar의 q-table 컴포넌트를 정말 유용하게 사용하고 있어요. q-table 컴포넌트는 기본적으로 이렇게 생겼는데요. 객체배열형태로 칼럼과 칼럼에 들어갈 필드를 지정해주고 데이터를 붙여주면 이렇게 유용한 테이블을 알아서 그려줍니다. 이런 식으로 script 안에 데이터와 칼럼을 지정해주면 됩니다. 일일이 머스태쉬 안에 프로퍼티를 집어넣는 노가다를 할 필요없이 자동으로 테이블을 그려주니 정말 편하지요? 또한 칼럼에 속성을 지정.. 2021. 4. 29. [Vue] Computed의 다양한 사용법 1. 언제 computed를 사용하나? 어떤 data를 {{ }} 템플릿 안에 표현식으로 가공해서 표현해야할 때 연산이 너무 길어지거나 복잡해지면 유지보수하기가 힘들고 가독성도 떨어지게 됩니다. 그런 복잡한 식이 될 경우 computed 속성을 사용하면 간결하게 표현할 수 있는데요. 예시를 한번 보겠습니다. 만약 예를들어 데이터로 ㎡ 단위의 숫자를 받아서 평수로 계산해서 보여줘야한다면 평수 계산식을 computed 안에서 사용해서 보여주는 편이 좋습니다. data: function () { return { size: 3323 } }, computed: { squareSize: function () { if (!this.size) return 0 return `${Math.round(this.size / .. 2021. 4. 28. [javascript] 자바스크립트 clean code 작성법 클린코드를 만드는 것은 개발할 때 중요합니다. 왜냐하면 개발할 때 여러명의 개발자와 함께 협업하기 때문에 읽기 쉽고 유지보수 하기도 좋아야하기 때문입니다. 오늘은 몇 가지 자바스크립트 클린코드 스니펫을 소개하겠습니다. 1. 다중 조건일 때 or연산자 나열한 것 축약하기 if 문 안에 여러 개의 or 조건을 추가해야할 때가 있는데요. 중복된 코드가 한없이 길어집니다. 이것을 include() 메소드를 이용해서 간결하게 만들 수 있습니다. (그러나 include() 메소드를 지원하지 않는 브라우저가 있기 때문에 낮은 버전 브라우저도 대응하는 서비스를 개발한다면 사용전 확인은 꼭 해야합니다.) // 기존 방법 if (col === "score" || col === "age" || col === "mobile".. 2021. 4. 27. [Javascript] 객체를 다루는 Javascript 메소드 객체를 다루는 Javascript 메소드 - Object.assign(), Object.values(), Object.entries(), Object.freeze(), Object.keys(), 프론트엔드 개발을 하다보면 서버에서 받은 정보를 바탕으로 객체를 가공, 변경, 복제 등등의 작업들을 해야할 때가 많이 있는데요. 그럴 때 자바스크립트 내장 객체 메소드들을 사용하곤 합니다. 자바스크립는 객체 기반의 script 언어인데요, 자바스크립트를 이루고 있는 대부분의 것이 객체입니다. 자바스크립트의 함수도 일급 객체입니다. 객체는 Key와 Value로 구성된 프로퍼티들이 모인 것인데요. 자주 사용하는 Object 메소드들이 무엇이 있는지 알아 보겠습니다. 1. Object.assign() 메소드 Objec.. 2021. 4. 26. [quasar] quasar config에서 경로 alias 설정하기 quasar 프로젝트, 아니 굳이 quasar가 아니더라도 프론트엔드 프로젝트를 진행하다보면 만들어놓은 컴포넌트와 애셋들을 불러올때 저렇게 지저분하게 ../../ 이런 경로를 써야할 때가 있는데요. 저런 길다란 경로들은 보기에 좋지 않을 뿐더러 개발할 때 헷갈리기 쉽습니다. 그래서 보통 그럴 때 경로 alias를 사용해서 import할 시 축약되어 간결한 방법으로 컴포넌트를 불러올 수 있는데요. quasar에서 프로젝트 전반적인 설정은 quasar.conf.js에서 할수 있는데 이 alias도 마찬가지입니다. quasar.conf.js에서는 전역으로 주입할 js파일 설정하기 css 파일 설정 quasar에서 지원하는 roboto 폰트, material icon, fontawesome icon을 추가하기 .. 2021. 4. 21. 이전 1 2 3 4 5 다음
