프로그래밍/해외인턴 개발일지

[인턴 일지] POS기 이미지로딩 스크립트 수정

Jay Tech 2017. 12. 2. 02:56
반응형

오늘은 12월 첫날이다... 뒤돌아 보면 시간이 빠르게 지나갔다. 


어제 한국음식이 너무 먹고 싶어서 곱창 볶음을 투고해서 먹었는데 지금 배가 너무 아프다...


그런데 오자마자 이사님이 pos기 사진 로딩 형식을 바꾸고 싶다고 하셨다. 현재 이미지들이 순서대로 로딩이 되지만 12월 프로모션으로 대표배너하나를 이미지가 3장 로딩 될 때마다 띄워지게 하고 싶다고 했다. 


즉 상품이미지 3장 - 대표배너 - 상품이미지 3장 - 대표배너 - ......           이런식으로 바꾸고 싶다고 했다. 근데 12월 1일 부터 적용이 됬어야 한다고 한다. 오늘인데.... 오늘아침부터 적용되어야 하는 것을 오늘 아침에 얘기하셨다. 이제 아무렇지도 않다. 

야호!!


지금 현재 돌아가는 상황은






One Drive에 디자이너가 넘긴 파일들이 있다. 저기 체크된 부분이 이름뒤에 00 이 붙은 대표배너이다. 이거를 저 이미지를 3장 로딩 후 띄워지게 하고 싶다는 것이다. 

저 이미지들은 아마존 s3에 다 저장되어 있다. 이름이 adisplay인 이유는 나도 모르겠다. 난 파일명을 중요하게 생각하는데 이거는 이대로 넘어왔으므로 그냥 넘어온 대로 이름을 쓸 뿐이다. 


현재 이전 요구사항대로 작성한 스크립트이다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script type="text/javascript">
 
  var images = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16",
                "17", "18", "19", "20", "21", "22", "23", "24", "25", "27", "28", "29", "30","31", "32",
                "33", "35", "36", "37", "38", "39", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50",
                "51", "52", "53", "54", "55", "56", "58", "59", "60", "61", "62", "63", "64", "65", "66",
                "67", "68", "70", "71", "72", "73", "74", "75", "76", "77", "78"];
 
  var i = 0;
 
  $( document ).ready(function() {
  });
 
  setInterval(function() {
    if(images.length == i) {
      i=0;
    }
    document.getElementById("image").src="../img/width/"+ "adisplay" + images[i] + ".jpg";
    i++;
  }, 7000);
 
</script>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no">
  <div id="slideshow">
    <div>
      <img id="image" src="" width="800" height="300" border="0" alt="" />
    </div>
  </div>
</body>
</html>
 
cs



사진이 유동적으로 바뀌기 때문에 배열안에 숫자를 넣어놓았다. 그래야 나중에 내가 없어도 잘 모르는 사람이 와도 저 괄호안에 숫자만 편집하면 사진을 맘대로 바꿀 수 있기 때문이다.


이사님이 처음에 말한게 위에 저 대표배너를 하나씩 복사해서 사진 사이사이에 넣으라는 것이었다. 


이 말도 안되는 것에 대한 문제점


1. 파일명을 일일이 싹 다 바꿔야 한다. 


2. 쓸 데 없이 대표배너 이미지가 중복되어 한 20장 넘게 저장소에 들어갈 것이다. 


3. 3장씩 반복이 아니고 갑자기 4장씩 반복으로 바꾸고 싶으면 또 다시 모든 파일의 이름을 싹 다 바꿔야 한다. 누가할거야이거


4. 게다가 한 달만 쓰기로 한 정책인데 한 달 후에 또 다시 바꿔야 한다. 그리고 프로모션 있을 때마다 다 바꿔야 한다.


5. 수작업으로 바꾸다 보면 오타나 누락이 생긴다.


6. 눈 아프다. 



그래서 나는 더 좋은 방법으로 스크립트 코드를 수정하겠다고 말했다. 근데 배가 너무아파서 도저히 생각을 못하겠었다. 


급하게 화장실로 뛰어갔다. 화장실에서 어떻게 짤 지 1분정도 편안하게 생각했다. 


그리고 와서 종이에 써봤다. (난 종이에 쓰면서 하는 습관이 있다.)




(배가 아파서 손이 떨렸다)


일단 3장씩 반복이므로 3으로 나누어 떨어지는 숫자를 기준으로 조건문을 걸면 될 것이다. 나머지 연산자 (%) 를 이용했다.

그리고 대표 이미지 사진은 한 장이 fix되어있으므로 url이 동적으로 돌아간다고 해도 고정형식의 이름을 사용한다.



1
2
3
4
5
6
7
8
9
10
11
12
setInterval(function() {
 
    if(images.length == i) {
      i=0;
    }
    if(i%3 == 0) {
      document.getElementById("image").src="../img/duluth/"+ "adisplay_" + "00" + ".jpg";      
    } else {
      document.getElementById("image").src="../img/duluth/"+ "adisplay_" + images[i] + ".jpg";
    }
    i++;
  }, 7000);
cs



setInterval() 함수를 수정했다.


처음 생각한 뼈대 이다. 일단 3으로 나누어떨어지는 숫자에 해당하는 i 변수가 들어왔을 때 대표배너를 띄워준다.


여기에 심각한 문제가 있다. 3, 6, 9 ... 번째 이미지들은 본래 3번째 이미지가 띄워지는게 아닌 대표배너가 띄워지는 문제점이 있다. 그럼 3의 배수에 해당하는 상품이미지는 물려버리게 된다.


그렇다면 변수를 하나 더 둬서 이것을 구분해야 한다.


이럴 때 사용하는 것이 FLAG 이다.


자바스크립트의 Boolean으로 이 Flag를 만든다.





***** 여기서 TIP 

Boolean에 대해서 모질라 공식 문서를 찾아보았다.

Description

The value passed as the first parameter is converted to a boolean value, if necessary. If the value is omitted or is 0, -0, null, false, NaN, undefined, or the empty string (""), the object has an initial value of false. If the DOM object document.all is passed as a parameter, the new boolean object also has an initial value of false. All other values, including any object or the string "false", create an object with an initial value of true.

Do not confuse the primitive Boolean values true and false with the true and falsevalues of the Boolean object.

Any object of which the value is not undefined or null, including a Boolean object whose value is false, evaluates to true when passed to a conditional statement. For example, the condition in the following if statement evaluates to true:

var x = new Boolean(false);
if (x) {
  // this code is executed
}

This behavior does not apply to Boolean primitives. For example, the condition in the following if statement evaluates to false:

var x = false;
if (x) {
  // this code is not executed
}


이것은 원시타입 불린과 오브젝 불린의 차이점을 인지하라는 내용이었다. 

즉 위의 코드는 오브젝으로 만든것이어서 x안에 false인 불린 객체가 들어가서 if 조건이 false여서 저 중괄호는 타지 않는다.


두 번째는 원시 타입으로 false를 주면 if조건은 조건 자체를 false로 인식해 저 중괄호를 탄다. 


참 헷갈리고 재미있는 내용이다. 




FLAG를 적용한 스크립트 완성본이다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script type="text/javascript">
 
  var images = ["01", "03", "05", "07", "09", "11", "13", "15", "17",
                "19", "21", "23", "25", "27", "29", "31",
                "35", "37", "39", "41", "45", "47", "49",
                "51", "53", "55", "57", "59", "61", "63", "65", "67", "69",
                "71", "75", "77"];
 
  var i = 0;
 
  // flag classfies multiple of 3
  var flag = new Boolean(false);
 
  $( document ).ready(function() {
  });
 
  setInterval(function() {
 
    if(images.length == i) {
      i=0;
    }
 
    // adisplay00 image means repeatitive fixed images for promotions
    // flag false means ready to inspect the var i is multiple of 3 or not
    // i != 0 allows to show adisplay01 (first image)
    if(i%3 == 0 && flag == false && i != 0) {
      document.getElementById("image").src="../img/duluth/"+ "adisplay_" + "00" + ".jpg";
      flag = true; // not increasing var i
    } else {
      document.getElementById("image").src="../img/duluth/"+ "adisplay_" + images[i] + ".jpg";
      flag = false; // flag turns false
      i++;
    }
  }, 7000);
</script>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no">
  <div id="slideshow">
    <div>
      <img id="image" src="" width="800" height="150" border="0" alt="" />
    </div>
  </div>
</body>
</html>
 
cs



line 12 : flag를 적용할 변수를 생성한다. 초기 값은 False로 둔다.


line 26 : 조건문을 보자. i가 3으로 나누어 떨어지고 flag 가 false이고 i가 0이 아닐 때 (i가 0이 아닐때는 첫 번째 이미지가 누락되는 것을 막기 위함이다. 저것을 넣어주지 않는다면 숫자 0을 3으로 나누면 0이기 때문에 첫 번째 이미지 (0)은 저 조건문을 타버려 대표이미지가 떠버리게 된다. 이것을 안넣고 다 됬다고 생각해서 테스팅을 하는데 첫 번째 이미지가 나오지 않아서 이상하다고 생각하고 다시보니 그랬다. 그래서 나중에 추가한 부분이다...)


그럴 때 대표이미지를 로딩한다. 그리고 대표이미지가 떴으므로 flag를 true로 만들어준다. 그리고 i를 증가시키면 안된다. 플래그가 true이므로 다음 번 조건문은 건너뛰고 else를 타게 된다. else를 타면 var images 배열에 있는 애들을 순차적으로 띄워주게 된다. 그리고 flag를 다시 false로 만들어준다. 그리고 i를 증가시킨다.





잘 나오나 테스트를 했다. 저 빨갛게 되서 404 error 뜨는 것은 중간에 빠진 사진 때문이다. images 배열에서 해당 숫자를 지워주면 된다.


script 수정 + s3 정적 웹호스팅 index.html 수정 + 이미지 누락 확인 작업 + Overall testing + 화장실 = 소요시간 1시간.


제일 일이 집중잘되는 금요일... 이상 일지기록이었다.





반응형
저작자표시

'프로그래밍 > 해외인턴 개발일지' 카테고리의 다른 글

[인턴 일지] 스프링 각종 코드 수정 작업 중, 잔 버그 해결  (0) 2017.12.05
[인턴 일지] Amazon S3 이미지 업로드, 다운로드  (3) 2017.12.01
[인턴 일지] 미국 인턴생활과 POS기 사진 띄우기  (3) 2017.11.04
[인턴 일지] 내 프로젝트의 문제점과 나아가야할 방향  (3) 2017.11.04
[인턴 일지] Spring + Amazon S3 이미지 업로드  (0) 2017.10.28

'프로그래밍/해외인턴 개발일지'의 다른글

  • 현재글[인턴 일지] POS기 이미지로딩 스크립트 수정

관련글

댓글

티스토리툴바