1. 문제의 발단

개발을 처음 시작했을 때 스터디원들과 참고할 만한 사이트 같은걸 찾다가 들어가 본 Airpods pro 사이트는 정말 지금 봐도 놀랍다. 디자인 UX 전부 완벽한 것 같다. 어쨌든 저런 스크롤 이벤트를 알아보고 나도 걸음마는 때 보려고 한다.

2. 어떻게 하나요?

1. useState를 이용해 state 값으로 스크롤 수치를 만든다.

   • import React, { useState } from "react";
     
     const [scrollPosition, setScrollPosition] = useState(0);
     
     function Page {
         <div>
     		<div>스크롤되면 색이 변합니다!</div>
         </div>
     }

2. Handler 함수를 만들고, useEffect로 스크롤 수치를 계속 업데이트한다.

   • import React, { useState, useEffect } from "react";
     
     const [scrollPosition, setScrollPosition] = useState(0);
     
     const updateScroll = () => {
             setScrollPosition(window.scrollY || document.documentElement.scrollTop);
         };
     
     useEffect(() => {
             window.addEventListener("scroll", updateScroll);
         }, []);
     
     function Page {
         <div>
     		<div>스크롤되면 색이 변합니다!</div>
         </div>
     }

3. className을 삼항 연산자로 원하는 수치만큼의 스크롤이 되면 바꿔주게 만든다.

   • import React, { useState, useEffect } from "react";
     
     const [scrollPosition, setScrollPosition] = useState(0);
     
     const updateScroll = () => {
             setScrollPosition(window.scrollY || document.documentElement.scrollTop);
         };
     
     useEffect(() => {
             window.addEventListener("scroll", updateScroll);
         }, []);
     
     function Page {
         <div>
     		<div className={scrollPosition > 100 ? "scroll-text" : "scrolled-text"}>스크롤되면 색이 변합니다!</div>
         </div>
     }

   • .scroll-text {
         font-size: 5rem;
         transition: 1.5s;
     }
     
     .scrolled-text {
         font-size: 5rem;
         color: red;
         transition: 1.5s;
     }

3. 결과물

1. 문제의 발단

사이드바 메뉴에 슬라이드 애니메이션을 넣어서 완성도를 높여보려고 시도하는 도중, keyframes를 이용하면 다양한 방식과 움직임을 표현할 수 있겠다고 생각하였고 그것을 정리하기 위해 포스팅을 시작했다.

2. keyframes?

• transition과 anumation을 사용해서 움직임을 줄 수 있는 것은 알 고 있다.
• 이때, animation의 변화되는 방식을 설정하는 것이 keyframes가 된다.

3. keyframes의 간단한 예시

// page.js

function page()  {
	<div>
    	<div className="text">How are you?</div>
    </div>
}

.text {
    position: relative;
    font-size: 5rem;
    animation: slide 2s ease-in-out;
}

@keyframes slide {
    from {
        left: -650px;
    }
    to {
        left: 0;
    }
}

• animation 속성에는 순서대로 keyframes로 만들어준 애니메이션의 이름, 지속 시간, 어떤 방식으로 애니메이션을 보여줄지를 넣는다.

4. 추가로 보는 사이드바에 들어가고 나오는 애니메이션 만들기

// page.js

function page()  {
	<div>
    	<div className="text" onClick={openHandler}>
                How are you?
            </div>
            <span className={isOpen ? "sidebar active" : "sidebar"}>
                <nav>Hi!</nav>
                <nav>Hello</nav>
            </span>
    </div>
}

.text {
    margin-top: 20px;
    position: relative;
    font-size: 5rem;
    animation: slide 2s ease-in-out;
    transition: 220ms ease-in-out;
    cursor: pointer;

    &:hover {
        color: red;
    }
}

@keyframes slide {
    from {
        left: -650px;
    }
    to {
        left: 0;
    }
}

.sidebar {
    display: flex;
    flex-direction: column;
    width: fit-content;
    position: relative;
    background-color: white;
    color: black;
    font-size: 2rem;
    bottom: 5px;
    padding: 1rem;
    left: -100%;
    transition: 1.5s;
}

.sidebar.active {
    left: 0;
    transition: 1.5s;
}

• 초기에 시작을 화면의 밖에 가려진 상태로 한다.
• className에 삼항연산자로 active 속성을 이용해 css를 바꿔준다.

1. 문제의 발단

다시 알고리즘 공부를 시작하고 나서 프로그래머스를 풀고 있었다. 레벨 1 문제가 얼마 안 남았는데, 왠지 남은 문제가 소수 관련 문제뿐인 것이다...! 이대로는 안 되겠다 싶어서 소수에 대한 공부를 따로 해 보려고 한다.

2. 소수?

• 1과 자기 자신 이외에 숫자로 나누어 떨어지지 않는 숫자

3. 반복문 사용하기

function isPrime(num) {
    for(let i = 2; i < num; i++) {
        if(num % i === 0) {
          return false;
        } else {
          return true;
        }
    }
}

• 소수인지 아닌지를 판별 할 수 있다. 설명할 필요 없이 간단하다.

4.  Math.floor과 Math.sqrt를 사용하기

function isPrime(num) {
	if(num < 2) return false;
	// 자연수 인지를 판단한다.
    
	for(let i = 2; i <= Math.floor(Math.sqrt(num)); i++){
    	if(num % i === 0){
      		return false; 
    	}
  	}
  return true;
}

• Math.floor() : 소수점이 있는 숫자를 내림한다.
• Math.sqrt() : 제곱근을 반환한다.
• 즉, num의 제곱근을 받아 내림하여 소수점을 때 준 후에 숫자를 최대 숫자로 보고 나머지는 위의 방법과 거의 동일하다.

5. 에라토스테네스의 체

function isPrime(n) {
	// 먼저 0 부터 n 까지 true로 이루어진 배열을 만들어 준다. 이들이 모두 소수라고 친다.
    // 하지만 0과 1은 소수에서 제외한다.
    let arr = new Array(n + 1).fill(true).fill(false, 0, 2);
    
    // 소수들이 들어갈 배열을 2부터 제곱 보다 작을경우에 돈다.
    for(let i = 2; i * i <= n; i++) {
    	// 이때, arr[i]에 해당하는 숫자가 true 즉, 소수라면
        if(arr[i]) {
        	// 그 소수의 제곱부터 n까지의 모든 제곱근들을 다 false로 소수가 아니라고 표시한다.
            for(let j = i * i; j <= n; j += i) {
                arr[j] = false;
            }
        }
    }
    // 소수 표시가 끝나면 filter로 소수, 즉 true인 요소의 length를 반환한다.
    return arr.filter(el => el === true).length;
}

• 간단하게 말하면 정해진 범위 내의 소수들의 배수를 싹 다 제외하면 소수만 남는다.
• 예를 들어, 1 ~ 25까지의 소수의 개수를 구하려고 할 때, 1을 제외한 2부터 25의 제곱근인 5까지의 소수들을 구한다. 그러면 소수는 2와 3뿐이다. 이때 2의 배수인 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24를 제외하고, 3의 배수인 3, 6, 9, 12, 15, 18, 21, 24를 제외한다. 하지만 2와 3은 n의 제곱근인 5의 소수이기도 하였기 때문에 제외하고, 2, 3, 5, 7, 11, 13, 17, 19, 23이 남는다.
• 그러므로, 소수의 갯수를 구할 때 더 유리하다. 소수인지를 판별할 때는 다른 방법이 더 빠를 수 있다.
• 소수 자체를 구하려면 result에 true인 요소들의 index 번호를 얻으면 된다.

1. 내비게이션의 의의와 목적

• 웹사이트를 이리저리 탐색하는 것은 귀찮을 수 있다.
• 그런 이동거리를 최소화하고 비슷한 목차들을 묶어서 보기 쉽게 하기 위해 우리는 내비게이션을 만든다.

2. 내비게이션의 종류

• 글로벌 내비게이션 (Global Navigation)
  • 웹 사이트의 모든 화면에서 고정적으로 볼 수 있다. 
  • 사이드바나 메뉴의 형태를 가지고 있다.
  • 상단에 버튼을 배치하거나 좌측에 슬라이드로 빼기도 한다. 모바일 버전에서는 하단에 배치하거나 햄버거 버튼을 이용하기도 한다.

• 유틸리티 내비게이션 (Utility Navigation)
  • 도움말이나 프린트, 설정과 같은 메뉴를 보여준다.
  • 아바타 아이콘 뒤에 숨겨놓거나 하는 등의 기능을 하며, 각각의 설정이 있을 수 있는 앱에 주로 사용된다.
• 연관 및 인라인 내비게이션 (Associative and Inline Navigation)
  • 콘텐츠를 직접적으로 유저가 이용하고 있을 때, 유저의 편의를 위해서 즉시 도움을 줄 수 있는 요소들을 보여준다.
  • 관련 있는 콘텐츠들을 묶는 역할도 한다.
  • 가끔은 유저가 이용할 때 걸리적거릴 경우가 있다. 잘 생각해서 만들어야 한다.
• 태그 (Tags)
  • 콘텐츠들을 비슷한 종류별로 묶는다.
  • 소규모 블로그 등에는 꼭 사용할 필요는 없지만 사이즈가 커지면 커질 수 록 유용하다.
  • 블로그가 커질 경우를 대비해서 처음부터 만드는 것 도 좋다. (나중에 태그들을 하나하나 달아 주려면 고통스러울 것이다)
  • 콘텐츠의 마지막 부분에 단어들을 나열하여 만들어 준다.
• 소셜 (Social)
  • 웹사이트와 소셜미디어를 결합할 수 있다.
  • 뉴스나 각종 수치에 대한 그래프 그리고 인기 검색어 등 다양한 수치들을 나타낼 수 있다.

3. 디자인 할 때 고려할 점

• 내비게이션의 디자인과 시각적 표현 분리하기
  • 순서와 몇개의 목록을 보여줄지 고민하자
  • 독특한 디자인 보다는 편하게 사용할 수 있는 친숙한 디자인이 올바르다.
• 인지 부담
  • 마찬가지. 독특함보다는 편안함이 우선이다.
  • 평범한 아이콘과 위치 만약 필요하다면 작은 텍스트를 이용할 수 도 있다.
• 이동거리의 최소화
  • 글로벌 내비게이션이라면 폭을 넓혀서 디자인하자
  • 자주 접근하는 항목들을 글로벌 내비게이션에 담자
  • 반복적인 행동을 계속 하지 않도록 하며 콘텍스트 전환이 없이 모든 작업을 한 페이지에서 한 번의 로딩으로 끝낼 수 있도록 단계를 묶어 설계한다.

4. 패턴

• 명확한 진입점 (Clear Entry Points)
  
  • 많은 기능을 넣는것 보다는 확실히 목적을 알 수 있도록 명확하게 디자인한다.
  • 진입점을 정확히 하고, 유저로 하여금 고민하지 않아도 되도록 만든다.
• 메뉴 페이지
  • 웹사이트의 모든 페이지 정보들을 한 화면에 담아서 어떤 기능을 하는 페이지를 쉽고 빠르게 찾을 수 있도록 한다.
  • 페이지가 많아 복잡한 웹에 어울리며, 다른 방해 요소가 아무것도 없어서 온전히 내비게이션에 유저들을 집중시킬 수 있다.
  • 하지만 유저들은 거부감이 조금 있다. 텍스트가 가득하고 복잡하기 때문이다. 그렇지만 각 요소별로 잘 정리해 놓고 그나마 가독성이 좋게 만들어서 그런 점들을 보안할 수 있다.
• 피라미드
  • 메인으로 모든 페이지와 연결될 수 있는 페이지를 하나 만들고, 뒤로가기와 함께 이용하여 각각의 페이지들을 연결하는 형태이다.
  • 상품의 소개나 사진이나 정보의 나열에 쓰일 수 있다.
  • 사용자는 이동하는데 클릭하는 횟수가 줄어들고 각 페이지의 연결성을 높일 수 있다.
  • 하지만, 새부적으로 나눠놓은 콘텐츠의 연결성이 부족하면 유저 이탈로 이어질 수 있다.
• 모달 패널 (Modal Panel)
  • 열렸다가 닫치는 작은 모달을 만들어 표시한다.
  • 유저의 확실한 집중을 받을 수 있다.
  • 모달이 열려 있을때는 다른 곳으로 이동할 수 없으므로 로그인과 같은 내용들을 넣기 좋고, 모달의 뒤편에 있을 진짜 웹 사이트의 내용들을 두고 다른 기능들을 처리하기에도 편리하다. (ex: 장바구니, 회원가입 이후 로그인 등)
• 딥 링크 (Deep Link)
  • 유저가 웹 사이트를 이용하던 상태를 저장하여 다른 기기나 다른 장소와 시간에 다시 접속하였을 때도 그 맥락을 이어서 사용할 수 있게 해 준다.
  • 만족스러운 UX를 제공할 수 있다. (ex: 유튜브나 넷플릭스의 이어 보기)
  • 콘텐츠 상의 사용자의 위치를 추적한 후에 URL에 넣는 방식을 사용할 수 있다.
  • 링크를 유저들 간에 서로 공유할 수 있는 기능을 넣을 수 도 있다.
• 탈출구 (Escape Hatch)
  • 현재 화면에서 한 번에 벗어날 수 있게 해 준다.
  • 404 페이지와 같은 막다른 곳에서 '홈으로'와 같이 탈출구를 만들 수 있다.
• 메가 메뉴 (Fat Menu)
  • 간단한 메뉴를 만들어 놓고, 그 옆에 모든 메뉴를 보여주는 메뉴를 하나 더 만든다.
  • 복잡한 웹사이트일 경우 자주 사용하는 것들을 모아 간단한 메뉴를 만들어 놓는다.
  • 숙련자들을 위해 모든 기능을 찾을 수 있는 메뉴가 또 있는 것이다.
  • 드롭다운 방식이나 여타 이용하는 메뉴처럼 디자인할 수 있다(물론 엄청 커진다)
• 로그인 툴 (Sign-In-Tools)
  • 우측 상단에 프로필 사진 등을 누르면 유저의 상태에 관련한 모든 작업을 할 수 있는 메뉴를 만든다.
  • 로그인, 회원가입, 정보 수정 등 다양한 기능을 넣을 수 있고, 로그인을 자주 이용하는 웹 사이트일 경우 더 유용하다.
  • 너무 크게 만들면 안 된다.
• 프로그레스 인디케이터 (Progress Indicator)
  • 페이지를 진행하면서 지금 유저가 어디 있는지를 알려주는 인디케이터를 만든다.
  • 단계가 있는(ex: 회원가입 등) 작업을 유저가 하고 있을 때 어디까지 진행되었는지, 얼마나 남았는지를 시각적으로 보여줄 수 있다.
  • 페이지의 구석이나 상단에 크지 않은 사이즈로 배치하는 것이 옳다.
• 브레드 크럼 (Breadcrumbs)
  • 큰 카테고리를 나눠두고 그 아래에 더 작은 카테고리를 나눠 놓는 것이다.
  • 상품 판매 사이트에 상품의 종류를 나누기 위해 잘 사용된다. (ex: 전자제품 -> 주방용품 -> 베이킹 용품)