- 전체보기(32)
- JavaScript(17)
- react.js(14)
- 객체(3)
- 연산자(3)
- 자료형(3)
- async(2)
- API(2)
- class(2)
- 콜백함수(2)
- await(2)
- 배열(2)
- State(2)
- useState(2)
- React.memo(1)
- object(1)
- WebStorage(1)
- component(1)
- 콜백지옥(1)
- promise(1)
- 동기(1)
- setitem(1)
- link(1)
- npm(1)
- indexOf(1)
- 스코프(1)
- 호이스팅(1)
- react router dom(1)
- lifecycle(1)
- findIndex(1)
- memoization(1)
- state끌어올리기(1)
- Page Routing(1)
- MPA(1)
- Dispatch(1)
- 매개변수(1)
- Prototype(1)
- sessionStorage(1)
- JOIN(1)
- Spread(1)
- defaultProps(1)
- 비동기(1)
- node.js(1)
- ref(1)
- parameter(1)
- while(1)
- for(1)
- includes()(1)
- useParams(1)
- 고차함수(1)
- reducer(1)
- method(1)
- 데이터전달구조(1)
- initialValue(1)
- action(1)
- hoisting(1)
- 조건문(1)
- 반복문(1)
- switch(1)
- Route(1)
- find(1)
- concat(1)
- 블록문(1)
- filter(1)
- foreach(1)
- context(1)
- 배열내장함수(1)
- callback Hell(1)
- 템플릿리터럴(1)
- useContext(1)
- useMemo(1)
- useReducer(1)
- useRef(1)
- Sort(1)
- 함수(1)
- Constructor(1)
- hook(1)
- useCallback(1)
- BrowserRouter(1)
- CSR(1)
- areEqual(1)
- localstorage(1)
- 논블로킹방식(1)
- onchange(1)
- re-render(1)
- getter(1)
- setter(1)
- extends(1)
- super(1)
- Fetch(1)
- React.Fragment(1)
- spa(1)
- 상속(1)
- JSX(1)
- 블로킹방식(1)
- slice(1)
- useNavigate(1)
- Map(1)
- Truthy(1)
- Falsy(1)
- Props(1)
- if(1)
- 참조타입(1)
- 오버라이딩(1)
- Routes(1)
- children(1)
- 비구조화할당(1)
- do while(1)
- useSearchParams(1)
- function(1)
LocalStorage로 DB 저장
Web Storage API는 브라우저에서 키/값을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공한다. Web Storage의 두 가지 방식은 sessionStorage와 localStorage가 있다.sessionStorage는 각각의 출처에 대해 독립적인 저
React Router
단일 페이지로 이루어진 SPA 방식의 React는 페이지를 이동하기 위하여 Router를 사용해야한다.터미널에 아래 코드를 입력하여 라우터를 설치할 수 있다. @6은 버전을 의미한다.package.json 파일에서 react-router-dom이 정상적으로 설치되었는지
React SPA & CSR
Page Routing이란 브라우저에서 웹 서버로 페이지 요청을 했을 때 그 페이지를 응답하는 일련의 과정을 말한다. '/home'이라고 요청하면 웹 서버에서 'Home.html' 페이지를 반환해주는 과정 자체를 페이지 라우팅이라고 할 수 있다.여러개의 페이지를 가지고
컴포넌트 트리에 데이터 공급 (Context)
모든 데이터를 가지고 있는 컴포넌트가 Provider라는 공급자 역할을 하는 컴포넌트에게 자신이 갖고 있는 모든 데이터를 전달한다. 이 Provider라는 컴포넌트는 자신의 자손에 해당하는 모든 컴포넌트에게 직통으로 데이터를 전달할 수 있다.Provider 컴포넌트의
상태 변화 로직 분리 (useReducer)
복잡하고 많은 상태 업데이트 로직을 가지고 있는 컴포넌트에서 코드가 길어지고 복잡해지는 것이 좋지 않기 때문에 복잡하고 긴 상태변화 로직을 컴포넌트 밖으로 분리하는 기능이다. useState처럼 React의 상태관리를 돕는 Hooks 중 하나이다. useReducer를
React 최적화
이미 계산해 본 연산 결과를 기억해두었다가 동일한 계산을 시키면다시 연산하지 않고 기억해두었던 데이터를 반환시키게 하는 방법React의 기능이기 때문에 useMemo를 import 해야함.기본공식 : useMemo(콜백함수,\[]);useMemo(콜백함수,data.le
React에서 api 호출하기
더미데이터를 받아올 수 있는 jsonplaceholder 사이트에서 api를 받아온다.데이터를 받아오는 getData 함수를 만들고, res에 fetch를 이용하여 api를 호출한다.initData에 불러온 데이터 중 index 0부터 19까지 20개의 데이터만 남기고
React Lifecycle
React의 Lifecycle > 컴포넌트의 생애주기란? 컴포넌트가 탄생하고 변화하고 사라지는 순간에 각각 작업을 수행시킬 수 있는 것을 라이프사이클을 제어한다고 할 수 있다. React Hooks useState, useEffect, useRef 와 같이 앞에 u
React 컴포넌트&데이터 구조
React로 프로젝트를 생성하면 많은 컴포넌트들을 생성하게 되는데,코드 작성을 진행하기 전에 컴포넌트 트리를 직접 그려보는 것이 좋다.React에서는 같은 레벨의 컴포넌트끼리 데이터를 주고받을 수 없다.위의 그림으로 보면 App 컴포넌트가 0 레벨, DiaryEdito
React로 일기 만들기
👉 완성이미지input에 받을 작성자를 받아줄 author, textarea에 받을 일기내용을 받아줄 content로상태변화 함수를 만들어준다. 위와 같은 여러개의 useState 함수를 하나로 합칠 수 있다.위와 같이 쓰면 여러가지의 useState 함수들을 하나의
State (상태)
React에서 말하는 state(상태)는 컴포넌트가 가지는 테마처럼 계속 값이 바뀔 동적인 데이터이고, 이 상태 관리는 이것을 가진 컴포넌트가 직접 하게 된다.컴포넌트는 자신이 가진 state(상태)가 변화하면 그 컴포넌트가 re-render를 한다.그렇기 때문에 실시
JSX
jSX의 함수는 반드시 어떤 값을 return 해야한다.import Reactß from 'react'; 리액트 불러오기(리액트 기능을 사용하지 않는다면 불러오지 않아도 됨)export default MyHeader; 컴포넌트 내보내기JSX의 표현식은 반드시 하나의 최
React.js
React.js 를 사용하는 이유 header, nav, footer 등 모든 페이지에 반복적으로 들어가는 부분을 컴포넌트로 만들어서 사용할 수 있다. React는 Component 기반의 UI 라이브러리이기 때문이다. jQuery 등은 명령형 프로그래밍, rea
Node.js
Node.js란 > Chrome이 자바스크립트를 실행할 때 사용하는 js엔진인 V8엔진을 브라우저에서 독립시켜 자바스크립트를 브라우저가 아닌 어디에서든 실행시키기 위한 프로그램이다. 즉, node.js는 자바스크립트의 실행환경이라고 할 수 있으며 Javascript's
API 호출하기
API (Application Programming Interface) : 응용 프로그램 프로그래밍 인터페이스응용프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.주로 파일 제어, 창 제어, 화상 처리
동기 & 비동기
자바스크립트 동기와 비동기 1. 동기 방식의 처리 자바스크립트는 코드가 작성된 순서대로 작업을 처리한다. 이전 작업이 진행중일때는 다음 작업을 수행하지 않고 기다린다. 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행하는 방식을 동기 방식의 처리라
비 구조화 할당과 Spread(...) 연산자
위와 같이 변수에 배열의 값을 할당하고 싶을 때, 비 구조화 할당을 사용하여 더 빠르고 간단하게 쓸 수 있다.배열 안에 여러개의 변수를 선언하고 오른쪽에 배열을 할당해주면첫번째 변수부터 arr 배열의 값이 index 순서대로 할당된다.대괄호를 이용해서 변수에 배열의 값
배열 내장 함수
배열 내장 함수 1. forEach() 배열의 모든 요소를 한 번씩 순회할 수 있도록 해줌 2. map() 배열 내장함수로써 원본 배열의 모든 요소를 순회하면서 어떤 연산 등이 새로운 배열을 return으로 반환해줌 1) forEach 사용하여 newArr 배열에