삽질블로그 삽질블로그

내가 듣는 강의의 강사님이 컴포넌트 생성 시 항상 사용하는 단축키가 있다. 강의에서는 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 구조 - 단계별 ..

eclipse에서 search탭이나 git Staging탭 등 다른탭에서 작업중에 배치가 돌면서 console창에 추가 출력 때문에 자동으로 console탭으로 돌아오는 경우가 있다. 그럴때는 콘솔창이랑 싸우지 말고 콘솔탭에서 "Show Console When Standard Out Changes" 옵션을 꺼버린다.

1. mongoDB 계정생성 및 로그인 2. mongoDB 클러스터 생성( Create a new cluster ) - 무료티어가 있는 나라 중 가장 가까운 나라 싱가포르로 선택(서울은 무료제공이 없음) - 클러스터를 몇번 이상 생성하면 더이상 만들어지지 않음 - 생성하는데에 5~7분정도 소요 3. node module에 mongoose 설치 - 몽고디비를 쉽게 연결할 수 있도록 도와주는 툴 - 명령어 : npm install mongoose --save 4. DB 연결정보 가져오기 및 연결 - connect 클릭 connect your application에서 db정보 복사 - 최상위의 index.js에서 복사한 주소로 mongoose를 이용해 mongoDB 연결 const mongoose = requ..