728x90

전체 글 85

[React] React Redux-Saga를 알아보자! !

이번 포스팅에서 알아볼 내용은 Redux의 미들웨어 관리 라이브러리인 Redux-Saga입니다. Redux-Saga를 알아보기 이전에 React-Redux 라이브러리와 Pure Js의 Generator를 알아야 사용할 수 있습니다. redux-saga의 공식 깃허브 주소 ( https://github.com/redux-saga/redux-saga ) Redux-Saga란??? 앞선 포스팅 Redux 라이브러리는 동기적 순수함수 관리 라이브러리였습니다. Redux는 무조건 동기 방식으로 dispatch가 이루어집니다. 또한 dispatch를 여러번 할 경우 컴포넌트 파일에서 dispatch를 여러번 작성해야하는 불편함도 있습니다. 그래서 나오게된 라이브러리가 Redux-Saga입니다. Redux-Saga는..

Frontend/React.Js 2022.03.26

[React] React-Redux를 알아보자!!

이번 포스팅에서 알아볼 내용은 React-Redux입니다. React-Redux란?? 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전송할 때 Props를 이용해 데이터를 전달합니다. 하지만 데이터가 필요한 자식 컴포넌트의 깊이( Depth )가 늘어날수록 Props->Props->Props... 를 계속 타고 들어가 야한 번거로움이 있습니다. 이를 해결하기 위한 라이브러리가 Redux입니다. Redux는 React뿐만 아니라 Vue, Angular, Pure Js에서도 사용가능하지만 React 전용 Redux, React-Redux를 지원합니다. React-Redux를 사용하는 이유 앞서 말한 연쇄적인 Props 전달을 피함과 State의 종속성 탈피입니다. useState Hook을 사용할 경우 컴포넌..

Frontend/React.Js 2022.03.26

[Docker] Docker-Compose로 MySQL 컨테이너 띄우자!!

오늘 포스팅할 내용은 Docker-Compose로 MySQL 서비스 컨테이너를 가동시키는 방법입니다. 우선 yml파일을 수정할 vi Editor, VSCode, XCode 등 편집기 하나를 준비해야합니다. 아래 사이트에서 Docker Install 합니다. https://hub.docker.com/editions/community/docker-ce-desktop-mac 최신 버전의 Docker는 Docker-Compose 추가 환경 설정도 준비되어있어 별도의 설치가 필요하지 않습니다. (구 버전의 Docker는 별도로 Docker-Compose 설치 필요합니다. ) 다음은 서비스 컨테이너를 설치할 폴더를 생성합니다. docker-compose.yml 파일과 빈 폴더를 생성합니다. ( .d의 경우 확장자가..

Infra/Docker 2022.03.16

[Sort] O(n²) 정렬 알고리즘을 알아보자! ( JavaScript Sort )

이번 포스팅에서 알아볼 내용은 정렬 ( Sort ) 알고리즘과 시간복잡도입니다. 정렬 종류의 기준 원소들의 교환 횟수에 따른 계산 복잡도 메모리 사용량 재귀성의 포함 여부와 둘다 포함하는 경우 안정성 비교 정렬 여부 알고리즘의 종류 ( 직렬, 정렬 ) 순응성 ( 입력을 미리 정하는 것이 실행 시간에 영향을 미치는 정도 ) 시간 복잡도가 O(n²)인 정렬 버블 정렬 ( Bubble Sort ) 선택 정렬 ( Selection Sort ) 삽입 정렬 ( Insertion Sort ) 시간복잡도가 O(n log n)인 정렬 병합 정렬/ 합병 정렬 ( Merge Sort ) 힙 정렬 ( Heap Sort ) 퀵 정렬 ( Quick Sort ) 트리 정렬 ( Tree Sort ) 그 밖의 정렬 카운팅 정렬 ( C..

Algorithm/Sort 2022.03.15

[React] React를 알아보자!!! ( React-Native??? )

이번 포스팅에서 알아볼 내용은 React의 탄생 React의 특징 React-Native 에 대해 알아보겠습니다. React란 React.Js는 자바스크립트 라이브러리로서 사용자 인터페이스를 만들기 위해 사용됩니다. 페이스북과 개별 개발자 및 여러 기업에 의해 유지 보수되고 있습니다. 리액트는 Vue, Angular와 같은 싱글 페이지 애플리케이션( Single Page Application : SPA )입니다. React는 2011년 페이스북의 뉴스피드에 처음 적용되었으며 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였습니다. 2012년 인스타그램에 적용되었습니다. 2013년 5월 JSConf( JavaScript Conference ) US에서 오픈 소스화 되었습니다. React의 특..

Frontend/React.Js 2022.03.12

[JavaScript] 프로토타입에 대해 알아보자! ( prototype )

이번 포스팅에서는 자바스크립트의 prototype에 대해 알아보겠습니다. 자바스크립트에는 클래스 개념이 존재하지 않습니다. ??? export default class sheep extends animal{ ... } 클래스 ( Class )를 한번쯤은 구현해보셨을 겁니다. Java, Python 등 객체 지향 언어에서는 빠질 수 없는 개념입니다. 중요한 점은 자바스크립트도 객체 지향 언어라는 것입니다. 하지만 자바스크립트에는 클래스의 개념은 존재하지 않습니다. 대신 프로토타입( prototype )이라는 것이 존재합니다. 자바스크립트가 프로토타입 기반 언어라고 불리는 이유이기도 합니다. 자바스크립트엔 클래스가 없으니 상속 또한 존재하지 않습니다. 그래서 보통 프로토타입을 기반으로 상속을 흉내 내어 구현..

Frontend/JavaScript 2022.03.04

[정처기] 소프트웨어 테스트 기법에 대해 알아보자!

화이트박스 테스트란?? ( White Box Test ) 화이트박스 테스트는 모듈의 원시 코드를 오픈한 상태에서 코드의 논리적인 모든 경로를 테스트하여 테스트 케이스를 설계하는 방법입니다. 화이트박스 테스트의 특징 화이트박스 테스트는 설계된 절차에 초점을 둔 구조적 테스트입니다. 보통 테스트 과정의 초기에 적용됩니다. 모듈 안의 작동을 직접 관찰한다. 원시 코드( 모듈 )의 모든 문장을 한 번 이상 실행함으로써 수행됩니다. 프로그램의 제어 구조에 따라 선택, 반복 등의 분기점 부분들을 수행함으로써 논리적 경로를 제어합니다. 화이트박스 테스트의 종류 기초 경로 검사 ( Base Path Testing ) 대표적인 화이트박스 테스트 기법입니다. 테스트 케이스 설계자가 절차적 설계의 논리적 복잡성을 측정할 수..

[정처기] 디자인 패턴 ( Design Pattern )을 알아보자!

디자인 패턴이란 ( Design Pattern ) 디자인 패턴은 각 모듈의 세분화된 역할이나 모듈 간의 인터페이스와 같은 코드를 작성하는 수준의 세부적인 구현 방안을 설계할 때 참조할 수 있는 전형적인 해결 방식 또는 예제를 의미한다. 디자인 패턴의 특징 디자인 패턴은 문제 및 배경, 실제 적용 사례, 재사용이 가능한 코드등으로 구성되어 있습니다. 디자인 패턴은 한 패턴에 변형을 가하거나 특정 요구사항을 반영하면 유사한 형태의 다른 패턴으로 변화하는 특징이 있습니다. 디자인 패턴은 1995년 GoF( Gang of Four )라고 불리는 4명이 처음으로 구체화 및 체계화하였습니다. GoF의 디자인 패턴은 수많은 패턴들 중 가장 일반적인 패턴들을 분류하고 정리함으로써 소프트웨어 공학이나 현업에서 가장 많이..

[비선형] Tree 알고리즘에 대해 알아보자!

앞서 포스팅한 스택 ( Stack ), 큐 ( Queue )등은 자료구조에서 선형 구조라고 합니다. 이번 포스팅에서는 알고리즘 중 비선형 구조를 갖고있는 Tree에 대해 알아보겠습니다. Tree 자료구조는 그래프의 한 종류로 Tree란 어떠한 노드의 집합으로 노드들은 서로 다른 자식을 가지며 이 때 각자의 노드는 재사용되지 않는 구조를 갖는다. Tree에는 여러가지 특징들이 존재합니다. Tree의 서로 다른 임의의 두 노드에 대해 두 노드를 연결하는 경로는 유일하다. Tree에는 사이클을 가지는 노드 집합이 존재하지 않는다. Tree에는 반드시 하나의 Root가 존재합니다 ( 최상위 노드, 부모 노드가 존재하지 않는 노드 ) 선형 구조란?? ( Linear ) 자료를 구성하는 데이터를 순차적으로 나열시킨..

728x90