본문 바로가기

Programming

 (80)
[CSS] 선형 그라데이션 효과 넣기 (색깔 밑줄 긋기) 특정 글자에 강조하고 싶은 경우에 사용하면 좋을 것 같다. 나는 아래에서 위로, 하늘색에서 하얀색으로 4:6 비율로 효과를 주었다. 전체 코드 background: linear-gradient(to top, skyblue 40%, white 60%); 결과 화면 참고 사이트 더보기 https://www.codingfactory.net/10838
[Error] ts(2532) : (property) MutableRefObject<undefined>.current: undefined 해결하기 에러 원인 Object is possibly 'undefined'.ts(2532) 라는 문구로 보듯이 useRef를 사용하면서 타입 지정을 해주지 않아서 오류가 발생했다. 에러 해결방법 import React, { useRef } from "react"; const Test = () => { const router = useRouter() const ref = useRef(); // 타입 지정 const screenHeight = ref.current.clientHeight; return ( ) } export defualt Test;
[React] Typescript + useRef (Forwarding Refs) : HTMLInputElement 요소 받아오기 리액트에서는 되도록 돔탐색을 하지 않는 것이 좋다고 한다. 그래서 useRef를 사용해보았다. 전달하는 대상이 Html 엘리먼트가 아닌 컴포넌트 타입이라면 ref를 전달하기 위해 아래와 같이 사용하는 것이 좋겠다! useRef : HTMLInputElement 요소 받아오기 import useRef React ref를 생성하고 ref 변수에 할당 ref를 JSX 속성으로 지정해서 ref={ref}으로 전달 이러한 과정을 거치면, ref.current는 DOM 노드를 가리키게 된다!! 이전 코드 더보기 import React from "react"; const Test = () => { const handleScroll = () => { const screenHeight = document.querySel..
[CSS] Position : relative, absolute 위치 설정하기 CSS를 만질 때, position은 가장 기본이지만 헷갈리는 부분인 것 같다. 그래서 그 중에서도 많이 사용되는 relative, absolute를 정리해보았다. Position 속성 속성 의미 static 기준 없음 (배치 불가능 / 기본값) relative 요소 자기 자신을 기준으로 배치 absolute 부모(조상) 요소를 기준으로 배치 fixed 뷰포트 기준으로 배치 stickey 스크롤 영역 기준으로 배치 위의 position 속성으로 기준을 잡고, 그 기준에 맞춰 위쪽, 아래쪽, 왼쪽, 오른쪽에서의 거리를 설정한다. Relative vs Absolute 한 눈에 보기 좋은 참고 이미지가 있어서 가져와보았다. 위치 뿐만 아니라, 다른 요소에도 영향을 줄 수 있는 부분을 참고하면 좋을 것 같다. ..
[JavaScript] map(), filter(), reduce() map() callback : 새로운 배열 요소를 생성하는 함수 반환값 : 새로운 배열 아래 코드 예시를 보면, map()을 통한 결과는 새로운 배열을 반환했기 때문에 result[0]의 자리를 바꾸어도 기존 array에는 영향을 주지 않는 것을 알 수 있다. 하지만, copy는 array의 메모리 주소를 복사하여 두 객체가 동일한 메모리 주소 값을 가지고 있기 때문에 결과적으로 copy[0]의 값을 바꾸면 array의 값에도 영향이 가는 것이다. let array = [1, 2, 3]; let result = array.map((num)=> num); result[0] = 40;// [1, 2, 3] let copy = array; copy[0] = 40;// [40, 2, 3] 내장 객체 이용하기 l..
[CSS] Styled-components + 동영상으로 화면 전체 채우기 인트로 페이지를 구현하는 도중, 화면을 확대하거나 축소해도 동영상이나 이미지가 화면에 꽉차게 하고 싶었다! 방법은 아주 간단하다. 하지만 매번 헷갈리기 때문에.. 정리해보았다. 아래는 동영상으로 화면 전체를 채운 예시이다~! 동영상으로 화면 전체 채우기 부모에 width 100%, height 100vh 주기 자식에 position: absolute, top/left: 50%, transform: translate(-50%, -50%) 주기 태그에 object-fit: cover 주기 전체 코드 import React from "react"; import styled from "styled-components"; const Intro = () => { return ( ) } export default I..
[React] <video> 태그를 이용한 동영상 재생하기 동영상을 프로젝트 메인에 자동으로 재생하고 싶었는데, 마침 쉽고 간단하게 구현할 수 있는 방법이 있어서 공유한다! 만약 동영상으로 화면 전체를 채우고 싶다면! 참고! 2022.06.25 - [Programming/CSS] - [CSS] Styled-components + 동영상으로 화면 전체 채우기 [CSS] Styled-components + 동영상으로 화면 전체 채우기 인트로 페이지를 구현하는 도중, 화면을 확대하거나 축소해도 동영상이나 이미지가 화면에 꽉차게 하고 싶었다! 방법은 아주 간단하다. 하지만 매번 헷갈리기 때문에.. 정리해보았다. 아래는 동 aldrn29.tistory.com React 동영상 재생하기 public 폴더 하위에 동영상 파일 추가 (.mp4가 아닌 파일은 적용되지 않는걸까...
[JavaScript] 문자열 추출하기 : slice(), splice() 이상하게.. 저 두 함수가 너무 헷갈려서 정리해봤다. slice() Array.slice(begin, end) : 어떤 배열의 begin부터 end(미포함)까지 새로운 배열을 반환한다. 만약 end가 없을 경우 배열의 끝까지 추출한다. 음수는 배열의 끝에서부터 길이를 나타낸다. begin Optional : 추출 시작점 인덱스 end Optional : 추출 종료한 인덱스 (end 인덱스를 제외하고 추출) 반환값 : 새로운 배열 let alphabet = ['a', 'b', 'c', 'd', 'e']; // 0 1 2 3 4 // -5 -4 -3 -2 -1 let result1 = alphabet.slice(0, 2); // ['a', 'b'] let result2 = alphabet.slice();//..

티스토리툴바