방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러, 리엑트, 뷰111 리엑트(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. 앵귤러 튜토리얼(Angular tutorial) - 35 : 프록시(proxy) 이번 시간에는 개발과 관련된 프록시(proxy)라는 주제로 살펴보려 합니다. 프록시의 기본 의미는 간접, 대신 의 의미로 무언가 대신하여 주는 기능을 의미 합니다. 이번에 소개할 앵귤러에서의 프록시는 프로젝트 개발 중 에서 다른 서버와의 연동을 의미 합니다. 앵귤러 프로젝트는 순수 클라이언트 언어로 구성되어 있습니다. * 조금 더 상세한 구성을 알고 싶으면 아래 링크를 통해 확인하여 주세요. lts0606.tistory.com/329 앵귤러 튜토리얼(Angular tutorial) - 2 : 구성 앵귤러 환경구성은 문제없이 잘 끝내셨는지요! 이번시간에는 앵귤러를 왜 쓰는지, 어떻게 사용해서 실제로 적용하는지에 대해서 먼저 살펴보도록 하겠습니다. 예전의 HTML에서의 개 lts0606.tistory.com.. 2020. 12. 21. 앵귤러 튜토리얼(Angular tutorial) - 34 : 이벤트와 애니메이션(2) 저번시간에는 마우스 이벤트를 감지하여 앵귤러에서 어떻게 데이터와 화면을 구성하는지에 대해서 살펴 보았습니다. 이번시간에는 비슷한 내용인 에니메이션(animations)에 대해서 살펴 보겠습니다. Javascript의 라이브러리 중 유명한 Jquery라는 라이브러리가 있습니다. animate, fadeIn, fadeOut 및 draggable등 다양한 함수를 통해서 이벤트를 지원해주는 멋진 라이브러리 입니다. 마찬가지로, 앵귤러에서도 이러한 애니메이션 이벤트를 직접 다루어 볼 수 있습니다. 버튼을 눌러서 특정 애니메이션을 주는 기능을 만들어 보겠습니다. 프로젝트는 저번과 동일한 프로젝트인 sixStudy에 진행하겠습니다. 먼저 모듈을 설정하여 줍니다. * 대상 : app.module.ts import { .. 2020. 10. 28. 앵귤러 튜토리얼(Angular tutorial) - 33 : 이벤트와 애니메이션(1) 저번시간에 우리는 Validator와 관련된 내용을 살펴 보았습니다. 이번시간에는 브라우저 이벤트를 감지하여 처리하는 방법에 대해서 조금씩 살펴 보겠습니다. 프로젝트는 기존에 만든 sixStudy를 그대로 사용하겠습니다. 먼저 살펴볼 내용은 마우스와 관련된 이벤트 처리방법 입니다. 사용자의 마우스와 관련된 이벤트 감지는 간단하게 속성만 달아주면 손쉽게 부여할 수 있습니다. 이를 위해 사용자가 특정 영역을 드래그(drag)하는 기능을 만들어 보도록 하겠습니다. * 대상 : app.component.html Drag Area div 테그에 4개의 속성과, ngStyle이라는 디렉티브를 추가하였습니다. ngStyle에는 해당 테그의 스타일과 관련된 내용이 들어갈 예정이며 나머지 4개의 속성에는 이벤트를 위한 .. 2020. 10. 16. 이전 1 ··· 3 4 5 6 7 8 9 ··· 19 다음
