TIL

includes includes는 배열 매서드이다. 배열의 항목에 특정 값이 포함되어 있는지를 판단하여 적절히 true또는 false를 반환해준다. function solution(numbers) { let num = 0 for(let i = 0; i

나중에 잘 사용할 것 같은데 repeat라는 매서드를 처음 알게되어 메모하고자 TIL 작성!! 문제는 다음과 같다. repeat매서드와 slice 함수를 사용해 만들어 주었다. repeat () 매서드 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환한다. repeat () 매서드 사용방법 str.repeat(count); " A.repeat(3) = AAA " 아주 쉽쥬? 그래서 내가 작성한 코드는 다음과 같다. function solution(phone_number) { return '*'.repeat(phone_number.length-4)+phone_number.slice(-4) }

1. useState 사용 시 주의할 점 export default function HwaSa() { const [letter, setLetter] = useState(""); const onAddLetter = (letter) => { setLetter([...LetterList, letter]) }; return ( ); } 다음과 같은 코드를 작성할 때, const onAddLetter = (letter) => { setLetter([...LetterList, letter]) }; 이렇게 작성하는 것은 문제가 발생될 수 있다. 📖[...LetterList, letter] 의 순서는 무엇을 먼저 나열할 것 인지를 말해준다 ❓ useState는 변경된 상태를 리렌더링하는 과정에서 어떤 부분이 바뀌었는지..

오늘도 바보같은 실수를 하였으니 만천하에 공개하도록 하겠다. const router = createBrowserRouter([ { path: "/", element: , errorElement: , }, { path: "/root", element: , children: [ { path: "/solar", element: }, { path: "/Moonbyul", element: }, { path: "/hwasa", element: }, { path: "/wheein", element: }, ], }, { path: "/detail", element: , }, { path: "*", element: , }, ]); function App() { return ; } export default App; ro..

날짜를 구해서 Dday를 구하고 싶었다. 처음 작성한 코드는 아래와 같다. export default function Todo({ todo, onIsDone, onDelete }) { const handleIsDone = () => { const status = todo.status === "working" ? "isDone" : "working"; onIsDone({ ...todo, status: status }); }; const handleDelete = () => onDelete(todo); const planDate = new Date(todo.date); const nowDate = todo.today; const gapTime = planDate.getTime() - nowDate.getTi..

Redux ➡️전역상태 관리 라이브러리 State는 2개로 구분지을 수 있다. Local state = useState이용한 상태(컴포넌트 안에서 사용되는 State) Global state = 전체적인 상태 (redux) -- yarn 설치방법 -- yarn add redux react-redux package.json에서 확인해보기 -- Redux 폴더이름 만들기 -- 일반적으로 Redux를 사용할 폴더이름은 아래와 같이 만든다고 한다! ⬇️redux폴더 아래 ⬇️modules폴더 아래 ✅actions: 액선타입과 액션 생성자 함수를 정의 ✅ reducers: 상태의 일부를 관리하는 리듀서 함수 포함 ✅ selectores: 상태 트리에서 특정 부분을 선택하는 선택자 함수 ✅ middleware: 사..

아래 코드는 state값이 변경될 때마다 useEffect가 렌더링 된다. function App() { const [value, setValue] = useState(""); useEffect(() => console.log("hello")); return ( { setValue(e.target.value); }} /> ); } 이유는 useState는 값이 바뀔때마다 즉 업데이트될 때마다 계속 렌더링이 일어난다. 렌더링이 일어난다는 말은 모든 함수가 다시 재실행 된다는 소리이다. 때문에 useEffect도 state 값이 변경 될때마다 리렌더링 되는 것이다. 그런데 useEffect는 특정한 값이 변경될 때만 일어나면 된다. 위코드에서는 처음 페이지를 열었을 때만 실행이 되길..

브라우저는 기본적으로 제공하는 css style이 있다. 기본적으로 제공하는 css style을 detault style이라고 한다. 가끔 css를 줄때 margin을 주지 않았는데 margin이 들어가 있는 경우가 있었는데 이는 브라우저에서 기본적으로 제공하는 default style 때문이다. 그래서!! css reset하는 방법을 작성해 놓고자 한다! 아주 유용하게 사용될 듯한 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,..

JS로 CSS 컴포넌트를 꾸미는 방법으로 개발자 사이에서 꾸준히 있기 있는 css 패키지이다. styled component 기본적인 원리는 꾸미고자 하는 컴포넌트를 만들고 컴포넌트를 사용하는 것이다. 설치방법: Vs code에서 Extendsions에 vscord-styled-component 설치 ➡️ Vs code 터미널에서 yarn add styled-components 사용방법: import styled from 'styled-components'; styled import로 가져와서 사용 import "./App.css"; import styled from "styled-components"; const StBox = styled.div` width: 50px; height: 50px; bor..

프로그래머스 문제를 푸는데 너무 아쉬워서 가지고 와봤다. 문제는 다음과 같다. 하샤드 수 처음에는 for 문으로 하나씩 빼야 하나? 하고 for문으로 한 자리씩 구했다. for(let i = 0 ; i a + b,0); return x..