방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러, 리엑트, 뷰/리엑트(React.js)9 리엑트(React) 새로고침 방지(F5 key, prevent refresh, React HashRouter) 리엑트(React)도 앵귤러(Angular)처럼 순수 클라이언트(client) 코드 이므로 오직 브라우저에서만 동작 합니다. 웹팩(webpack) 환경에서는 새로고침(F5) 이슈가 상관 없으나 개발이 완료되고 난 이후에 실제 서버에 적용 할 때는 문제가 될 수 있습니다. 다시 말해, 실제 적용 해야되는 어플리케이션 서버에서 새로고침을 하는 경우 404 오류가 발생 할 수 있습니다. 이를 극복하는 방법은 2가지 입니다. 1. 리엑트에서 라우터를 변경한다. 2. 서버에서 404 페이지에 대해서 작업한다. 먼저 리엑트에서 사용하는 라우터를 변경하는 방법 입니다. 앵귤러(Angular)에서는 useHash 라는 옵션을 라우터 설정에서 추가하면 샵(#)기호가 주소에 붙으며 새로고침을 방지 할 수 있습니다. 아래는.. 2021. 4. 13. 리엑트(React) Javascript 띄어쓰기(whitespace) 경고 파셀, 웹팩 등 개발환경에서 만나는 경고(warning) 입니다. 내용은 아래와 같습니다. Unexpected whitespace before property then no-whitespace-before-property 이번엔 리엑트(React)에서 개발하다 만난 상황이며, 경고(warning)의 의미 이므로 실제로 프로젝트가 동작하는 데 문제는 없습니다. 자꾸 거슬리는 게 싫어서 뭐가 문제인지 찾아보았습니다. 내용은, 기대하지 않는 띄어쓰기로 인한 경고라고 하는데.. 해당 경고가 나오는 곳을 아무리 살펴봐도 띄어쓰기가 잘못 되어 있는 것 같지는 않았습니다. 55번째 9번줄은 new로 시작하는데 뭐가 오류지 하고 한참을 들여다 본 순간.. 아래 then함수 구간이 보였습니다. then함수가 한칸 띄어쓰.. 2021. 4. 13. 리엑트(React) 에서 전개연산자(Spread operator) 오류 (엣지, Edge) 전개연산자는 매우 훌륭하게 객체에 대한 정보를 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다. * 출처 : developer.mozilla.org 크롬, 파이어폭스 및 사파리 등 해당 브라우저에서는 문제없이 동작하는데.. 엣지(Edge)등을 통해서 전개연산자 부분을 만나면 동작을 하지 않고 앱이 멈추어 버렸습니다. 아래와 같은 경우를 의미 합니다. 사실 쉬운 이슈거리이긴 하나 막상 만나면 매우 당황스럽습니다. 해결 방법은 간단 합니다. 일반적으로 우리는 create-react-app 명령어를 통해서 앱을 생성하고 나면 package.json 의 내용이 압축된 상태로 나오게 .. 2021. 4. 13. 이전 1 2 다음
