asc : 오름차순desc : 내림차순예시: const videos = await Video.find({}).sort({ createdAt: "desc" });라우터 설정(global), 컨트롤러에 함수만들기, 해당 search pug 파일 만들기form은 get으로

부모 컴포넌트 정보를 자식 컴포넌트에 전달 할 때는 Prop을 이용한다. 자식 컴포넌트에서는 argument로 해당 데이터를 받을 준비를 한다.

state 연습 set 함수(수정하는 함수) setData("") : 기본값 값만 보내기 setData(func(argument)) : 첫번째 argument에 함수를 쓰면 현재 State로 보낸다. 이 현재 State를 이용해서 새로운 지금 State를 계산

개요 : state 가 변할 때 마다 렌더링 되는데 경우에 따라 component가 처음 render 될 때에만 코드가 실행 되길 원할때 예를 들어 API 를 불러온다 했을 때 component render 에서 AIP를 call 하고 이후에 state가 변할때 마다

tree.js - 자바스크립트로 3D 구현 리액트 네이티브 - 자바스크립트로 IOS, Android 앱을 만듬. 일렉트론 - 자바스크립트, HTML, CSS 로 데스크탑 앱을 만듬 ml5.js - 머신러닝 type of undefined - variable은 존재 하

깃허브에 repository 를 만들고 init 한후 만들어져 있는 프로젝트를 파일에 넣은 후 add -> commit -> repository 연결 -> push 하였으나 한참이 지나도 page에 올라오지 않았다. 해당 그림에서 표시한 부분에서 에러가 나서 에러가난

개요: 같은 ui를 반복적으로 사용해야 할때 중복 styled을 쓴다라고 가정했을 때 코드를 재 사용하기 위해..(바깥에서 내용을 함수로 전달.,.,?)리액트js는 자동으로 속성처럼 넣은 모든 property(prop)들을 오브젝트로 넣어주고 컴포넌트의 첫번째 인자로

리액트 템플릿을 사용 하고 처음으로 깃에 올리는데 템플릿에서 사용 하는 .git 파일 까지 올려서 다른 사람의 커밋들이 다 올라왓다.기존의 히스토리를 삭제 하고 $ rm -rf .git 다시 깃을 설정한 후 git 저장소에 강제로 push 하였다.왜그러는지는 모르겠는데

리액트 프로젝트를 완성하여 사용자에게 제공 될 때는 빌드 작업을 거쳐서 배포해야한다 불필요한 주석, 경고 메시지, 공백 등 제거 해 파일 크기 최소화 브라우저에서 JSX 문법이나 다른 최신 자바스크립트 문법이 원할 하게 실행 되도록 코드 트랜스파일 작업 프로젝트 내에

리덕스? 가장 많이 사용하는 리액트 상태관리 라이브러리 컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리, 더욱 효율적 관리 할수있다 컴포넌트끼리 똑같은 상태를 공유 해야할때도 여러 컴포넌트 거치치 않고 상태값을 전달, 업데이트 개발자 도구 지원, 미들웨어 기능 제

리액트를 다루는 기술 실습 중 parcel을 이용한 실습 예제를 하다가 parcel 설치가 잘 안되었다설치까지 다 되었는데 $ parcel index.html 명령어를 쳤을 때 bash: parcel: command not found 에러가 떳다. 해서 환경 변수 문제

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을때 유용한 기능 예를 들어 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러 종류..리덕스, 리액트 라우터, styled-components 등 라이브러리가 Context API 기반

비동기 작업의 이해 -> axios로 API 호출해서 데이터 받아오기 -> newsapi API 키 발급 받기 -> 뉴스 뷰어 UI 만들기 -> 데이터 연동 -> 카테고리 기능 구현하기 -> 리액트 라우터 적용하기웹애플리케이션에서 서버 쪽 데이터가 필요할때는 Ajax를

spa 란? 전통적인 웹페이지는 사용자에게 보이는 화면은 서버측에서 준비, 사전에 html 파일을 만들어서 제공 하거나, 데이터에 따라 유동적인 html을 생성해 주는 템플릿 엔진을 사용하기도 .. 요즘은 웹에서 제공 되는 정보가 많기 떄문에 화면을 보여 줘야 할때마다

구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트 할수 있다.프로 젝트 준비immer 사용법poduce라는 함수는 두가지 파라미터를 받는다. 1. 수정하고 싶은 상태, 2. 어떻게 업데이트 할지 정의하는 함수이다.두번째 파라미터로 전달되

What to do?많은 데이터 렌더링 하기 -> 크롬 개발자 도구를 통한 성능 모니터링 -> React.memo를 통한 컴포넌트 리렌더링 성능 최적화 -> onToggle과 onRemove가 새로워지는 현상 방지하기 -> react-virtualized 사용한 렌더링

Hooks ? 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수컴포넌트에서 할수 없던 작업을 할수있게 해준다.

리액트 컴포넌트 안에서는 id를 쓰지 않는다 (button01, button02, button03... 방지)ref를 써야 할 상황 - DOM을 꼭 직접적으로 건드려야 할 때.가끔 state만으로 해결할 수 없는 기능 이 있다. 특정 input에 포커스 주기스크롤 박스

모델 : 애플리케이션에서 사용하는 데이터를 관리 하는 영역뷰 : 사용자에게 보이는 부분컨트롤러 : 모델 데이터를 조회, 수정, 변경 된 사항을 뷰에 반영데이터가 변할 때 마다 어떤 변화를 줄지 고민하는게 아니라 기존 뷰를 날려 버리고 처음부터 새로 렌더링 하는 방식 -

부트스트랩 모달 창을 테이블의 tr에 적용 하고 tr안에 다른 이벤트를 적용한 button을 생성 했을때 button을 클릭했는데 모달까지 띄워지는 현상이 있어서 해당 에러를 고치기 위해 bubbling과 capturing에 대해 알아 보게 되었다.가장 안쪽의 <