분류 전체보기

[react-youtube] 재생목록 있는데 그 안에서 랜덤 재생하게 하고 싶어.

[react-youtube] 재생목록 있는데 그 안에서 랜덤 재생하게 하고 싶어. 에 대해서는... 아직 하는 중 지금은 랜덤 재생까지만 됐다 yarn add react-youtube 까는 시간이 짱 오래걸린다... 이 글을 보기 전에 은췌 글 업데이트 된 것까지 보고 왔는데도 아직도 안 깔렸다. 뭔가 잘못된 거 아닌가 싶을 정도로 오래 걸린다... 음 정말 잘못된거였네. . .다른 프로젝트에 깔고 있었다. 뭐가 videoId인지 몰라서 중간에 Id처럼 생긴값을 복사해서 넣어봤다. import YouTube, { YouTubeProps } from "react-youtube"; export default function Music() { const options: YouTubeProps["opts"] =..

[css] Input Animation, Styled-Components로 바꿔서 사용하기, input selector

export const GameInput = styled.input` transition: all 0.8s ease-in-out; &:focus { cursor: pointer; ${GameImg} { transform: scale(1.2); } ${GameTitle}::after { opacity: 1; } ${PlayBtn}::before { opacity: 0.6; } ${PlayBtn}::after { opacity: 0; } ${GameLike} { opacity: 1; } } `; styled.div 를 styled.input으로 바꾸면 focus 했을 때 다른 요소들에게 영향을 주지 못한다. 라벨라벨 이렇게 만들어서, export const Modal = styled.div` width: 3..

누군가의 생존신고

매일 오후 2시쯤 나는 밖에서 나는 오토바이 소리에 귀 기울였다. 4층 건물의 옥탑에 살았던 지라, 오토바이 소리는 귀 기울이지 않으면 잘 들리지 않았다. 하지만 난 아빠의 오토바이 소리만큼은 알 수 있었다. 바쁜 점심시간은 피해서, 조금 한가해졌을 때, 오토바이 소리가 들리면, 1분 뒤쯤 아빠가 문을 열고 들어왔다. 뚜렷한 기억이 있는 건 아니지만 엘리베이터가 없는 빌라였기에 아빠는 다소 거친 숨을 내쉬었으리라. 프랜차이즈 햄버거 집에서 배달 기사로 일하던 아빠는 항상 내 점심을 가져다주셨다. 나는 집에서 게임을 하다가 아빠가 준 햄버거를 받고, 햄버거를 먹고선 다시 게임을 했다. 가끔은 오토바이 소리를 듣고 옥상에 나가서 기다리기도 했다. 주머니가 많이 달린 그물 같은 조끼를 입은 아빠. 가끔 우리는..

🐶🐱내사랑 바둑이 유기견 보호소 봉사활동🐾🐾

#핌피바이러스 당곡역에서 12시 30분까지 모였다! 기다릴 때 옆에 일행으로 추측되는 분이 계셨지만 혹시 몰라서 말은 안 걸고 서있었다. 모당시... 모든 것은 당근케이크에서 시작됐다. 이름이 마음에 들었다! 30분 조금 지나서 출발~~~ 가는 길은 진짜 시끌벅적, 처음 뵙는 분들이었는데, 정말 건강하게 자란 ENFP의 표본인 조이님 덕분인지 말이 술술 나왔다. 약간 TMI까지 말하면서... 경님이 처음인데 그런 말을 잘 하시네요, 하셔서 소감이 어떠냐고 여쭤봤는데 매우 엔프피 답다는 소리를 들었다ㅋㅋㅋ 이런 말 듣는 거 좋아! 강아지 얘기를 주로 많이 했다. 내가 취업하고 바뀐 우리집의 분위기도 말하고~ SNS, 임보 등에 대한 이야기도 하고 팅커벨 프로젝트에 대한 얘기도 듣고 1시간 30분 정도가 훌..

[css] grid는 어려월... repeat(auto-fill, minmax(285px, 1fr));

export const BoxWrapper = styled.div` display: grid; flex-direction: row; gap: 25px; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); @media ${breakPoints.screen4} { grid-template-columns: repeat(3, minmax(285px, 1fr)); } `; export const SearchWrapper = styled.div` display: grid; flex-direction: row; gap: 25px; grid-template-columns: repeat(auto-fill, minmax(285px, auto)); @media ${..

[react-slick] 페이지 번호, 커스텀 화살표

import { useState } from "react"; // img import { ReactComponent as NavArrowRightIcon } from "../../../assets/svg/ic_nav_arrow_right.svg"; import { ReactComponent as NavArrowLeftIcon } from "../../../assets/svg/ic_nav_arrow_left.svg"; 최상단 import 부분 const images = [ "https://i.ytimg.com/vi/i2i0uzo92gE/maxresdefault.jpg", "https://i.ytimg.com/vi/6rTljE9sd68/maxresdefault.jpg", ]; function NextArro..

[emotion, styled-component] 이거에 마우스 올렸을 때 저거의 가상요소가 변했으면 좋겠어!

export const GameBox = styled.div` display: flex; flex-direction: column; transition: all 0.8s ease-in-out; &:hover { cursor: pointer; ${GameImg} { transform: scale(1.2); } ${GameTitle}::after { opacity: 1; } ${PlayBtn}::before { opacity: 0.6; } ${PlayBtn}::after { opacity: 0; } ${GameLike} { opacity: 1; } } margin-bottom: 64px; `; GameBox에 hover시 GameImg, GameTitle의 가상요소 after, PlayBtn의 가상요소 be..

[react, query] 좋아요의 상태가 이상했던 이유

리패치하는 시점의 문제였다. async await 문제인가??? 엄청 헤맸는데... // 게임 좋아요 api const likeMutation = useMutation(gameLike, { onSuccess: (data) => { console.log(data); if (data?.nolike === "not user") { let alertModal: any = { onoff: true, title: null, text: "로그인 후 이용해주세요.", }; dispatch(set_alert_modal(alertModal)); } else { gameRefetch(); //

[css] 가상 요소, hover transition, 그라디언트 transition 주기

💨 부모 요소에 opacity를 주면 자식 요소의 opacity도 변하는데, 그것을 막기 위해 가상 요소를 썼다. 💫 그냥 color -> gradient transition은 깜빡임이 발생한다! 🤍 gradient는 transition 효과가 없다. 💨 부모 요소에 opacity를 주면 자식 요소의 opacity도 변하는데, 그것을 막기 위해 가상 요소를 썼다. 찍어놓은 건 아니지만, 재생 아이콘이 같이 투명해지는 문제를 수정해달라고 하셔서~~~ export const PlayBtn = styled.div` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: cen..

[styled-component] 마우스 hover effect

export const GameTitle = styled.span` // 게임 이름 ${font.h3_medium}; width: max-content; // 글자가 있는 만큼만 width를 갖게 된다. (!!!) transition: all 0.8s; &::after { // 게임 이름에 밑줄, 원래는 투명한 상태 display: block; content: ""; border-bottom: solid 1px white; opacity: 0; } `; export const GameVideo = styled.div` // 이미지랑 버튼 등 넣는 틀(?) position: relative; width: 285px; height: 180px; overflow: hidden; border-radius: 4p..

[javascript] 바닐라 JS로 크롬 앱 만들기 - 끝

결론적으로 졸업작품은 못 냈다...... 다 만들어놓고 이것저것 수정해야지~ 하고는 연휴동안 까먹었다!!! 만들 때 창을 작게 띄워놓고 하는데 그래서 그런지 엄청 조그맣게 만들어졌다ㅋㅋㅋ ^^ㅠㅠ css 부분은 거의 포기했다고 보면 된다. 스타일 컴포넌트랑 scss 쓰다가 css 쓰니까 하나하나 효과를 따로 줘야하는 부분이 너무 많았다. 🖐 form을 이용해서 이름 입력받고 보여주기 🕙 시계 💘 디데이 📝 투두리스트 💞 랜덤 배경화면 🌈 위치 받아서 날씨 알려주기 💤 오늘의 기분 🖐 form을 이용해서 이름 입력받고 보여주기 🕙 시계 이름을 입력하면 로컬스토리지에 저장한다. 💘 디데이 특정날짜까지 남은 시간을 계산하여 보여준다. '디데이까지'라는 문구는 수정할 수 있다. 📝 투두리스트 할 일 입력 후 엔..

[원티드] 프리온보딩 SPA Router 구현하기

숙제를 몇 번이고 봤지만 무슨말인지 잘 이해가 되지 않았다... 난 대체 어느 수준인지에 대해 약간 자괴감을 느꼈다. 결국 다른 분꺼 숙제의 흐름을 따라가면서 떠듬떠듬 해보기로 했다. 일단 뭔가를 띄워냈다는 것에 . . . ㅎㅎ 일단 이건 app.jsx에서 만든 AppRouters를 불러왔을 때의 모습 "/"로 해도 "/about"이 되고 컴포넌트 두 개가 모두 동시에 뜬다. 여기서부턴 혼자 좀 생각을 해보자... import AboutPage from "../pages/About"; import MainPage from "../pages/Main"; import Route from "./Route"; import Router from "./Router"; export default function Ap..