React

react 컴포넌트에서는 input을 props라고 한다return은 화면에 보여져야할 react요소가 return 된다컴포넌트를 class나 함수로 만들 수 있다컴포논트는 하나의 최상위 태그로시작React.Component를 extend 해서 생성컴포넌트를 생성할때

javaScript의 확장버전html과 아주 비슷하게 생겼고, js파일 내에서 작성할 수 있다html문법을 js코드 내부에 써주면 jsx이다tag에 attribute을 주고 싶을 때는 항상 "" 따옴표로 감싸줘야 한다attribute를 추가할 때는 실제 html에서 쓰

지정된 간격(밀리초)으로 표현clearInterval()이 호출되거나 창이 닫힐때 까지 함수를 계속 호출setInterval()에 의해 반환된 ID값은 clearInterval()메서드에 대한 매개변수로 사용됨1000ms = 1초지정된 시간(밀리초) 후에 함수를 한번만

React란UI를 만들기 위한 JS 라이브러리 가상돔(Virtual Dom)을 통해 ui를 빠르게 업데이트함가상돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다이 기술 덕분에 불핗요한 UI업데이트는 줄고 , 성능은 좋아짐React의

westagram 기준Main.Html1) 상단에 import React from "react"; import "./Main.css";2) class Main extends React.Component{ render(){ return( )}}3) return

CSS 전처리기 (Preprocessor)스타일링을 편하게 할 수 있게 해줌RoutingSPA에서 화면을 전환하는

CRA초기 폴더 및 파일 세팅1) node.modulesCRA를 구성하는 모든 패키지 소스코드가 존재하는 폴더2) package.jsonCRA 기본 패키지외 추가로 설치된 라이브러리/패키지 정보(종류,버전)가 기록되는 파일모든 프로젝트마다 package.json 하나

property의 줄임말, 속성 이라는 의미부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체parent에서 child라는 component를 return하려면 import props로 부터 어떤것이든 다 넘길 수 있다(string, number, function

상태, 단어뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값화면에 보여줄 컴포넌트의 UI정보(상태)를 지니고 있는 객체이다컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다문법: render 위에 constructor 함수를 쓴다

default값이 false인경우 e.preventDefault();를 사용한다

key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이다대부분의 경우 데이터의 ID를 key로 사용

백앤드로부터 데이터를 받아오려면 API를 호출하고 데이터를 응답받는다. 이때 자바스크립트 web API fetch()함수를 쓰거나 axios 라이브러리를 사용할 수 있다js에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 메서드js를 사용한 비동기통신,

파일내부에서 상수 데이터를 선언해서 활용

소프트웨어 개발 프로젝트 관리를 위한 agile software development의 개발 방법론의 하나이다. 개발 후, 소프트웨어의 유지보수에서도 사용될 수 있다.초기 SW의 개발은 waterfall 방식, 즉 초기 단계에서 모든 계획을 다 작성하고 그것을 기반으로

경로(route)를 찾아가는 행위다른경로(url)에 따라 다른 화면(view)을 보여주는 것사용자가 웹 애플리케이션과 상호작용하는 방식을 획기적으로 바꾼 기술사용자가 다른 뷰로 이동할 때 애플리케이션은 뷰를 동적으로 다시 그림SPA는 MPA(Multi Page Appl

라우트 경로에 특정값을 넣어 해당하는 페이지로 이동할 수 있다1) Path Parameter라우트 경로 끝에 들어가는 각기 다른 id값들을 저장하는 매개변수: : Path Parameter가 붙는것을 의미id: 해당 Path Parameter의 이름을 의미(변수명)1

Paging 이라고도 불림백엔드에서 가지고 있는 많은 데이터들을 한 화면에 전부 보여줄 수 없는 경우에 사용된다즉, 일정 길이로 끊어서 전달흔히 '이전/다음 페이지'프론트에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달백엔드에서는

컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다이 메서드 내에서 타이머제거, 네트워크 요청취소, DidMount내에서 생성된 구독 해제 등 필요한 모든 정리 작업 수행이제 컴포넌트는 다시 렌더링 되지 않으므로, setState를 호출하면 안된다.컴포넌트 인스턴스가

변수처럼 사용할 수 있다style이 적용된 component를 직접 생성하기 때문에 스타일링을 위한 코드 사용량이 줄어드는 장점이 있다key value의 형태가 아닌 css의 문법을 그대로 사용하기에 기존 css의 사용법보다 가독성이 높다npm install --sav

hook은 class 안에서는 동작하지 않는다함수 컴포넌트에서 state와 생명주기 기능을 연동할 수 있게 해주는 함수이다규칙1: 무조건 최상위 레벨에서만 훅을 호출해야한다. 그리고 반복문, 조건문, 중첩된 함수 내에서 실행하면 안된다규칙2: react 함수 컴포넌트

react class의 componentDidMount, componentDidUpdate, componentWillUnmount와 같음하나의 API로 통합

조건이 참일때 실행문이 실행됨{ 조건문 && ( 실행문 )}보통 토글에 많이 사용된다defult: 조건문이 참일때 실행문이 실행되고 거짓일땐 0을 출력(0이 falsy라서) 이때 0을 출력하고 싶지 않다면, 조건문 앞에 !!를 붙인다{!!조건문 && ( 실행문 )}

단축속성명 (shorthand property names)계산된속성명 (computed property names)비구조화할당 (destructuring)객체의 속성값일부가 이미 변수로 존재하면 간단하게 변수이름만 적어도 됨콘솔로그 출력시 단축속성명 활용계산된 속성명을

컴포넌트에서 JSX를 조건부로 보여주고 싶으면 그냥 이렇게 씁니다.우리가 자주 쓰던 자바스크립트 if문은return () 안의 JSX 내에서는 사용 불가능합니다. 그래서 보통 return + JSX 전체를 퉤 뱉는 if문을 작성해서 사용합니다. 삼항연산자는 그냥 if와

중복되는 로직을 추출해 반복적으로 사용하게되면 프로젝트의 코드량을 줄일 수 있다로직의 관리 포인트가 줄어들면서 개발자가 코드를 보다 쉽게 수정,추가 할 수 있게 된다ex)원칙은 복잡도를 낮추기 위해서 만든 것함수는 가급적 단순하게 유지되어야 한다줄여쓰겠다고 가독성을 과

SPA: 하나의 파일로 전체 사이트를 구현프론트엔드와 백엔드가 나눠지기 시작 또는 나뉘게 되는 시점html 태그 자체를 자바스크립트가 동적으로 생성react를 사용하기 시작함페이지가 한 개인 애플리케이션 (html 파일이 한개)사용자가 웹 애플리케이션과 상호작용하는 방

SPA: 하나의 파일로 전체 사이트를 구현프론트엔드와 백엔드가 나눠지기 시작 또는 나뉘게 되는 시점html 태그 자체를 자바스크립트가 동적으로 생성react를 사용하기 시작함\*\* SPA(결과물) / CSR, SSR (렌더링 방법)로 나누어 이해하면 좋음페이지가 한

요청과 결과가 한 자리에서 동시에 일어남응답이 돌아와야 다음 동작을 수행할 수 있다.요청 결과가 동시에 일어나지 않음데이터를 수신하는 코드와 페이지를 표시하는것은 비동기적으로 처리 해야함ex) setTimeout, AJAX설계가 간단하고 직관적이지만 결과가 주어질 때까

다른 함수의 인자로써 이용되는 함수어떤 이벤트에 의해 호출되어지는 함수

class 키워드 필요component로 상속 받아야함render() 메소드가 반드시 있어야함state와 lifeCycle 관련 기능사용 가능하다.메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.임의 메서드를 정의할 수 있다.state와 lifeCycle 관련 기능

말하는바 그대로 전역에서 상태를 관리한다는 의미이다props를 통해 상위에서 하위로 상태값을 전달하여 상태를 관리하게 되어있다하위 컴포넌트에서 사용을 위해 불필요한 props를 전달받아야 하는 상황이 발생하고 props drilling 이라는 문제가 발생한다. 이 문제

소프트웨어의 개발 방법을 공식화 한 것 구현자들 간의 커뮤니케이션의 효율성을 높이는 기법유지보수가 편해지는 코드 구성 방식1) Model : 데이터와 관련된 부분으로 컨트롤러에게 받은 요청에 따라 데이터를 관리한다DTO :DAO : 2) View: 사용자한테 보여지는

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신,이를 추상화한 자바스크립트 객체를 구성하여 사용하는 것EX) 특정 페이지에서 데이터가 변했다고 가정 했을 경우.리액트를 이용해 돔을 업데이트 시키는 절차데이터가 업데이트 되면, 전체 UI를 Virtu

node.js와 브라우저를 위한 HTTP통신 라이브러리비동기로 HTTP통신을 가능하게 해주며 return을 promise객체로 해주기 때문에 response데이터를 다루기 쉽다웹 프론트 프레임워크(react, vue등)을 다룰때에는 Axios를 사용하는게 좋다 resp

새로운 패키지 관리 모듈이 아니다. 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 5.2.0버전부터 새로 추가된 도구이다npm을 좀 더 편하게 사용하기 위해서 npm에서 제공해주는 하나의 도구npm 5.2.0 이상의 버저만 깔려있다면 n

Routes는 기존 Switch 처럼 경로를 순서를 기준으로 선택하는 것이 아닌, 가장 일치하는 라우트를 기반으로 선택하게 된다.v5 Route는 꼭 Switch 안에 없어도 됐지만, v6의 Route는 Routes의 직속 자식이어야 함서브 경로가 필요한 경우 path

npm run buildnpm install netlify-cli -g netlify deploy"build.command" failednetlify docs에서 찾은CI='' npm run build또는 package-json에서 build 삭제 후 푸쉬build:

useMemo 정의 성능을 최적화할 때 사용한다. memo는 memorized의 약자이다. 첫번째 인수에는 함수, 두번째 인수에는 배열을 넣어주면 된다. 두번째 인수에 넣어준 배열의 값이 바뀔때만 함수가 실행된다. 그렇지 않다면 이전의 값을 재사용한다. useCall

컴포넌트를 만들다보면, 반복되는 로직이 자주 발생한다. 예를 들어서 input 을 관리하는 코드는 관리 할 때마다 꽤나 비슷한 코드가 반복된다.그러한 상황에 커스텀 Hooks 를 만들어 반복되는 로직을 쉽게 재사용할 수 있다.커스텀 Hooks 를 만들 때에는 보통 us

프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리 할 수 있다이 값은 꼭 상태를 가르키지 않아도 된다. 이 값은 함수일수도 있고, 어떤 외부 라이브러리 인스턴스일수도 있고 심지어 DOM 일 수도 있다Context 를 만들 땐 React.createContext()

GET: 데이터 조회axios.post()POST: 데이터 등록PUT: 데이터 수정DELETE: 데이터 제거$ yarn add axios$ npm install axios요청에 대한 상태를 관리 할 때에는 다음과 같이 총 3가지 상태를 관리해주어야한다.1\. 요청의 결

콘텐츠의 요약내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정하는 것사용자가 클릭 하기전에 크롤러가 해당 웹 사이트를 방문하여 HTML의 head의 메타데이터를 크롤링하여 미리보기 화면을 생성해준다이미지의 경우 최소한 600 X 315 픽셀은 되어

useEffect와 useLayoutEffect훅의 형태는 완전히 동일하다useEffect는 지연 이벤트 동안에 레이아웃 배치와 그리기를 완료한 후 발생하기 때문에 useEffect의 내용이 늦게 들어올 수 있다 이를 해결하기 위해 등장한 훅이다(렌더링->이펙트호출)레

API 호출에는 다양한 방법들이 있다장점Asynchronous JavaScript And XML의 약자이다말 그대로 자바스크립트에서 비동기적 통신을 가능하게 한다순수 ajax는 XMLHttpRequest()생성자를 통해 자바스크립트에서 구현될 수 있지만, JQuery를

QueryClient에는 쿼리를 오래된 것으로 표시하여 잠재적으로 데이터를 다시 가져올 수 있는 invalidateQueries 메서드를 제공한다모든 쿼리 무료화구체적인 쿼리 키를 전달하여 특정 쿼리 무효화각 쿼리를 구분해서 무효화predicate 함수를 전달하여 해당

refetchOnWindowFocus: false, react-query는 사용자가 사용하는 윈도우가 다른 곳을 갔다가 다시 화면으로 돌아오면 이 함수를 재실행하는데, 그 재실행 여부 옵션retry: 0, 실패시 재호출 몇번 할지isLoading, isSuccess

useQuery를 여러개 실행할 때 사용

react-query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주며 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어진 라이브러리fresh: 새롭게 추가된 쿼리 & 만료되지 않은 쿼리 -> 컴포

POST, PUT, DELETE와 같은 변경 및 수정 작업을 할 때 사용되는 훅const requestData = useMutation(API 호출 함수, 콜백);예시

useContext:용도: Context API를 활용하여 전역 상태를 관리하는 데 사용됩니다.특징: 컴포넌트 트리를 따라 데이터를 전달하지 않고, 필요한 컴포넌트에서 직접 상태에 접근할 수 있게 해줍니다.예시: 언어 설정, 테마 설정 등 애플리케이션 전역의 설정 값들

여러가지 작업을 한번에 묶어서 수행하는 기법설계상의 이유 또는 최적화를 위해 사용state, effect, 업데이트에 대한 정보까지 함께 담고 있는 렌더링 단위DOM을 어떻게 업데이트 해야할지 관리하며, hook & effect & 상태값을 관리함child & sibl

Target keywords를 첫 100~150 자 내에 포함 시키기 google은 페이지 초반에 나타나는 키워드에 더 가중치를 준다.h1 tag를 쓰면 구글이 문서를 이해하기가 더 쉽다 글의 타이틀을 h1 태그에 포함시키는 것이 좋다타겟 키워드를 최소 하나의 su