개발 썸네일형 리스트형 only Worker registration successful http://localhost:3000/ 종종 cra(create-react-app)을 사용하다보면 아래와 같이 빈 화면을 띄울때가 있습니다. 음.... 이건머지... 에러도 안나고 worker만 등록 잘되었다는 코솔만 뜨니 처음에는 당황스러웠습니다. npm build도 다시 해보고, fetch가 덜되었는지 worker도 확인하던 중에 찾은 해결법은! ctrl+s, 저장입니다. 위 상황은 종종 편집을 하고 저장이후 webpack이 다시 컴파일을 할때 생기는데, 저장을 한번더 해주면 짠하고 화면이 나타날 겁니다. 더보기 TypeError Cannot read property 'setState' of undefined" 단일 쓰레드 형식인 react는 data를 한곳에서 다룹니다. 클래스별 state을 정할수 있고, 다른 클래스에게 props형식으로 정보를 전달할 수도있습니다. 가장 기본적인 state는 setState을 이용해 접근할수 있는데, 결과를 찍어보면 다음과 같은 에러가 나옵니다. TypeError Cannot read property 'setState' of undefined" 이는 this.setState시 this(state).값이 undefined이기 때문인데, setState함수 실행 자체가 비동기적으로 작동해 this가 정해지지 않은 상태에서 콘솔을 찍었기 때문입니다. state = {} this.setState({ a: "1" }) console.log(this.state) //error 발생 s.. 더보기 Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? 초기 cra(create-react-app) 사용시 위와 같은 에러가 뜹니다. 주로 class 작성시 생기는데요, 해결법은 간단합니다. 위 에러발생시 editor에는 다음과 같은 에러가 뜹니다. 제가 테스트로 작성한 코드는 다음과 같았습니다. import React, { Component } from 'react'; class Test extends Component { return ( test test ); } export default Test; 감이 오시나요? 에러문구를 해석해보면 부보 element가 없다였고.. 더보기 react에서 이미지 경로 문제 Module not found: You attempted to import ../img/1.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported 클래스 안에 이미지 태그를 넣어주고, 경로를 설정해줬는데 다음과 같은 문제가 발생했습니다. 이미지를 src폴더 밖에서 불러온게 문제라고 하는데, 뭐가 문제일까요? 이미지가 불려지는 경우는 다음과 같습니다. 1. 이미지 태그에 src속성으로 바로 설정 2. 맨 상단에서 이미지 자체 import 3. css 파일에서 backgound-imgae로 사용 2번과 3번의 경우 불러올 이미지가 src폴더 아래에 꼭 있어야 했고, 1번의 경.. 더보기 react에서 아이콘 변경하는 방법 프로젝트를 진행하던중 아이콘을 바꾸고 싶었습니다. 기존 html에서는 head에 변경을 주면 됬는데, 음... 저는 되지가 변경이 안되더라구요. 그래 고민을 하던중 매우 간단한 방법을 찾았습니다. 아이콘을 바꾸고 싶으신 분이 계시면 이 글을 참고해주세용. 1. cra(create-react-app)설치후, pubilc 로 들어갑니다. 2. 파일중 favicon.icon가 아이콘 이미지로 사용됩니다. 사용하고자 하는 이미지를 가져와 이름을 favicon.ico로 변경해줍니다. 3. 끝입니다.ㅎ 더보기 cra(create-react-app)+pwa(progressive web app) 만들기 사용자 편의성을 고려해 react로 개발하던중 캐싱, 설치, 푸쉬알림이 가능한 구글의 pwa에 대해 알게되었습니다. 만들고 있는 웹 서비스에 적용하고 싶었고, 아래는 제가 적용한 방법입니다. react에 pwa를 부착하고 싶으신 분들은 한번쯤 읽어보세요. 1. create-react-app ‘파일명’을 이용해 cra를 설치합니다. 2. 생성된 public폴더안에 worker.js 파일을 생성해주고 아래 코드를 넣어주세요. var CACHE_NAME = 'pwa-task-manager'; var urlsToCache = [ '/', '/completed' ]; // Install a service worker self.addEventListener('install', event => { // Perform.. 더보기 create-react-app이용해, react 시작! html, css, js, php를 사용하다 웹에 사용자 편의성을 줄수 있는 spa방식에 대해 알게 되었습니다. 끉기지 않고 웹을 사용할수 있다는 점이 매우 매력적이었고 곧바로 spa공부를 시작했습니다. 현재 나와있는 spa는 vue와 react가 대표적이었는데, 두개중 고민하다 모듈 생태계가 조성된 node를 기반으로한 react로 결정했습니다. 그리고 환경셋팅이 되어있는 cra(create-react-app)을 사용하기로 했습니다. 1. 먼저 공식사이트(https://nodejs.org/en/) 에서 node를 설치합니다. (동시에 패키지를 관리할수있는 npm도 설치됩니다) Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScrip.. 더보기 이전 1 ··· 15 16 17 18 다음
