프론트엔드✏️/개인공부

[Todo] Checkbox, 형광펜 긋기, 네비게이션 모르겠다

요즘은 생각을 블로그로 하는 듯 맞다 블로그에 눈 오는 거 추가했다 노마드코더 영상 보고,, 아 썼던가? 체크박스를 추가하고 체크가 되면 줄 그이게 하기 checkbox에 대해 좀 더 알아보자.. 왜 체크해도 아무런 반응이 없지? 했는데 생각해보니 checked 됐을 때 바뀌어야 하는 건 todo item이다... 그럼 어쩌란말인가 이모션밖에 몰랐던 나에게 ,,, 나 정말 기초가 없네 ~ 일반 형제 결합자 같은 부모를 공유하는 두 번째 요소 선택 왜 반응이 없지 캡쳐는 실수로 아무것도 체크 안 한 걸 한건데 체크해도 반응없음 ㅎ; +도 안되고 그냥 띄우는 것도 안되고 delete-button(저긴 오타났지만 수정했음...)도 안되는 걸 보면 내가 분명 뭔가 단단히 잘못한 것 같은데ㅠ checkbox:ho..

[Todo] 아이템 삭제하기 delete item

딸기랑 꿀 먹는데 생각보다 맛있어서 행복하당 지금 만드는 거 id를 item 그 자체로 설정해놔서 하늘보기 하나만 지워도 두 개가 없어진다. id를... 어떻게 해줘야지? 하다가 장바구니랑 비슷한 것 같아서 장바구니 로직을 보기로 했다. 보니까... 장바구니는 아이템을 담을 때 아이템 자체에 id값이 있었다. 그럼 나도! 저거 만들 때 랜덤으로 id를 만들어주자,,, 근데 어떻게...? 왜 생각이 안 날까? 객체를 만들어야 할 것 같은데 이렇게 했는데 이젠 눌러도 아무 반응이 없다. 나 투두리스트도 못 만드는데 어떻게 먹고 살지? 아 이건 uuidv4로만 써서 생긴 문제였다. uuidv4() 라고 써줘야한다... 왤까? 원리가 뭘까...? 왜 얘는 ()를 써줘야하는가 일단 그래서 만들고 지우는 것까진 된..

[Todo] 시작

추가하면 빈거 하나가 같이 추가되는 현상,,, 영어는 괜찮은데 한글은 안eho input에 한글 치고 엔터 누르면 엔터가 두 번 눌리는 현상 press로 하면 괜찮다고 한다. 왜지? onKeyDown, onKeyUp 을 onKeyPress로 바꾸니까 됐다.

Styled-Components

[firebase] send하고 fetch하고 ?

프로젝트 이름은 나와도 상관없겠지? 프로젝트를 만들고 해당 프로젝트에 앱을 등록해야 한다고... 첫 화면에서 추가하라고 한데서 누르면 되는 것 같음 등록하니까 yarn add firebase 그리고 Firebase를 초기화하여 SDK를 사용하라는데, SDK가 뭔가. A software development kit 라고 한다. firebase/app에서 initializeApp, firebase/anlytics에서 getAnalytics 이런 걸 말하는 건가봄 난 항상 이런 걸 보면 당황스럽다. 어디서 초기화를 해야될지 모르기 때문이다... 그냥 내 기억상 app.tsx에 했던 것 같아서 거기에 복붙했다. 환경 변수 배웠으니까 이걸로 바꿔줬다 ㅋㅋㅋ 이러면서 무한재로딩 되길래 그냥 저거 주석처리 해버렸다...

setState 리렌더링이 일어나지 않아, 모멘텀의 투두를 리액트로 바꾸기

const onSubmit = () => { const addValue: any = props.value; const listArr = list; listArr.push(addValue); console.log("listArr:::", listArr); setList(listArr); console.log("list:::", list); inputRef.current.value = ""; }; return ( {list?.map((el: any, i: number) => ( {el} ))} ); } 콘솔로보면 리스트는 변하는데...왜 리렌더링이 안될까?! 검색을 해보니, 위에서 const listArr = list; 를 받아옴 -> 가리키는 곳이 같은 애가 복사됨(1004번지를 가리키는 애가 둘이 됨) ..

카카오 로그인 🎃🎃🎃

카카오 로그인 도전~! https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 내 애플리케이션에 들어간다. 룸인어스는 뒤에 배경 없애주고 싶다... 플랫폼 등록에서 도메인 등록 일단은 로컬3000으로 ! 활성화 설정 ON ~~~~ 왼쪽 햄버거를 눌러서 동의 항목 설정에 들어오면 설정 후 내 애플리케이션 > 앱 설정 > 앱 키에서 JavaScript 키를 복사한다. .env 파일에 이렇게 적었는데 이렇게 적는게 맞는건가? process.env.NEXT_PUBLIC_KAKAO_JS_KEY = "복사한 키..

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

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

[Styled-Components, Emotion] 컴포넌트 가져와서 일부만 수정하기(상속)

지금까지는... 컴포넌트를 만들어두고, 그것을 수입해와서 쓸 때 변경사항이 생기면 또 다른 컴포넌트를 만들었었다. A 컴포넌트의 이미지에 border가 있다면, border없애고 쓰고 싶으면 B 컴포넌트에 A내용을 복사해서 붙여넣은 뒤 border 부분만 수정하는 식으로... 이 부분이 정말 불편하고 힘들었는데... 왜 생각을 못했지? Styles.ts 에서 다른 라이브러리는 잘 불러와놓고 정작 내가 만든 컴포넌트는 불러올 생각을 못 했다. tsx파일에서 게임 슬라이더를 바로 수입하지 않고 스타일 파일에서 수입 후 가져온다. export const DetailGameSlider = styled(GameSlider)``; dj...근데 이대로 해보려니까 막혔다. 어떤 방법을 동원해도 변하지않았다!!!!!!..

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

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