sohyeon kim

📝 문제 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..

📝 문제 정수 리스트 num_list가 주어질 때, 마지막 원소가 그전 원소보다 크면 마지막 원소에서 그전 원소를 뺀 값을 마지막 원소가 그전 원소보다 크지 않다면 마지막 원소를 두 배한 값을 추가하여 return하도록 solution 함수를 완성해주세요. 🫠 나의 풀이 def solution(num_list): if num_list[-1] > num_list[-2]: num = num_list[-1] - num_list[-2] return [*num_list, num] else: num = num_list[-1] * 2 return [*num_list, num] 🧞‍♂️ 다른 사람의 풀이 def solution(l): l.append(l[-1]-l[-2] if l[-1]>l[-2] else l[-1]*..

📝 문제 어떤 문자열에 대해서 접미사는 특정 인덱스부터 시작하는 문자열을 의미합니다. 예를 들어, "banana"의 모든 접미사는 "banana", "anana", "nana", "ana", "na", "a"입니다. 문자열 my_string과 is_suffix가 주어질 때, is_suffix가 my_string의 접미사라면 1을, 아니면 0을 return 하는 solution 함수를 작성해 주세요. 🫠 나의 풀이 def solution(my_string, is_suffix): return int(my_string.endswith(is_suffix)) ✳️ endswith() : 문자열이 지정 문자열로 끝나는지 체크 ✳️ startswith() : 문자열이 지정 문자열로 시작하는지 체크 🧞‍♂️ 다른 사람..

💡 디바운싱을 쉽게 구현해 줄 라이브러리를 사용해보자. 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