1. 문제의 발단

다양한 컴포넌트들을 디자인하여 만들던 도중, 많은 사람들이 flex-box와 애니메이션과 함께 매우 유용하게 쓰일 수 있지만, 또 배우기는 헷갈리는 부분이 있겠다는 생각에 세트로 이 포스팅을 작성하려고 한다.

2. position?

• 간단하게 요소들의 배치될 방법을 정한다.
• 주로 부모의 크기를 무시하고 브라우저에 전체 창에 맞춰 위치를 맞출 수 있다.

3. 속성

• static : 기본값. 우리가 원래 알던 컴포넌트 대로 배치된다.
• relative : 부모요소를 기준으로 위치를 변경 가능하다.
• absolute : 모든 요소를 무시하고 전제 창에 따라 위치를 변경 가능하다. 요소들을 겹치는 것도 가능하다. z-index를 함께 쓰면 된다.
• fixed : 모든 요소를 무시하고 전체 창에 따라 위치를 변경한다. 하지만 고정되어 버린다. 창 크기를 늘리거나 스크롤을 하여도, 그 자리에서 떨어지지 않는다.
• sticky : 모든 요소를 무시하고 전체 창에 따라 위치를 변경하되, 스크롤 등으로 화면에서 빠져나가더라도, fixed처럼 고정된다. 마치, 그 위치에 컴포넌트가 달라붙어 버리는 느낌이다. 예시를 보면 된다.

4. 위치를 변경하는 속성

• top, bottom, left, right로 단위를 함께 줘서 위치를 변경 가능하다.
• 이런 식으로 footer를 항상 가장 최하단에 박아 버린다.

footer {
	position: absolute;
    bottom: 0;
}

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 번호를 얻으면 된다.