NULL

1

1924 — Fri, 26 Apr 2024 17:25:48 +0900

단일

이중

원형

----

react-router-dom navigation props보내기

1924 — Sun, 22 Oct 2023 09:41:23 +0900

navigation("/search", {
        state: {
          value: e.target.value,
          movieData: props.movieData,
          tvData: props.tvData,
        },
      });

input검색창에서 값을 입력받으면 검색결과 컴포넌트로 props을 보내고 싶었다.

알아보니 해당 url파라미터와 state을 이용해서 원하는 컴포넌트 링크로 props을 보낼 수 있었다.

카드가 부모 요소를 벗어나도록 허용하는 visible

1924 — Sat, 21 Oct 2023 08:53:08 +0900

제목과 동일하게 슬라이드 퍼블리싱에 애니메이션 효과를 입히는 도중

확대되면서 크기가 부모 요소를 벗어나도록 되어있는 애니메이션을 구현 중이였다.

부모 요소에 크기가 고정으로 설정되어있어서 어떻게 해결할지 찾는 도중

부모 요소를 벗어나도록 허용하여 화면에서 잘림없이 애니메이션을 처리 할 수 있었다.

결론은 overflow: visible을 찾아서 해결하였다.

Framer-Motion scroll 애니메이션 다루기

1924 — Sun, 15 Oct 2023 22:29:33 +0900

NetFlix클론을 하다가 Navbar에 일정 스크롤을 내리면 불투명도를 주고 싶었다.

수 많은 방법이 있지만 그 중에서 Framer-Motion을 통해서

스크롤 애니메이션으로 처리할 수 있는 방법을 선택하였다.

const { scrollY } = useScroll();
  const bg = useTransform(
    scrollY,
    [0, 80],
    ['rgba(0,0,0,1)', 'rgba(0,0,0,0.5)']
  );

scrollY : 사용자의 스크롤 동작에 따라 동적으로 업데이트되는 스크롤 위치를 나타낸다.

[0, 80] : 입력 범위로, 여기서 0은 스크롤의 시작을 나타내고, 80은 스크롤 범위의 끝을 나타낸다.

이 범위는 스크롤 위치에 따라 배경 색상의 전환을 결정하는데 사용된다.

['rgba(0,0,0,1)', 'rgba(0,0,0,0.5)'] : 스크롤 위치에 따른 배경 색상의 전환을 정의하는 배열이다.

스크롤 위치가 0일 때는 완전히 불투명한 검정색 (rgba(0,0,0,1)이고,

스크롤 위치가 80일 때는 반투명한 검정색 (rgba(0,0,0,0.5))으로 전환 된다.

react-hook-form 이벤트 등록, input값 얻기

1924 — Wed, 11 Oct 2023 05:35:40 +0900

react-hook-form을 다루면서 마주했던 오류를 기록하는 회고록이다.

CSS는 styled-components를 사용했다.

<Input
    	onChange={onChangeHandler}
            type="text"
            {...register("id", {
              required: true,
              pattern: /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/i,
            })}
            aria-invalid={errors.id ? "true" : "false"}
            placeholder="이메일을 입력해주세요."
/>

Input컴포넌트에서 onChange이벤트를 등록하고 싶었다.

그래서 onChange이벤트를 넣어줬는데 동작하지않는 상황에 직면하였다.

구글링으로 찾아보니 react-hook-form만의 사용방법이 따로 존재하였다.

해결방법은 간단하다.

<Input
    	onChange={onChangeHandler}
            type="text"
            {...register("id", {
              required: true,
              pattern: /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/i,
              onChange: (e) => onChangeHandler(e),
            })}
            aria-invalid={errors.id ? "true" : "false"}
            placeholder="이메일을 입력해주세요."
/>

register함수 옵션안에 이벤트를 등록해주었더니 해결되었다.

참고링크 : https://velog.io/@rlorxl/react-hook-form-%EA%B4%80%EB%A0%A8-%EC%9D%B4%EC%8A%88

array와 Object 개념정리

1924 — Wed, 13 Jul 2022 13:17:28 +0900

var car = ['소나타', 50000, 'asd'];
// array 
console.log(car);


var car2 = {name: '소나타', price : 50000};
// object자료형
//key : value형태로 저장가능한게 장점.
// 실제 저장되는 값은 value이고 key는 자료의 이름이다.


console.log(car2.name); // 사용방법 1
console.log(car2['price']);// 사용방법 2

array/Object 차이

array는 순서개념이 존재한다. (왼쪽에서 오른쪽으로 가는 순서)

하지만 Object는 순서개념이 없다. (어느 곳에 위치하든 순서영향이 없다.)

순서개념이 존재하는 array는

- 0번부터 0번까지 자르기

- 0번 바꾸기

- 맨 뒤, 맨 앞에 자료 넣기

- 값이 존재하는지 검색

등등 순서개념이 필요한 많은 것을 할 수 있다.

array자료.sort() 하면 가나다순 정렬되고

array자료.slice(x, y) 하면 x번부터 y번 전까지 자를 수 있고

array자료.push(x) 하면 x를 맨 뒤에 입력할 수 있고

이런 기본함수들이 준비되어있다.

이외에

array 자료 조작이 필요할 때 검색을 통해 알맞게 사용한다.

JS 이벤트 버블링

1924 — Thu, 5 May 2022 04:17:11 +0900

이벤트 버블링

어떤 html태그에 이벤트가 발생하면

그 html의 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고 한다.

click이라는 이벤트를 예로 들자면,

html 태그에 클릭이 발생하면 그의 모든 상위요소까지 자동으로 클릭이 된다는 뜻이다.

<div>
  <div>
    <p>hello</p>
  </div>
</div>

위의 코드를 보면 p태그의 hello라는 글자를 클릭하게 되면
브라우저는 사용자가 클릭을 총 3번 했다고 인지한다.

예 ) p위에 div와 그 위의 div

위와 같은 현상이 이벤트 버블링이다.

브라우저는 원래 이렇게 동작하도록 되어있으며
이 사실을 잊은 채 코드를 짜다보면 가끔 이상한 현상이 발생할 수 있다.

<div class="black-bg"> (← 해당 창을 누르면 모달창 닫으라는 코드를 짬)
  <div class="white-bg">
    모달창 내용
  </div>
</div>

사용자가 <div class="white-bg"> 이거 클릭해도
이벤트 버블링 때문에 <div class="black-bg"> 이것도 클릭한 것이 된다.

그래서 거기 붙어있던 이벤트리스너가 동작해서 모달창을 닫아주게 되는데

이러한 문제를 해결하기 위해 자주 사용하는 이벤트 관련 함수/메소드가 존재한다.

이벤트리스너 안에서 쓰는 이벤트 함수들

document.querySelector('.black-bg').addEventListener('click', function(e){
  e.target;
  e.currentTarget;
  e.preventDefault();
  e.stopPropagation();
})

이벤트리스너 콜백함수에 파라미터에 아무거나 추가해도 되지만
주로 event의 약자인 e를 추가하는 편이다.

이로써 이벤트관련 유용한 함수들을 사용할 수 있게 된다.

각 메소드의 역할 ★★★★★

1. e.target은 실제 클릭한 요소 알려줌 (이벤트 발생한 곳)
2. e.currentTarget은 지금 이벤트리스너가 달린 곳 알려줌 (참고로 this라고 써도 똑같음)

3. e.preventDefault() 실행하면 이벤트 기본 동작을 막아줌
4. e.stopPropagation() 실행하면 내 상위요소로의 이벤트 버블링을 중단해줌

이외에 여러가지가 존재하며 필요할때마다 검색해서 쓰면 된다.

이중에서 가장 중요한건 e.target이다.

이벤트 버블링이 일어난다면
사용자가 실제로 클릭한 요소를 e.target으로 찾아 낼 수 있다.

const bg = document.querySelector(".black-bg");

bg.addEventListener("click", function(e){
    if(e.target == bg){
        bg.style.display = "none";
    }
})

여기서 조건식에 e.currentTarget 출력해보면

e.currentTarget은 해당 이벤트리스너를 가리킨다.

즉 bg(검은 배경)을 가리키게 되서 조건이 true가 된다.
this도 마찬가지이다.

따라서

e.target == e.currentTarget 혹은

e.target == this 이렇게 써도 된다.

제이쿼리에서 사용하기

jQuery 셀렉터로 찾은 결과와
querySelector 셀렉터로 찾은 결과는 다르게 생겼다.

출력해보면 전자는 이상한 object 이런게 나오고 후자는 <html> 이런게 나온다.

그래서 e.target == $('.black-bg') 이건 사용불가능하며
그리고 애초에 jQuery 셀렉터끼리 등호비교는 불가능하다.

제이쿼리에서는
$('.black-bg').is($('.black-bg')) 와 같은 비교용 함수를 사용하면 된다.

위 코드에서는 $(e.target).is($('.black-bg')) 를 사용하면 된다.

js, jquery 퍼센트 스크롤

1924 — Sun, 1 May 2022 16:44:44 +0900

js. jquery 퍼센트 스크롤

window.addEventListener("scroll", function () {
    var per = ((window.scrollY / (document.body.clientHeight - window.innerHeight)) * 100);
    box.style.width = per + "%";
    console.log(per.toFixed(0) + "%");
})

jquery

$(window).on("scroll", function(){
    var percent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100;
    $('.box__width').css('width', percent+"%");
    console.log(percent.toFixed(0) + "%");
})

스크롤 다룰 때 주의점

1. 스크롤 이벤트리스너 안의 코드는 1초에 60번 이상 실행된다.

그래서 스크롤 이벤트리스너는 많이 달면 성능저하가 일어나니 스크롤바 1개마다 1개만 쓰는걸 권장한다.

2. 스크롤이벤트리스너 안의 코드는 1초에 여러번 실행되다보니 바닥체크하는 코드도 여러번 실행될 수 있다.

그래서 이에 대해 처리를 해줘야 한다.

스크롤(scroll) 이벤트 사용법

1924 — Thu, 14 Apr 2022 19:12:24 +0900

스크롤 이벤트리스너

window.addEventListener('scroll', function(){
  console.log('123')
});

스크롤바를 조작하면 scroll 이벤트가 발생한다.
그래서 scroll 이벤트리스너를 전체 페이지에 달면

전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있다.
코드를 실행하고 스크롤을 조작하면 할때마다 123이 콘솔에 출력된다.

window 범위

참고로 window는 그냥 전체 페이지를 의미한다.

document도 전체 페이지인데 window가 약간 더 큰 개념이고

scroll 이벤트리스너는 관습적으로 window에 붙인다.

스크롤 관련 유용한 기능들

window.addEventListener('scroll', function(){
  console.log( window.scrollY )
});

-매우유용

window.scrollY 사용하면 현재 페이지를 얼마나 위에서 부터 스크롤했는지 px 단위로 알려준다.

window.scrollX 는 마찬가지로 가로로 얼마나 스크롤했는지 알려준다. (가로 스크롤바가 있으면)

window.scrollTo(0, 100)

window.scrollTo(x, y) 실행하면 강제로 스크롤바를 움직일 수 있다.
위 코드는 위에서부터 100px 위치로 스크롤해준다.

window.scrollBy(0, 100)

window.scrollBy(x, y) 실행하면 현재 위치에서부터 스크롤해준다.

위 코드는 현재 위치에서부터 +100px 만큼 스크롤해준다.

원래 이 코드를 실행하면 스크롤 위치가 순간이동되는데
bootstrap을 설치했을 경우 이상하게 천천히 이동된다.

이 것을 원치 않는다면 css파일 맨 위에 :root { scroll-behavior : auto }를 추가한다.

제이쿼리(jQuery) 스크롤

$(window).on('scroll', function(){
  $(window).scrollTop();
})

제이쿼리는 더 짧다.

$(window).scrollTop()를 사용하면 위와 같이 현재 페이지 스크롤 양을 알려주고,

더 간편한 건

$(window).scrollTop(100) 를 쓰면 페이지 강제이동도 해준다.

박스 끝까지 스크롤시 알림띄우기

이용약관을 다 읽으면 알림창 등을 띄우게 하고 싶다.
다 읽은 것을 확인하기 위해서는 스크롤을 다 내렸는지 확인해야한다.

1. div 스크롤바 내린 양 == div 실제높이일 경우
2. 알림창(alert)을 띄운다.

div 스크롤바 내린 양 구하는법

박스를 셀렉터로 찾고 .scrollTop 붙이면 스크롤바를 위에서 부터 얼마나 내렸는지 알려줍니다.
해당 박스의 셀렉터 뒤에 .scrollTop을 쓰면 위에서부터 얼마나 내렸는지 알려준다.

const lorem = document.querySelector(".lorem");

lorem.addEventListener('scroll', function(){
    console.log( lorem.scrollTop);
});

jQuery

$('.lorem').on('scroll', function(){
  var 스크롤양 = document.querySelector('.lorem').scrollTop;
  console.log(스크롤양);
});

div 박스 높이 구하는 법

스크롤바가 생긴 박스의 경우 스크롤가능한 실제높이가 궁금한 경우
셀렉터로 찾아서 .scrollHeight 붙이면 나온다.

lorem.addEventListener('scroll', function(){
    console.log( lorem.scrollTop);
    console.log( lorem.scrollHeight);
});

jQuery

$('.lorem').on('scroll', function(){
  var 스크롤양 = document.querySelector('.lorem').scrollTop;
  var 실제높이 = document.querySelector('.lorem').scrollHeight;
  console.log(스크롤양, 실제높이);
});

박스가 화면에 보이는 부분 높이는 .clientHeight 하면 나옵니다.

이 것은 일반 css로 설정한 height값 즉, 화면에 그대로 보이는 세로 값이 나옵니다.

이제 위와 같이 div 스크롤바 내린 양 == div 실제높이를 하려고 하는데

확인해보니 스크롤바를 끝까지 내려도 260이 나오고
div 실제 높이는 360이 나온다.

같다고 비교하면 조건성립이 불가능하다.

이렇게 서로 값이 맞지 않는 이유는

스크롤바 내린 양은 진짜 스크롤바만 내린 양 뿐이고,
박스가 보이는 높이는 포함하지 않아서 그렇다.

따라서

div 스크롤바 내린 양 + div가 화면에 보이는 높이 == div 실제높이일 경우

( lorem.scrollTop + lorem.clientHeight == lorem.scrollHeight )
를 조건으로 하면 성립된다.

여기서 주의할 것은

스크롤 내린 양은 정수단위로 나오지 않고
OS 마다 부정확해서 여유를 두고 비교해야한다.

그래서 끝까지 스크롤 한 값이 아닌 오차범위를 생각해서

끝에서 10px정도를 남기고 기준으로 잡는게 좋다.

10px정도 남긴 기준

lorem.addEventListener('scroll', function(){
    if(lorem.scrollTop + lorem.clientHeight >= lorem.scrollHeight-10){
        alert("통과");
    }
});

jQuery

lorem.on("scroll", function(){
    if(lorem.scrollTop() + lorem.innerHeight() >= lorem.prop('scrollHeight')-10){
        alert("통과");
    }
})

$('.lorem').on('scroll', function(){
  var 스크롤양 = document.querySelector('.lorem').scrollTop;
  var 실제높이 = document.querySelector('.lorem').scrollHeight;
  var 높이 = document.querySelector('.lorem').clientHeight;
  if (스크롤양 + 높이 > 실제높이 - 10) {
    alert('다읽음')
  }
});

return과 소수점 다루기 (parseFloat, parseInt)

1924 — Thu, 14 Apr 2022 10:22:28 +0900

return

함수를 반환해준다.

그리고 함수 종료의 뜻도 있다.

리턴을 만나면 함수가 종료되서 리턴 아래 코드들은 생략된다.

function 함수(){
  return 123
  console.log(456);
}

console.log(함수());

123을 출력해주고 함수가 종료되서 456은 출력되지 않는다.

변환기 역할

함수는 숫자를 집어넣으면 규칙에 따라 다른 숫자가 나오는 변환기역할을 한다.

변환기 만들 때 return 문법이 유용하게 사용된다.

예시 - 부가세 계산기

console.log(60000 * 0.1);
console.log(50000 * 0.1);
console.log(80000 * 0.1);

예를 들어 6만원, 5만원, 8만원짜리 상품 3개의 부가세를 구해서 콘솔창에 출력하려면

이렇게 필요할 때 마다 0.1을 곱해줘도 되겠지만

함수는 숫자를 넣으면 다른 숫자가 나오는 변환기 역할이므로

function vat(a){
  return a * 0.1
}

console.log(vat(60000));
console.log(vat(50000));
console.log(vat(80000));

함수로 구현하는게 좋다.
이렇게 부가세 구하고 싶을 때 마다 vat()안에 숫자만 넣으면 편리해진다.

소수연산 시 주의사항

console.log(1.1 + 0.3)

해당 코드는 1.4가 출력 될 것 같지만
1.40000000001 이 출력된다.

그 이유는 컴퓨터는 2진법으로 설계되어있다.
그래서 숫자도 2진법 숫자만 알아들을 수 있다.

컴퓨터에게 10 + 20 연산하라고 하면
전부 2진법으로 바꿔서 1010 + 10100 으로 연산하고 다시 10진법으로 바꿔서 보여준다.

무한한 숫자를 저장할 수 있는 저장장치는 없기 때문에
컴퓨터는 적절히 끊고 반올림해서 저장한다.

예시) 1.00011001100110011001101
그래서 소수점 연산은 아주 작은 오차가 발생한다.

해결법

1. 덧셈하기 전 10곱하고 덧셈 후 10으로 나눈다.
2. 외부라이브러리 사용
3. 오차는 무시할 정도로 작으니 반올림한다.

세세하게 정확한 계산이 필요한게 아니라면 대부분 그냥 반올림을 사용하면 된다.

소수점 반올림하는 법

console.log( (1.1 + 0.3).toFixed(1) );

숫자.toFixed(몇자리) 이것을 사용하면 된다.
모든 숫자 뒤에 붙일 수 있다.

주의점은 이렇게 하고 나면 '문자'로 변환한다.

'123'과 123은 다른 타입이라 주의해서 써야한다.

'숫자'를 숫자로 변환하고 싶으면

parseFloat('123')
parseInt('123')

해당코드를 사용하면 123을 그 자리에 남겨줍니다.

문자처럼생긴 숫자를 숫자로 변경해주는 유용한함수이다.

parseInt()는 정수로, parseFloat()는 실수로 변환해준다.

이 것을 사용하는 이유는
JS는 덧셈기호가 특이한 역할을 하는데

1 + 1 = 2 이지만
1 + '1' = '11' 이다.

+ 기호 사용 시 둘중 하나만 문자가 있어도 문자덧셈을 해줘서 이고,
문자덧셈은 두개의 문자를 이어붙여준다.