프론트엔드9 [React] React의 useState와 useEffect에 대한 이해 useStateReact에서 '상태'라는 개념은 단순한 변수처럼 보이지만 다름.useState로 선언한 값은 내부적으로 상태가 바뀔 때마다 컴포넌트를 리렌더링하게 되어 있음.일반 변수(let 등)는 값이 바뀌어도 화면은 바뀌지 않음.반면 useState는 setter 함수(setX)로 값을 바꾸면, React가 다시 렌더링을 해서 UI에 반영됨.→ 핵심:값 + 그 값이 바뀌었을 때 컴포넌트를 다시 그려줄지 말지를 React가 관리해주는 구조또한, React는 상태의 불변성을 중요하게 다룸.그렇기 때문에 항상 새로운 값을 만들어서 넘겨주는 식으로 상태를 업데이트해야 함.(ex. 배열이나 객체 수정 시 원본을 바꾸는 게 아니라 복사본 만들어서 set해주기)useRefuseRef는 값을 저장할 수 있지만, 리.. 2025. 4. 11. JS와 Firebase의 시간 처리 조금이라도 의문이 들면 메모해서 남겨놓고 나중에 다시 찾아보면서 보완해나가는중 오류 : 파이어베이스 받아온 튜플의 시간 데이터 표출 오류.파이어베이스에서 시간 데이터를 사용할때 Timestamp라는 클래스를 사용이 필요했고호출된 데이터를 컴포넌트에 그릴때, 호출된 데이터의 시간데이터를 그대로 표출하니 오류가 발생했음. 습득한 지식 : Timestamp라는 클래스는 시간 정보를 표현해줄때 객체 필드값으로 {seconds, nanoseconds}로 다루고 있게 구성 되어있음.firebase/firestore를 사용하면 JS의 기본 시간 클래스인 Date와 갖다 꼴아박을수있도록Timestamp.fromData( new Date ) 이런 메서드를 지원함Timestamp.toDate() 를 사용하면 JS의 D.. 2025. 3. 28. [JS] fetch 후 응답 데이터 처리 방법 (async, await. promise) const btn = document.querySelector(".btn");const indexBtn = document.querySelector(".indexBtn");const result = document.querySelector(".result");// console.log(indexBtn.value); // /api/index// console.log(indexBtn.getValue); // undefined// console.log(indexBtn.getvalue); // undefined// console.log(indexBtn.getAttribute(value)); //corsTest.js:10 Uncaught ReferenceError: value is not defined.. 2025. 1. 8. [CSS/SCSS] @each 활용 $theme-colors:( "pink" : hotpink, "red":crimson);//each에서 $theme 와 $color를 어떻게 구분하는지 문제임.// theme-colors의 키들을 추출해서 value를 끌어낸다는건// 파악은 했는데 이해랄까 기억하기 어려운 느낌.// 이 내용을 지금 눈돌리면 다시 이해하기// 어려울예정이라는게 느껴짐@each $theme, $color in $theme-colors{ .theme-#{$theme}{ background-color: $color; color:white; }} 어.... 지금 눈 돌리면 기억에서 사라질 예정;; 리스트 theme-colors 에서 키와 value를$theme, $color라고 명시적으로 정의하는 부분이 없.. 2024. 12. 26. [CSS/SCSS] 변수 사용 방법 정리 변수명을 가져다 사용할때$변수명 으로도 사용하고#{$변수명} 으로도 사용하는데이해가 안되서 ai 사이트 3곳에 물어봤는데 아주 명쾌함 정리: 언제 무엇을 사용할까? $변수명: 값을 그대로 사용하는 경우 (CSS 속성, 함수 내부 등) #{$변수명}: 변수 값을 문자열로 결합하거나 동적으로 CSS를 생성해야 할 때 짜잔 2024. 12. 26. HTML/CSS 첫걸음 로고 홈 뉴스 연락처 뉴스 제목1 뉴스 요약 .. 2024. 11. 26. 이전 1 2 다음