[축구모임 홈페이지개발] 11/29 개발일지 Nodejs

우선 어제 새벽에 더 이상 할 수 없어서 못 했던 것 중 하나 오늘 시도해볼거다.

일단

1. 이번주MVP 구현기능 구체화.

 

어제는 변수만 데이터로 보냈는데 혹시 그 변수에 html 코드 자체를 저장해서 뭐.. value 값에 맞게

이미지를 띄워서 구현시켜야하기 때문에 이를 코딩해볼 예정.

 

    function showMVP() {

      var WeeklyMVPSelect = document.getElementById("WeeklyMVPSelect");

      var selectedMVP = WeeklyMVPSelect.value;

      var resultDiv = document.getElementById("MVP");

      resultDiv.innerHTML = selectedMVP;

      location.href='/mvp?val=' + selectedMVP

    }

 

일단 지금 코드.

여기서 selectedMVP 변수를 보내는데, 여기에 html 코드자체를 보내야함.

일단 깡으로 시도

 var selectedMVP = `<div>하이</div>`

 

대놓고 변수에 넣어봤다.

 

대실패.

음...  

<div style="font-size: 30px; margin: 10px; color: white;" >이번 주 mvp : <%=MVPname%></div>

 

대박이다 생각해보니 들었던 강의중에 <%= %> 꼴로 변수를 출력하면 html 코드를 제외하고 문자열만 렌더링하는데

<%- %> 꼴로 변수를 출력하면 html 코드까지 싹 다 출력한다.

 

div 안에 빨간색 글씨로 적용시키는 style 속성까지 추가해서 구현하니까

잘 나왔다. 굿

이제 각 value 마다 이미지 아무거나 한 번 넣어서 이미지가 화면에 띄워지게 구현해보겠다.

먼저 보여지게될 화면을 디자인해야한다고 생각했다.

 

      <div style="font-size: 30px; margin: 10px; color: white;">

        이번 주 mvp : 한대규

          <div class="mvp-area"><img

              src="https://ik.imagekit.io/wlalafg7g/%EB%B3%B4%EC%8A%A4/%EB%A3%A8%EC%8B%9C%EB%93%9C.png?updatedAt=1691021040942">

          </div>

      </div>

 

우선 위와 같이 디자인을 해봤다.

 

그럼 

한대규

          <div class="mvp-area"><img

              src="https://ik.imagekit.io/wlalafg7g/%EB%B3%B4%EC%8A%A4/%EB%A3%A8%EC%8B%9C%EB%93%9C.png?updatedAt=1691021040942">

          </div>

 

이 부분이 변수 안에 들어가면 되는 것이다.

 

    function showMVP() {

      var WeeklyMVPSelect = document.getElementById("WeeklyMVPSelect");

      var selectedMVP = WeeklyMVPSelect.options[WeeklyMVPSelect.selectedIndex].text

      switch (selectedMVP) {

        case '한대규':

          var selectedMVP = `<div style="color:red">${WeeklyMVPSelect.value}</div><div class="mvp-area"><img

              src="https://ik.imagekit.io/wlalafg7g/%EB%B3%B4%EC%8A%A4/%EB%A3%A8%EC%8B%9C%EB%93%9C.png?updatedAt=1691021040942">

          </div>`

          break

        case '이찬웅':

          var selectedMVP = `<div style="color:red">${WeeklyMVPSelect.value}</div><div class="mvp-area"><img

              src="https://ik.imagekit.io/wlalafg7g/%EB%B3%B4%EC%8A%A4/%EA%B0%80%EC%97%94%EC%8A%AC.png?updatedAt=1691021040925">

          </div>`

          break

        case '양철진':

          var selectedMVP = `<div style="color:red">${WeeklyMVPSelect.value}</div><div class="mvp-area"><img

              src="https://ik.imagekit.io/wlalafg7g/%EB%B3%B4%EC%8A%A4/%EB%B0%98%EB%B0%98.png?updatedAt=1691021040811">

          </div>`

          break

        case '권진백':

          var selectedMVP = `<div style="color:red">${WeeklyMVPSelect.value}</div><div class="mvp-area"><img

              src="https://ik.imagekit.io/wlalafg7g/%EB%B3%B4%EC%8A%A4/%ED%95%91%ED%81%AC%EB%B9%88.png?updatedAt=1691021040901">

          </div>`

          break

        default:

          break

      }

      var resultDiv = document.getElementById("MVP");

      resultDiv.innerHTML = selectedMVP;

      location.href = '/mvp?val=' + encodeURIComponent(selectedMVP)

    }

 

그래서 나는 switch,case 를 이용해서 각 value 마다 selectedMVP 에 들어가는 변수의 값이 달라지게 설정을 했고

그 변수 안에는 디자인된 부분이 html 코드로 들어가게 설정했다.

 

이 과정에서 내가 막혔던 부분은 두 부분이 있다.

 

첫번째로 

 var selectedMVP = WeeklyMVPSelect.options[WeeklyMVPSelect.selectedIndex].text

 

우선 WeeklyMVPSelect 는 Select 속성을 가리키는데,

WeeklyMVPSelect.options : Select 요소의 option 에 접근한다.

 

WeeklyMVPSelect.selectedIndex: 현재 선택된 옵션의 인덱스를 나타낸다. 이 속성을 통해 현재 선택된 옵션의 인덱스를 얻을 수 있다.

 

WeeklyMVPSelect.options[WeeklyMVPSelect.selectedIndex].text: 위에서 얻은 현재 선택된 옵션의 인덱스를 사용하여 해당 옵션의 텍스트 내용을 가져온다. 이를 selectedMVP 변수에 할당한다.

 

인덱스 

(index)

접기

명사

• 책 속의 내용 중에서 중요한 단어나 항목, 인명 따위를 쉽게 찾아볼 수 있도록 일정한 순서에 따라 별도로 배열하여 놓은 목록.

 

인덱스 뜻이다. 이런걸 보면 위의 코드는 select 에 들어가있는 각 option 마다 index 값이 있고 그 index 값으로 타겟해서 값을 얻어내는 과정의 코드라고 추측이 간다.

 

두 번째로

 

location.href = '/mvp?val=' + encodeURIComponent(selectedMVP);

 

encodeURIComponent(selectedMVP): 이 부분은 selectedMVP 변수에 저장된 값을 URI(Uniform Resource Identifier) 구성 요소로 인코딩한다. 이렇게 함으로써 특수 문자나 공백과 같은 문자를 안전하게 URL에 포함시킬 수 있다.

 

URI ( Uniform Resource Identifier )

URI, 통합 자원 식별자는 인터넷에 있는 자원 자체를 식별하는 유일한 방법입니다. URI의 하위개념으로 URL과 URN이 있습니다.

 

URI 가 뭔가 하고 보니까 위와 같이 나온다.