개발/react 생태계 썸네일형 리스트형 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 ··· 3 4 5 6 다음
