TIL

아래 코드는 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..

우선 오늘은 무엇을 해야할지 잘 몰랐다. 자바스크립트 알고리즘 문제를 받고 풀어보기를 했는데 왜인지 기초적인 것도 제대로 이해하지 못하고 있는 것 같았다. 아니 조금더 자세히 얘기해 보자면 무엇을 해야하는지는 아는데 식을 작성할 줄을 모르겠더라 그저 한숨뿐.. 꽤나 충격적이었다. 시간이 있었다면 풀수 있었을까? 그럴지도 어려운 문제순으로 풀었고 어려운 문제는 곧잘 해냈으니까 근데 가장 원초적인 문제들이 오히려 어렵더라 단순한 기초만 식을 작성할 일이 없어서인지 손에 익지 않아서인지 뭔지 물론 어려운 문제들 중에서 풀지 못한 문제도 있지만 기초적일수록 더 모르겠었던 하하 우선 어떤함수를 사용해야하는지 구글링을 하면 알수 있지만 함수가 어떻게 작동되는지 이해하지 못하고 있어서 식을 제대로 완성하지 못하는 것..

TIL을 너무 막 작성하는 것 같지만 오늘 하는 것중에 배운게 이런것들인걸.. 우째 스크롤 : 수직으로 창을 넘어가면 자동으로 스크롤 overflow-y: auto; 스크롤 만들때 같이 쓰면 좋은 스크롤 커스텀 css ::-webkit-scrollbar { width: ; /* 스크롤바의 너비 설정 */ } ::-webkit-scrollbar-track { background: ; /* 스크롤바의 트랙 부분의 배경 색상 설정 */ } ::-webkit-scrollbar-thumb { background-color: ; /* 스크롤바의 핸들(Thumb) 부분의 색상 설정 */ border-radius: ; /* 핸들의 모서리 둥글게 */ border: px solid # ; /* 핸들..

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. component가 uncontrlloed 상태라고 한다. 처음에 무슨말인지 몰라 여기저기 콘솔을 찍어봤다. const handleAdd = (todo) => { setTodos([...todos, todo]); }; setTodos를 console.log로 바꾸면 에러도 안나고 값을 너무 잘 가져왔다. 그렇다면 setTodos가 문제인가? 하고 생각을 해봐도 도저히 문제가..

다사다난했던 JavaScript를 끝내고 React에 입문했다!!!!!!!! React Facebook에서 사용자가 UI를 동적으로 만들 수 있도록 하기 위해 만들어냈다. React에 철학은 UI에 대한 업데이트는 상태 변경으로부터 발생해야한다! Single Page Application 이다.(하나의 페이지 즉 하나의 주소로) Livararies이다. Framwork와 Librarise의 차이 Framwork❓ 무언가를 만들때 필요한 모든것이 주어진것. Librarise❓ 작은 솔루션의 단위 Framwork 단점: 규정하고 있는 모든것을 공부해야한다. 자율성이 떨어진다 Librarise 단점: Framwork의 단점을 보완하고 있으나 UI만 만들 수 있다. 왜 React를 사용해야 할까? React의 ..

드디어 길고 길었던 팀프로젝트 코드 분석을 오늘에서야 끝낼 수 있을 것 같다. 다른 부분은 쉬우니까 제하고 분석할 코드 하나 남았기 때문엥 ㅎ-ㅎ import updateReviewList from "./statelist.js"; const urlParams = new URLSearchParams(window.location.search); const itemId = urlParams.get("id"); function getSelectedStars() { const checkedStar = document.querySelector(".getstar .star:checked"); if (!checkedStar) { return ""; } const score =..

코드를 뜯어서 보다보면 사용되지 않는 부분들이 많은 것 같다. 하나씩 채우고 수정하는 중이다. 오늘은 포인트 부분 코드를 알아보자 class AspectPoints { constructor() { this.aspects = document.querySelectorAll(".aspects .aspect-item"); this.selectedAspects = []; this.initialize(); } initialize() { this.aspects.forEach((item) => { item.addEventListener("click", () => { item.classList.toggle("active"); this.updateSelections(); }); }); } up..