삽질블로그 삽질블로그

* ant design 라이브러리 추가 $ npm install antd --save * 고유 css를 적용시키기 위해 index.js에서 antd.css를 import import 'antd/dist/antd.css'; * ant design의 사용하는 기능을 import > 현재 적용하려는 것은 Pagination 적용하려는 컴포넌트에 Pagination 기능을 import import {Pagination} from "antd"; ... > 그밖에 input box 등 기능들 사용하기 (버튼, input, form 등... ) import {Typography, Button, Form, message, Input, Icon} from "antd"; function loadPage() { const ..

내가 듣는 강의의 강사님이 컴포넌트 생성 시 항상 사용하는 단축키가 있다. 강의에서는 Visual Studio를 사용하고 있으며, 생성된 javascript 파일에서 "rfce"를 치면 컴포넌트 생성 구조가 자동으로 완성된다. 하지만 난 webstorm을 사용중이라서 ES7 등 VSCode에서 지원해주는 플러그인 같은 것을 따로 찾아봐야했다. Settings - Plugins 에서 React snippets 를 검색해서 install한다. 그리고 rccp 를 입력 후 VSCode처럼 자동완성이 가능하다 VSCode의 rfce -------> Webstorm의 rccp 참고로 rccp 이외의 추가 단축키는 아래에서 확인하면 될 것 같다. 참조 : plugin document github.com/jinsih..

깃에서 소스를 다운로드 받은 후 위와 같은 에러가 발생한다. 에러내용 : Unresolved variable or type store 해결 & 설정방법 File - Settings - Languages & Frameworks - JavaScript에서 javascript language version 변경 React JSX로 변경 후 에러가 사라진다.

* HOC(higher-order component) ? > 특징 : 다른 컴포넌트를 받아 새로운 컴포넌트를 return하는 function > Auth라는 컴포넌트(HOC) 내에 다른 컴포넌트들을 삽입 가능 const EnhancedComponent = higherOrderComponent ( WrapperdComponent ); * HOC 적용방법 1. front 폴더 아래 hoc 폴더 auth.js 생성 import react, {useEffect} from 'react'; import Axios from "axios"; import {useDispatch} from "react-redux"; import { auth } from '../_actions/user_action'; /** * * @pa..

현재 화면을 실행하기 위해서는 front 서버, backend 서버의 각 package.json이 자리하고 있는 경로에서 각각 npm run으로 실행시켜줘야한다. 이 번거로움을 해결하기 위해 두 서버를 동시에 실행 시키는 방법이 있다. * 적용과정 1. 최상위 경로에서 라이브러리 설치( www.npmjs.com/package/concurrently ) $ npm install concurrently --save 2. 프로젝트 내 최상위 경로의 package.json에 scripts의 start option 하나 더 삽입 "dev" : "concurrently \"npm run backend\" \"npm run start --prefix client\"", 의미 > backend 실행 추가 후, clie..

* npm 라이브러리 설치 $ npm install axios --save * server와 client port번호 분리 ( server는 5000, client는 3000번 ) server쪽 index.js에서 listener에 포트번호설정 const port = 5000 //포트번호 ... // api 추가 app.get('/api/hello', (req, res) => { res.send("안녕하세요 !") }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) }) * frontend에서 server 호출 - axios를 호출하는 컴포넌트 전체소스 import React, {useEff..

* Terminal에서 git 관련 명령어 $ git --version : 깃 버전 확인하기 $ git init : git환경 초기설정. Initialized empty Git repository in D:/p/webstorm/boiler-plate/.git/ 와 같은 문구가 뜸 $ git status : 깃 현재상태 확인 $ git add . : 전체파일 git Working Directory 에 올리기 $ git rm --cached : 원격 저장소에 있는 파일을 삭제( 사용예시 $ git rm --cached node_modules -r ) $ git commit -m "first commit" : "first commit"이라는 메시지로 Staging Area에 올리기 * git 구조 - 단계별 ..

심각: Servlet.service() for servlet [appServlet] in context with path [] threw exception [Request processing failed; nested exception is java.lang.RuntimeException: invalid code lengths set] with root cause java.util.zip.ZipException: invalid code lengths set at java.util.zip.InflaterInputStream.read(InflaterInputStream.java:164) at java.util.zip.ZipInputStream.read(ZipInputStream.java:194) at jav..