봉보로봉봉

ref를 선언하고 넣어줬더니 ref에서 빨간줄이 떴다. 왜 또.... 😞 ... const slideRef = useRef(); ... {imgUrl.map((el) => ( {el.title} ))} ... Type 'MutableRefObject' is not assignable to type 'LegacyRef | undefined'. 이유 useRef의 초기값으로 null을 주지 않아서이므로 초기값을 주면 된다! 제네릭에 타입을 안정해줘도 에러는 사라지지만 작업하다가 빨간 줄이 생길 수도 있으니 타입을 지정하는걸 추천한다. ... const slideRef = useRef(null); // 또는 //const slideRef = useRef(null); ... {imgUrl.map((el) => ..

커스텀 훅을 쓰는 이유 자주 사용하는 로직을 하나로 묶어 반복을 최대한 줄이고 재사용하기 위해서 사용한다. useTitle 커스텀 훅을 만들 땐 똑같이 use~로 시작하는 함수를 선언한다. 넘겨받을 인자가 있다면 넘겨주면 된다. 커스텀 훅을 만들 때도 useState나 useEffect와 같은 리액트 훅을 사용할 수 있다. 컴포넌트에 전달하는 값이 아닌 커스텀 훅은 바로 실행시켜서 사용할 수 있다. const useTitle = initialTitle => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle..

치킨을 향해 출발 슬랙 커뮤니티 채널에서 보고 상품도 받고 알고리즘도 열심히 풀어보자는 마음으로 참가했다. 마지막 상품인 치킨을 보고 꼬박꼬박 풀었지만 보너스 도장 받는 법을 몰라서 도장이 모자라 치킨은 아쉽게 되었다.. 🥲 그래도 다른 상품들을 여러개 받아서 행복했다...⭐️ 별최몇 주마다 4문제씩 주어졌고 난이도도 다양했다. 2주차부터 별3개가 나오길래 얼마 안 있다가 별5개가 나와서 나는 하나도 못풀겠구나 싶었는데 별2,3개 문제가 자주 나왔고 기억이 맞다면 최고 난이도는 별4개까지 였다. 난이도는 점점 올라가다가 중간쯤에 초기화된 후 다시 올라갔다. 챌린지 기간동안 별3개까지는 어떻게든 풀어보려 했지만 나의 최대는 별 2개까지였던 것 같다........ㅎ.......😭 해설을 봐도 모르는 사람 나..

그동안 프로젝트를 하면서 GET메소드밖에 쓸 일이 없어서 헤더나 바디에 뭘 넣어서 보내본 적이 없었다...🥲 오직..GET data만을 외치며 걸어온 인생...⭐️ 최근들어 axios 통신에 바디랑 헤더 넣어서 보내는 걸 알게돼서 기록해 둔다. axios.get()에 headers 넣기 // axios.get(url, {headers: {키 : 밸류}}) axios .get('http://localhost:8000/posts', { headers: { Authorization: localStorage.getItem('token') }, }) axios.post()에 body 넣기 // axios.get(url, {키 : 밸류}) axios .post( 'http://localhost:8000/posts'..

레포를 포크하고 그 레포에서 작업하면 잔디가 심어지는 줄 알았는데 아니었다..! 🥺 다른 사람 레포에서 작업한 팀 프로젝트를 포크하고 리팩토링을 하면서 잔디를 심으려면 복사 방식으로 레포를 가져오면 된다! 0. 포크해온 레포의 코드들을 담을 내 새로운 레포를 생성한다. 1. 로컬에서 포크해오려는 원래 레포를 복사한다. git clone --bare 복사해오려는 레포 주소 2. 그럼 레포이름.git이라는 폴더가 생성되는데 그 폴더 안으로 들어간다. cd 레포 이름 폴더.git 3. 그리고 원래 레포의 내용을 새로운 레포로 푸시한다. git push --mirror 내 새로운 레포 주소 새 레포로 가서 확인하면 코드가 똑같이 복사된 것을 확인할 수 있다! 이제 여기서 작업하면 잔디를 심을 수 있다. 😀👏👏👏

잘 쓰던 closest를 쓰려고 했는데 안써졌다... const handleDockMenu = (e: React.MouseEvent) => { const target = e.target; const newDockState = [...dockState].map((state) => // closest에 빨간줄 target.closest(`#${state.id}`) ? { id: state.id, selected: true } : { id: state.id, selected: false } ); setDockState(newDockState); }; Property 'closest' does not exist on type 'EventTarget'. 이유 이벤트타겟에 없다고 하니 e.target에 Elemen..

스타일드 컴포넌트에 제네릭으로 Props도 정해줬는데 빨간줄이 떴다... 왜...? // bgColor -> No overload matches this call. const BandAd = ({ text, color }: BandAdProps) => { return {text}; }; ... const Container = styled.div` ... ` No overload matches this call. 이유 이 자리에 undefined가 들어 올 수 도 있는데 내가 string만 정해줘서 그런 것이었다. 메세지를 자세히 보니 중간에 Type 'undefined' is not assignable to type 'string'. 라고 하고 있었다. // 에러 export interface Style..

카카오 로그인 (Javascript SDK) 구현 나는 오늘 카카오를 죽였다. 이유는 터무니없다. 어떻게 하는지 모르겠기 때문이다.. 이번 프로젝트는 카카오 로그인을 구현했다. 저번에 카카오 지도 API랑 2번 싸웠는데 이번에도 또 로그인 API랑 싸웠다.....🤯 쉽지 않아... 하지만 끝끝내 내가 이겼다... ㅎㅎㅎ 사실 이번에 나는 카카오 인가 코드까지만 하고 나의 팀플 메이트인 지은이 다 해줬다. 지은 최고! 최고의 백엔드! 야호! 😀😀😀 카카오 Javascript 로그인은 이런 순서로 진행되는데 우리는 이런식으로 처리하기로 했다. 유저 동의 화면 때문에 프론트에서 Redirect URI로 카카오 인가 코드를 받아서 백으로 넘기면 백에서 카카오 토큰을 받아서 회원정보를 가져오고 그 정보로 자체 회..