하얀성의 개발 메타인지

useCallback() hook의 하나.아래의 변수 5개 중 1개라도 바뀌면 새로운 변수를 포함한 새로운 함수를 만들어줌.그렇지 않으면 그대로 기존 함수를 기억했다가 불러옴.(캐싱) 리랜더링을 막기위함. 그리고 디버깅을 원활히 하기 위함. const onSubmit = useCallback(    async (e) => {      e.preventDefault();      console.log(email, nickname, password, passwordCheck, mismatchError)    },    [email, nickname, password, passwordCheck, mismatchError],

안정성 있는 리액트 개발을 위한 많은 라이브러리와 관련 나누는 방법을 설명한다.리액트와 타입스크립트의 문법을 배우기보단,리액트, ts와 다른 많은 라이브러리들을 사용한 개발 과정을 따라해보는 강의다. 잘 모르겠으면 이 강의 자료를 꼭 확인하자.https://github.com/ZeroCho/sleact/blob/master/nest-typeorm/README.md sleact/nest-typeorm/README.md at master · ZeroCho/sleactContribute to ZeroCho/sleact development by creating an account on GitHub.github.com 환경설정 1. js 빌드와 babel 사용 ts -> js로 변환이 가능하지만ts -> bab..

state가 어디에 있어야 할지 파악하기  앱에서 최소한으로 필요한 state 데이터를 식별한 후에는, 이 state를 변경하는 데 책임이 있는 컴포넌트, 즉,state를 ‘소유’하는 컴포넌트를 식별해야 합니다. 기억하세요: React는 컴포넌트 계층 구조를 따라 부모 컴포넌트에서 자식 컴포넌트로, 아래로 내려가는 단방향 데이터 흐름을 따릅니다. ■ 애플리케이션의 각 state에 대해:해당 state를 기반으로 렌더링하는 모든 컴포넌트를 찾으세요.가장 가까운 공통 상위 컴포넌트, 즉,계층상 그 state의 영향을 받는 모든 컴포넌트들의 위에 있는 컴포넌트를 찾으세요.state가 어디에 위치할지 결정합시다:대개 공통 부모에 state를 그대로 둘 수 있습니다.혹은 공통 부모보다 더 상위 컴포넌트에 stat..

새로 알게된 사실 1. react strictmode 는 프로덕션 나갈땐 없애준다.export default function MyButton() {  function handleClick() {    alert('You clicked me!');  }  return (    button onClick={handleClick}>      Click me    button>  );} onClick={handleClick}의 끝에 괄호가 없는 것을 주목하세요! 이벤트 핸들러 함수를 호출하지 마세요. 단지 전달만 하면 됩니다. React는 사용자가 버튼을 클릭할 때 이벤트 핸들러를 호출합니다.  use로 시작하는 함수를 *훅(Hook)*이라고 합니다. 훅은 일반 함수보다 더 제한적입니다. 컴포넌트(또는 다른 훅..

[...객체] || Object.value(객체) 방식 둘다 객체나 배열의 요소를 추출하고 사용하는 방법 중 하나입니다. 그러나 두 방법은 사용하는 상황과 목적에 따라 약간의 차이가 있습니다. 1. [...객체] : 객체의 key와 value값 모두를 받아와서 배열이나, 객체에 저장 2. Object.value(객체) : 객체의 value값만 받아와서 배열이나, 객체에 저장 3.Object.entries(객체) : 객체의 key와 value값을 세트로 각각 받아와서 각 배열로 저장후, 다시 배열로 감싼다. 스프레드 연산자 (...) 스프레드 연산자는 배열이나 객체의 모든 요소를 개별 요소로 "펼쳐서" 사용할 수 있게 해줍니다. 이를 통해 배열이나 객체를 쉽게 복사하거나, 함수의 인자로 전달하거나, 배열을..

전체적 바닐라 js의 구성 그림 바닐라 js를 통한 코드 작성은 index.html의 요소를 main.js 라는 애가 controller로 우선 하나씩 생성자 하나씩으로 자기의 하위 생성자를 자신의 하위 속성으로 만들면서 거기에 각 태그와 연결지어넣고 그 연결지을 때마다 메소드를 구현하는 것. 그리고 controller를 통해서 서버나 db와 잇기도 한다. DOM 요소와의 연결: index.html에 정의된 DOM 요소들을 자바스크립트 파일(예: main.js)에서 선택하여 사용합니다. 이를 위해 document.querySelector와 같은 DOM API를 사용하여 HTML 문서의 요소들을 자바스크립트 객체로 가져옵니다. 이 과정을 통해 웹 페이지의 구조(HTML)와 행동(JS)을 연결지어 줍니다. ..

super 키워드를 사용하여 부모 클래스의 메소드를 호출하려면, 반드시 자식 클래스의 메소드 내에서 이를 수행해야 합니다. 자바스크립트에서 super 키워드는 오직 두 곳에서만 사용될 수 있습니다: 생성자 내부에서, 부모 클래스의 생성자를 호출하기 위해. 메소드 내부에서, 부모 클래스의 메소드를 호출하기 위해. 자바스크립트에서 클래스의 메소드를 정의할 때, 해당 메소드 내부에서만 super를 사용할 수 있습니다. 호출이 어떤 메소드의 내부나 생성자 내부에서 이루어지지 않고, 클래스의 메소드 정의 영역에서 직접적으로 이루어지려고 하고 있습니다 자바스크립트에서는 이러한 방식으로 부모 클래스의 메소드를 직접 호출할 수 없습니다. 따라서 super.show(); 호출은 유효한 문법이 아니며, 이로 인해 코드가 ..

왜 View의 reset 내용을 Controller로 보내는가? MVC 패턴에서 View는 단순히 사용자 인터페이스를 표현하고 사용자의 입력을 감지하는 역할을 합니다. 사용자의 액션에 대한 실제 로직 처리는 Controller가 담당합니다. 이렇게 함으로써, View와 비즈니스 로직을 분리하여 View를 다양한 환경에서 재사용할 수 있게 하고, 애플리케이션 로직을 한 곳에 모아 관리하기 쉽게 합니다. Controller는 사용자의 입력과 상호작용을 받아들여서, 그에 따라 필요한 데이터 처리나 서버 통신 등의 작업을 담당합니다. MVC 패턴에서 Controller는 Model과 View 사이의 중재자 역할을 하며, 두 구성 요소 사이의 데이터 흐름을 관리합니다. 예시를 통한 서로의 연결의 필요성 및 과정 ..

1. 다른 js파일을 import 해올 때, react는 자동 완성기능을 켜면 파일명 옆에 js나, jsx라는 파일 속성을 붙이지 않아도 되지만. 바닐라 js는 반드시 파일명 옆에 파일 속성을 붙여줘야 에러가 안남. 2.

super()는 자식 생성자 안에 쓰여서 부모 생성자를 자식 안에서 호출하여 그 안의 내용을 쓸 수 있도록 한다. 아래 예시를 보면 qs(querySelector)임의 지정함수를 통해 index.js에서 요소를 불러옴. SearchFromView.js를 보게되면 아래에 느닷없이 element.js가 나오게 되는데 모두 super를 통해서 부모 클래스 View 생성자를 호출해서 그 매개변수(element)로 qs로 호출한 태그요소()를 element 변수 안에 저장해서 생성자를 불러온 것. 마치 jsx의 app.jsx에서 컴포넌트들을 세트로 데려올 때 상속에 상속을... 데이터를 props훅으로 전달하는 것과 비슷한 과정으로 여겨진다. 요약하면, super 호출은 상속받은 클래스의 생성자를 실행하는 데 사..