hubring

Swagger란? 프로젝트 내 API를 Swagger 설정을 통해 자동으로 문서화해주는 도구로 사람이 일일이 작업할 필요 없이 프로젝트 실행을 통해 코드 내에서 변경사항(return 유형이나 parameter 수 변경 등)이 발생하여도 바로 자동으로 API문서를 만들어주므로 매우 편리한 도구이다. 또한 UI를 통해 쉽게 API 목록 조회와 API 호출을 통한 테스트를 직접 해볼 수 있다.. 이를 적용하기 위해 아래 사이트를 참고하였으나 https://www.tutorialspoint.com/spring_boot/spring_boot_enabling_swagger2.htm Spring Boot - Enabling Swagger2 - Tutorialspoint Spring Boot - Enabling Swa..

fork한 프로젝트를 기반으로 개발하면서 공통적으로 사용할 기능들을 fech받기 위해 동기화가 필요하였다. 동기화를 위해 원본 Repository의 브랜치 추적이 필요하므로 remote repository를 추가하여야 한다. 1. fork후 내 프로젝트에서 원격으로 바라보고 있는 repository를 확인한다. $ git remote -v > origin https://github.com/YOUR_USERNAME/YOUR_FORK.git (fetch) > origin https://github.com/YOUR_USERNAME/YOUR_FORK.git (push) 2. 원격 설정에 원본 repository를 추가한다. $ git remote add upstream https://github.com/ORIG..

sourceTree를 이용하여 git pull 하다가 메모리 문제였는지 중간에 멈춰버려 끄고 다시 pull을 하였으나 untracked working tree files overwritten 오류가 발생하였다... error: The following untracked working tree files would be overwritten by merge: 오류 발생한 파일 위치 및 이름 Please move or remove them before you can merge. Aborting 이경우 아래 명령어로 쉽게 해결가능하다. 아래 명령어로 추적되지 않은 파일들을 모두 지울 수 있다. $ git clean -d -f -f git clean은 일반적으로 테스트 용도의 파일이나 임시 파일 등이 쌓였을 경..

async/await Promise를 더욱 쉽게 사용할 수 있도록 해주는 ES8문법. 이 문법을 사용하려면 함수의 앞부분에 async 키워드를 추가하고, 해당 함수 내부에서 Promise 앞부분에 await 키워드를 사용한다. 이렇게 하면 Promise가 끝날 때까지 기다리고, 결과 값을 특정 변수에 담을 수 있다. function increase(number){ const promise = new Promise((resolve, reject)=>{ setTimeout(()=>{ const result = number+10; if(result > 50){ const e = new Error('NumberTooBig'); return reject(e); } resolve(result); }, 1000); ..

Promise Promise는 콜백 지옥 같은 코드가 형성되지 않게 하는 방안으로 ES6에 도입된 기능 콜백지옥 예 function increase(number, callback){ setTimeout(()=>{ const result = number+10; if(callback){ callback(result) } }, 1000) } increase(0, result =>{ increase(result, result =>{ increase(result, result =>{ increase(result, result =>{ ... }) }) }) }); 여러 작업을 연달아 처리하기 위해 함수를 여러번 감싸는 것이 아닌 .then을 사용하여 그다음 작업을 설정하도록 하여 콜백지옥에서 벗어남. functio..

리액트 라우터 라이브러리 설치 yarn add react-router-dom 프로젝트에 라우터 적용 src/index.js 파일 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import { BrowserRouter } from 'react-router-dom' ReactDOM.render( , document.getElementById('root') ); serviceWorker.unregister(); react-router-dom에 내장된 BrowerRouter 컴포..

Ref DOM을 직접적으로 건드려야 할 경우 Ref를 사용한다. 컴포넌트 내부에서 DOM을 직접 접근해야할 경우 ref를 사용, 먼저 ref를 바로 사용하지 않고 원하는 기능을 구현할 수 있는지 반드시 고려한 후 사용. 서로다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용한다면 잘못된 설계로 유지 보수가 힘들어짐. 컴포넌트 끼리 교류할 때는 언제나 데이터를 부모 자식 흐름으로 교류 효율적인 교류를 위해 리덕스 혹은 Context API를 이용할 수 있음. DOM을 사용해야하는 상황 - 특정 input에 포커스 주기 - 스크롤 박스 조작하기 - Canvas 요소에 그림그리기 등 클래스형 컴포넌트에서 Ref 사용 import React, { Component } from 'react'; import './..

이벤트 핸들링 주의 사항 1. 이벤트 이름은 카멜 표기법 작성 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌 함수 형태의 값을 전달함. 3. DOM 요소에만 이벤트를 설정 가능 => 만약 직접 만든 컴포넌트에 설정할 경우 이벤트가 아닌 props로 값 전달됨. 이벤트 종류 Clipboard, Touch, Composition, UI, Keyboard, Wheel, Focus, Media, Form, Image, Mouse, Animation, Selection, Transition 이벤트 핸들링 매뉴얼 https://reactjs.org/docs/handling-events.html Handling Events – React A JavaScript library for building us..