Jay의 기술 블로그

호이스팅 (hoisting)자바스크립트 (ES5) 에서 변수선언에 있어서 var 키워드는 스코프(scope)의 제일 위로 옮겨져서 선언이 된다. 이것을 호이스팅(hoisting)이라고 한다. 1234567function foo() { for(var i=0; i1) { // var customer = "Mary"; // } })(); console.log("outside : " + customer); Colored by Color Scriptercs 주석 처리를 한 상태에서는 customer는 전역 변수이므로 출력결과가 둘다 Joe 가 된다. 하지만 주석을 해제하면 function 안의 customer는 undefined가 된다. ES5에서는 변수 선언이 선언 범위의 제일 위로 올라가게 된다. 즉 저 fu..

직원 등록 form 에서 3개의 페이지에 걸친 직원 들의 정보를 입력하고 REGISTER 버튼을 누르면 DB에 접근해서 데이터를 넣게 된다. 문제가 없을 줄 알고 DB에 엑셀을 이용해서 데이터를 넣고 있었다. 하지만 실제 사용자가 쓰는 곳은 웹 ui상이므로 나도 테스트 기간에는 데이터를 웹에서 직접 입력한다. 그런데 생각보다 많은 예외와 에러가 발생한다... validation 체크가 확실하게 다 되지 않아 unexpected 한 값이 넘어가는 것을 잡지 않아서 톰캣 로그에서 error가 터진다. 대표적인것은 Duplicate PRIMARY KEY 이다. DB 직원 정보 테이블은 SSN Number (소셜 시큐리티 넘버) 를 주요키로 가지게 된다. 이것은 중복된 값이 들어갈 수가 없다. 사용자는 첫 페이..

Maintainable Javascript by Nicholas C.Zakas 를 보며 기본기를 공부 중이다. 좋은 내용들을 요약해 보겠다. 아마존에서 책을 구입했다. 좋은 개발자와 좋은 코딩을 위한 주옥같은 책인 것 같다. Basic FormattingIndentation Level들여쓰기 정도이다. 들여쓰는 스타일은 2가지로 나뉜다. Tab과 Space가 그것들이다. Tab을 이용했을 때의 장점 - 에디터에 따라 탭 크기를 조절할 수 있다 Tab을 이용했을 때의 단점 - 시스템이 다르게 해석할 수가 있다. Space를 이용했을 때의 장점 - 모든 에디터와 시스템이 동일하게 취급한다.- 에디터 설정으로 tab을 누르면 일정 숫자의 space를 누르게 할 수 있다. 이 책의 저자는 4칸의 space를 선..

오늘은 12월 첫날이다... 뒤돌아 보면 시간이 빠르게 지나갔다. 어제 한국음식이 너무 먹고 싶어서 곱창 볶음을 투고해서 먹었는데 지금 배가 너무 아프다... 그런데 오자마자 이사님이 pos기 사진 로딩 형식을 바꾸고 싶다고 하셨다. 현재 이미지들이 순서대로 로딩이 되지만 12월 프로모션으로 대표배너하나를 이미지가 3장 로딩 될 때마다 띄워지게 하고 싶다고 했다. 즉 상품이미지 3장 - 대표배너 - 상품이미지 3장 - 대표배너 - ...... 이런식으로 바꾸고 싶다고 했다. 근데 12월 1일 부터 적용이 됬어야 한다고 한다. 오늘인데.... 오늘아침부터 적용되어야 하는 것을 오늘 아침에 얘기하셨다. 이제 아무렇지도 않다. 야호!! 지금 현재 돌아가는 상황은 One Drive에 디자이너가 넘긴 파일들이 있..

원래는 각 직원 한 명당 사진 1개씩으로 정해졌지만 갑자기 한 사람당 여러 사진들을 업로드하는 기능이 있었으면 좋겠다고 한다. 자꾸 말 바꾸면 기간만 길어지고 개발진행에 방해가 될거같다고 했다. 예상은 하고 있었다. 결국 알겠다고 바꾸기로 했다. 그러면 아마존 버킷에 각 직원별로 폴더가 생겨야 할것이고 각 폴더에 동적으로 원하는 만큼의 이미지 또는 파일들이 올라가게 될 것이다. 오래 걸릴거 같다고 했는데 2시간만에 끝내버렸다. 제일 먼저 규칙을 정했다. 버킷내에 폴더 명 규칙은 Last Name + First Name + SSN Number (소셜넘버) 으로 정했다. 처음에는 그냥 소셜 넘버만으로 폴더를 만들기로했는데 생각해보니까 버킷을 열었을 때 가독성이 좀 떨어질 것 같아서 이름까지 넣기로했다. 이름..

매장별로 Pos기가 있는데 손님들이 계산하면서 볼 수 있게 사진을 띄우고 싶으셨다. 이건 Cashier 가 보는 시선이다. Cashier가 물건을 하나씩 찍으면 고객이 반대편 화면에서 찍히는 가격들을 보게 된다. 이게 고객들이 보는 반대편 화면이다. 저 오른쪽에 까만 화면을 통해 고객들에게 상품을 홍보 하고 싶어했다. 그럼 고객들이 cashier가 물건을 하나씩 찍을 때 물건들의 정보를 자연스럽게 볼 수 있는 구조이다. 이건 다른 매장 pos기 사진이다. Atlanta에 7개의 multi store가 있다. 그리고 매장 별로 고객 화면에 보여지는 사이즈가 다르다. 이건 POS기 Manager 프로그램인데 여기서 Display에 띄워지는 파일들을 관리한다. 웃긴게 html하나당 image가 하나씩 mapp..

자바스크립트에는 Object, Function, Array 등과 같이 다양한 기본 객체들이 있고 모든 객체는 자바스크립트의 객체 대빵인 Object를 확장하고 있다. 이러한 면을 보면 Java와 굉장히 비슷해 보여서 객체지향 언어라고 생각하기 쉽다. 하지만 자바스크립트는 이벤트와 함수 기반 언어이고 객체지향언어는 아니다. 자바스크립트는 함수 기반 언어인 Scheme을 기반으로 만들어진 뒤 Java에서 다양한 개념들을 가져왔다. 따라서 객체지향 언어는 아니지만 이에 비슷한 특징들을 지원한다. 여기서 프로토타입(Prototype)이라는 것이 나온다. 자바스크립트는 객체지향 개념을 지원하기 위해 프로토타입을 사용한다. 프로토타입을 이용해 대표적으로 구현할 수 있는 개념은 "상속" 이다. 그럼 프로토타입이 무엇..

자바스크립트에서 성능을 개선할 수 있는 매우 괜찮은 방법 중 하나를 보자. 자바스크립트에서는 변수 사용이 자유롭고 클로저때문에 복잡하기도 하다. 상위 스코프의 변수 참조에 있어서의 성능에 대해 알아보자. 12345678910111213141516171819202122232425262728293031323334 Mouse over Highlight Floating Content (function () { var divMouseover = document.getElementById("divMouseover"), divFloatingContent = document.getElementById("divFloatingContent"); divMouseover.onmouseover = function () { va..