한 번에 끝내는 프론트엔드 개인 노트

Component Component 만드는 3가지 방법 class function function () {} () => {} class component function component 1 function component 2 컴포넌트 사

전통적인 방식의 라우팅 브라우저에서 서버로 해당 url로 요청을 보내어 해당 페이지를 받아왔습니다. Single Page Application 하나의 큰 앱을 받아오는 방식입니다. 서버에서 전체 묶음을 받아온 후에 브라우저에서 url에 따라서 어떤것을 보여 줄지를

React.createElement 인자 argument1 : Type // 태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment argument2 : [props] // 리액트 컴포넌트에 넣어주는 데이터 객체 argument3 : [...childr

Custom Hooks 보통 훅 이름을 useSomething 이라고 붙입니다. 훅의 특징은 훅 또는 함수컴포넌트안에서만 실행이 가능합니다. 그래서 훅안에 다른 훅을 쓸 수 있습니다. 앞에서 배운 useState와 useEffect 를 가지고, 나만의 훅을 만들어

Higher Order Component (고착 컴포넌트) HOC 개요 React 공식 문서에도 설명이 될 정도로 매우 중요하고 잘 다뤄지는 용어입니다. 하지만 최근에는 그 중요도가 낮아지고 있습니다. 그 이유는 Higher Order Component 와 비슷한

JSX 일반적인 브라우저에서는 위같은 코드는 인식할 수 없습니다. 위 JSX문법은 순수한 JavaScript 문법이 아니기 때문입니다. 우리가 작성한 어떤 코드를 순수하게 실행할 수 있는 자바스크립트로 변환해 주는 역할을 babel이 진행해줍니다. babel은 상

상태를 가지고 있는 엘리먼트들 예) input select textarea ... 개요 엘리먼트의 '상태' 를 누가 관리하느냐에 따라서 엘리먼트를 가지고 있는 컴포넌트가 관리한다면, Controlled 컴포넌트 엘리먼트의 상태를 관리하지 않고, 엘리먼트의 참조

Hooks Hooks은 React에 아주 커다란 변화를 준, 최근에 나온 기술입니다. 클래스 컴포넌트에서만 state를 사용하고, lifecycle을 사용할 수 있었던 부분을, 함수 컴포넌트에서도 사용가능하게 해 준 기술입니다. 하지만, 단순히 state와 lif

Event Handling HTML DOM 에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 해야합니다. JSX 에 이벤트를 설정할 수 있습니다. onClick 부분은 props로 들어가게 됩니다. props로 들어간 이벤트는 이벤트 리스너로 등

Component Lifecycle (v16.3) getSnapshotBeforeUpdate : render 메소드가 호출되고 실제로 DOM에 적용되기 직전에 불립니다. 그래서 DOM에 적용되기 직전에 상태를 기억했다가 DOM에 적용된 직후에 무언가 조절을 해줄 것이

Component Lifecycle (< v16.3) Initialization : 처음에 constructor가 불리면서 props가 셋팅되고 state의 초기값이 설정되는 구간입니다. render : 브라우저에 최초로 그려지는 부분입니다. componentWi

Style Loaders CSS, SASS 방식 react에서 css를 import한 결과물을 보면, import 순서대로 컴파일되어 html 파일에 전역적으로 정의되어 있는 것을 확인할 수 있습니다. 이 전역적으로 추가되어 있다는 점이 문제가 되는 부분입니다.

Styled Components (기본) 별도의 library 를 이용합니다. Styled Component 라는 방식이 있는 것이고, 이것을 지원하는 다양한 library들이 있는데, 그 중에 가장 대표적인 library가 Styled Components 라고 하

Props 와 State > Props 와 State 둘 다 변경이 발생하면, 랜더가 다시 일어날 수 있습니다. Render 함수 실습 Props function 컴포넌트에서 props 표현 방식 function 컴포넌트에 들어오는 props는 인자로 들어오

Additional Hooks 대표적으로 사용되는 것 위주로 보겠습니다. useReducer useMemo useCallback useRef useReducer useState()의 확장판이라고 볼 수 있습니다. 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드

컴포넌트 간 통신 하위 컴포넌트를 변경하기 상위 컴포넌트를 변경하기 Context API, useContext 하위 컴포넌트 전체에 데이터를 공유하는 방법 데이터를 Set 하는 방법 가장 상위 컴포넌트에서 프로바이더 사용 데이터를 Get 하는 방법 모든

Redux 개요 context가 가지고 있는 전역 데이터를 잘 활용하는 부분이 중요하게 됩니다. 그래서 context에 주어지는 전역 데이터를 어떻게 효과적으로 관리할 것인지에 대한 라이브러리가 Redux입니다. store 안에 있는 상태를 보라색 공이 변경하면,

createStore createStore 함수는 redux에서 가져와서 사용합니다. 스토어를 만들게 되면, 스토어 안에 있는 상태와 상태를 변경하는 액션을 보내서 각종 state 관리를 할 수 있게 됩니다. createStore는 인자로 3개가 사용됩니다. 첫번

combineReducers redux로 부터 import하여 사용합니다. 먼저 state를 구상하겠습니다. 객체로 바꾸고, TODO를 complete 하면, done을 true로 바꾸겠습니다. 다음은 아래처럼 액션을 바꿔보겠습니다. todo 객체를 리턴해도

Redux를 React에 연결(react-redux 안쓰고) react-redux 안쓰고 지금까지 만들었던 store를 react에 연결해 보겠습니다. 컴포넌트에 연결하는법 > 단일 store 를 만들고, subscribe 와 getState 를 이용하여, 변경되

Redux를 React에 연결(react-redux 쓰고 연결하기) 이번에는 react-redux 라이브러리를 사용하여 react의 store와 react의 컴포넌트를 연결해보겠습니다. react-redux 개요 Provider 컴포넌트를 제공해줍니다. conne

개요 진행순서 2-1) Async Action with Redux (redux에서 비동기 액션처리(우리가 알고 있는 방식으로 접근해보기)) 2-2) 리덕스 미들웨어 (2-1을 발전시켜서 미들웨어를 적용) 2-3) redux-devtools 2-4) redux-th

리덕스 미들웨어 redux Middleware는 리덕스 사이트의 advanced 항목에서 확인해 볼 수 있습니다. 미들웨어가 "디스패치" 의 앞뒤에 코드를 추가할수 있게 해줍니다. 미들웨어가 여러개면 미들웨어가 "순차적으로" 실행됩니다. 두 단계가 있습니다. 스

배우는 순서 Ducks Pattern react-router-dom 과 redux 함께 쓰기 redux-saga redux-actions Ducks Pattern Pattern이기 때문에 라이브러리가 있는 것이 아니고 그냥 Pattern입니다. Ducks Pat

What are Classes javascript object 를 만드는 blueprint (청사진, 설계도) 클래스 이전에 object 를 만드는 기본적인 방법은 function JavaScript 에도 class 는 es6 부터 사용 가능 단, 접근제어자는 부족

Generics와 Any의 다른 점 실습을 위한 설정 실습 any의 문제점 Generics 사용 이제 Generics를 사용해보겠습니다. "Mark" 리터럴 타입으로 지정되었습니다. 이전과는 다르게 any가 아닌 string 타입으로 정상적으로 추론되었습니

What is Next.js? https://nextjs.org/ Next.js 는 react 프레임워크입니다. versel 이라는 회사에서 만들었습니다. Next.js의 가장 큰 특징이자 장점은 개발자가 서버사이드렌더링(SSR)에 대한 고려를 직접할 필요가 없다