HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS
-
ReactJS + MaterialUI = Custom ComponentsHTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS 2020. 6. 22. 22:30
MATERIAL-COMPONENTS github source 바로가기 docker repository 바로가기 docker로 빠른 실행 해보기 $ docker run -d --name react-app -p 80:80 lahuman/test-react-app프로젝트 개요 오랜만에 진행하는 개인 프로젝트입니다. (간간히 짧은건 몇개 진행하였습니다.) 요즘 ReactJS를 활용하고 있는데요. 몇몇 컴포넌트들은 살짝 변경해서 공통으로 쓰고 있습니다. 이런 공통 컴포넌트들을 오픈소스화 해보려고 합니다. ReactJS + MaterialUI 기반에서 동작합니다. 기본으로 제공되는 component를 변경하였습니다. Datepicker 기존 datepicker에서 달력에 표시되는 포멧을 한글로 변경하고 삭제 등의 ..
-
ReactJS에서 파일 다운로드 처리 방안HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS 2020. 6. 10. 22:14
요즘 ReactJS를 이용해서 개발을 진행하고 있습니다. 사용하면서 간간히 만나는 문제들을 풀어가고 있는데, API에서 DOWNLOAD를 구현하고 React에서 해당 결과를 받아 보니 처음 보는 ReadableStream가 튀어 나왔습니다. 처리 방법은 여러가지가 있었는데, 우선 나는 다음과 같이 처리 했습니다. ReadableStream을 blob으로 변경하여 file-saver 전달 하였습니다. 처리 코드 import fileDownload from 'file-saver'; const callFileDownload = async (file_name, file_path) => { const res = await CustomFetch('/fileDownload', { resp..
-
Reactjs 초기 프로젝트 구성하기HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS 2019. 7. 17. 00:31
Reactjs 초기 프로젝트 구성하기 Reactjs 초기 프로젝트를 구성하려는 방법 중 가장 쉽고 널리 알려진 것은 Create React App를 이용하는 방법이다. 아래와 같이 실행하면 바로 프로젝트 구성이 완료된다. npx create-react-app my-app cd my-app npm start아쉬운 점은 무엇이 설치 되었는지 내가 알지 못하고, 또한 컴파일에 오랜 시간이 걸린다. npm run eject를 이용해서 묶음을 풀어 보면 너무 많은 것들이 설치 되어 있다. 그래서 방법을 찾아 보던 중 @babel/preset-env와 plugins이라는 유튜브를 보고 한땀씩 진행을 해보았다. 우선 나에게 필요한 기본 모듈은 다음과 같다. 기본 모듈 react react-dom react react..
-
Reactjs] Create-react-app 시작하기HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS 2019. 7. 8. 00:25
Reactjs] Create-react-app 시작하기 reactjs 시작은 다음과 같다. $> npx create-react-app my-app $> cd my-app $> npm start위와 같이 명령어를 실행하여 기본 react 구조와 모듈이 포함된 프로젝트를 생성한다. 생성된 프로젝트의 구조는 다음과 같다. my-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.s..