Programming Language 검색 결과

해당 글 113건

openJDK 설치, JVM, JIT 컴파일 방식, hello world

openJDK 설치 jdk (java development kit) 설치 후 설치된 경로에 들어가 java.exe, javac.exe 가 있는 경로를 환경 변수에 넣어주자. oracleJDK보다 openJDK를 주로 사용한다. 왜? 돈이 없으니까... JDK : java development kit 자바 개발 도구 JRE : java runtime environment 자바 실행 환경 자바 프로그램을 개발하기 위해서는 JDK를 설치해야하고 실행하기 위해서는 JRE가 있어야 한다. JDK를 설치하면 JRE도 포함되어 같이 설치된다. 음.. 사실 jdk는 oracle jdk 외에 여러 jdk가 있고 이들을 openjdk라고 퉁쳐서 부른다. (사실 openjdk라는 이름의 jdk가 따로 있다.) java기반 ..
Programming Language/☕ Java 2020. 9. 11. 11:05

배열에서의 비동기 작업과 순차처리/병렬처리

forEach 보통 이용하는 방법은 다음과 같습니다. map같은 경우도 마찬가지지요. const items = ['item1', 'item2', 'item3']; const copy = []; items.forEach(function(item){ copy.push(item); }); console.log(copy) //["item1", "item2", "item3"] 그런데 다음과 같은 코드에서는 subCommentList에 빈배열이 반환됩니다. subComment = ["key1", "key2"] const subCommentList = []; subComment.forEach(async function (el) { let output; try { const subCom = await Comment.f..
Programming Language/🟨 Javascript 2020. 8. 28. 19:39

TS로 살펴보는 Promise + Promise.all 병렬처리

https://darrengwon.tistory.com/279 Promise 일반에 대한 내용은 위 포스트에서 이미 다뤘습니다. 여기서는 조금 더 자세하게 Promise를 다룰 것이며, TS를 사용할 예정입니다. 일반적으로 Promise를 타이핑할 때는 Promise의 형태로 값을 넘겨주면 됩니다. Dart에서 봤던 Future와 같습니다. 프로미스가 반환하는 결과의 타입을 T에 적어주시면 되겠습니다. import { readFile } from "fs"; const readFilePromise = (filename: string): Promise => new Promise((resolve, reject) => { readFile(filename, (err, buffer) => { if (err) rej..
Programming Language/🟨 Javascript (Core) 2020. 8. 25. 19:48

배열과 튜플의 타이핑 및 간단한 tip(rest, generic ...)

배열 다음과 같이 배열의 타입을 지정할 수 있습니다. let arr: number[] = [1, 3, 5]; let arr2: string[] = ["a", "b", "c", "d", "e", "f"]; interface IBook { name: string; price: number; } let books: IBook[] = [ { name: "story about evil", price: 35000 }, { name: "critical theory", price: 35000 }, ]; 일반 JS에서는 문자열을 문자의 배열로 인식해서 다음과 같은 코드가 가능했습니다. TS는 문자타입이 없고 문자열을 배열로 인식하지도 않습니다. 따라서 문자열을 배열처럼 다루기 문자열을 그냥 배열로 바꿔야 합니다. // ..
Programming Language/🟦 Typescript 2020. 8. 23. 04:39

TS로 콜백 함수, 중첩 함수, 고차 함수 구현

콜백함수 함수를 인자로 받아 호출할 수 있는 형태의 함수입니다. const init = (callback: () => void) => { console.log("callback start"); callback(); console.log("callback end"); }; init(() => console.log("yes!")); 중첩 함수 함수 안에 함수를 넣을 수 있다는 간단한 아이디어 입니다. const calc = (value: number, cb: (arg: number) => void) => { // 화살표 함수든 함수 선언식이든 함수입니다. let add = (a: number, b: number) => a + b; function mul(a: number, b: number) { return..
Programming Language/🟦 Typescript 2020. 8. 23. 04:08

ES6 제너레이터, 무한 개념 구현하기

ES6에서 도입된 제너레이터(Generator) 함수는 iterable을 생성하는 함수이다. 다음은 제너레이터를 생성하고, yield로 중단점을 설정하며, next()를 통해 실행한 예이다. function* generator() { console.log(1); yield; // 중단점 console.log(2); yield; // 중단점 console.log(3); } const gen = generator(); gen.next(); // 1 출력 console.log("첫 중단"); gen.next(); // 2 출력 console.log("다음 중단"); gen.next(); // 3 출력 다수의 yield를 여러개 설정하면 그 만큼 next로 yield를 건너 뛰어야 합니다. function* g..
Programming Language/🟨 Javascript 2020. 8. 15. 13:53

Vanilla js로 fullpage.js 구현하기

Full page CSS-based scroll (pure vanilla JS, no libraries) CSS transform based full page scroll, Javascript (pure vanilla, no libraries) is used to set the transform property of the container element (touchscre... codepen.io one two ↑ three ↑ four ↑ five ↑ body { overflow: hidden; margin: 0; font-family: "Limelight", sans-serif; text-rendering: optimizeLegibility; } .well { position: relative; o..
Programming Language/🟨 Javascript 2020. 8. 2. 19:44

클로저와 클로저를 활용한 private 변수, getter/setter

🚀 내부함수와 외부함수 내부함수는 외부함수의 변수에 접근하여 사용할 수 있습니다. 이는 스코프 체이닝 때문입니다. inner 함수 내부의 스코프에 title이 없기 때문에 가장 가까운 스코프인 outer의 title을 사용합니다. function outer() { // outer에 정의된 title const title = "coding everybody"; function inner() { // 외부 함수에 정의된 변수에 접근 가능함 console.log(title); } inner(); } outer(); 🚀 클로저(closure) function outer() { const title = "coding everybody"; return function () { console.log(title); }..
Programming Language/🟨 Javascript 2020. 7. 16. 04:27

Symbol 타입의 변수

앞서 원시형 데이터 타입에 Symbol이란 것이 존재한다는 것을 확인을 해보았지만 이것이 무엇인지 알아보지는 않았습니다. 심볼형에 대해서 알아봅시다. 심볼은 유일한 식별자를 만드는데 사용됩니다. 대개 다수의 객체중 특정한 하나를 식별하는 키에 심볼을 사용합니다. 자바스크립트는 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용합니다. 아래 예시는 숫자형, 불린형도 키로 쓸 수 있는 것처럼 보이지만 사실은 자동 형변환을 통해 전부 String 형으로 변환된 것입니다. const obj1 = { age: 100 }; const obj2 = { 3: 100 }; const obj3 = { true: 100 }; console.log(typeof Object.keys(obj1)[0]); // string cons..
Programming Language/🟨 Javascript (Core) 2020. 7. 15. 16:57

이벤트 위임 + data- 속성과 pointer-events

이벤트 위임(event delegation) one two three 다음과 같은 버튼이 있고, DOM을 조작해서 각 버튼마다 클릭할 때마다 자신을 출력하도록 만들었습니다. const btns = document.querySelectorAll(".menu-btn"); btns.forEach((el) => el.addEventListener("click", function () { console.log(this); }) ); 그런데 이 경우, 각 아이템마다 이벤트를 걸어준 것인데, 지금은 버튼이 3개 뿐이지만, 버튼이 많아지면 그 버튼의 갯수만큼 이벤트 리스너를 달아주게 되는 것이니 페이지 성능에 좋지 않은 영향을 미치게 될 것입니다. 이 경우 위 버튼들을 감싸고 있는 부모 태그에 이벤트 위임을 해줌으로써..
Programming Language/🟨 Javascript 2020. 7. 15. 16:07