Front End/React11 [React] 직접 개발 환경을 구축하고 배포시 이미지가 안 보일 때 | copy-webpack-plugin CRA(Create React App)를 쓰지 않고 리액트 개발환경을 직접 구축할 수 있다는 것을 알게 된 이후 npx create-react-app my-app 같은 명령어를 커맨드라인에 치는 것보다 하나라도 직접 해보자는 생각으로 과제를 할 때 바벨과 웹팩을 이용하여 리액트 개발환경을 구축하고 있다. 그러면서 CRA가 얼마나 많은 환경설정들을 포함하고 있는지도 알게 되는 중이다. 사전과제를 진행하면서 로컬에 이미지 파일을 저장하고 배포할 때 같이 묶어서 배포하는데 데브서버에서 잘 보이던 이미지가 배포를 하고 나니 원하는대로 보이지 않고 엑박인 상황이 발생했다. file-loader를 설정해줘야 했나 싶어서 설치하고 웹팩에 해당 설정을 해주었는데도, npm build 로 앱이 빌드된 상황을 보니 설정해.. 2022. 1. 19. [React] CRA 쓰지 않고 리액트 개발환경 구축 | webpack.config.js 리액트로 개발을 하는 사람이라면 직접 개발환경을 구축하기보다는 npx create-react-app my-app 이라는 명령어로 개발환경을 구축하는 경우가 많을 것 같다. 나는 리액트를 처음 시작할 때, 개발환경을 직접 구축할 수 있다는 생각을 하지 못했고 위의 명령어를 사용하는 것이 리액트를 사용하는 방법이라고만 알고 있었다. 그런데 리더님이 넘겨주신 자료를 보며, babel과 webpack을 포함하여 직접 리액트의 개발환경을 구축할 수 있다는 사실을 알게 되었다. CRA로 개발환경을 구축하면 편리하다는 장점이 있지만, 사용하지 않는 기능까지 포함하여 모듈의 크기가 크다는 단점을 꼽을 수 있다. 프론트엔드 스터디의 1주차 과제로 리액트 개발환경 구축하기를 하고 이를 계기로 webpack에 대한 궁금증이.. 2022. 1. 4. [React] 로컬에서 데이터 로직에 대한 고민 개발이라고 해야할지, 퍼블리싱이라고 해야할지 그런 일을 리액트로 작업하고 있는데 한, 두개가 아닌 수십개의 이미지를 어떻게 하면 하드코드하지 않고 로직을 만들어서 브라우저에 띄울 수 있을까에 대한 고민과 이를 풀어낸 과정. 적은 개수의 이미지 같은 경우엔 src 폴더 안에 img 폴더를 따로 만들고 여기에서 해당 이미지를 import 해서 사용했는데 구글링을 해보니까 이미지 같은 경우는 굳이 import를 하지 않아도 public 폴더 안에 assets 폴더를 만들고 여기에 이미지를 넣어 로 사용할 수 있더라. 이미지를 컴포넌트에 직접 import해서 사용했던 방식 import React from 'react'; import dropdown from 'img/btn_dropdown.svg'; const .. 2021. 12. 22. [React] Hook으로 카카오맵 API 사용하기 | 마커 표시, 커스텀 오버레이 📍카카오맵 API 키 발급받기 업체의 장소를 표현하기 위해 카카오맵 API를 사용하였다. https://developers.kakao.com로 접속해서 로그인을 하고 애플리케이션 추가하기 버튼으로 앱 키를 발급 받는다. 네이티브 앱 키, REST API 키, Admin 키, JavaScript 키 중에서 JavaScript 키를 이용한다. 📍도메인 등록하기 내 애플리케이션 > 앱 설정 > 플랫폼에서 구현하려는 운영체제에 맞게 플랫폼 등록을 한다. 리액트를 이용하여 웹 사이트 화면에 지도를 띄우려고 했기 때문에 Web 플랫폼에 등록을 했다. 그 도메인에서만 API를 사용할 수 있기 때문에 꼭 등록해줄 것! (최대 10개까지 가능) 📍카카오맵 API 문서 훑어보기 https://apis.map.kakao.c.. 2021. 12. 13. [React] this.setState는 두번째에서 콜백을 받는군요...? The Modern React Bootcamp / Colt Steele 이번에는 joke api를 이용해서 유머를 가지고 오고 그걸 화면에 띄운 다음에 투표를 할 수도 있는 실습을 했다. dad joke가 우리나라로 치면 아재개그쯤 되려나... 여튼 이번 실습에서 중점적으로 본 건 api를 이용해서 data를 받은 다음 this.setState를 이용해서 어떻게 변경하며, 그리고 window.localStorage를 이용해서 받았던 data를 저장해서 새로고침을 해도 그 내용이 사라지지 않고 유지되도록 했다. 아니, this.setState에 두 번째 인자로 콜백함수를 받을 수 있잖아...? 공식문서를 제대로 들여다보니 this.setState를 이용해서 state 변경, 또는 함수 이용, 그리고 두번째.. 2021. 9. 2. 이전 1 2 3 다음
