javascript

당신이 내년에 얻을 세 가지 - 랜덤 뽑기만들기 🎁

const getRandomNumber = (key: any) => { const randomNumber = Math.floor(Math.random() * key.length); return randomNumber; }; 당연함. 같은 걸 세 개 출력하니까... 난 다 랜덤으로 나오면 좋겠는데! c++배울 땐 어떻게 처리했더라 프리캠프 때 싸이월드 로또 뽑기 할 때도 했었는데 ... 그래서 그때로 돌아가보았다. 설명 좀 잘 써놓지.... 뭐라는거지?! 아 지금 생각났는데 랜덤으로, 중복없이 세 개 뽑으려면 마구잡이 순서로 배열된 애들 중에서 0,1,2만 뽑으면 되겠다~~ 너무 추워서 다리랑 발이 시렵다.. 발은 이미 너무 차가워 추워서 몸을 오그린채로 하고 있다 난수를 두 개 만든다. 빵 : Math...

[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..

[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, 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을 이용해서 이름 입력받고 보여주기 🕙 시계 이름을 입력하면 로컬스토리지에 저장한다. 💘 디데이 특정날짜까지 남은 시간을 계산하여 보여준다. '디데이까지'라는 문구는 수정할 수 있다. 📝 투두리스트 할 일 입력 후 엔..

[Next.js] Next.js 설치

이번에 알아보면서 느낀건데, 내가 SSR과 CSR을 거의 잘못 알고 있었던 것 같다. 지금까지 생각하던 건 / 리액트 왜 쓰나 - SPA를 위해, 넥스트 왜 쓰나 - SSR을 위해, SSR은 왜 필요한가 - SEO 최적화 위해 / 였다. 그러면서 SPA는 SSR을 전제로 하고 있는 줄 알았다(위에 말이랑 약간 모순되긴 하지만 생각없이 외워서 그렇다). 그러나 그게 아니였고, 리액트는 CSR 위주로 돌아간다고 한다....!(대충격ㅎ) 그리고 넥스트는 리액트의 프레임워크, 즉 라이브러리의 프레임워크다. 넥스트는 첫 페이지를 백엔드에서 렌더링(프리렌더링)해서 SEO에 유리하게 만들어준다. 그리고 CSR을 부분적으로 사용하여 SSR의 단점인 페이지 전체를 받아와야하는 등의 단점을 보완했다고 한다. https:/..

[javascript] 바닐라 JS로 크롬 앱 만들기 - 오늘의 기분 선택하기, 디데이까지~

// index.html 뒹굴뒹굴 스트레스 라라라라 // mood.js const moods = document.querySelectorAll(".mood li"); const moodImg = document.querySelector("#mood-img"); console.log(moods); const todayMood = ["뒹굴뒹굴", "스트레스", "라라라라"]; const onClickMood = (event) => { todayMood.map((image) => { switch (event.target.innerText) { case image: moodImg.src = `img/${image}.gif`; return; default: return; } }); }; moods.forEach(..

[react] Modal 스크롤 막기

Modal창이 fixed면 스크롤이 있을 때 맨 상단으로 올라간다고 한다... position도 바꿔보고, body의 overflow를 hidden으로도 해봤는데 그래도 계속 맨 위에서 떴다. 구글링해서 가져온 코드에서 조금(이라고 썼지만 오래 걸렸다..) 수정했다. Modal 이 켜질 때, 없어질 때에 body.style과 scroll을 바꾸는 식이다. const body = document.querySelector("body") as HTMLElement; const [scrollPositions, setScrollPositions] = useState(window.scrollY); window.addEventListener("scroll", () => { if (window.scrollY !== 0..

[css] 자릿수 계산하기,,, 고정되지 않은 width값 transition 주는 방법 알고 싶다.

별점 매기는 컴포넌트 width값이 고정되어 있지 않고, padding값만 고정된 상태로 만들어 달라는 요청을 받았다. (원래는 width가 2.5의 width에 맞춰져있어서 padding이 고정이 아니였다.) padding값을 주고, width는 isOn이 false일 땐 값을 안주려고 했더니 transition이 안 먹는다. width: ${(props: IRatingBtnProps) => (props.isOn ? "160px" : "")}; auto로 해도 안 먹는다. 100%로 하면 버벅인다. transition은 두 상태 사이에 점진적인 값이 있을 때 가능하다고 한다. 즉 visibility 같은 경우엔 visible, hidden 값이 두 개 뿐이기 때문에 안된다고 한다! 결국 쓴 방법은 se..

SSR vs CSR

SSR(Server Side Rendering) - 웹사이트 렌더링이 서버 쪽에서 일어난다. 1. 웹 페이지를 방문하면 웹 서버는 사용자의 브라우저에 응답을 보낸다. 2.사용자의 브라우저에서 페이지가 렌더링 되는 한편, 브라우저는 자바스크립트를 다운로드한다. 3. 브라우저가 자바스크립트를 실행한다. 4. 이제 사이트를 이용할 수 있다. 장점 - 첫 로딩이 빠르기 때문에 UX에 좋다. - 검색 엔진이 콘텐츠를 읽기 위해 자바스크립트를 실행할 필요가 없다. -> SEO에 최적화 되어 있다. - 정적 사이트에 좋다. 단점 - 페이지마다 매번 다운로드 해야 한다. - UI가 완전 새로고침 된다. - 각 페이지 로드마다 서버를 거쳐야 한다는 점에서 속도 저하가 일어날 수 있다. - 보통 더 큰 서버를 요구한다. ..