JS

[문제...] react-hook-form, 엔터치면 뮤테이션이 날아감

태그 컴포넌트를 가져와서 붙였는데, 태그를 입력하고 엔터칠 때마다 이 오류창이 떴다. 근데 다른 input창에서도 그랬던 것 같아서 엔터를 쳐보니까 역시나 오류가 떴음. 네트워크탭에서 보면 mutation이 요청되어 있다. 아무리 생각해도 의심스러운건 form 뿐..... enter를 치면 자동으로 submit이 되는 거 아닌가하고 독스를 찾아봤는데 "enter"키워드로만 찾아서 그런가? 그런 내용은 없었다... 알고보니 HTML에선 submit 태그 고유동작 중에 하나라고 한다. const checkKeyDown = (e) => { if (e.code === "Enter") e.preventDefault(); }; ... checkKeyDown(e)} > 출처 : https://www.codegrepp..

[문제 해결] Warning: Failed prop type: The prop `children` is marked as required in `InfiniteScroll`, but its value is `undefined`.

Warning: Failed prop type: The prop `children` is marked as required in `InfiniteScroll`, but its value is `undefined`. at InfiniteScroll data가 불러와지기 전에 인피니트 스크롤이 불러와져서 이런 문제가 생기는 것 같아서 {props.data && ( {props.data?.fetchUseditems.map((el: any) => ( {el?.name} {el?.seller.name} {el?.price}원 {el?.soldAt} {/* {props.basket.find((basketEl) => basketEl._id === el._id) ? ( 담기 취소 ) : ( 담기 )} */} ))} )..

[문제 해결] toast-ui 디폴트 밸류, 수정할 때 빈값 들어가는 문제, 랜딩 페이지 엔터쳐서 넘어가기

export default function BeanMarketEditPage() { const [isEdit, setIsEdit] = useRecoilState(isEditState); const router = useRouter(); const { data, loading } = useQuery(FETCH_USED_ITEM, { variables: { useditemId: router.query._id, }, }); useEffect(() => { setIsEdit(true); }, [isEdit]); return loading ? "" : ; } 1. toast ui에 디폴트 밸류가 안 들어옴 2. form 써서 data보내니까 수정하지 않은 부분은 빈 값이 되어서 수정이 됨 두 가지 문제가 있었는데..

알고리즘 - 3진법 뒤집기, 2진 변환 반복

삼진법으로 대체 어떻게 뒤집지 하고 숫자가 3의 i승과 3의 i+1승 사이에 있으면 일단 3의 i에 1을 더하고 ,,,, 나머지도 이런 식으로 구해야하나 하고 고민하다가 결국 구글링했다. 자바스크립트 정답을 보려던건 아니고 어떻게 구하는 규칙?방법이 있나 싶어서 검색한건데 자바스크립트로 진수 변환하기를 봐버렸고.... function solution(n) { console.log(n.toString(3)) // 1200 } solution(45); toString() 하면 그 숫자의 진법으로 변환되어서 나오는데 toString이? 대체 원리가 뭐지 숫자 및 BigInts의 경우 toString()은 선택적으로 기수(radix)를 매개변수로 취합니다. 기수의 값은 최소 2부터 36까지입니다. 기수를 이용함..

220622 프론트엔드 부트캠프 43일차 : Memoization, @media(반응형 페이지), 토스트 에디터

오늘은 수요일 알고리즘 테스트가 있어요 오늘부터 이틀 동안은 최적화에 대해 배웁니다! 서버사이드 렌더링은 무슨 소린가? 도대체 이게 무슨 소리야,, 이것도 배울 거임! 자꾸 새로 만들지 말고, 메모해 놓는 거 어때? → Memoization 내 사이트 모바일에서도 보고 싶어! @media MEMOIZATION 부모, 자식 간의 관계로 만들어서 진행 폴더 안에 container랑 presenter를 만들어서 했는데, 32-01-memoization/container 입력하면 접속 가능하다! render시 변수가 새로 만들어지는 상황 함수가 새로 만들어지는 상황 부모 리렌더시, 자식도 리렌더되는 상황 const aaa = Math.random(); console.log(aaa); 콘솔에 찍어보면 state가..

[문제] Do not add <script> tags using next/head 노랗고 긴 에러창 없애기

이거 아니다,,, script를 html 자체 script사용하지 말고 next에서 제공하는 Script 태그를 쓰라는 것 같다. 근데 이러면 결제가 작동을 안한다ㅋ 어쩌라는말이냐,,, (결국 아직 해결 못했다는 뜻) https://nextjs.org/docs/messages/no-script-tags-in-head-component

알고리즘 - 크레인 인형뽑기 게임

게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. https://programmers.co.kr/learn/courses/30/lessons/64061 function solution(board, moves) { var answer = 0; let basket = []; // 1번 뽑을거ㄱ야야ㅑ야야 왜이래 for(let j = 0; j

220621 프론트엔드 부트캠프 42일차 : 이미지 업로드 최적화, promise-all, lazyload, preload

기존 이미지 업로드 방식은 비효율적이야! → FileReader Async-await를 for문에서 쓰면 안된다고? → Promise.all 이미지를 내가 원할 때 불러올 수 있대! → LazyLoad, PreLoad 이미지에 관한 것들을 배웠다! 이미지 업로드 최적화하기! 그리고 모아서 보낼 때 어떻게 기다리는지! 그리고 이미지를 불러오는 페이지에서 어떻게 이미지를 가져오는지! 이미지 업로드 _ 업로드 최적화 1. 이미지 업로드 해놓고 게시글 등록 안 하고 뒤로가기를 눌렀다, 그럼 스토리지엔 파일 저장되어있지? 이게 쌓이고 쌓여! 찌꺼기... 회사 입장에선 손해! 2. 파일 올리고 다운로드 URL 받아와서 그걸 보여주는거라 이미지 미리보기가 늦게 뜬다. 미리보기는 빨리 볼 수 없어?! 그래서 새로운 방..

알고리즘 - 실패율, indexOf, lastIndexOf, 배열을 객체처럼!

알고리즘 - 실패율 슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스테이지 차이가 너무 큰 것이 문제였다. 이 문제를 어떻게 할까 고민 한 그녀는 동적으로 게임 시간을 늘려서 난이도를 조절하기로 했다. 역시 슈퍼 개발자라 대부분의 로직은 쉽게 구현했지만, 실패율을 구하는 부분에서 위기에 빠지고 말았다. 오렐리를 위해 실패율을 구하는 코드를 완성하라. 실패율은 다음과 같이 정의한다. 스테이지에 도달했으나 아직 클리어하지 못한 플레이어의 수 / 스테이지에 도달한 플레이어 수 전체 스테이지의 개수 N, 게임을 이용하는 사용자가 현재 멈춰있는 스테이지의 번호가 담긴 배열 stages..

220620 프론트엔드 부트캠프 41일차 : refreshToken, Graphql은 사실ㅇ0ㅇ

주니어로서 반드시 필요한 건 아닐 수 있지만 이건 해야 경쟁력 가질 수 있음 굉장히 중요하다고 생각하는 부분. 그래도 못한다고 좌절할 필욘 x.. 오늘 목차 1. refreshToken 2. graphql 원리 refreshToken JWT는 항상 accessToken? X accessToken은 항상 JWT? X JWT는 DB에 로그인 정보를 저장하는 것의 대안으로 나온 방식 accessToken은 누가 중간에 탈취해갈 수 있어. 훈이가 철수꺼 탈취해서 나 철수요~ 하면서 철수의 jwt 토큰을 보냈어. 그럼 백엔드 입장에선 그게 누군지 몰라, jwt 복호화했더니 철수 나오니 철수!라고 생각해버림 그래서 accessToken 만료시간을 준다. 보통 30분~2시간으로 잡는다. (지금 (여기) 백엔드는 한 ..

220619 프론트엔드 부트캠프 : 주말, 카카오맵 마커 변경

import Head from "next/head"; import { useEffect } from "react"; // 윈도우에 카카오 있어! declare const window: typeof globalThis & { kakao: any; }; // window.alert() // window.confirm() // window.kakao // 이렇게 생긴 것 export default function KakaoMapPage() { useEffect(() => { // 여기서 스크립트를 받고 받을 때까지 기다릴거야. // createElement el이 태그 const script = document.createElement("script"); // script.src = "//dapi.kakao...

220617 프론트엔드 부트캠프 38일차: 카카오맵, SPA, MPA, callback-hell, promise, queue

1. 지도 연동?! 굉장히 쉽잖아 -> Map 2. 싱글 페이지 어플리케이션? 1페이지만 있는 건가? -> SPA - CSR / MPA - SSR 3. 콜백함수? 내가 아는 함수랑 다른건가? -> Callback / Callback-Hell 4. 프로미스? 콜백보다 좋군! -> Promise / Promise-Chain 5. 태스크큐는 사실 여러 종류가 있다면서? -> MacroTask / MicroTask 지도(카카오맵) 네이버, 구글, 카카오 다 비용이 다름 깃허브, 트위터, 페이스북, 카카오, 네이버 개발자 페이지가 있고 거기 있는 api들 사용 가능(돈은 내야함) https://apis.map.kakao.com/web/guide/ import Head from "next/head"; // Head..