흰둥씨의 개발장

1. 프로젝트 폴더 생성2. 내부에 react, node 폴더 생성Express 서버 세팅node 폴더// package.json 생성. -y는 모든 설정을 기본으로npm init -y// express설치npm i express node > index.js웹서버 구동을 5000번 포트로 응답받도록 설정 (맥은 5500으로 지정)const express = require('express');const app = express();const port = 5000;app.get('/', (req, res) => { res.send('Hello World2');})app.listen(port, () => { console.log(`Server app listening on port ${port}`);})n..

Node.js란?Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(=실행엔진)으로,브라우저에서 JavaScript를 해석하는 것처럼서버에서 JavaScript를 동작할 수 있도록 하는 개발용 소프트웨어 플랫폼.구글에서 브라우저 엔진을 만들고나니 너무 잘만들었다 싶어서 이걸 독립적인 형태로 출시한거라고 보면됨.​자바스크립트를 이용하여 클라이언트 측(Front-end)과 서버 측(Back-end) 모두 개발 가능. Node.js의 패키지 생태계인 npm(Node Packaged Manager)은 세계에서 가장 큰 오픈 소스 라이브러리 생태계를 가지고 있으며 Node.js를 설치하면 npm(노드제이에스 패키지 매니저)이 같이 설치되어 사용할 수 있음.  Node.js — Run ..

리액트 React란? 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 사용자와 웹사이트의 상호작용을 돕는 인터페이스(UI)를 만들기 위한 자바스크립트 기능 모음집 특징 1. 웹 앱(Web App) 또는 네이티브 앱(Native App) 제작 가능 2. 유지보수를 쉬움 , DOM 관리 3. 성능 최적화 4. 컴포넌트에 집중 5. 자바스크립트 친화적 es6 기반 라이브러리 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태 ex) react, jQuery .. ​ 프레임워크 흐름의 제어 권한을 개발자가 아닌 프레임워크가 갖고 있는 형태 ex) bootstrap .. 앵귤러 Angular 1. 자체 내장된 기능이 많음 2. 다양한 공식 라이브러리가 존재 3. T..

Redux 상태관리 action이 전달되면 reducer가 store의 state를 변경시키는 방식 Redux는 상태관리 라이브러리로 React, Angular, Vue, Ember, jQuery 또는 Vanilla JavaScript와 같은 다른 라이브러리, 프레임워크에서도 사용 store : 전역으로 관리할 데이터를 저장하는 공간 import {createStore} from 'redux'; import rootReducer from '../store'; const store = createStore(rootReducer); export default store;​ reducer : 함수로 store에 저장했거나 저장할 데이터를 변형 action : 특정 컴포넌트에서 reducer에 변경할 데이터를 ..

Context API 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 하지만 컴포넌트를 재사용하기가 어려워 지기 때문에 꼭 필요할 때만 사용. https://ko.reactjs.org/docs/context.html React.createContext = 전역 데이터를 담고 있는 하나의 저장공간

https://reactrouter.com/en/main/start/overview SPA(Single Page Application)라고 부르는 이유 -> 처음 접속했을때 구체적인 data를 제외한 정적 파일을 모두 불러오기 때문 ​ 리액트 라우터로 페이지를 나눠 접속하는 url마다 다른 data를 보여줄 수 있음 페이지의 로딩 없이, 페이지에 필요한 컴포넌트를 불러와 렌더링 하여 보여주도록 도와줌 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태 ​ CSR(Client Side Rendering) 최초 한 번 HTML, static, js 등을 다 받아와서 로딩하는 방식 이후에는 클라이언트의 요청이 있을 때마다 리소스를 서버에서 제공하고 클라이언트가 해석 후 렌더링 ​..

v16.8에서 새롭게 등장한 개념state와 생명주기 기능을 원하는 시점에 실행되도록 만든 함수hook은 모두 'use' 로 시작​규칙 1. 무조건 최상위 레벨에서만 호출 반복문이나 조건문 또는 중첩 함수들 안에서 hook 호출 안됨 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 함 2. 리액트 함수 컴포넌트에서만 hook 호출해야 함 리액트 함수 컴포넌트에서 호출하거나 커스텀 훅에서만 호출 할 수 있음 3. 커스텀 훅use로 이름을 시작 -> 특정 함수 내부에서 훅을 호출하는지 알수 없기 때문에 규칙 위반 여부 자동 확인 x내부에 다른 훅을 호출하는 단순한 자바스크립트 함수파라미터로 무엇을 받을지, 어떤 것을 리턴해야 할지를 개발자가 정의중복되는 로직을 커스텀 훅으로 추출하여 재사용성 높이기..

https://ko.reactjs.org/ 리액트 학습사이트 리액트 생명주기란? 컴포넌트가 생성되는 시점과 사라지는 시점이 정해져 있는 것 mount -> 컴포넌트 생성 ​ update -> 컴포넌트 렌더링 / 컴포넌트의 props가 변경될 때 / setState() 함수 호출에 의해 state가 변경될 때 ​ unmount -> 상위 컴포넌트에서 현재 컴포넌트를 더이상 화면에서 표시하지 않음 ​ 컴포넌트는 계속 존재하는 것이 아니라 흐름에 따라 생성되고 업데이트 되고 사라지는 과정을 가짐 VirtualDOM 화면에 나타나는 내용을 기술한 자바스크립트 객체를 지칭 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현 불변성을 가지고 있음 엘리먼트는 한번 생성되면 자식이나 속성을 바꿀 수 없기 때문에 엘리먼트를 ..

Array.prototype.at(인덱스번호) = 배열 인덱스 번호 위치 값 반환 at() 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환 양수와 음수 모두 지정할 수 있고, 음수 값의 경우 배열의 뒤에서부터 인덱스를 셉니다. array[array.length - 1] 값은 array.at(-1)와 동일하다. 주어진 인덱스가 배열에 없으면 undefined를 반환 const colors = ['빨강', '초록', '파랑']; colors.at(-2); //'초록' 반환 colors.at(0); //'빨강' 반환 Array.prototype.concat() concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환 const array1 = ['..

axios로 get요청을 여러번 넘기는것이 가능하다고 해서 여러 블로그를 참고 하여서 아래와 같이 진행하였는데 안되었다...export const Data = () => {  const [data, setData] = useState([]);  useEffect(() => {    const URL = `APIURL`;     axios      .all([axios.get(URL1), axios.get(URL2)])      .then(res1, res2 => {      let RES1 = res1;      let RES2 = res2;      let res = [..RES1,...RES2]        setData(res)      })      .catch(err => {        con..

SPA 란? Single Page Application 단일 페이지 어플리케이션 한 사이트를 하나의 HTML 문서로 표현 가능 > 컴포넌트를 한장의 html에 레고처럼 넣어서 페이지 이동 필요한 모든 정적 리소스를 최초 한 번에 다운로드하며 필요한 데이터만 따로 불러 오기 때문 추가 로딩 속도가 빠름 리액트 라우터로 페이지를 나눠 접속하는 url마다 다른 data를 보여줄 수 있음 페이지의 로딩 없이, 페이지에 필요한 컴포넌트를 불러와 렌더링 하여 보여주도록 도와줌 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태 SPA MPA 보다 빠른 반응, 성능 컴포넌트 기반 재사용성 서버의 템플릿 연산을 클라이언트로 분산 모바일 앱 개발시 동일한 API 사용 가능 초기 구동 속도 ..

된다고 합니다. ㅎㅎ HTML을 배울때 인라인요소 안에 블럭요소를 넣으면 안된다고 배웠다. 리액트를 한다면 이동할때 라우터를 쓰니까 괜찮다지만 바닐라 자바스크립트를 쓸경우 a태그를 활용해서 경로를 작성하게된다. 그렇게 작업하다보면 당연히 span 같은 인라인요소에는 블럭요소를 넣지 않겠지만, a태그에는 부득이 블럭요소가 왕왕 들어갈때가 많았다. (마음에 돌얹힘) Changes in HTML5 Although previous versions of HTML restricted the a element to only containing phrasing content (essentially, what was in previous versions referred to as “inline” content), the..