일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 파이썬 반복문
- 리액트
- 파이썬 for
- REACT
- 한글 공부 사이트
- js
- 리액트 프로젝트
- 파이썬 for in
- 파이썬 slice
- 타입스크립트 리액트
- 타입스크립트 props
- 내일배움캠프 최종 프로젝트
- tanstack query
- JavaScript
- 내일배움캠프 프로젝트
- 리액트 팀 프로젝트
- 타입스크립트
- 파이썬 enumerate
- 자바스크립트
- 내배캠 프로젝트
- 프로그래머스
- React Hooks
- 코딩테스트
- 리액트 훅
- useState
- 내일배움캠프
- typeScript
- Next 팀 프로젝트
- 파이썬 list
- 파이썬 replace
- Today
- Total
목록분류 전체보기 (210)
aotoyae
📝 문제 1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요. 소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. (1은 소수가 아닙니다.) 🫠 나의 풀이 function solution(n) { let answer = 0; for (let i = 2; i
💡 각각 언제 쓰면 좋을지 알아보자. 🌐 Link 클릭해서 페이지를 이동하도록 할 때! 텍스트나, 버튼, 이미지 등에 사용한다. 홈으로 가기 🌐 Navigate 특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때! 회원 전용 페이지에 로그인 없이 들어와서 로그인 페이지로 리다이렉트 하는 경우 상품 상세 페이지에서 상품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우 if (!course) return ; 🌐 useNavigate 특정 코드의 실행이 끝나고나서 페이지를 이동시키고 싶을 때! 장바구니 담기를 눌렀을 때 리퀘스트를 보내고, 장바구니 페이지로 이동시키는 경우 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후, 페이지를 이동시키는 경우 리다이렉트된 로그인 페이지에서 로그인을 완..
💡 값에 따라 컴포넌트 값을 바꿔보자! 원래는 삼항연산자를 많이 사용했었는데, answer 이 true 면 1번을 보여주고 false 면 2번을 보여줘! const answer = true; {answer ? 1번 : 2번} true 일 때만 표시할 방법이 있었다! answer 이 true 면 1번을 보여줘! const answer = true; {answer && 1번}
💡 alert 대신 react-toastify 를 이용해 알림창을 구현해 보자. npm install --save react-toastify or yarn add react-toastify App.jsx or Index.jsx 최상위 컴포넌트로 가서 ToastContainer 와 css 를 import 해온다. import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; function App() { return ( ); } export default App; Login.jsx 알림창을 사용할 컴포넌트로 가서 alert 대신 toast! import { toast } from "react-to..
💡 디바운싱을 쉽게 구현해 줄 라이브러리를 사용해보자. npm i --save lodash or yarn add lodash import { useState, useCallback } from "react"; import "./App.css"; import _ from "lodash"; function App() { const [searchText, setSearchText] = useState(""); const [inputText, setInputText] = useState(""); const handleSearchText = useCallback( _.debounce((text) => { setSearchText(text); }, 2000), // 2초뒤 실행 [] ); const handleCh..
💡 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법 ex) 좋아요를 엄청 많이 누를 때 ~ ✳️ Throttling : 주로 무한스크롤에 사용 게임 중 공격 버튼을 마구 누르는데 일정 시간 동안 한 발씩 발사될 때!! 쓰롤링이 실행 된 것이다. 이렇게 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 한다. ✳️ Debouncing : 주로 입력값 실시간 검색, 화면 resize 이벤트에 사용 전등 스위치 버튼 누르면 불이 깜빡이다가 켜지는 것! 디바운싱이 실행된 것이다. 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간(..
💡 리액트 쿼리에 대해 알아보자. ✳️ 기존 미들웨어의 한계 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-saga 등 미들웨어를 채택해 사용할 수 있지만, 다음과 같은 문제가 있다. 보일러 플레이트 : 코드량이 너무 많다. 규격화 문제 : Redux 는 비동기 데이터 관리를 위한 전문 라이브러리가 아니다. ✳️ 리액트 쿼리의 강점 : 너무 쉽고, 책임에서 자유롭다. 보일러 플레이트 만들다가 오류날 일이 없다. 내가 만든 부분이 아니니 잘못이 일어나도 내 잘못이 아니다. 사용방법이 기존 thunk 대비 너무 쉽고, 직관적! ✳️ 주요 키워드 Query : 어떤 데이터에 대한 요청을 의미 - axios 의 get Mutation : 어떤 데이터(데이터 그룹 자체)..
😇 useMemo 를 쓰지 않는데 자꾸 관련 에러가 뜨는 상황 얼마 전엔 잘 됐었잖아 너..? 사실 devToolsEnhancer 로 시작된 에러였는데 devToolsEnhancer 를 지우니 useMemo 에러가 떴다. 해결 방법은 npm i redux react-redux 를 다시 해주는 것.. 그리고 지웠던 devToolsEnhancer 도 살려보니 에러 없이 잘 작동했다. 이러고 며칠 뒤 또 다른 에러가 뜰지도.. 🔗 https://stackoverflow.com/questions/72095900/typeerror-cannot-read-properties-of-null-reading-usememo