All50 [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. [TS + React] 원래 가지고 있는 state와 props로 받는 state가 다를 때 프론트엔드 스터디에 참여하기 시작하면서 TodoMVC라는 걸 리액트와 타입스크립트의 조합으로 구현해보고 있다. 타입스크립트에 대한 아주 얕은 기본 지식만 있는 상태에서 쓰려니 VS code에서 계속 마주하게 되는 에러들. 오늘 문서를 참고하며 기능구현을 하다가 내가 마주한 에러는 이것. // App.tsx import React, { useState } from 'react'; import Header from 'components/Header'; import Main from 'components/Main'; import Footer from 'components/Footer'; const App = () => { const [todoList, setTodoList] = useState([]); ret.. 2021. 12. 24. [React] 로컬에서 데이터 로직에 대한 고민 개발이라고 해야할지, 퍼블리싱이라고 해야할지 그런 일을 리액트로 작업하고 있는데 한, 두개가 아닌 수십개의 이미지를 어떻게 하면 하드코드하지 않고 로직을 만들어서 브라우저에 띄울 수 있을까에 대한 고민과 이를 풀어낸 과정. 적은 개수의 이미지 같은 경우엔 src 폴더 안에 img 폴더를 따로 만들고 여기에서 해당 이미지를 import 해서 사용했는데 구글링을 해보니까 이미지 같은 경우는 굳이 import를 하지 않아도 public 폴더 안에 assets 폴더를 만들고 여기에 이미지를 넣어 로 사용할 수 있더라. 이미지를 컴포넌트에 직접 import해서 사용했던 방식 import React from 'react'; import dropdown from 'img/btn_dropdown.svg'; const .. 2021. 12. 22. [Redux] 리덕스의 흐름을 이해하기 위한 여정 바닐라 자바스크립트의 코드를 보고서 '어떤 내용인지 알겠다'정도의 감이 잡혔을 때 자바스크립트를 이용한 라이브러리 중 하나인 리액트를 배우기 시작했다. 유데미에 있는 리액트 강의 중 하나인 Modern React with Redux 라는 강의를 통해 리액트와 리덕스를 같이 공부하면 되겠다 생각했는데 리액트는 어찌어찌 내용의 흐름을 따라갈 수 있는 반면, 리액트에서 리덕스를 사용하는 강의로 넘어가는데 전혀 이해를 할 수 없었다. 리덕스의 진입장벽이 높다고 들었는데 이런 의미였던건가. 강사분도 리덕스에 대해 설명을 하면서 처음에는 이해하기 어려워도 쓰다보면 그 난이도가 그렇게 어렵게 느껴지지 않는다라고 언급했다. 상태관리를 양방향이 아닌 단방향으로 흐르게 하는 Flux를 바탕으로 설계된 것이 Redux라고 .. 2021. 12. 20. 이전 1 2 3 4 5 ··· 10 다음
