로니의 개발 이야기

리액트는 DOM에 리액트 컴포넌트를 렌더링 해주는 render메소드를 제공한다. ReactDOM.render(element, container[,callback]) render는 컨테이너 DOM에 element를 렌더링 하는 함수이다. 이 render함수는 container의 자식으로 react component를 넣어주는데, 기존에 이미 렌더링 된 react component가 있다면, 업데이트만 해주게 된다. 그리고 렌더링이 완료되면 세 번째 인자로 전달된 callback이 실행되게 할 수 있다. 이 방식은 CSR(Client Side Rendering)을 할 경우에 사용된다. 그렇다면 SSR(Server Side Rendering)을 사용하는 프레임워크를 사용할 경우에는 어떻게 해야 할까? 이때 사..

react 개발을 진행하면서 webpack에서 빌드를 할 때, 계속 아래와 같은 오류가 발생해서 이를 해결해보고자 했다. 오류에 따르면 뭔가 최적화가 안되고 있고, react-icon 주에서 fa와 md에서 최대 값인 500kb를 초과하고 있다는 내용이었다. [BABEL] Note: The code generator has deoptimised the styling of .. react-icons/fa/index.esm.js as it exceeds the max of 500KB. [BABEL] Note: The code generator has deoptimised the styling of .. react-icons/md/index.esm.js as it exceeds the max of 500KB...

npx create-react-app taskbox 명령을 사용했는데, 아래와 같은 오류가 발생하여서 이를 해결해보고자 한다. 간단하게 이제 글로벌 설치가 지원되지 않는다는 것이다. You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) We no longer support global installation of Create React App. 해당 오류를 해결하기 위한 방법으로 아래와 같은 방법이 터미널에 제시되고 있다. Please remove any global installs with one of the following commands: npm uninstall -g create-react-app ya..

🅰 useState 1. 왜 사용할까? state를 사용하기 위해서 사용한다. 함수형 컴포넌트 안에서는 state를 사용할 수 없었다. 여기서 useState Hook을 이용하여 state를 사용할 수 있게 되었다. 2. 무엇을 호출할까? state 변수를 선언하고, 그 state를 호출할 때 사용한다. this.state가 제공하는 기능과 똑같다. 3. 인자로 무엇을 넘겨줄까? 인자로 넘겨주는 값은 state의 초기 값이다. 아래의 경우 초기 값으로 0을 넘겨주는 것이다. useState(0); 4. 무엇을 반환할까? state 변수와 해당 변수를 갱신할 수 있는 함수 두 가지 쌍을 반환한다. 예를 들어, 아래와 같이 선언이 되었다고 했을 때, count라는 이름의 state는 0의 초기 값을 갖고, ..

이번에는 React 공식 문서에서도 실험 단계? 인 Suspense와 react-router-dom에서 사용하는 내장 함수들을 사용해보았다. 각각의 특징들을 예시를 통해서 간단하게 정리해보았다. 사용 예시 import(`import할 PATH`))} /> Route : Route는 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링 해주는 역할을 한다. 여기에 사용된 lazy 함수는 동적 import를 사용해서 컴포넌트를 렌더링 하는 기능을 담당한다. lazy는 Suspense 하위 컴포넌트에서 렌더링 되어야 한다. 그렇다면 Suspense는 뭘까? Suspense : Suspense는 데이터를 불러오기 위해서 사용된다. 공식 문서에 따르면 선언적으로 데이터를 비롯한..

➖ 고객 정보 삭제 기능 구현하기 DB 테이블에서 완전히 제거하지 않고 DB 테이블 상에서 데이터가 삭제되었다고 체크만 하고 실제로 DB에서 해당 데이터를 완전히 삭제하지 않는 방법으로 개발을 진행해보겠다. 왜냐하면 데이터가 언제 삭제가 되었는지 등에 대한 정보를 기록할 수 있기 때문이다. 0️⃣ 고객 정보가 담긴 CUSTOMER 테이블 수정하기 1) 고객 데이터가 삭제가 되었는지에 대한 데이터를 담을 컬럼 추가 USE management; ALTER TABLE CUSTOMER ADD createDate DATETIME; ALTER TABLE CUSTOMER ADD isDeleted INT; 2) 생성된 컬럼을 NULL로 비워두면 좋지 않기 때문에 데이터를 채워준다. USE management; UPDA..

🛹 부모 컴포넌트의 상태 변경을 통한 고객 정보 갱신 0️⃣ 생성자 함수 만들기 (./client/src/App.js) props에 생성자 처리해주고 그 안에서 state를 갱신할 수 있도록 해주기 constructor(props){ super(props); this.state = { customers : '', completed : 0 } } 1️⃣ state를 초기화해줄 수 있는 함수 만들기 (./client/src/App.js) 1) 'stateRefresh' 함수를 만들고 데이터 초기화 시키기 stateRefresh = () => { this.setState({ customers : '', completed : 0 }); } 2) 고객 데이터 불러오는 부분 넣어주기 stateRefresh = ()..

🍕 고객 추가 form 구현 및 이벤트 핸들링 0️⃣ CustomerAdd.js 컴포넌트 만들기 (./client/src/CustomerAdd.js) 1️⃣ 서버와의 통신 목적 라이브러리인 axios 설치하기 directory를 client로 이동한 뒤 npm install --save axios 명령어를 통해서 axios를 설치한다. 2️⃣ CustomerAdd.js 컴포넌트 작성하기 (./client/src/CustomerAdd.js) 1) React 라이브러리를 불러오고, post방식으로 고객 추가 데이터를 서버로 보낼 수 있도록 axios에서 post 라이브러리를 불러온다. import React from 'react'; import { post } form 'axios'; 2) 필요한 state..

React.js 에서 API 로딩 처리하기 웹 브라우저에 API가 호출되어서 랜더링이 진행되어야 하는데 그렇지 않은 경우에 사용자에게 로딩 화면만 출력이 되도록 구성해보겠다. https://material-ui.com/components/progress/ 를 이용해서 API 로딩 처리를 진행해보겠다. 0️⃣ 필요한 라이브러리 불러오기 필요한 라이브러리를 import 해준다. import CircularProgress from '@material-ui/core/CircularProgress'; 1️⃣ state를 추가하기 progress bar는 0%부터 100%까지 충전이 되듯이 애니메이션이 보여지게 된다. 그렇기 때문에 completed라는 변수를 만들어서 0이라는 값을 넣어 주었다. state = {..

state를 설명하기에 앞서, 생성자에 대해서 알아보겠습니다. 생성자 (contructor)? 생성자는 클래스의 인스턴스가 생성되면 가장 먼저 실행되는 메서드입니다. '생성자'라는 이름에 걸맞게 클래스의 다른 어떤 메서드보다 먼저 실행되며, 주로 인스턴스의 초기 설정에 대한 로직을 생성자에 작성합니다. super(props)는 항상 최상단에 위치해야 한다. super는 React에서 React.Component를 가리킵니다. 중요한 것은 super(props) 선언 후에 constructor에서 this 키워드를 사용해야 한다는 것입니다. import React, { Component } from 'react'; class App extends Component{ constructor(props){ su..