React

npm install -g create-react-apppermission오류가 나면 sudo npm install -g create-react-app\-g : global 이라는 의미프로젝트 폴더에 방금 설치한 react-app으로 개발에 필요한 것들을 셋팅하기cre

리액트가 없을 경우의 상황public : run npm start를 했을 때 파일을 찾는 document rootreact 전pure.html<Subject></Subject> 를 만들어보자App.jssubject라는 컴포넌트를 만든다App 컴포넌트에 적용

<Subject></Subject>언제나 똑같이 나오는 이 부분은 가치가 떨어짐..Attribute를 활용해보면 이렇게 작성할 수 있다.<Subject title = "WEB" sub="world width web!"></Subjec

props 그리고 stateprops : 사용자가 컴포넌트를 사용하는 입장에서 중요state : props의 값에 따라 내부의 구현에 필요한 데이터들상위 컴포넌트에서 reder()하기 이전에 불려지는 constructor로 하위 component를 초기화 하는 것.ap

WEB을 클릭할 때 이벤트를 발생시키려고 한다.—> onClick React는 함수 호출시 함수의 첫번째 매개변수로 event라는 객체를 넣기 로 약속되어있다.function(e){console.log(e);}console에 찍어보면 이렇게 나온다.하지만, 누르면 페이

이벤트에 맞춰 그에 맞는 컴포넌트를 불러오는 이벤트르 만들어보자.mode에 따라 불러올 것이기 때문에 ReadControl이라는 컴포넌트를 따로 만든다.컴포넌트 자체를 변수에 담아 read 와 welcome모드일때만 해당 컴포넌트가 나오도록 한다.CRUD를 위한 cre

render 부분 정리를 위해 getContent() 함수에 정리했다.return은 \_article로 한다.목록을 불러오는 부분인 getReadContent() 함수를 만든다.UpdateContent 컴포넌트를 만든다.console에 app.js에서 받은 data를

delete기능 구현 Control 컴포넌트 App.js mode가 control 컴포넌트에 의해 변경된 것을 확인할 수 있다. 이후에 그 밑에 selectedcontentid에 따라 삭제기능을 구현해야 함. Splice Array.prototype.splic

React Router 각 컴포넌트마다 url주소를 가지게 하도록 하는 방법 설치 npx create-react-app react-router-example npm install react-router-dom BrowserRouter react router dom

기본 구성 exprees & mongoose mongoose : mongoDB ODM 중 가장 유명한 라이브러리 _ 그렇다면 ODM은 ? : Object Document Mapping MongoDB의 데이터를 NodeJS에서 JS객체로 사용할 수 있도록 해준

mongoDB에서 findOne메서드를 이용해 찾는다.comparePassword 메서드 & 토큰 생성 (jsonwebtoken(JWT) )비교를위해서 bcrypt.compare() 메서드를 이용한다. 첫번째 파라미터인 plainPassword는 말 그대로 원래의 비밀

const EnhancedComponent = higherOrderComponent(WrappedComponent);Data request, response flow, Axios client / setupProxy.jsback, front 서버 한번에 켜기루트 폴더에

수많은 컴포넌트 사이에 state공유 및 상태관릴를 편리하게 하기 위해서 사용하는 Javascript 라이브러리파일구조action폴더애플리케이션에서 사용하는 명령어 (action type), API통신과 같은 작업을 하는 액션 메서드를 모아둔 폴더reducer폴더리듀서

로그인 (Front) 서버에서 처리하는 로직 내용

모듈actions / index. jsreducers / todos.js, index.js , ...counter 모듈액션타입 - 모듈이름/액션명액션 생성함수초기상태 선언리듀서 선언todos 모듈액션타입액션생성함수초기상태선언리듀서 선언모듈 합치기modules/ inde

\[HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nod

useSelector 리덕스 확장 프로그램을 실행시켜 보면 redux에서 위와같이 state 정보가 담겨있는 것을 확인할 수 있다. 이 state들을 꺼내 쓰려면 useSelector 를 사용하면 된다! const value = useSelector(state =

이벤트 핸들링 JS는 onClick="alert('executed')" 처럼 이벤트핸들링에 JS코드를 넣는다 React의 이벤트 시스템은 웹브라우저의 HTML이벤트와 인터페이스가 동일하다. 주의사항 카멜표기법할것! JS 코드 X, 함수형태 O DOM요소에만 이벤트

Ref DOM요소에 이름달기 DOM을 렌더링할때 id가 그대로 전달됨. ===> 규모가 커지다보면, id는 unique해야 하는데 중복이 발생할 가능성이 있음 ref는 전역적으로 작동 X , 컴포넌트 안에서만 작동 O DOM을 꼭 직접적으로 건드려야 할 때만 사용

Map에서 key를 사용하는 이유 React는 렌더링 될때, DOM요소가 변경된게 있는지 확인하는 작업이 필요한데, key요소만 비교하면 더 빠르기 때문에 필요하다. 안그러면 리스트를 순차적으로 비교하기 때문에 효율서잉 떨어진다. 데이터를 추가하는 경우 concat

Mount DOM이 생성되고 웹브라우저상에 나타나는 것. getDerivedStateFromProps : props에 있는 값을 state에 넣을때 사용하는 메서드 render : UI를 렌더링 ComponentDidMount : 컴포넌트가 웹 브라우저상에 나타난

렌더링된 직후마다 실행된다cleanUp 함수 반환 : 컴포넌트가 언마운트 되기 전 || 업데이트 되기 직전에 수행업데이트되기 바로 직전에 수행됨오직 언마운트 될 경우만 호출하고 싶다면 두번째 파라미터에 빈 배열을 넣어준다.정리

현재상태(state), 업데이트를 위해 필요한 정보가 있는 action 을 받아 새로운 상태로 반환하는 함수반드시 불변성을 지켜야 한다. (State과 같이 원본의 불변을 유지해야 한다.) const \[현재 가리키고 있는 상태, 액션발생함수 ] = useReducer

useMemo 적용 전,onChange함수에서 number state가 변하면서 getAverage함수도 계속 렌더링 된다. (불필요하게 렌더링되고 있음. 평균값 나올때만 실행하면되는데!)useMemo 적용 후,등록버튼을 누를때만 호출된다.첫번째 파라미터 : 생성하고픈

카멜케이스로 작성onClick, onMouseEnter , ...이벤트에 연결된 js코드는 함수이벤트={함수}실제 DOM요소들에만 사용 가능리액트 컴포넌트에 사용하면 그냥 props르 전달됨함수형 컴포넌트에서 적용 (onClick)클래스형 컴포넌트에서 적용 (onCli

상태를 가지고 있는 HTML 태그들inputselecttextarea...엘리먼트의 상태를 누가 관리하느냐 ?엘리먼트를 가지고 있는 컴포넌트가 관리 —> controlled 엘리먼트의 상태를 관리하지 않고, 엘리먼트의 참조만 컴포넌트가 송 —> uncontroll

백엔드 IP 주소 : http://12.34.56.78:1234 라고 가정/logout api로 접근시 계속 cors 에러 발생한참 찾아보다가 CRA에서의 서버가 따로 있다는 것을 알게됨localhost:3000 (너무 당연하게 사용해서 의미를 생각하지 않았었