도찐개찐

JWT를 쓴다. refreshToken은 secure httpOnly 쿠키로, accessToken은 JSON payload로 전달받는다. 웹 어플리케이션이 mount 될 때 마다 refreshToken을 이용해 새로운 accessToken을 받아와 웹 어플리케이션 내 지역 변수에 저장하고 사용한다. 이 방식으로 CSRF 취약점 공격과 (다른 선택지보다) XSS 공격에서 안전할 수 있다. 하지만 웹 어플리케이션이 XSS 공격에 취약하다면 어떤 방식을 선택하던 보안이 위험하기에 꼭 XSS 처리를 해야 한다. 클라이언트에서 안전한 로그인 / 유저 인증 (Authentication) 방식에 대해 얘기하려면 다음 세 가지를 먼저 이해해야 한다. 로그인은 어떻게 이루어지나 보안은 어떻게 뚫리나 브라우저 저장소 종..

ReactJS로 프로젝트를 시작하면, 보통 create-react-app을 사용합니다. 개발을 하고 시작을 하려면 다음과 같은 명령을 실행하게 됩니다. $ yarn run start 그러면 http://localhost:3000으로 페이지가 열리게 됩니다. 실행포트 변경하기 실제 start 스크립트를 보면 다음과 같이 포트를 설정하고 있습니다. const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; 따라서 package.json 파일에서 scripts 부분의 start에 PORT 환경변수 설정을 추가합니다. 여기서는 Windows환경에서 9090포트로 변경하겠습니다. { ... "scripts": { "start": "set PORT=9090 && r..

문제점 아래와 같이 자바스크립트의 map 함수를 사용한 경우 콘솔에서 " Warning: Each child in a list should have a unique "key" prop "이라는 주의 문구를 확인할 수 있다. {["AAA", "BBB", "CCC"].map(item => {item} )} React는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성한다. 리액트 라이브러리는 이 관계를 이용해 컴포넌트 리렌더링 여부를 결정한다. 불필요한 리렌더링을 방지하기 위해서는 각 자식 컴포넌트마다 독립적인 key값을 넣어줘야 한다. 해결 방법 배열로 map 함수를 사용해 JSX 리스트를 구현할 때 key prop을 자식 컴포넌트마다 넣어줘야 한다. Ex: Item1 자바스크립트의 배열..

일반 state는 setState를 통해 가볍게 state 수정이 가능하지만, 아래와 같이 중첩된 state의 경우엔 setState만으로 값이 변경되지 않습니다. this.state = { tempList: { List1: [], List2: [], List3: [] } }; state의 List1, List2, List3 ... 같이 중첩된 객체의 state를 변경하려면, 단순 setState만으로는 한계가 있습니다. 이는 setState의 비동기성으로 인해 발생하는 상황인데, setState와 함께 업데이트 함수를 이용하여 state 값을 변경시킬 수 있습니다. const newList = [1, 2, 3] this.setState(prevState => { // Object.assign메소드로 t..

Fragment? 리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. 리액트를 사용하기 위한 문법인 JSX 를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다. 이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다. Fragment 사용 이유 fragment 를 사용해야 하는 이유를 찾아보면 가장 많이 나오는 예시! 테이블 예시를 보자. import React from "react"; function App() { return ( ); } function Table() { return ( Hello World ); } export default App; table 컴포넌트의 랜더링을 위해서 table 이라는 클래스명을 가진 div 로 묶어서 return 을 한다..

훅은 리액트 버전 ^16.8부터 사용할 수 있는데요 리액트 문서에서는 훅을 "함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동, 연결 (hook into) 해주는 함수" 라고 이해하면 된다고 합니다! 클래스형 컴포넌트의 문제점들을 해결하기위해 나온 것이 바로 훅입니다. 훅은 함수형 컴포넌트에서 상탯값,생명주기,Ref 등 여러가지 기능들을 사용하게 해줍니다. [리액트 공식문서 : hook의 장단점 & INTRO]를 보면 클래스형 컴포넌트가 리액트의 진입장벽을 높게 만든다고 합니다. ▼ 정리해보면 이렇습니다. 클래스형 컴포넌트의 단점 클래스형 컴포넌트에서 로직 재사용시에 사용하는 고차컴포넌트, 렌더속성값 패턴은 리액트 요소 트리를 깊게만든다. 따라서 성능에 부..

PureComponent와 Component의 차이 React.PureComponent는 사실 React.Component와 비교해서 딱 한가지만 다르다 react의 생명주기 메서드중 하나인 shouldComponentUpdate를 어떻게 쓰는가 하는 부분이다. shouldComponentUpdate() shouldComponentUpdate()는 props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출된다. 기본적으로 shouldComponentUpdate() 메서드의 return값은 true 인데 false를 반환할 경우 render()와 componentDidUpdate()는 호출되지 않는다. component : shouldComponentUpdate React.Comp..

1. 클래스형 컴포넌트 react 컴포넌트를 선언하는 두가지 방식 중 하나. [클래스 컴포넌트 & 함수 컴포넌트] 현재 자주 사용하지 않지만, 아직도 사용하는 기업들도 있다. 클래스형으로 구성된 프로젝트의 유지보수를 위해서도 클래스형 컴포넌트에 대한 개념도 알아야 한다. 2. 클래스형 컴포넌트와 함수형 컴포넌트의 차이 1) 선언 방식 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = 'react'; return {name} } export default App; 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component {..