FrontEnd/React.js37 [React.js] universal-cookie를 이용한 쿠키 설정 쿠키(Cookie)의 개념 쿠키란? 인터넷 사용자가 어떠한 웹 사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터(클라이언트)에 설치되는 작은 기록 정보 파일이다. HTTP 쿠키, 웹 쿠키, 브라우저 쿠키라고도 하며, 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다. 쿠키의 종류 세션쿠키 (Session Cookie) 보통 만료시간(Expire data)를 설정하고 메모리에만 저장되며 브라우저 종료 시 쿠키를 삭제한다. 지속쿠키(Persistent Cookie) 장시간 유지되는 쿠키파일로 저장되어 브라우저 종료와 관계없이 사용한다. Secure Cookie HTTPS에서만 사용, 쿠키 정보가 암호화되어 전송한다.. 2021. 12. 1. [React.js] 익스플로러(IE) 호환 IE의 ES6문법 미지원 문제 React는 기본적으로 JavaScript ES6이상의 문법을 사용한다. 위와 같이 Internet Explorer은 ES6문법을 지원하지 않기 때문에, 별도의 호환 과정이 필요하다. React 프로젝트를 IE11에서 실행 시 아래와 같은 에러가 발생한다. 이러한 에러는 react-app-polyfill을 사용해 해결이 가능하다. 해결방법 : react-app-polyfill 설치 React 개발에서 사용하는 다양한 문법을 변환해주는 라이브러리이다. Promise, window.fetch, Symbol, Object.assign, Array.from + [IE9 Map, Set]와 같은 필요한 것만 포함하고 있어 사이즈가 작고 가벼운게 특징이다.설치 방법 1. npm ins.. 2021. 11. 30. [React.js] Warning: Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option> Warning Message Warning: Use the 'defaultValue' or 'value' props on instead of setting 'selected' on Warning Message가 발생하는 이유 일반적인 HTML에서 에 기본값을 설정하는 방법은 option 요소 중 하나에 selected 속성을 추가하는 것이다. 하지만 React에서는 다음과 같이 option 태그에 selected를 사용하면 경고가 발생한다. First Second Third 해결방법 select 태그에 defaultValue를 사용해 기본값을 설정할 수 있다. First Second Third 2021. 11. 26. [React.js] Warning: The href attribute is required for an anchor to be keyboard accessible... Warning Message Line 82:31: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/.. 2021. 11. 25. [React.js] Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> Warning: validateDOMNesting(...): cannot appear as a child of . Add a , or to your code to match the DOM tree generated by the browser. at tr at table at div at div at Information (http://localhost:3000/main.f8aa81041ea5266af521.hot-update.js:33:3) at div at App (http://localhost:3000/static/js/main.chunk.js:171:94) console. 브라우저에는 태그가 필요하다. 코드에 없으면 브라우저에서 자동으로 삽입하는데, 이 것은 첫 번째 랜더링에서는 잘 동작하지만 테이.. 2021. 10. 13. [React.js] Error : React Hook "useState" is called in a function "customPage" which is neither a React function or a custom React Hook function React Hook을 사용한다면, 함수형 컴포넌트가 반드시 대문자로 시작해야 한다. 해당 에러는 함수형 컴포넌트를 customPage과 같이 소문자로 시작하는 이름으로 지정해서 생기는 에러이다. Hook은 JavaScript 함수이지만 사용할 때 두 가지 규칙을 따라야 한다. 최상위 수준에서만 Hook 호출 루프, 조건 또는 중첩 함수 내에서 Hook를 호출하지 않는다. 대신, 조기 반환 전에 항상 React 함수의 최상위 수준에서 Hooks를 사용하라. 이 규칙을 따르면 구성 요소가 렌더링될 때마다 후크가 동일한 순서로 호출된다. 이것이 React가 다중 호출 useState과 useEffect 호출 사이의 Hook 상태를 올바르게 보존할 수 있게 해준다. React Functions에서만 Hook 호.. 2021. 9. 27. 이전 1 2 3 4 5 6 7 다음 반응형
