공대키메라

이번에는 저번에 글에 이어서 (저번 글 보고 싶다면 클릭!) 1. 유용한 js기능을 조금 더 소개하고 2. es6에서 도입된 generator 함수에 대해 알아보고 3. 또 날짜 변환을 공부할 것이다. 이 글을 정리하기 위해 참고한 사이트는 다음과 같다. 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce https://blog.bitsrc.io/2-3-javascript-tricks-that-you-should-know-bfb9827fd835 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destruc..

필자는 회사에서 급하게 투입된 프로젝트에서 배정받은 일의 업무 분배도는 DB 쿼리 작성 40%, js 를 이용한 front 화면 생성 40%, 기존 java 로직을 활용한 비즈니스 로직 구현이 20%다. 여기서 javascript를 다루면서 많은 일이 있었는데 인터넷을 뒤져보면 js 사용 팁을 전수해주는데 이 기회에 한 번 정리할 예정이다. 참고 : https://modernweb.com/45-javascript-tips-tricks-practices/ https://sunlightmedia.org/ko/%EC%9E%90%EB%B0%94-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%8C%81/ https://paperblock.tistory.com/62 많은 내용이 있지만 필..

필자는 최근에 회사에서 cals studio라는 node.js기반 프레임워크를 이용해서 AWS lambda 서버에 코드를 올리고 있다. 사실 그렇다는데 나는 뭐 그런가 보다 하고 이것을 내가 처음부터 직접 만든게 아니라 잘은 모른다. 하지만, 여러 비동기 처리 로직이 있는거 같은데 js에서 동기와 비동기를 어떻게 처리하고, 이러한 과정에서 콜백을 어떻게 잘 관리하는지 에 대해 학습하려고 한다. 1. 동기(Synchronous)? 비동기(Asynchronous)? 동기와 비동기를 설명하려면 어떻게 해야 할까? 이를 알기 위해 빌드업을 하겠다. Javascript는 싱글 스레드 언어로, 코드가 작성된 순서대로 작업을 처리한다. 여러개의 작업이 있으면 앞의 작업이 끝날 때 까지 기다렷다가 뒤를 순서대로 실행하..

이 글은 필자의 궁금증으로 작성했습니다. 공부합시다! 1. 발단 키메라 : 저 js 에서 StirngBuilder로 이렇게 작업했어요. 어때요? ㅎㅎ :) 동기A : 굳이 이렇게 해야 하는 이유가 있나요? 키메라 : StringBuilder를 사용하면 메모리를 아낄 수 있자나요 동기A : js에서도 그런가요? 그리고 마지막에 join하나 더하나 똑같은거 아닌가요? 키메라 : 보기 더 좋지 않나요? 자바처럼 함수 만들어서 쓰는게 깔끔하고 백틱을 사용해서 깔끔하게 보이게 하고 싶었어요. 동기A : 글쎄요 저는 별론데요? 굳이 그렇게 쓸 필요가 없어보이는데요? 키메라: ???? 동기A : ???? 2. 개요 js에서 StringBuilder를 만들어서 사용했는데, 내가 사용을 하면서도 무슨 단순히 보기 좋다는..

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML (en-US) 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 developer.mozilla.org MDN사이트는 사기다 모든 정보가 다있다 ! ㅠㅠ 외쳐 MDN 만세! 하여간... REACT를 공부하는 와중에 DOM이 나왔는데 DOM을 많이 접하지만 정확히 설명하라고 하면 못할거 같아서 이렇게 공부를 한다. DOM이란 그래서 뭐냐? 문서 객체 모델(The Do..

거룩한 일요일 필자는 Callback과 Promise에 대해 공부를 했다. https://tech-monster.tistory.com/43 Callback Fucntion 이란? 의미를 파악해 보자. ???? call me back~ 뭔가 전화를 다시 걸라는 건가...? (내 번호 안알랴줌) 그 느낌 그대로 callback을 다시 본다면 단어 뜻 자체가 회신하다/답신하다 라는 뜻을 지닌다. 그러면 callba tech-monster.tistory.com 간단하게 callback에 대해서 알고싶으면 callback Function이란? 이라는 블로그를 참고해주세요 나는 우선 강의를 듣고 그다음에 docs 를 찾아보려고 하는데 좋은 내용을 단시간에 함축해서 전달해 주면 시간 효율이 배가 되기 때문이다 물론 ..

여러분~ let 대신에 Var를 써야고 한답니다. 사실 이번에 회사에 입사하면서 프론트에서 jQuery를 이용할 일이 많아졌다. 문제는 아직도 회사에서 Var를 이용해서 변수를 선언하는 것이다. Let은 ECMAScript 6에서 새로 도입된 것으로 var와 같이 변수를 선언할 수 있다. 그러면 둘의 차이는 뭘까?? 우선 내가 참고해서 공부한 영상 링크를 달아놓겠다. https://www.youtube.com/watch?v=OCCpGh4ujb8&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC 그렇다 나는 그녀의 노예다... 여기 나오는 내용으로 코드를 정리해서 보여주겠다. console.log(age); age = 4; consol..

모든 내용은 Youtube의 ellie teacher가 한 것을 기반으로 한다. https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC 영상을 보길 원하면 위에 들어가면 된다. 그렇다... 나는 그녀의 충실한 노예다... 하여간 여기서 script를 불러오는 방식에서 Async와 Defer가 있다. 우선 가장 기본적으로 사용하는 html 형식을 보자 . 브라우저에서 위에서 부터 천천히 html을 읽어들이기 시작한다. 순차적으로 쭉 내려오다가 script를 만난다. 어! test..

Prototype 이란 뭘까? 우선 영어 사전을 검색해 보자 . 검색해 본 결과 원형이라는 말이다. 어떤 원형인지 그것을 이제부터 같이 알아갈 것이다. 생성자 함수가 있을 때 new 연산자로 인스턴스를 만들게 되면 그 인스턴스에는 constructor의 prototype이라고 하는 프로퍼티의 내용이 Prototype이라고 하는 프로퍼티로 참조를 전달하게 된다. 이게 무슨말이냐면 Constructor.prototype이랑 instance[[Prototype]]가 곧 같은 객체를 바라본다는 말이다. 그런데... [[Prototype]]는 접근가능한 것이 아니라 정보를 보여주기만 할 뿐으로, 실제 동작상으로는 instance와 동일시가 된다. 그래서 밑의 그림처럼 삼각형이 된다. 그래서 이게 어쨋다는 건지는 ..

close ? closure? closure를 검색하면 "폐쇄"라는 뜻이 나온다. 뭐를 폐쇄하는지? Closure를 더 검색해보자. MDN 사이트를 확인하자 눈여겨 봐야 할 부분이 "함수와 함수가 선언된 어휘적 환경의 조합이다" 라는 부분이다 다시 정리하면 "에워싸여져 함께 묶여진 함수"라고 할 수 있다. => 둘러쌓인 LexicalEnvironment의 참조 라고 볼 수 있다. 다시 다른말로 보자면 위 그림들을 보자면 뭐... 글 그대로 읽고 그림을 본다면 이해가 갈 것이다. 그러면 특별한 현상이 뭔지 이제 알아가보자. 우선 전에 해봣던 것을 복습해보자. var outer = function(){ var a = 1; var inner = function(){ console.log(++a); }; inn..