728x90 Frontend28 React - reusable components(with. bulma.css) Parent component | (props) Child component Props System pass data : one way 부모가 자식 컴포넌트를 다르게 구성 할 수 있게 한다. add JSX element 리액트는 구성요소를 하나의 객체로 묶는다 color ="red"→ {color: "red"} child의 첫번째 인자로 넘긴다 해당 인자로 넘긴 props를 사용한다. //부모 컴포넌트 import 'bulma/css/bulma.css' import React from 'react' import ProfileCard from './ProfileCard'; //js파일은 확장자 필요없음 import AlexaImage from './assets/images/alexa.png'//js파일이 .. 2022. 12. 15. React - jsx(JavaScript Xml) JSX란? const element = Hello, world!; //HTML인가 자바스크립트인가...? 리액트에서 쓰는 자바스크립트의 확장형이다. 자바스크립트지만 공식 자바스크립트가 아니기 때문에 브라우저에서 읽을 수 없다. 코드가 번들링 될 때 Babel을 사용하여 자바스크립트로 변환된다. JSX를 꼭 써야하는 것은 아니지만 유지보수에 도움이 되며 에러를 줄일 수 있기 때문에 쓰는 것을 추천한다. 또한 코드 작성에 있어서 굉장히 편하다 jsx를 사용하지 않는다면 복잡한 컴포넌트의 경우 수많은 React.creatEelement 가 잔뜩 적힌 파일들을 보게될 것…! Rule of JSX 변수를 사용할 때는 {}로 감싸주어야한다. Boolean, undefined, null값은 표시되지않는다. 배열의 경.. 2022. 12. 13. Nuxt3 error- 10 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. 한 페이지에서 해당 에러가 지속적으로 발생했는데 구글링했을 때는 자바스크립트 관련 문서만 나오고 nuxt는 root element를 하나만 쓰지않아서 그렇다고 하는 것도있고 다 아니엿다..!! 흑흑흑흐그흑ㅎ 혹시나해서 레이아웃 문제인가 싶어서 봤는데... 레이아웃은 크게 문제가 없었다고 생각했었는데 설마 false로 쓴게 문제인건가 싶어 수정하니 다른 레이아웃으로 수정하니 에러 없이 해결완..^^ definePageMeta({ layout: false, //error!! layout: 'layout-none', //ok!! }) 2022. 12. 11. FCM 같은 기기에서 다른 유저로 로그인한 경우에 이전 로그인 한 유저의 알람이 날라오는 이슈 FCM 토큰을 등록했는데 한 기기(한개의 브라우저)에 여러 아이디로 사용하는 경우를 테스트 할 때 로그아웃한 유저의 알람이 자꾸 날라오는 이슈가 있었다. 디비를 확인해보니 여러 유저가 동일한 FCM 토큰 값을 가지고 있는 것을 확인했다. 원인 같은 브라우저에서 각각의 아이디를 사용하는 경우 브라우저가 동일하기때문에 동일한 FCM 토큰이 저장됨. → FCM토큰은 디바이스를 기준으로 각각을 구분한다.웹의 경우 브라우저 별로 구분이 된다. 유저에 종속되는것이 아닌 브라우저에 종속됨 해결방안 로그아웃 할때 서버에서 유저 토큰을 삭제 → 로그인시에 다시 등록 FCM 토큰은 만료기간이 없어 추가적인 갱신작업이 필요하진않다. 웹의 경우는 큰 고려사항이 없지만 앱으로 웹앱으로 씌우는 과정에서는 고려야하는 사항들이있다... 2022. 12. 3. Nuxt3 - FCM 적용하기( FCM 등록부터 메세지 송신까지 ) 개발중인 프로젝트에 알람기능이 필요하여 웹소켓과 fcm중에서 어떤게 좋을 지 시니어분께 자문을 구했었는데 아무래도 웹소켓은 사용자가 적을때는 괜찮지만 많아질수록 서버 관리비용이 높아지기때문에 관리 비용적인 측면이나 개발적은 측면에서도 적용도 쉬운 fcm을 적용하는 것을 제안해주셨다. FCM을 등록하기 이전에 앞서서 서비스워커라는 것을 등록해야한다. 서비스워커는 기존에 사용할 일이 없어서 백그라운드에서 돌아가게 해주는 것 정도로 알고 있는데 조금더 자세히 알아봤다. 💡 서비스 워커는 출처와 경로에 대해 등록하는 이벤트 기반 워커로서 JavaScript 파일의 형태를 갖고 있습니다. 서비스 워커는 연관된 웹 페이지/사이트를 통제하여 탐색과 리소스 요청을 가로채 수정하고, 리소스를 굉장히 세부적으로 캐싱할 수.. 2022. 11. 21. Nuxt.js - 모달을 사용하여 오늘하루보지않기(Element ui) 진행중인 프로젝트에서 이벤트를 진행하게 되어 팝업을 띄워달라는 요청사항을 전달 받았다. 팝업은 브라우저 자체에서 팝업보지 않기를 진행하면 해당 팝업이 뜨지않기 때문에 모달로 진행을 했다. 모달은 브라우저 설정과 관계없이 띄울 수 있기에 팝업기능을 대신하여 모달로 띄우는 추세라고한다. 모달은 Element ui의 dialog를 사용했다. 페이지를 들어올 때마다 모달을 띄우고 싶었기 때문에 모든 페이지에서 공통적으로 사용하고 있는 footer 컴포넌트에 해당 모달을 구현하였다 전체적인 플로우 - 쿠키를 사용하여 전달해야하는 데이터가 아니기 때문에 클라이언트 상에서 해결 세션 종료 후에도 유지되어야하므로 로컬스토리지에서 진행 최초 모달 오픈 페이지 들어오면 모달 오픈 → 새로고침 시에도 모달 오픈 다시 보지 .. 2022. 11. 15. 이전 1 2 3 4 5 다음 728x90 반응형
