본문 바로가기

오픈소스

[Node] React 정리(21) - 리덕스 이론 정리 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 리덕스를 사용하게 될 때 앞으로 접하게 될 키워드들을 미리 알아봅시다. 이 키워드들 중에서 대부분은 이전에 useReducer를 사용해볼때 접해본 개념이기도 합니다. 또한 프로젝트를 구성할 때 리덕스를 사용하는 규칙에 대해서도 알아볼 예정입니다. # Contents 리덕스 키워드 정리 리덕스 규칙 # 리덕스 키워드 정리 1. 액션 상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킵니다. 이는, 하나의 객체로 표현되는데요, 액션.. 더보기
[Node] React 정리(20) - useAsync 커스텀 훅 만들기, Context API를 사용하여 useAsync 커스텀 훅 적용 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 데이터를 요청해야 할 때마다 리듀서를 작성하는 것은 번거로운 일 입니다. 매번 반복되는 코드를 작성하는 대신에, 커스텀 Hook 을 만들어서 요청 상태 관리 로직을 쉽게 재사용하는 방법을 알아봅시다. 완성된 예제는 다음 링크를 통해 미리 보실 수 있습니다. https://github.com/libtv/React_Note/tree/master/20.%20useAsync GitHub - libtv/React_Note: This is a notebo.. 더보기
[Node] React 정리(19) - Reducer를 이용하여 API 연동 기본 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 자바스크립트, 노드, 리액트들은 비동기 프로그래밍임을 알아야 합니다. 비동기 처리를 위해 Promise 와 Asnyc/await 를 사용하고 있으며, API 데이터를 가져오는 경우에도 비동기적으로 작동하기 때문에 이러한 로직처리를 하기 위해서는 그에 알맞는 함수와 사용법을 이미 알고 있어야 함을 알려드립니다. 본 예제에서는 useReducer와 axios 라이브러리를 이용하여 데이터를 비동기적으로 가져오는 방법에 대해 알아보도록 하겠습니다. 그.. 더보기
[Asterisk] Ubuntu 18.04/Asterisk 15: CDR Reporting to MySQL 아스터리스크에는 두 가지 Report 시스템이 있습니다. 통화 세부 정보 기록(CDR) 및 채널 이벤트 기록(CEL) . 이 두 시스템 모두 통화 및 개별 채널에서 발생하는 특정 이벤트를 기록합니다. 이벤트 및 해당 세부 정보는 Asterisk의 표준 로깅 및 디버그 기능과 별도로 기계에서 읽을 수 있는 형식으로 제공됩니다. 두 시스템 모두 최소한 CSV 출력을 제공하고 다른 모듈을 활용하여 다양한 백엔드 인터페이스를 통해 출력합니다. 이번 문서에서는 아스터리스크의 CDR 을 위한 Mysql 을 설치하는 방법에 대해 알아보도록 하겠습니다. 설치과정에서 우분투 18.04를 사용하였고, 아스터리스크 15버전을 이용하여 연동하였습니다. # Contents Mysql install Mysql ODBC Aster.. 더보기
[Spring] 스프링 빌드 시 Nexus 레파지토리 저장 - 메이븐과 연계 넥서스는 저장소 관리자이므로 가장 중요하고 많이 사용하는 기능은 아티팩트를 등록하고 관리하는 것입니다. 이클립스에서 메이븐 프로젝트를 빌드하게 되면 프로젝트 내의 설정으로 빌드가 되지만 대부분 로컬 레파지토리에 저장되는 편입니다. 이번에 할 내용은 넥서스라는 사설 레파지토리를 통해 메이븐에서 빌드 할 시 사설 레파지토리에 빌드 파일이 업로드 되는 형태의 환경을 구축해보도록 하겠습니다. 메이븐에서도 저장소의 종류가 따로 있는데요. 크게 아래와 같습니다. 넥서스 저장소 종류 로컬 저장소 : 메이븐은 다운받은 아티팩트를 캐싱하고 있으며 이 파일 시스템을 로컬 저장소라고 합니다. 원격 저장소 : 넥서스처럼 메이븐이 구동되는 외부에 있는 서버는 원격저장소가 된다 중앙 저장소 : 메이븐에 기본 설정된 저장소입니다... 더보기
[Spring] Nexus Role 생성, User 생성, Repository 생성 많은 SI 회사에서는 넥서스를 이용하여 레파지토리를 관리하고 있을 것입니다. 회사만의 소스코드의 보안과 유지보수를 하기 위해 많이 nexus를 이용하고 있는데요. 특히 maven에서 사용하는 사설 레파지토리라고 많이 알고 있는 넥서스를 설치했다고 가정하고, 규칙과 유저 생성 및 레파지토리를 생성하도록 하겠습니다. 레파지토리를 건드리는 만큼 기본적인 저장소의 종류에 대해 간략하게 소개하도록 하겠습니다. 아래 내용을 참고해주세요. 저장소 종류 프록시 저장소 : 프록시 저장소는 메이븐 중앙 저장소등 원격지에 있는 저장소를 미러링한다. 호스트 저장소 : 기업용 사설 저장소, 업로드는 호스트 저장소만 가능하다. 가상저장소 : 다른 유형의 저장소의 아답터로 동작한다. 그룹저장소 : 여러종류의 저장소를 논리적으로 묶.. 더보기
[Node] React - TodoList 만들기 리액트로 TODO List 를 만들어보도록 하겠습니다. TODO List의 프로젝트를 통해 좀 더 styled-components와 Hooks를 사용하는 방법을 배워보고 익숙하게 개발하기 위함입니다. TODO List 프로젝트를 만들 때에는 크게 3가지의 분류로 나뉘게 됩니다. 먼저 컴포넌트를 구성하는 UI를 만들어야 하는 단계가 있고, Context API를 통해 reducer로 만든 데이터나 함수들을 각 컴포넌트에 전송해야 합니다. 전송한 데이터나 함수를 각 컴포넌트에 넣어줘서 기능을 수행할 수 있게 만드는 단계로 나누어 개발하도록 하겠습니다. 천천히 프로젝트 내용을 통해 구성하고 연결하여 좋은 개발하시기 바랍니다. 그럼 지금부터 시작하도록 하겠습니다. # Contents 컴포넌트 만들기 Contex.. 더보기
[Node] React 정리(18) - styled-components 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이번에는 styled-components 를 배워보도록 하겠습니다. 이번에 배워볼 기술은 CSS in JS 라는 기술입니다. 이 문구가 뜻하는 그대로, 이 기술은 JS 안에 CSS 를 작성하는 것을 의미하는 것으로써 template Literal 구문을 사용하여 만들어집니다. 그러면 styled-components 를 먼저 설치하는 과정과 예제들을 차근 차근 배워가면서 스타일을 어떻게 정의하고 사용하는지 파악하도록 하겠습니다. 그러면 style.. 더보기

티스토리툴바