profile
나를 믿는 사람들을, 실망시키지 않도록

[CSS] 세로방향으로 글자 나열하기

가끔씩 일반적인 가로 방향이 아니라, 세로 방향으로 글자를 보여주고 싶을 때가 있다.한 글자씩 br태그로 나눠서 작성할까? 한 글자씩 p태그로 만들어줄까?더 간단한 방법이 있다. 한번 알아보자!코드부터 설명하자면 아래와 같다.간단하게 예시를 만들어보자.이 속성은 글자를

약 18시간 전
·
0개의 댓글
·

[CSS] 스크롤 숨김 처리하기

가끔 토이 프로젝트를 만들다보면 스크롤의 존재 여부가 은근히...UI에 방해가 될 때가 있다.이를 제거해보자. 물론, 기능은 그대로 존재하고!모든 페이지에서 스크롤을 없애기 위해서는 글로벌 스타일에 이를 적용하면 된다.필자는 React로 프로젝트를 만들었기에 글로벌 스

약 18시간 전
·
0개의 댓글
·

[React] 클릭 시 맨 위로 가는 버튼 구현하기

최근 웹이나 앱을 보면 어느정도 스크롤이 진행되고 나서 하단에 맨 위로 가는 버튼이 생기는 것을 어렵지 않게 볼 수 있다.50%의 확률로 보이는 것 같은데...이정도면 꼭 구현할 줄 알아야겠다!어떻게 하면 이를 구현할 수 있을까?기능을 구현하기 위해서 내가 알아야하는

약 19시간 전
·
0개의 댓글
·

[Typescript] useRef를 다른 컴포넌트에 props로 전달할 때

문제 상황 > Arrow Function Regular Function

2일 전
·
0개의 댓글
·

[Tailwind] 가상 클래스(pseudo class) odd, even 사용하기(ft.map 메서드)

CSS에서 nth-child(odd), nth-child(even)로 사용했던 홀수번, 짝수번 요소의 스타일 설정을 Tailwind에서는 어떻게 할까?순서에 따라 다른 스타일을 적용하고자 하는 그 태그에 odd와 even을 사용하면 된다.일반 CSS와 다를게 하나도 없

2일 전
·
0개의 댓글
·

[Tailwind] 이미지 hover시 확대 효과

쇼핑몰 등의 웹사이트에서 이미지에 마우스를 올리면 이미지가 약간 확대되는 효과를 흔히 볼 수 있다.이 효과는 어떻게 만들면 될까?Tailwind 문법으로 작성했다고 해서 일반 CSS와 다른 것은 없다.필자는 div -> img 순서로 감싸줬다.div는 이미지가 보일 크

2일 전
·
0개의 댓글
·

[Tailwind] background-image의 linear-gradient 사용하기

CSS의 속성 중 background-image를 통해 linear-gradient를 사용할 수 있다.이는 이름 그대로 그라데이션 효과를 줄 수 있는데, Tailwind에서는 어떻게 사용하면 될까?사용법 자체는 공식 문서에 나와 있다. 그런데...원래는 % 단위를 활용

3일 전
·
0개의 댓글
·

[React] NavLink 활성시 className 설정하기(ft. react-router-dom v6)

리액트로 프로젝트를 진행하다보면 react-router-dom을 사용하는 경우가 많다.그 중, NavLink는 해당 주소에 접근 중이면 특정 효과를 넣을 수 있게 해주는 기능이 있다.v6에서는 어떻게 적용할 수 있는지 알아보자!isActive를 사용하면 된다.to에 있

3일 전
·
0개의 댓글
·

[Tailwind] 사용자 정의 애니메이션 추가하기

Tailwind를 사용해 프로젝트를 진행하던 도중, 애니메이션 효과를 넣고싶었다.그런데...공식 문서를 보니 애니메이션 종류가 꽤 한정적이다..!(v 3.1.7)즉, 커스텀해서 사용해야한다는 것인데...어떻게 해야할까?얼마전 포스트에서 Tailwind에 사용자 정의 색

4일 전
·
0개의 댓글
·

[Typescript] React + Redux 사용하기

리덕스 자체도 굉장히 어려운 편에 속한다고 생각하는데, TS까지 섞여버리면 머리가 아프다..그치만, 크게 문제될 것은 없다.타입만 지정해주면 되기 때문에!이번에는 Typescript + React에서 기초적인 Redux 사용법을 기록하고자 한다.thunk나 promis

4일 전
·
0개의 댓글
·

[Tailwind] 사용자 정의 색상 추가하기

프로젝트를 진행하다보면 임의의 색상을 추출해서 사용할 때가 있다.그런데 Tailwind는 미리 정의된 색상 외에는 빠르게 사용할 수가 없다.3.1.7버전에서는 arbitrary values에 변수를 넣어서 사용하는 방법 또한 없다.(최소 필자가 알기로는 그렇다)그러면

6일 전
·
0개의 댓글
·

[React] Arrow Function으로 map() 사용시 주의점(ft.eslint 에러)

필자는 React에서 배열 원소에 같은 스타일을 적용하거나, 나열하고 싶을 때 map() 메서드를 사용한다.그런데...eslint 에러가 발생할 때가 있다. 아래와 같은 에러가 발생한다.Array.prototype.map() expects a return value f

7일 전
·
0개의 댓글
·

[Typescript] react-router-dom의 useLocation 사용법(ft. ts 2558 에러)

React에서 react-router-dom 라이브러리를 사용하여 Link 태그에 props를 전달하는 일이 가끔 있다.Typescript와 React를 함께 쓸 때 예전 방법 그대로 작성했더니 오류가 발생했다.해결방법을 알아보자!Typescript에서는 props를

7일 전
·
0개의 댓글
·

[Javascript] 배열의 끝 원소만 사용하기

오픈 API를 통해 받아온 데이터, 본인이 직접 설정한 데이터 등에서 배열은 흔히 찾아 볼 수 있다. 그런데, 특정 상황에서 배열의 끝 원소만 빼서 사용하고 싶을 때가 있을 것이다.예를 들어, 축구 오픈 API에서 어떤 리그의 시즌 정보가 들어가 있는 배열 중 가장 최

7일 전
·
0개의 댓글
·

[React] 무한 자동 슬라이드 구현하기(ft. Typescript, Tailwind)

문제 상황 > 최근 웹 페이지는 슬라이드 효과가 정말 많이 보인다. 다양한 상품을 보여주기 위해서 자동적으로 페이지가 넘어가기도 하고, 유저가 직접 페이지를 넘길 수도 있고, 원하는 슬라이드로 이동할 수도 있다. 많은 웹 페이지에서 쓰이는 만큼, 기본적으로 다룰 줄 알

2022년 7월 29일
·
0개의 댓글
·

[Typescript] React - useState를 props로 전달할 때의 타입 선언

React로 프로젝트를 진행하다보면 useState의 setState 부분을 다른 컴포넌트에 props로 전달 할 때가 있다.Typescript에서는 props로 전달되는 것들의 타입을 항상 지정해줘야하는데 setState의 경우는 어떤 타입을 명시해줘야할까?아래와 같

2022년 7월 26일
·
0개의 댓글
·

[Typescript] useRef와 Typescript를 같이 사용하는 경우

useRef는 current에 어떠한 값을 담고있는 상자를 만드는 React Hook이다.그 이상 그 이하도 아니다. 예를 들어보자.위 코드에서 exRef는 그저 1의 값을 담고있는 상자에 불과하다.우린 current를 통해서 useRef에 있는 값을 사용할 수 있게

2022년 7월 25일
·
0개의 댓글
·

[Typescript] React - useRef 사용시 "개체가 null(undefined)인 것 같습니다" 에러

useRef로 컴포넌트 하나를 ref로 참조하고, 그 컴포넌트의 style을 조정하려고 current를 사용하는 순간...! 붉은 줄이 쳐진다...(IDE는 VSC)도저히 무슨 에러인지 알 수가 없는데, 해결책을 찾아보자.필자는 아래와 같은 코드를 작성했었다.div 태

2022년 7월 25일
·
0개의 댓글
·

[Typescript] React에서 setInterval 사용하기

캐러셀 슬라이드를 구현하던 도중, 자동으로 슬라이드가 넘어가게 하기 위해서 setInterval()을 사용하려고 했다.그런데, 기능 활용법을 알아보던 중 React에서는 setInterval()의 동작이 의도한대로 작동하지 않는다는 글들이 쏟아져 나왔다. 무엇이 문제일

2022년 7월 25일
·
0개의 댓글
·

[Typescript] 배열의 원소로 객체가 있을 때 타입 선언

프로젝트를 진행하던 중 배열(Array)의 원소로 객체(Object)가 들어가야하는 상황이 있었다. 그 외에 string 타입도 들어가는 상황이었는데, Typescript에서는 이들의 타입을 일일이 정해줘야하므로 당혹스러웠다. 어떻게 하면 될까?우선 필자가 만들고자 했

2022년 7월 24일
·
0개의 댓글
·