흰둥씨의 개발장

프로젝트를 생성 할 폴더에서 터미널 실행 yarn create vite -> 생성할 프로젝트 이름 입력하면 프로젝트 폴더 생성됨 프로젝트 폴더에서 터미널 실행 yarn -> React 선택하고 -> Typescript 선택하면 끝!

JWT? ㄴ데이터가 JSON으로 이루어져 있는 토큰 ㄴ대표적인 두가지 인증방식(세션기반, 토큰기반) **세션기반 인증 시스템? ㄴ서버가 사용자의 로그인중인 것을 기억하고 있다는 것 ㄴ사용자가 로그인하면 서버는 세션 저장소에 사용자 정보를 조회하고 세션 id발급해줌 ㄴ발급된 id는 주로 브라우저 쿠키에 저장됨 ㄴ사용자가 다른 요청을 보낼 때마다 서버는 세션 저장소에서 세션을 조회하고 로그인여부를 결정하여 작업을 처리, 응답함 (발급된 id의 발급번호 같은걸 세션저장소목록을 조회해서 있는지 유효한지 확인함) ㄴ세션저장소는 주로 메모리, 디스크, 데이터베이스...를 사용함 ㄴ단점) 서버 확장이 번거로워짐 (서버인스턴스가 여러개되면 모든 서버끼리 같은 세션을 공유해야하므로 ... 사용자가 많을수록서버의 양이 방..

리액트 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 엘리먼트의 가상 표현 불변성을 가지고 있음 엘리먼트는 한번 생성되면 자식이나 속성을 바꿀 수 없기 때문에 엘리먼트를 ..

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 사용 가능 초기 구동 속도 ..