22.05.09 개발 일기

오늘의 계획

1) 제로베이스 HTML/CSS 과제 3,4 하기

2) LeetCode 문제 풀기

제로베이스 과제를 하며...

현재 제로베이스 과제 진행은 더디지만 꾸준히 나아가고 있다.
가장 막히는부분이 WIA-ARIA① 을 통한 웹 접근성을 고려하여 HTML 마크업 중인데, 스크린 리더에 대한 개념이나 동작 부분이 워낙 생소 하다 보니, 고민도 많고 진행하다가 계속 멈추는 중이다.
그럼에도 찾아서 진행 중인데, 참조사이트 오늘은 캐러셀 구조에 대해서 조금 이라도 더 알게 되었다.

<section id="carousel" class="carousel" aria-roledescription="carousel" aria-label="슬라이드 이미지">
  <div id="carousel-items" aria-live="off">
    <div class="carousel-item active" role="group" aria-roledescription="slide" aria-label="1 of 2">
      <div class="carousel-image"> <!--이미지 1 시작-->
        <a href="/">
          <img src="/assets/slides/houseware-downy.jpg" alt="항균 다우니" />
        </a>
      </div>
      <a href="/" class="carousel-caption textBox">
        <h4>최초의 99.9% 항균</h4>
        <p>세균 냄새 걱정 없이 상쾌하게!</p>
      </a>
    </div>
    <!-- 카러셀 이미지 1 끝 / 이미지 2 시작 -->
    <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="2 of 2">
      <div class="carousel-image">
        <a href="/">
          <img src="/assets/slides/houseware-dandruff.jpg" alt="샴푸" />
        </a>
      </div>
      <a href="/" class="carousel-caption textBox">
          <h4>비듬완화 임상완료</h4>
          <p>닥터방기원 댄드러프</p>
      </a>
      </div>
  	</div>

  <div class="selectList">
  <button class="selectBox active" aria-label="1 of 1"></button>
  <button class="selectBox" aria-label="2 of 2"></button>
  </div>
</section>

참조 사이트에 테스트 코드를 보며 참조 하며 작성 하였는데, 실제로 carousel-item id값이나 class값은 전부 사용하지 않고 일부분만 사용해 과제 3을 완료 하였다.
코드에서 몇개를 요약해서 정리하면

1) section 으로 구조를 나누고
2) aria-roledescription="carousel" 옵션으로 캐러셀 구조라는 것을 알리며
3) id="carousel-items" 이미지를 묶을 박스를 구성
4) item 별로 role="group" 그룹 설정
5) aria-roledescription="slide" 구조 방식 설명
6) aria-label="2 of 2" 현재 이미지의 수 설명

위 구조로 해당 캐러셀 구조를 작성해봤다. ( 아직 확신이 없다. (～￣▽￣)～)

이것으로 과제 3은 마무리 하고 과제 4를 시작하였다.

LeetCode 문제 정리

1) 977. Squares of a Sorted Array
2) 189. Rotate Array

1) 977. Squares of a Sorted Array

이 문제 같은 경우 카테고리가 배열 , 투 포인트, 정렬 이였는데, 시간이 부족하여 이전에 풀었다. for문과 sort 내장함수를 통해 각각 O(n) O(n log(n)) 시간복잡도를 가진다.

2) 189. Rotate Array

이 문제는 배열, Math 함수, 투 포인트 카테고리를 가졋는데, 결과를 먼저 이야기 하면 혼자 생각 해서는 풀지 못하였다.

Example 1:
Input: nums = [1,2,3,4,5,6,7], k = 3
Output: [5,6,7,1,2,3,4]
Explanation:
rotate 1 steps to the right: [7,1,2,3,4,5,6]
rotate 2 steps to the right: [6,7,1,2,3,4,5]
rotate 3 steps to the right: [5,6,7,1,2,3,4]

문제를 설명하면, 입력된 배열이 k 만큼 순환을 진행하는 하는 문제여서 처음에는 간단하게, pop()과 unshift()로 하려고 했다가 O(n*n) 시간복잡도를 가져서 타임아웃으로 진행하지 못해 멘붕에 빠졌다. 아래는 멘붕에 빠져 다른 사람의 코드를 보며 작성한 코드이다.

var rotate = function(nums, k) {
    let tmparr = new Array(nums.length).fill(0); // 입력 받은 배열 만틈의 새로운 배열 생성.
    
    for(let i=0; i<nums.length; i++) {
        tmparr[(i+k)%nums.length] = nums[i]
    } // 새로운 배열에 k번째 이후부터 nums[0]번째 부터 push 해주기 , 나머지 연산자로 원형 구조 만들기
    for(let j=0; j<nums.length; j++) {
        nums[j] = tmparr[j];
    } // 원하는 값이 만들어진 새로운 배열을 기존 배열에 다시 덮어쓰기.
};

느낀점 : 미디엄 난이도 문제지만 생각보다 할만 하다고 생각했는데, 내장함수를 사용하지 않고, 시간복잡도를 고민하며 풀다 보니 생각보다 접근이 어려웠던 문제였는데, 이 문제를 기반으로 배열 구조에 대해서 조금 더 알게 된 것 같다.

① WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)는 웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, 자바스크립트 및 관련 기술로 개발된 사용자 인터페이스 구성 요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술 사양이다.