sodol-dotcom

1. 오류 메시지hook.js:608 Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`. Error Component Stack at input () at section () at div () at Editor (Editor.jsx:46:29) at div () at New (New.jsx:7:15) at RenderedRoute (..

1. 기본 사용법toLocaleDateString()는 자바스크립트에서 날짜를 사용자가 설정한 언어와 지역에 맞춰서 사람이 읽기 쉬운 형식으로 변환해주는 함수이다. 간단히 말해, 날짜를 각 나라별로 익숙하게 볼 수 있는 형태로 보여주는 데 유용하다. toLocaleDateString()는 Date 객체에서 사용할 수 있다. 예를 들어, 현재 날짜를 한국 형식으로 출력하려면 다음과 같이 할 수 있다.const today = new Date();console.log(today.toLocaleDateString());위 코드를 실행하면 보통 한국에서는 YYYY.MM.DD 형식으로 날짜가 출력된다. 예를 들어, 2023.10.25 와 같은 형태가 될 것이다. (한국 지역이 기본 설정된 브라우저에서 실행시)2. ..

기본값을 설정하는 이유와 방법을 이해하기 위한 글로, 기본값을 설정해주면 컴포넌트를 더 안전하게 사용할 수 있고 에러를 예방할 수 있다고 한다.  1. 기본개념: `props`란 무엇인가?React에서 `props`는 컴포넌트에 데이터를 전달할 때 사용하는 객체이다. 컴포넌트는 부모 컴포넌트로부터 `props`를 받아 자식 컴포넌트가 그 데이터를 화면에 표시하거나 동작을 처리하게 된다. 예를 들어, `Button` 컴포넌트(자식 컴포넌트)에 `color`라는 `props`가 전달되면 그 값을 이용해서 버튼의 색상을 정할 수 있다. 위 코드를 보면, `color="blue"`로 버튼의 색상이 설정된다.  2. `props`에 기본값을 설정해야 하는 이유만약 `Button` 컴포넌트에 `color`를 전달하..

1. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법: `props`부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하려면, `props`라는 특별한 방법을 사용한다.`props`는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 필요한 속성이다. 예를 들어, 자식 컴포넌트에 이름이나 나이 같은 정보를 전달하고 싶을 때, `props`로 보낼 수 있다.React에서 자식 컴포넌트가 props를 매개변수로 받는 이유https://sodol-dotcom.tistory.com/78  2. `props`가 객체로 전달되는 이유부모 컴포넌트에서 여러 데이터를 전달하려면 `props`를 객체 형태로 묶어서 보낸다. 이 객체 안에는 전달하려는 데이터가 프로퍼티로 저장되어 있다.예를 들어, `name`과..

React에서는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 `props`로 전달하도록 설계되어 있다. 이때 자식 컴포넌트가 이 데이터를 받을 수 있도록 `props`라는 객체가 자동으로 생성되어 자식 컴포넌트의 매개변수로 넘어오게 되는 것이라고 한다. 즉, 자식 컴포넌트에서 `props`를 함수의 매개변수로 설정하는 이유는 React가 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 이 데이터를 자동으로 `props`라는 객체에 담아 전달하기 때문이다.이때 `props`는 객체 형태이며, 전달한 데이터가 `props` 객체의 프로퍼티로 들어간다.  1. 매개변수로 `props`를 사용하는 방식function ChildComponent(props) { console.log(props); ..

React JSX에서 UI 구성할 때, 객체 전달 시 중괄호를 겹쳐서 두 번 사용하게 된다.  1. 첫 번째 중괄호 `{}`JSX에서 React 요소의 속성을 설정할 때, JavaScript 표현식을 사용하기 위한 중괄호이다.return {...}; // 첫 번째 중괄호  2. 두 번째 중괄호 `{}`첫 번째 중괄호 안에 JavaScript 객체를 정의할 때 두 번째 중괄호를 사용한다. 이 경우, 실제 객체의 속성-값 쌍을 정의하는 역할을 한다.즉, 중괄호가 겹쳐서 `{{}}` 형태로 사용하게 된다.const Main = () => { const user = { 이름: "이정환", isLogin: false, }; const userDetails = { age: 25, cit..

자바스크립트는 웹 페이지를 동적으로 만들 때 매우 중요한 역할을 하지만, HTML 태그 자체를 자바스크립트 코드로 직접 리턴할 수 없다. 그래서 JSX라는 특별한 문법을 사용하는데, 이것이 리액트에서 자바스크립트로 HTML과 비슷한 구문을 작성할 수 있게 도와준다.자바스크립트가 HTML 태그를 직접 리턴할 수 없는 이유https://sodol-dotcom.tistory.com/75  1. 기본 개념 이해:자바스크립트는 프로그래밍 언어로, 웹 페이지에서 여러 작업을 처리하고 데이터를 다루는 데 주로 사용된다. 자바스크립트로 HTML 태그를 만들려면 주로 `document.createElement` 같은 메서드를 사용해야 한다. 하지만 이 방식은 복잡하고 코드가 길어질 수 있다.HTML은 웹 페이지를 구조화..

HTML 태그 자체를 자바스크립트 코드로 직접 리턴할 수 없는 이유는 주로 자바스크립트의 문법 구조와 HTML의 문법 구조가 서로 다르기 때문이라고 한다. 1. 문법 차이자바스크립트는 프로그래밍 언어로, 특정한 문법 규칙을 따른다. 반면 HTML은 마크업 언어로, 웹 페이지의 구조를 정의하는 데 사용된다. 자바스크립트 코드 안에서 HTML 태그를 직접 사용할 경우, 자바스크립트의 문법에 맞지 않게 된다.예를 들어:function render() { return Hello, World!; // 오류 발생} 위 코드는 자바스크립트 문법으로서는 올바르지 않기 때문에 오류를 발생시킨다. 자바스크립트는 HTML 태그를 인식하지 않으며, 이러한 문법은 자바스크립트 코드로 해석되지 않는다.  2. 자바스크립트의..

𝜗𝜚 오늘 공부한 내용    𝜗𝜚 Review    𝜗𝜚 for tomorrow    Ig. https://www.instagram.com/sodol_dotcom/

Reflow와 Repaint는 웹 페이지의 렌더링 과정에서 발생하는 두 가지 중요한 개념이다.이 개념을 이해하는 것은 성능 최적화에 큰 도움이 된다.  Reflow (리플로우)정의: Reflow는 DOM 요소의 크기, 위치, 또는 구조가 변경될 때 발생한다. 예를 들어, 요소의 크기를 변경하거나, 새로운 요소를 추가하거나, CSS 스타일을 수정할 때 발생한다.예시: 브라우저에서 텍스트의 폰트 크기를 변경할 때요소의 `margin`, `padding`, `border` 등을 수정할 때화면 크기가 변경될 때 (예: 창 크기 조절)중요성: Reflow가 발생하면 브라우저는 레이아웃을 다시 계산해야 하므로 CPU와 메모리 자원을 소모하게 된다. 따라서 너무 많은 Reflow는 성능 저하를 일으킬 수 있다.  R..