React

예시 코드를 보며 React.createElement 와 ReactDOM.render 에 대해 알아보려 한다.Javascriptdocument.createElement(tagName, options)=> 지정한 tagName의 HTML 요소를 만들어서 반환ReactRe

React 공식 홈페이지에서 Create React App(https://ko.reactjs.org/docs/create-a-new-react-app.html\~~Node.js, npm이 설치가 되어있지 않다면 Node.js에 가서 설치해야한다.\~~npm은

## React ### Step.01 터미널 명령어를 이용하여 원하는 디렉토리로 가서 `mkdir '새로운폴더'`을 입력하여 새로운 디렉토리를 생성한다. ```json PS C:\WEB\front-end\React> mkdir '새로운폴더' 디렉터리: C:\W

## Babel ### Step.01 Babel 사용 시 필요한 패키지 설치 터미널에서 작업 디렉토리에 `npm i -D @babel/core @babel/cli @babel/preset-react` 입력한다. - @babel/core : babel을 사용하기 위해

## Webpack ### Step.01 Webpack 사용 시 필요한 패키지 설치 터미널에서 작업 디렉토리에 `npm i -D webpack webpack-cli html-webpack-plugin babel-loader` 입력한다. - webpack : webp

## HWR(hot-module-replacement) ### Step.01 HWR 사용 시 필요한 패키지 설치 터미널에서 작업 디렉토리에 `npm install -D webpack-dev-server` 입력한다. - webpack-dev-server : webpac

React에서 사용되는 Javascript에 XML을 추가한 확장한 문법코드실행하기 전 브라우저가 읽을 수 있도록 Babel을 이용해 javascript 코드 변환해야 한다.JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다.예를 들어 2 +

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눠, 각 조각을 개별적으로 관리할 수 있다. 컴포넌트는 항상 대문자 (React는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급)React에서 정의하는 컴포넌트 종류는 크게 함수 컴포넌트와 클래스 컴포넌트

강의를 듣다보니 강사님이 <></> 라는 코드를 쓰는 거다.나는 이런 거 처음 봄,,<></> 이것이 <div></div>의 약자인 걸까 개발자 모드를 켜 확인해봤는데아무것도 없다<></> 이거 안에 넣은 다른 태그만 있을 뿐

## State란? - 함수 컴포넌트에서 _내부적으로 상태 관리를 해야 하는 경우_ 필요하다. - 이를 위해서는 React에서 제공하는 Hook 함수 중 **useState함수를 사용**한다. ### useState() - 컴포넌트의 state(상태)를 관리 할 수

Props란?(https://velog.io/@art11010/React-Components%EC%99%80-Props- 부모 컴포넌트가 자식 컴포넌트에게 전달 하는 값값을 자신(자식 컴포넌트)이 변경할 수 없음 = 읽기 전용State란?(https:

여러 번 연속해서 setState()를 호출 한다면 단일 업데이트로 한꺼번에 처리한다.아래 코드에서 multiplyAdd() 를 실행시켜 버튼을 클릭한다 가정했을 때 multiply() 이후 add() 가 실행되어 output : 1 → 3 → 7 → 15로 값이 반

Image Link : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/모든 컴포넌트는 여러 종류의 '생명주기 메서드'를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수

Components 반복을 할 때 map 함수를 사용한 경우key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도와주며 이를 이용해 컴포넌트 리렌더링 여부를 결정한다.불필요한 리렌더링을 방지하기 위해서는 각 자식 컴포넌트마다 독립적인 key값을

React 엘리먼트에서 이벤트를 처리하는 방식은DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다. 몇 가지 문법 차이는 다음과 같다.React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다.JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸

Form HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작한다. JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 하려면 '제어 컴포넌트 (controlled

ref란 React에서 DOM 노드나 React 엘리먼트에 직접 접근할 수 있도록 하는 것이다.Ref 사용 사례비제어 컴포넌트포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때애니메이션을 직접적으로 실행시킬 때서드 파티 DOM 라이브러리를 React와 같이 사용

JSX inline style inline style을 스타일링의 주요 수단으로 사용하는 것은 권장되지 않는다. JSX에선 style 어트리뷰트는 camelCase 프로퍼티를 가진 JavaScript 객체로 받아들임 DOM 노드의 프로퍼티에 접근하는 것과 일관되게

전통적인 방식의 웹 애플리케이션 단점 서버가 화면을 그리기 위해 필요한 html을 만들어서 내려주는 역할까지 하여 서버의 부담이 커짐 때문에 속도가 느려짐 정보양이 많아져 빠르게 계산하여 내려주기 위한 추가적인 캐싱 작업 페이지 이동 시, 새로운 html을 서버에서 내

Fetch API를 이용한 API 호출 Step.01 mount 된 직후에 한 번만 API 호출( useEffect() ) useEffect() import 후 useEffect() 코드 작성 비동기 통신을 위한 async 함수 작성 fetch API를 사용하여 R

Custom Hook은 API 호출과 직접 연관이 있는 건 아니지만, API 호출을 효과적으로 하는 방법들을 이해하기 위해서는 선행으로 Custom Hook이 어떤건지 이해하고 있어야 한다. 여러 개의 컴포넌트에서 공통적으로 해야하는 작업이 있을 경우 사용한다. ex

React에서 App > A > B > C > D 순서로 컴포넌트 자식이 형성되어있다 생각했을 때, <span style="background-color:\*props가 계속 전달되는 구조를 props dealing이라 한다.<span style="backg

React에서 제공하는 Hook 함수 중 하나전역 상태 관리보다는 상태 관리에 더 가까움하지만 전역 상태 관리인 Context API나 Redux와 함께 많이 쓰임useState()의 대체 함수dispatch()는 객체를 받음useState()는 state를 변경하는

Rebux 전역 상태 관리를 도와주는 라이브러리이다. Rebux or Context API : Context API + useState or useReducer는 value 값이 변할 때 마다 value 값 중 일부를 쓰는 하위 컴포넌트도 리렌더링되기 때문에 그렇지

React-Query React-Query는 fetching, caching, synchronizing, and updating server state 등을 쉽게 만들어 주는 React 라이브러리이다. 3가지 core concepts Queries Mutations

React-Query의 경우 서버 상태를 관리하기 위해 전역으로 데이터를 저장하지 않는다. 이 경우 사용할 수 있는 게 staleTime, cacheTime 이다. 어플리케이션 내에서 전역상태를 저장하고 있는건 아니지만 React-Query가 서버 상태를 cache를

함수 컴포넌트는 그냥 함수이다. jsx를 반환할 뿐.함수 컴포넌트가 렌더링 된다는 것은 누군가(부모 컴포넌트)가 그 함수를 호출하여 실행되는 것이다.함수가 실행될 때 마다 내부에 선언되어 있던 표현식(변수 등)들도 매번 다시 계산된다.컴포넌트는 자신의 state가 변경

대부분 React 앱들은 Webpack, Rollup 또는 Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 번들 된 파일(bundle.js) 을 웹 페이지에 포함하여 한 번에 전체 앱을 로드한다.때문에 프로젝트 규모가 커지면 bundle.js도 커져

React는 <span style="background-color:때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)에 불리하다.그래서 SEO를 원활하게 하기 위해서는 첫 페이지의 경우, React로 구현한 Javascript 코드

아 Nextjs 뭐더라~ 분명히 썼었는데~다시 쓴다~쉽게 풀어 말하면 라이브러리(Library) : 단순 활용가능한 도구들의 집합 같은 느낌내가 사용하고 싶을때 사용하고 사용하고 싶은거 사용하면 된다.프레임워크(Framework) : 프레임워크가 정한 규칙대로 사용해야

Next.js 다양한 기능 layout 패턴 components 폴더에 Layout.js 만들어 NavBer, Header 등 공통으로 사용하는 것을 넣는다. 공통으로 사용하는 것을 _app.js에 작성해도 되지만, 대중적으로 app.js를 크게 하기보단 Layout

<span style="color:store에 저장된 state를 storage에 저장하기 위해 redux-persist를 사용했다.다들 RTK에 redux-persist을 적용하는 걸 너무 어렵게 설명해놨는데 진짜 별거 아님위에서 작성한 store.ts에 아래

<figure> <img src="https://velog.velcdn.com/images/art11010/post/b2ba9056-6ec6-44db-a5a3-b0d0abbf5393/image.png"> </figure> 한글 입력 시 두번 입력되는 이슈가 있었다

ㅋㅋ또 쓴다 Next.jsNext.js를 사용해보긴 했지만 주로 react만 사용해서 제대로 이걸 알고 쓴다?는 느낌은 없었다주로 react를 사용한 프로젝트만 했는데 이거 끝나면 Next.js 사용하는 프로젝트에 들어갈거라 해서 다시 공부할거다코딩애플 유튜브 영상보고

Next.js의 라우팅은 너무 쉽다react 처럼 React Router 뭐 이런 라이브러리 추가적으로 안 깔아도 된다Next.js는 자동 라우팅 기능이 있는데app 폴더의 하위에 새로운 폴더와 새로운 파일(page.js)을 만들면 새로운 폴더의 폴더명과 동일한 URL

Next.js에서 이미지를 넣는 방법은 2가지가 있다일반적인 &lt;img>태그를 사용할 수 있다Next.js에서는 이미지를 주로 public 폴더에 넣고 /경로로 접근하면 바로 public에 접근이 가능하다Next.js에서 제공하는 &lt;img>태그랑 비슷한 역할인

Next.js에서는 component가 두가지 종류가 있다 server component와 client component ## server component 기본값이라고 생각하면 편하다 **`'use client'` 없이 만든 건 전부 server component*

MongoDB를 연결해볼거다사전에 MongoDB 세팅(가입, admin, db 생성 등)을 해놓고MongoDB 라이브러리(MongoDB 접속이랑 입출력 편하게 도와주는 라이브러리)를 설치해준다npm install mongodbclient component 안에 적은 코

/detail/1, /detail/2, /detail/3...글이 세개 있다고 가정했을 때 위 이미지와 같이 각각 해당되는 이름으로 폴더와 page.js 생성하면 된다하지만 글이 많을 경우, 전부 다 폴더와 파일을 생성할 수 없으니 Dynamic route를 사용해야

Next.js에서 서버 기능을 만들 때의 폴더 구조는보통 root/app/api, root/pages/api 둘 중 하나를 선택하는데root/app/api가 좀 더 신버전 문법이긴 하지만 아직 되지 않는 기능들이 있어&lt;span style="color:root/pa

## POST 게시글을 생성하기 위해 API 코드는 어떻게 작성해야 하는지에 대해 알아보려고 한다 ```javascript export default function Write() { return ( <div> <h4>글 작성</h4>

## 수정 게시글을 수정하려고 한다 생성과 크게 다르지 않으므로 자세한 설명은 생략한다 ```javascript // edit/page.js import { connectDB } from '@/util/database'; import { ObjectId } fro

`<form>`을 사용해 서버와 통신을 하면 새로고침이 일어난다 또한, `<form>`의 method 속성은 GET, POST만 가능하며 PUT, PATCH, DELETE는 사용할 수 없다 `<form>`을 사용하지 않고 모든 method로 서버와 통신을 하고 싶을

데이터 전송 GET 요청으로도 서버로 데이터 전송이 가능하다 POST 요청으로 데이터 전송할 때 `을 쓰거나 fetch() 안에 body에 넣어서 데이터를 전송할 수 있고 서버에선 요청.body`에 접근하여 수신된 데이터 출력이 가능하다 그런데 GET요청으로도 데이터

Next.js로 만든 서버를 어디 배포하려면 터미널 열어서 npm run build를 먼저해야 한다&lt;span style="color:그 다음에 npm run start 해두면 실제로 유저 요청을 처리할 수 있는 Next.js 서버가 완성된다빌드를 하면 아래 이미지

dynamic rendering으로 동작하는 페이지가 많으면 사용자가 그 페이지를 방문할 때마다 계속 다시 페이지를 그려야하기 때문에 서버 부담이 심해질 수도 있다이럴 경우, 캐싱기능을 이용하면 된다캐싱이란 데이터를 잠깐 저장해두고 재사용하는 것이다페이지를 캐싱한다는