본문 바로가기

전체 글236

swagger 로 api문서를 만들어보자 restful api 서버를 만들 때 몇가지 고민이 있었는데, 우리가 만드는게 서버에서 api를 제공하는 단순 구조가 아니라 C++ binary api > napi 작성 후 .node 변환 > .node를 rest 로 작성 이라는, 몇가지 단계가 있었기 때문에 rest api의 검증이라던지, 추후에는 사용자에게도 배포를 할 것이기 때문에 문서를 어떻게 할지 고민이 되던 차에 swagger를 이용해 검증도 하고 사용자 배포용으로 쓰기로 결정 swagger에 대해 찾아보면서 너무나 다양한 케이스가 발견되었는데 그 중에서 아래와 같이 결정하였다. 1. swagger2.0 / swagger3.0(openAPI 3.0) 2. annotation(in code) / json / YAML 결정한 이유는 다음과 같다... 2021. 12. 9.
react - node 서버와 연동 node 프로젝트 생성 npm init 기본 설정 const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'public'))); app.use('/favicon.ico', (req, res) => { res.status(204); }) app.use("/", (req, res) => { console.log("루트루트"); res.status(200).json({ result : "" }); }) app.listen(8989, () => { console.log("시작시작 8989"); }) node 프로젝트 안에 react.. 2021. 11. 12.
message 통신으로 문자열 데이터를 주고 받기 로봇 상위제어기가 n개 실행되는 케이스가 발생해 제어기 간 문자열 데이터를 주고 받을 수 있는 메세지 통신 기능을 만든 적이 있다. 그걸 조금 다듬어 V2.0으로 개선했는데 해당 부분을 간략하게 기록한다. 먼저 구조는 다음과 같다. 1. 컨트롤러 - 메세지를 보내는 기능(제일 많이 개선됨) - 요청 명령을 구분하여 정의된 함수를 찾아(generic) 실행해주는 기능 2. 요청 명령 구분자 - 보내는 요청의 종류를 정해놓은 기능 - 중복 요청을 막아야하는 리스트 관리 - 그 외 구분이 필요한 그룹을 생성해서 관리하기 용이하도록 구조 1. 컨트롤러(많은 부분은 생략했지만...) @Suppress("unused", "UNUSED_PARAMETER", "RedundantSuspendModifier") class.. 2021. 11. 12.
local storage 브라우저 내의 저장공간 Local Storage : 비휘발성(청소하지 않는 이상), 5MB 텍스트 Session Storage : 휘발성(브라우저 껐다 키면 삭제) F12로 개발자 도구 오픈 Console 탭 진입 localStorage.setItem('키','밸류') localStorage.getItem('키') localStorage.remove('키') 기본적으로 문자만 가능 [1,2,3] 등의 배열이나 { "key" : "value" } 등의 오브젝트는 깨져서 들어감 그것을 위해 글자인것처럼 저장해야함 Json형 데이터를 저장하기 위해 localStorage.setItem('key', JSON.stringify({key: "value"})) 꺼낼 땐 var temp = localStorage.ge.. 2021. 11. 12.
pwa로 앱처럼 설치하도록 하기 PWA장점 1. 설치 마케팅 비용 적음 2. 아날로그 유저들 배려 3. html, css, js 만으로 앱까지 4. 푸시알람, 센서 등 브라우저를 이용하여 사용 설치 명령어 npx create-react-app 프로젝트명 --template cra-template-pwa 기존 프로젝트를 pwa로 변경은 안됨 필수 파일 두 개 1. manifest.json - 앱 정보(public 폴더에 있음) 2. service-worker.js - src에 있는 파일은 설정 파일이며, 실제 파일은 빌드할 때 생성됨 - 웹사이트를 오프라인에서도 사용할 수 있도록 도와주는 것 // serviceWorkerRegistration.unregister(); // unregister를 register로 변경하면 자동 생성됨 se.. 2021. 11. 11.
memo로 컴포넌트 재랜더링 막기 특정 props 값을 바꿔도 컴포넌트가 가지고 있는 하위 컴포넌트가 전부 재랜더링되는 것을 막기 위한 기술 function Parent(props) { return( ) } function Child1(props) { useEffect(() => { console.log("child1")}); return 111 } function Child2(props) { useEffect(() => { console.log("child2")}); return 222 } // Parent에 들어오는 props 내용 중 name 혹은 age 하나만 바뀌어도 Child1,2모두 재랜더링된다. Child2만 변경해보자 function Child1(props) { useEffect(() => { console.log("ch.. 2021. 11. 11.
&&, enum 등등 if react에서 사용하는 몇가지 if 와 오브젝트를 활용한 if, enum을 활용한 if 등등 삼항연산자 중, 아닐 때가 null이라면 &&으로 생략 가능 { (1 < 3) ? : null } 위 구문을 { (1 < 3) && } 로 줄일 수 있다 object 자료형을 이용해서 선택적 if let state = 'view'; { { view : 뷰, noview : null, update : 수정뷰, }[state] } // 오브젝트인 {} 뒤에 [] 대괄호를 붙여 key값이 현재상태인 자료를 선택하겠다는 의미 var ui = { view : 뷰, noView : null, update : 수정뷰 } function Component() { var state = 'view'; return( { ui[sta.. 2021. 11. 10.
redux 리덕스란, props문법 등을 사용하지 않고 모든 컴포넌트에서 글로벌하게 state에 접근하고 수정하기 위한, State의 관리 방법이다. 리듀서(reducer)는 리덕스에서 관리하는 state의 상태 변경을 관장하는 함수이다. 사용자는 특정 신호를 dispatch라는 문법을 통해 리덕스에게 전달하여 state를 수정해달라 요청하고, 리덕스에서 해당 state의 리듀서를 수행한 뒤 수정 결과를 반영한다. yarn add redux react-redux// 두 개 모듈 설치 더보기 Redux의 3가지 규칙 하나의 애플리케이션안에는 하나의 Store가 있다. store는 단 하나만을 생성해서 상태를 관리할 수 있다. (여러개의 store를 사용할 수는 있지만 리덕스에서 권장하는 방법은 아니다) 그 대신 re.. 2021. 11. 5.
animation(CSSTransition) css의 transition 속성을 이용하여 css를 천천히 변하도록 한다. 아래 모듈 설치한다. yarn add react-transition-group 필요한 속성을 임포트한다. import { CSSTransition } from 'react-transition-group'; 애니메이션을 적용하고자 하는 컴포넌트를 아래처럼 감싼다. 각 파라미터의 의미는 in => 발동 조건(true or false) classNames => 애니메이션을 위한 css의 접두어 timeout => 최대 길이. timeout이 css에 설정된 transition값보다 작을 경우, timeout 시간이 지나면 자동으로 css 적용이 완료된다. 적용을 위한 css는 아래처럼 작성한다. classNames를 wow로 해놨기 .. 2021. 11. 4.

티스토리툴바