다른생각 - 개발 로그

개발자는 항상 불안하다.. 내가 뒤쳐지고 있는거 아닐까? 불!안!해!서!! 누구도 정답을 얘기해 주지 않아서!! 비난의 함정에 빠진다. 불!안!하!지! 말자!! 우리에겐 집단지성이 있지 않은가! 참으로 감사한 일. 적어도 아래의 노란색중 걸리는게 크게 없다면, 상위 30% 라고 생각해도 되지 않을까? 실제로 노란색을 모두 다 알기 위해서는 상당한 공부량이 있어야 한다. 내가 뒤쳐지고 있는지 아닌지를 보려면 이걸 보면 된다. 로드맵! https://github.com/kamranahmedse/developer-roadmap GitHub - kamranahmedse/developer-roadmap: Community effort to create roadmaps, guides and other educati..

웹과 앱이 하나로 통합 될 거라는 얘기를 종종 한다. 개인적인 생각이지만, 웹을 중심으로 앱이 통합되는 형태 보다는, 앱이 살아남고, 웹은 서포트 역할이 될거다 라고 생각한다. 웹은 URL을 외우고, 접속하기 위해 키보드가 필요하지만, 앱은 설치하고 터치하면 된다. 구글 글래스에서 동작하는 방식을 키보드로 할 수 없다. 냉장고에 키보드를 포함할 수도 없다. TV 에서 넷플릭스를 보기위해 블루투스 키보드를 사야되나? 웹을 사용하려면 브라우저를 탑재해야 하는데, 브라우저는 다양한 기능을 소화할 수 있도록 개발되기 때문에 무겁다. 어떤게 더 편할까 생각이 들었고, 앱을 만들어야 겠다는 생각을 했다. 앱개발의 지식이 없기 때문에, 가지고 있는 기술을 활용할 수 있는 테크트리를 선택하고 싶었고 자바스크립트로 작성..

Ajax 의 관심도가 증가하고, Server Side 에서 Client Side 로 변화하면서, 현재의 자바스크립트의 고도화 필요성이 생김. ES6 는 무엇인가 현재 우리가 사용하고 있는 것은 ES5 이고, 2009년에 제정됨. 이후 2015년 ES6 (ECMASCRIPT 2015) 제정되어 현재는 컴파일 과정을 거쳐서 ES5 변환 후 브라우저에서 인식하는 것이 현대의 흐름이다. 컴파일을 위한 TASK RUNNER Grunt Gulp WEBPACK 그 외에 브라우저가 채택하고 있는 표준 BOM (Browser Object Model) DOM (Document Object Model) 주요 변경 사항 let, const let. 블록단위에 scope (수정 가능) 루프문 안에서는 매번 새로 생성됨 (for..

@참조 : http://www.usefulparadigm.com/2017/03/31/a-few-ways-to-make-a-grid-layout/ https://hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf https://www.w3schools.com/cssref/pr_grid.asp https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout https://blog.sonim1.com/198 grid 는 css 로 레이아웃을 구현을 도와준다. 이전에 table 태그로 레이아웃을 설계했을 때처럼, 중앙정렬 이라던지, 격자형태의 레이아웃 구현을 가능하게 한다. 현재의 레이아웃 구현방..

@참조 : https://www.devbridge.com/articles/javascript-best-practices/ 해당글은 의역 되었고, 오역이 있을 수 있습니다. 다음은 깨끗한 JavaScript 코드 작성을 위한 권장 사항 및 일반적인 지침이 담긴 글이다. 이러한 권고 사항은 앞으로 더 정교한 개발 도구 라던지, 새로운 언어 기능 으로 인해, 변경 될 수 있지만, 결코 변하지 않는 것들이 있다. 그것은 당신이 이해하기 쉬운 코드를 작성 해야 한다는 것이다. 다음은 Start 예제로 좋은글 이다. - http://javascript.crockford.com/code.html 전역 변수 사용의 최소화 코드에 네임 스페이스를 사용하여 모듈로 구성 하고 코드 충돌을 피하라. 소개되는 글로벌 변수의 최..

@refer: 컴퓨터 글꼴 서체 CSS Fonts 폰트랭킹 Web Safe Font Stacks 웹디자이너가 디자인 한 것을 웹에 옮기려면 웹디자이너가 원하는 것을 구현할 수 있는 기술을 알고 있어야 한다. 디자이너 마다 성향이 달라서 어떤 디자이너는 폰트를 중요하게 보고, 어떤 디자이너는 비쥬얼을 중요하게 보고... 하는거 같은데, 디자인에 대해선 전혀 모르기 때문에, 어떤게 중요한지는 모르겠고, 일반인의 눈으로 보는 웹디자인은 전체를 보게 된다. 전체적으로 봤을때 이쁘면 이쁘다. 어색하면 어색하다 정도의 주관적 의견이 있을뿐이다. 이렇게 주관적 일수 밖에 없는 이유는 학문적 뒷받침이 없기 때문에, 왜 어색하고, 왜 이쁜지를 설명할 수가 없다. 컴퓨터 글꼴 컴퓨터에게 글꼴은 3가지가 있다. 비트맵 방식..

컴포넌트 작성 시 자식컴포넌트와 부모컴포넌트의 데이터를 양방향으로 구성 하는 경우가 종종 있다. 방법은 몇가지 있지만, 원리는 같으며, v-model 속성을 연동하는 방법에 대한 팁 으로 보면 좋을 거 같다. 해당 예제는 vue 2.x 에 적용된다. 부모의 데이터: 위와같이 왈왈 속성을 computed 와 get, set 을 통해서, input 이벤트 때에 부모에게 값을 전달해 주는 형태 이다.

SPA (Single Page Application) 프로젝트 에서 컴포넌트로 구조화 하는 방법은 핵심 장점으로 알려져 있고, 코드 재사용을 위해서 대체적으로 사용하는 추세이다. SPA (Single Page Application) 프로젝트라 하더라도, 반드시 컴포넌트 구조로 개발 해야하는 것은 아니다. 이전 SSR(Server Side Rendering) 때의 방식처럼, 현재 페이지에 모든데이터를 한번에 전달해서 처리하는 방법으로 해도 상관없다. 단지 Restful API 작성함에 Server Less 방식과 맞지 않고, 다양한 frontend framework 들이 컴포넌트 단위에 작성방식을 요구하고, 전수하다 보니, 현재 상황은 컴포넌트 단위로 개발하는 것이 정착 되어진 듯 하다. 이것은 MSA(M..

참고 Using NuxtJS to Build an iOS and Android App - Server Side Up Capacitor - build cross platform apps with the web 서두 SSR 기반의 웹소스에 APP 빌드 까지 하고 싶었다. 하나의 소스로 다양한 배포를 하고 싶다. 접근은 Vue 기반 으로 시작했고, nuxt 프레임워크가 SSR 빌드를 지원하기 때문에, nuxt 로 정했고, APP 빌드를 위해 검색해서 찾은 것은, CapacitorJS 였다. 아이오닉 기반으로 동작하는데, 차이점이라고 따져보자면, 아이오닉은 자바스크립트로 Native App 크로스플랫폼 앱빌드가 목표라고 한다면, CapacitorJS 는 웹 우선구축 후 앱빌드 가 목표라고 되어 있다. 목표가 다..

@refer: 자바스크립트 프라미스: 소개 MDN Promise 개요 일반적으로 프로그래밍은 하나의 실행업무가 종료되기 전까지 다른 업무를 하지 않는다. 예를 들어, 글쓰기폼 에서 글쓰기를 전송하기 위해 Form 전송을 하면, 서버통신이 완료되기 전까지 다른 업무를 하지 않는다. (강제로 페이지를 이동하기 전에는) 대부분의 프로그래밍이 이런 동기방식 으로 작동한다. 하지만 자바스크립트의 ajax 통신같은 비동기방식 은 결과가 나올때 까지 모든것을 중지하지 않는다. 선행된 비동기방식 업무 가 완료됐을때 완료됐다는 callback 을 주게 되면 반응하는 구조로 되어 있다. 사용자가 페이지에 접속해서 우측상단에 있는 로그인박스에 계정정보를 넣고 로그인버튼을 누른 후에, 사용자는 로그인이 완료될 때까지 현재페이..

키보드 입력 시의 `keycode` 를 활용해서 숫자값일 경우만 체크 ```javascript function onlyNumberKey(keyCode) { return /[0-9]|\./.test(String.fromCharCode(keyCode)) } document.getElementById(selector).addEventListener('keydown', function(e) { var isNumberKey = onlyNumberKey(e.keyCode); console.log(isNumberKey); }); ```

비밀번호 최소 하나의 문자 + 하나의 숫자 + 하나의 특수 문자 포함, 최소 6자리 function validatePassword(character) { return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{6,}$/.test(character) } if(validatePassword('ra3a$9')) { console.log('success'); } else { console.log('fail'); }

특수문자, 한글, 영문 검사 패턴 function onlyNumber(str) { var pattern_special = /[~!@\#$%^&*\()\-=+_\’]/gi, pattern_kor = /[ㄱ-ㅎ가-힣]/g, pattern_eng = /[A-za-z]/g; if (pattern_special.test(str) || pattern_kor.test(str) || pattern_eng.test(str)) { return str.replace(/[^0-9]/g, ""); } else { return false; } }```

hashchange 이벤트를 이용해서, hash url 을 관리함. 용도 팝업 이라던지, 사이드메뉴 등의 현재 페이지에서 유일한 URL을 구현할 수 있는 방법중에 하나로 사용 url hash를 이용하면 레이어가 동작한 후에 back 키를 눌렀을 경우, 페이지 리로딩을 하지 않기 때문에, 페이지의 URL을 고유하게 유지할 수 있다. 사용법 const sideNavHandler = { open() { console.log('open'); }, close() { console.log('close'); } } // Action : 해당 URL 진입시 동작 // Leave : 해당 URL 이탈시 동작 window['observeHash'].register({string: hashURL},{function: Act..