기타
-
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@..
-
Git Merge기타/Git 2022. 8. 25. 01:09
Merge 기초 프로젝트를 진행하면서 각자 맡은 부분에 따라 서로 다른 branch들을 생성하다보면, 언젠가 서로 나뉜 브랜치들을 하나로 병합해야하는 순간이 오기 마련이다. 이때 Git에서는 이러한 branch끼리의 병합(Merge)을 어떠한 과정으로 처리하고 해결하는지 알아보려 한다. 아래의 시나리오는 git 공식 홈페이지에서 제공하는 문서를 참고하여 작성하였다. 1. 기본적인 master branch 먼저 어떠한 branch도 사용하지 않은 상태를 나타내보았다. 각 commit은 branch의 변경없이 기본 branch인 master에 commit한 상태이다. 여기서 만약 새로운 문제를 하나 처리해야한다고 생각해보자. branch에 대한 개념이 없다면, 그냥 master branch에서 문제를 해결하..
-
Git Branch기타/Git 2022. 8. 24. 20:36
기본 개념 Git은 소스코드 관리를 위한 분산 버전 관리 시스템으로, 하나의 프로젝트를 진행할 때 여러 팀원이 다 함께 작업하는 환경에서도 원활하게 소스코드 관리를 할 수 있도록 도움을 준다. 동일한 소스코드를 가지고 팀원들은 각자 맡은 업무에 따라, 새로운 기능을 구현하거나, 기존의 버그를 고치거나 하는 식의 서로 다른 작업을 동시에 진행한다. 이렇게 여러 사람이 동일한 소스코드를 기반으로 해서 서로 다른 작업을 진행한다면, 이후의 결과는 진행한 작업의 수만큼 서로 다른 결과물이 나오게 된다. 따라서 여러 개발자들이 동시에 다양한 작업을 진행하기 위해서는 독립적으로 작업을 하기 위한 공간이 필요하고, 이를 branch라고 한다. 하나의 나무 기둥에서 여러 나무줄기가 뻗어 나오듯이, 하나의 소스코드에서 ..
-
Git 초기 세팅기타/Git 2022. 8. 24. 19:14
※ 이번 포스트는 Windows 운영체제 위에서 wsl2(ubuntu)를 이용해 실습하였습니다. Git init git을 이용해 버전 관리를 하고 싶은 프로젝트가 있다면, git init을 이용해 버전 관리를 시작할 수 있다. 해당 내용에 대한 실습을 위해 먼저 아래와 같이 새로운 디렉터리를 생성하여 이동하였다. $cd ~/practice $mkdir git $cd git 여기서 ls -al 명령어를 이용해 해당 디렉터리 상태를 확인해 보면, 아무런 파일도 존재하지 않음을 확인할 수 있다. $ls -al total 8 drwxr-xr-x 2 cookie cookie 4096 Aug 24 19:00 . drwxr-xr-x 6 cookie cookie 4096 Aug 24 19:00 .. 이 상태에서 git..
-
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; 어쩌다 한 번씩 사용해서 그런지, 필요할 때마다 까먹어서 여기저기 다시..