프로그래밍
-
JavaScript ES6 제너레이터와 이터레이터프로그래밍/JavaScript 2019. 5. 31. 13:48
제너레이터 / 이터레이터 제너레이터 : 이터레이터이자 이터러블을 생성하는 함수, 함수 이름 앞에 *를 붙여 사용합니다. Odds 홀수 for of, 전개 연산자, 구조 분해, 나머지 연산자의 사용 과정 후기 홀수를 만드는 함수를 제너레이터 함수를 이용해서 만들어본 과정이였다. 처음에 함수에 * 을 사용해서 무슨 뜻인가 잘 몰라서 구글링을 좀 했다. 아직도 완벽히 이해가 된 단계는 아닌것같지만 대략적으로는 알것같다. while 반복문을 사용할시에 보통 true 값을 주게되면 무한으로 계속 작동되기에 브라우저가 뻗어버리는 경우가 존재하는데 제너레이터 함수를 이용해서 반복문을 돌릴시에는 limit 값을 주지 않을 경우에 한정없이 작동하지만 실행할때만 작동하므로 원하는 값을 지연시킬수있다는 생각이 들었다. 사실..
-
JavaScript ES6에서의 순회와 이터러블 프로토콜프로그래밍/JavaScript 2019. 5. 30. 16:58
기존의 JavaScript ES5과는 달라진 ES6에서의 리스트 순회 기존의 JavaScript ES5에서는 for 문의 i++을 사용하여 배열 내를 순회함 JavaScript ES6에서는 for of 문을 사용하여 순회 Array Set Map 이터러블/이터레이터 프로토콜 이터러블 : 이터레이터를 리턴하는 Symboliterator 를 가진 값 이터레이터 : {value, done} 객체를 리턴하는 next() 를 가진 값 이터러블/이터레이터 프로토콜 : 이터러블을 for...of, 전개 연산자 등과 함께 동작하도록 한 규약 사용자 정의 이터러블 전개 연산자 const a = [1,2]; // a[Symbol.iterator] = null; console.log([...a, ...[3,4]); 과정 후..
-
JavaScript ES6 함수형 자바스크립트 기본프로그래밍/JavaScript 2019. 5. 26. 15:48
JavaScript 평가 JavaScript 코드가 계산되어 값을 만드는 것 JavaScript 일급 값으로 사용 가능 변수에 값 저장 가능 함수의 인자 & 결과로 사용 가능 JavaScript 일급 함수 함수를 값으로 사용 가능 조합성과 추상화의 도구 JavaScript 고차 함수 함수를 값으로 사용하는 함수 함수를 받아서 인자로 사용하는 안에서 실행하면서 원하는 인자를 적용하는 함수 (어플리케이티브 프로그램) 함수를 만들어 리턴하는 함수 (클로저 리턴 함수) 과정 후기 분명 Udacity Front-End 강의 때 나왔던 내용인것같은데 아무래도 ES6 위주의 학습이 아닌 기본과정이다보니 처음보는 내용들도 있고 용어들도 알게되어 좋았습니다. 코드들을 보니 대략적으로 어떻게 작동하는지는 이해가 가는데 이..
-
안드로이드 브라우저 상단 주소창 색 지정하는 방법프로그래밍/HTML5 Web 2019. 5. 3. 18:49
안드로이드 브라우저를 사용하다보면 브라우저 상단 주소창의 색깔이 웹사이트와 비슷하게 보이는 경우가 있습니다. 이는 웹 개발자가 웹페이지의 meta 태그에서 Header와 색을 동일하게 설정한 것으로 조금더 자연스러운 웹사이트를 표현할수 있게 해줍니다. 현재 공식적으로 Google Chrome과 Firefox Os, Opera 브라우저만 지원하는 Meta 코드입니다. 아래와 같이 meta name을 theme-color로 지정한후 content 항목에 색상 HEX 코드를 입력해주시면 됩니다. 일반적으로 Hedaer 색상과 일치 시키면 더욱 자연스러운 브라우저 환경을 제공할수 있지 않을까 생각합니다. 상세 내용은 Google Developers 링크를 확인해주세요. https://developers.goog..
-
NodeJS 텔레그램 API를 이용한 오류 보고 프로그램프로그래밍/NodeJS 2019. 4. 21. 22:09
최근에 라즈베리파이가 랜섬웨어를 당하면서 대안책으로 하루마다 MySQL 데이터를 자동으로 구글드라이브로 백업하는 프로그램을 작성했습니다. (글 참고) 다만 이 백업작업이 항상 제대로 작동하고 있는지 항상 구글드라이브에 직접 SQL파일을 확인하여야했는데 이 프로그램이 실행될 때 마다 휴대폰으로 알람을 받아보면 좋겠다는 생각을 하게되었습니다. 또한 포트폴리오 NodeJS 앱에서 오류가 발생하면 이 또한 휴대폰으로 알람을 받으면 좋겠다는 생각에서 시작하게 되었습니다. 우선 앞서 작성한 Batch 파일에서 아래 코드를 추가시켜주었습니다. START http://expressme.herokuapp.com/telegramtimeout /T 20 /nobreak >nultaskkill /IM chrome.exe /F..
-
Google Puppeteer를 이용한 네이버 밴드 파싱 프로그램 개발기프로그래밍/NodeJS 2019. 4. 1. 19:46
전에 친구들과 카카오아지트를 사용하면서 항상 데이터를 모으고 싶다는 생각은 하곤있었지만 실제로 행하진 못했습니다. 이후에 구버전 카카오아지트가 서비스를 종료하기도 하면서 그 이후론 네이버 밴드를 사용하였습니다. 최근에 빅데이터에 관심이 많아지면서 데이터를 수집하고 정리하여 활용해보는것을 좋아하는데 이를 위해선 어디에선가 데이터를 스크랩해와야하고 저는 그동안 정보가 많이 쌓인 네이버 밴드를 파싱해보기로 하였습니다. 우선 공식적인 방법으로 파싱하는 방법을 찾아보니 네이버 밴드에서 제공하는 Band API가 존재하지만 쿼터가 너무 적은데다가 문서가 너무 제대로 되어있지않기도 하고 구글에 네이버 밴드를 활용한 프로젝트가 너무 적어서.. 다른 방법을 사용해보기로 하였습니다. NodeJS를 활용해서 파싱해올것이라 ..
-
[CSS Grid] 2. Hello World CSS Grid프로그래밍/HTML5 Web 2018. 7. 14. 17:31
코스이름은 Your First Grid 인데 너의 첫 그리드 라고 제목짓긴 좀 그래서 그냥 Hello World라고 지었다. 이번 강의는 매우 심플하다. Grid을 사용해서 행과 열 모양을 만드는 강좌이다. .container{ display: grid; grid-template-columns: 100px auto; grid-template-rows: 50px 50px 200px; grid-gap: 3px; } 1 2 3 4 5 6 아래와 같은 코드인데 완성시키면 아래와 같은 모양으로 완성이 된다. 일단 내가 이해한바로는 display 값에서 grid를 사용하겠다고 선언하고, 행과 열에서 px을 지정해주는데 auto의 경우에는 남는 비율을 전부 차지하는것 같았다. grid-gap의 경우에는 사이의 빈공간..
-
[CSS Grid] 1. 코스 소개프로그래밍/HTML5 Web 2018. 7. 14. 17:14
CSS Grid을 공부해야하는 이유는 무엇인가? 1. 2차원의 레이아웃을 쉽게 개발이 가능하다2. 간단한 마크업3. 유연함4. 프레임워크 스킵5. 브라우저 지원 이러한 장점들이 있다고한다. 나는 개인적으로 다른 부분은 모르겠고 어떤 프레임워크를 추가하지 않다고 된다는 점에 끌렸다. 일단 코드를 살펴보자 CSS GRID HEADER MENU CONTENT FOOTER BOOTSTRAP HEADER MENU CONTENT FOOTER CSS Grid을 사용한 방법과 Bootstrap을 사용한 예제를 보여주고있다. 설명하길 CSS Grid보다 Bootstrap에서의 클래스 네임이 훨씬 더 지저분하고 알아보기 어렵다고 설명하고 있다. 참고로 결과물은 동일하다. 이제 본격적으로 CSS Grid에 대해서 알아보도록..