프로젝트 이름/설명DreamLog(현재 IT 트렌드와 개발일지를 기록할 수 있는 반응형 블로그)프로젝트 생김새(레이아웃)개발해야 하는 기능들3-1. 회원가입, 회원탈퇴, 로그인, 정보수정(authService)3-2. Mark-Down editor를 사용하여 글 쓰기,

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다.상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생합니다. 이는 하낭의 객체로

SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다. 전통적인 웹 페이지는 다음과 같이 여러 페이지로 구성되어 있습니다.Link 컴포넌트는 클릭하면 다른 주소로

immer를 사용하면 불변성ㅇ르 유지하는 작업을 매우 간단하게 처리할 수 있습니다. 이 라이브러리의 사용법은 다음과 같습니다.produce라는 함수는 두 가지 파라미터를 받습니다. 첫 번째 파라미터는 수정하고 싶은 상태이고, 두 번째 파라미터는 상태를 어떻게 업데이트할

여기서 useState(createBulkTodos())라고 작성하면 리렌더링될 때마다 createBulkTodos 함수가 호출되지만, useState(createBulkTodos)처럼 파라미터를 함수 형태로 넣어 주면 컴포넌트가 처음 렌더링될 때만 createBulk

Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 잇는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다.useState는 가장 기본적인 Hook이며,

모든 리액트 컴포넌트에는 라이스사이클(수명주기)이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다.참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다.라이프사이클 메서드의 종류는 총 아홉

이 함수의 파라미터는 다음과 같습니다.1)callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지 입니다. 1-1 currentValue: 현재 처리하고 있는 요소 1-2 index: 현재 처리하고 있는 요소의 index

'DOM을 꼭 직접적으로 건드려야 할 때'입니다. 앞 예제에서는 state를 사용하여 우리에게 필요한 기능을 구현했지만, 가끔 state만으로 해결할 수 없는 기능이 있습니다. 어떤 상황인지 알아볼까요?1)특정 input에 포커스 주기2)스크롤 박스 조작하기3)Canv

*리액트의 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성합니다. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다. DOM 요소에만 이벤트를 설정할 수 있습니다.

컴포넌트를 선언하는 방식은 두 가지 입니다., 하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스 형 컴포넌트 입니다.클래스형 컴포넌드와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정

\*JSXJSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바베을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.\*JSX 문법감싸인 요소리액트 컴포넌트에서

\*리액트 이해리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용하빈다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리입니다.리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포

*Process(Code, Thread(Stack), Heap, Data) 프로세스는 컴퓨터 위에서 즉 운영체제 위에서 연속적으로 실행되고 있는 프로그램을 말합니다. 프로세스는 운영체제 위에서 독립적으로 메모리에서 실행되고 있는 프로그램 입니다. *Thread(Sta

*Events개념 이벤트는 프로그래밍중인 시스템에서 발생하는 동작 또는 발생으로, 원하는 경우 어떤 방식 으로든 대응할 수 있도록 시스템에서 알려줍니다. Events https://developer.mozilla.org/en-US/docs/Learn/JavaScrip

\*Critical rendering pathrequests/response -> loading -> scripting -> rendering -> layout -> paintingConstruction = DOM, CSSOM, RenderTree(간략한 DOM 즉 T

\*CSSOM(CSS Object Model)개체 모델은 자바 스크립트에서 CSS의 조작을 가능하게하는 API의 집합입니다. DOM과 매우 비슷하지만 HTML보다는 CSS 용입니다. 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있습니다.DOM + CSS = CSS

*DOM(Document Object Model)

\*APIs(Application Programming Interfaces)개발자가 복잡한 기능을보다 쉽게 ​​만들 수 있도록 프로그래밍 언어로 제공되는 구성입니다. 더 복잡한 코드를 추상화하여 대신 사용하기 더 쉬운 구문을 제공합니다.MDN Web API : http