React

예전 자바스크립트 변수는 var만 이용했지만 ES6버전이 나온 이후로 let과 const가 사용된다.let과 const의 차이점은 값이 할당된 이후에 수정할 수 있는지의 여부이다.let은 예전의 var와 마찬가지로 수정할 수 있지만, const는 그럴 수 없다.let의

리액트가 나오게 된 배경 : 웹 앱을 만들 때 리액트가 없이도 만들 수 있다. 그러나 우리가 프로그래밍을 할 때 함수 단위로 프로그래밍을 하여 재사용성 과 유지보수성 을 올리듯, 웹을 개발함에 있어서도 함수단위로 코드를 짤 수 있게 해주는 자바스크립트 라이브러리이다.N

1\. Why React?

1. 리스트 렌더링 >Expense.js 파일을 보면 아직 까지는 ExpenseItem 컴포넌트가 하드코딩 되어 있다. 이렇게 코드를 짜면 Add Expense기능 뿐 아니라 Filter의 기능까지 수행하지 못하는 정적인 코드가 되어버린다. 따라서 expenses 배

이번 프로젝트 UI는 다음과 같이 생겼다. 이전에 만들었던 Expenses 프로젝트도 빈칸으로 제출하면 제출이 됐었다. 하지만 빈칸으로 제출했을 때는 제출을 막고, 사용자에게 피드백을 해주어야 한다.sumit 버튼을 눌렀을 때의 행동을 수정해보자제출은 하지 않지만 사용

에러 메시지를 읽으면 대부분의 에러는 해결된다. 한개의 최상의 태그를 리턴하기오타 : 정의되지 않은 함수 , 변수컴파일이 된 경우 문법상 오류는 없지만 논리적 오류가 있는경우코드 흐름찾아서 올라가기크롬 개발자 도구에서 경고 메시지 보기(같은 key값이 할당 된 경우)크

부족했던 점UI Component 에서 className을 추가하는 방법props.childrentype이 없으면 'button'이 들어가게 만든다.Component 내용도 넣어주어야 한다.숫자로 바꾸고싶으면 앞에 + 붙인다.<ul>, <li> 넣어준다.Us

이제까지 봐왔지만 JSX는 한개의 루트요소만 리턴할 수 있다.다음과 같은 코드는 리턴될 수 없다.첫번째 해결책 : <div> 태그로 감싸기두번째 해결책 : 배열로 내보내기배열로 내보내기 위해선 태그 하나가 배열의 요소이기 때문에 ,로 연결해주어야 한다.그리고 태그

리액트가 하는 일은 무언가를 화면으로 가져오는 일이다. 리액트는 함수를 실행하고 각 컴포넌트들은 함수로 이루어져 있다. HTTP 리퀘스트를 보내는 일과 응답을 받는 일은 화면으로 가져오는 일과 전혀 관계가 없다. 이런 리액트가 하는 일들이 아닌것들을 Side Effec

어떤 로그인이 필요한 앱을 볼때 간단한 컴포넌트 트리는 다음과 같다. 그렇지만 로그인 이벤트가 일어나는 곳과 로그인 정보가 필요한 컴포넌트가 다르고 그 거리가 먼 경우가 있는데, 그럴때 로그인 정보를 전달하는 방법은 props를 이용하는 것이다. 하지만 복잡한 앱일수록

useReducer 다음과 같은 앱의 validity를 확인할 때, useState를 사용하면 문제점이 발생 할 수도있다. 아래의 다섯가지 상태에 의존한다. enteredEmail은 입력받은 값이고 emailIsValid는 이메일의 유효성을 검증하는 상태이다. 그런데

Modal.js 파일 안에서 Modal BackDrop 컴포넌트를 만든다.모달컴포넌트 안에 props.children을 넣어준다.index.html의 최상위 태그를 만들어준다. (id=overlay)createPortal을 사용한 코드는 다음과 같다.store 이라는

ReactDOM과 RealDOM의 차이html구조를 가지고있는 것이 RealDOM이다. 함수형구조를 가지고있는것이 ReactDOM이다. state props context 등등이 바뀌면 컴포넌트가 재실행, 재평가된다. 그렇다고 RealDOM이 항상 바뀌지는 않는다. R

다음과 같은 코드를 실행시키면 순차적으로 1,2,3이 출력된다.대표적인 비동기함수 setTimeout실행시키면 1,3,2 순서대로 출력된다.다음과 같은 클래스가 있다고 했을 때, 로그인에 성공하면 로그인한 아이디의 역할까지 출력하는 프로그램을 작성한다고 해보자.입력 받

사전예약판매중인 강의가 있다고 생각을 해보자. 그리고 강의를 수강할 수 있게되면 문자를 보낸다고 해보자철수는 강의 오픈보다 먼저 강의를 신청했고 강의가 시작하는 날 맞추어 문자를 받는다.영희는 강의 오픈 후에 수강신청을 하여 즉시 문자를 받는다.When new Prom

footer의 여백을 맞춰주는 방법

2023.8.16 - 27min예전에는 백엔드에서 뷰와 데이터를 이용하여 웹페이지를 클라이언트에 보내줌상호작용이 많아지고 기능들이 늘어나면서 클라이언트 사이드의 역할이 중요해짐 , spa웹에서 가장 중요한 일은 ui를 할상 데이터와 동기화 상태로 유지하는 것javasc