기타/메모장
-
Broken Youtube Thumbnail error callback기타/메모장 2023. 10. 25. 20:50
Youtube Thumbnail URL 유튜브 썸네일을 이미지로 가져오기 위한 URL은 아래와 같다. https://img.youtube.com/vi/{videoID}/{type}.jpg https://i.ytimg.com/vi/{videoID}/{type}.jpg 이때 videoID에는 유튜브에서 제공하는 비디오의 id를 넣고, type에는 가져올 이미지의 해상도를 타입에 맞게 입력한다. 사용할 수 있는 타입은 아래와 같다. Resolution Type 320 x 180 mqdefault 480 x 360 0 720p or 1080p maxresdefault 업로더가 직접 업로드한 썸네일 original source original Broken Youtube Thumbnail 문제는 썸네일이 제대로 작..
-
WSL2 React 사용시 localhost 접속이 되지 않은 현상기타/메모장 2023. 2. 23. 14:06
문제 사항 Windows 컴퓨터를 기본으로 사용하고 있으면서, 개발을 위해서는 WSL을 따로 사용하고 있는 중이다. 평소에는 아무 문제없지만, 한 번씩 React(CRA)에서 npm start를 통해 프로젝트를 시작했을 때 localhost로 접속이 안 되는 경우가 종종 있다. React에서는 npm start 시 터미널에 해당 문구가 뜨면서 자동으로 브라우저에 localhost:3000 창을 연결해 띄워준다. 보통은 문제없이 사용하면 되지만, 한번씩 localhost에서 접속이 불가능한 경우가 있다. 해결법 1 사실 이건 해결법은 아니고 잠시 회피하는 느낌의 방법인데, 그냥 On Your Network에 쓰여진 172로 시작하는 내부망 IP주소를 이용해 접속하면 된다. 하지만 따로 사용하는 확장 프로그..
-
React(tsx)에서의 Redux 초기 세팅기타/메모장 2022. 10. 28. 13:20
NPM npm i redux npm i react-redux npm i @reduxjs/toolkit redux.tsx import { configureStore, createAction, createReducer } from "@reduxjs/toolkit"; export interface IReduxStore { value: number; } const initState: IReduxStore = { value: 0, }; export const addValue = createAction("ADD"); export const increment = createAction("increment"); export const decrement = createAction("decrement"); const my..
-
FontAwesome with React기타/메모장 2022. 9. 16. 12:47
SVG Core npm i --save @fortawesome/fontawesome-svg-core Add Icon Package npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-regular-svg-icons Add the React Component npm i --save @fortawesome/react-fontawesome@latest Total npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/react-fontawesome@..
-
CSS text-overflow기타/메모장 2022. 8. 12. 21:49
CSS에서 텍스트가 overflow 될 때 ...과 같은 식으로 뒤에 잘린 부분을 나타내는 방식이다. 먼저 텍스트가 overflow 되는 면적을 확실히 해야 하므로, width 속성을 설정해야 한다. 이후 overflow 속성은 hidden으로 한다. 다음으로 white-space 속성을 nowrap으로 하여 텍스트 줄 바꿈이 생기지 않도록 한다. 마지막으로 text-overflow 속성을 ellipsis로 설정하여 텍스트 부분이 overflow 되었을 때, ...의 방식으로 표현되도록 설정한다. width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 어쩌다 한 번씩 사용해서 그런지, 필요할 때마다 까먹어서 여기저기 다시..
-
Typescript promise generic type기타/메모장 2022. 8. 11. 22:30
문제 Javascript에서 Typescript로 넘어오면서 타입의 사용법을 조금씩 공부하고 있다. 그러면서 promise를 return 하는 경우를 타입으로 표현해야 하는 경우가 생겼다. promise의 경우 제네릭을 이용하여 어떠한 타입을 이후에 넘겨줄지를 미리 지정할 수 있다. 이때 promise에서는 resolve와 reject를 이용하여, 비동기적으로 결과값을 return 하거나, 에러를 return 할 수 있다. 여기서 에러값의 경우 보통 원래 return 하려는 타입과 아예 다른 타입이다. 따라서 promise에 사용하는 제네릭을 어떻게 해야 하나 고민했다. Promise와 같이 '|'를 이용해서 결과값 타입과 에러 타입을 동시에 표현해야 하나 싶었지만, 결론은 간단했다. 결론 그냥 Prom..
-
SVG에 background-image 적용하기기타/메모장 2022. 7. 20. 16:44
내가 svg를 주로 사용하는 이유는 웹 상에서 특정 형태를 자유롭게 그려낼 수 있기 때문이다. 따라서 이런 svg로 만든 특정 형태 안에 background-image를 적용해보고 싶은 경우가 상당히 많았다. 하지만 svg에서는 css의 background-image 속성이 적용되지 않는다. 따라서 아예 다른 방식을 시도해보려 한다. 아래에서 시도한 방식들은 모두 React(CRA)에서 사용된 방식이다. (기본적인 Html이 아니다.) 1. Clip-path svg를 이용해 Element를 생성하지 말고, 일반적인 div Element를 svg모양대로 잘라내는 설계도처럼 사용하는 방법이다. clip-path (CSS) clip-path 속성은 CSS에서 사용할 수 있는 속성이다. 해당 속성은 특정 범위를..