aotoyae

💡 파일 추가 버튼을 ! 디자인해보자. HTML & CSS~ input[type=file]::file-selector-button { width: 30%; height: 30px; background-color: #e0c3ae; font-family: 'SunBatang-Light'; color: #784b31; border: none; border-radius: 10px; cursor: pointer; &:hover { transition: 0.3s; color: #fff; background-color: #b6856a; } } React ~ const FileInput = styled.input` width: 100%; margin: 5px 0; &::file-selector-button { widt..

📝 문제 🫠 나의 풀이 function solution(nums) { const answer = [...new Set(nums)]; const limit = nums.length / 2; return answer.length > limit ? limit : answer.length; } 🧞‍♂️ 다른 사람의 풀이 function solution(nums) { const set = new Set(nums); const limit = nums.length / 2; return set.size > limit ? limit : set.size; } 배열로 바꿔줄 필요가 없었다. 🫠 🔗 https://school.programmers.co.kr/learn/courses/30/lessons/1845?language..

💡 배경색 없애는 법 ~ background-color: transparent; input { height: 50px; margin-bottom: 10px; border: none; border-bottom: 1px solid red; background-color: transparent; /* 이 부분!! */ }

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