profile
당신을 한 줄로 소개해보세요

[React] 툴팁 만들기

툴팁 만들기https://velog.io/@bisari31/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%99%B8%EB%B6%80-%EC%98%81%EC%97%AD-%ED%81%B4%EB%A6%AD%EC%8B%9C-%EB%8B%AB%EA%B8%B0

2022년 5월 9일
·
0개의 댓글
post-thumbnail

React Query로 데이터 fetching 하기

Coins.tsxnpm install react-queryindex.tsx에서 QueryClient와 QueryClientProvider를 import 하고 App 컴포넌트를 감싸주면 App 컴포넌트와 자식 컴포넌트는 useQuery를 사용할 수 있게 된다.index.

2022년 2월 2일
·
0개의 댓글
post-thumbnail

[React-Router v6] useMatch

React-Router v5의 useRouterMatch가 v6로 넘어오면서 useMatch로 변경되었다.useMatch()의 인자로 url을 넘기면 해당 url과 일치할 경우 url의 정보를 반환하고, 일치하지 않을 경우 null을 반환한다.일치할 경우일치하지 않을

2022년 2월 2일
·
0개의 댓글
post-thumbnail

useEffect 활용 팁

의존성 배열에는 state 값을 넣고 state 값이 바뀔 때마다 useEffect가 실행되는 식으로 활용하는 줄만 알았는데 boolean 값으로 평가되는 비교식도 들어갈 수 있다는 걸 알게 됐다.아래는 getWinNumbers()로 총 7개의 로또 번호를 뽑아 배열

2022년 1월 27일
·
0개의 댓글

[React-Router v6] Nested Routes

React-Router v6에서 nested routes를 구현하는 방법엔 두 가지가 있다.첫 번째는 부모 route의 path 마지막에 /\*를 적어 명시적으로 이 route의 내부에서 nested route가 render 될 수 있음을 표시하고 자식 route를 부

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

[Typescript] Interface 쉽게 작성하기

API로 받아온 JSON 형식의 데이터로 interface를 작성할 때가 있다. 해당 key의 자료형이 뭔지 일일이 적어주곤 했는데, 구조가 조금 복잡해지고 depth가 깊어지면 key 하나하나 복사 붙여넣기 하면서 자료형 작성하기가 번거로워진다. 이를 해결해보겠다.i

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

Styled-Components 간단 정리

리액트에서 스타일링을 하는 데에는 크게 세가지 방법이 있다. 아래는 그 중 하나인 인라인 방식이다.보다시피 구구절절 거추장스럽다.이보다 한 단계 나은 module.css 방법도 있는데, 파일을 옮겨가며 className 붙여넣기 해줘야 하고, 특정 조건에 따른 스타일을

2022년 1월 12일
·
0개의 댓글

HTML 간 데이터 전송

HTML 간 데이터 전송 방법을 알아본다.

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

forEach, for of, for in

// outer라는 식별자가 붙은 레이블 for 문// 현업에서는 객체와 햇갈려서 잘 안쓰는 편// 할꺼면 function으로.hojun: for (var i = 2; i < 10; i++) { for (var j = 1; j < 10; j++) {

2021년 11월 30일
·
0개의 댓글

[TIL] 1125 LikeLion🦁 FES 19

SASS에서 JS와 마찬가지로 조건문, 반복문, 함수를 사용할 수 있다. 앞에 @를 붙인다는 것만 빼면 비슷하게 동작한다.원하는 조건을 설정하고 조건을 만족하는 경우에만 스타일을 부여할 때 사용한다.아래는 $circle의 값이 참이면 border-radius 값을 $s

2021년 11월 25일
·
0개의 댓글

[TIL] 1124 LikeLion🦁 FES 18

unzip z.zip압축파일 z.zip을 압축해제한다.zip -r a.zip ./d경로 d에 있는 파일들을 압축해서 a.zip이라고 한다.alias현재 가명들의 목록을 출력한다.alias ls='ls -a'ls -a라는 명령어를 ls라는 가명으로 한다unalias ls

2021년 11월 24일
·
0개의 댓글

[TIL] 1123 LikeLion🦁 FES 17

cd (change directory)clear 콘솔 비우기mkdir (make directory) 폴더명 : 폴더 생성mkdir -p one/two/three : 폴더 one 안에 폴더 two 안에 폴더 three 생성mkdir four;cd four : 폴더 fou

2021년 11월 23일
·
0개의 댓글

[TIL] 1122 LikeLion🦁 FES 16

Image Replacement(이미지 대체)의 약자이다. 백그라운드에 넣어서 안 보이는 이미지 스크린리더 사용자에게 이미지에 대한 설명이 필요할 때, 이미지를 대체하는 텍스트를 제공하는 기법이다.visibility: hidden; : opacity: 0;처럼 화면에선

2021년 11월 22일
·
0개의 댓글

[TIL] 1119 LikeLion🦁 FES 15

inline 요소들엔 몇가지 특징이 있다.컨텐츠만큼의 크기를 가진다.width와 height가 적용되지 않는다.margin과 padding은 상하를 제외한 좌우에만 적용된다.padding은 상하도 적용되는 것처럼 보이기만 할뿐 실제론 좌우만 적용된다.이런 특징을 가진

2021년 11월 19일
·
1개의 댓글

[TIL] 1118 LikeLion🦁 FES 14

이전 글(CSS로 checkbox 꾸미기(https://velog.io/@cnsrn1874/TIL-1112-LikeLion-FES-10바로 키보드의 tab키로 사이트를 탐색할 때 로그인 상태유지는 focus 하지 않고 지나치는 것이었다. 이렇게 되면 시각장애인

2021년 11월 18일
·
1개의 댓글

[TIL] 1117 LikeLion🦁 FES 13

브라우저의 탭을 보면 탭마다 각 사이트를 나타내는 조그마한 이미지가 있는 걸 볼 수 있는데, 이걸 Favicon(favourites+icon)이라고 한다.Favicon & App Icon Generator에서 쉽게 만들 수 있다.디바이스들을 제대로 지원하려면 Gener

2021년 11월 17일
·
1개의 댓글

[TIL] 1116 LikeLion🦁 FES 12

그리드 아이템인 .aside에 grid-area: aside를 부여해놓고 .container의 grid-template-area에서 사용하지 않아서 생긴 문제이다.grid-template-area에 aside의 자리를 추가해주면 해결된다.z-index가 동작하지않는 이

2021년 11월 16일
·
1개의 댓글

[TIL] 1115 LikeLion🦁 FES 11

rel="preconnect"의 사용preload, prefetch, preconnect웹폰트 최적화 하기웹 폰트 사용과 최적화의 최근 동향<link rel="preconnect" href="font 주소">현재 페이지에서 외부 도메인의 리소스를 참고하는 것을 브

2021년 11월 15일
·
0개의 댓글

[TIL] 1112 LikeLion🦁 FES 10

크롬에서 아래의 확장 프로그램을 설치해준다.피그마에서 배율을 100%로 조정하고 시안을 캡쳐한다.캡쳐한 결과물을 저장한다.검사하려는 HTML 문서를 LiveServer로 연 후 PerfectPixel을 실행한다.Add your first layer! 버튼을 클릭한 뒤

2021년 11월 12일
·
0개의 댓글

[TIL] 1111 LikeLion🦁 FES 09

이해하기 쉬운 픽셀 밀도디바이스 별 픽셀 밀도레티나 디스플레이 대응Retina 디스플레이에서 이미지가 흐려지는 문제 대응법

2021년 11월 11일
·
1개의 댓글