Juwon

이번 포스팅에서 알아볼 내용은 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는..

이번 포스팅에서 알아볼 내용은 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을 사용할 경우 컴포넌..

이번 포스팅에서 알아볼 내용은 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의 특..

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

이번 포스팅에서 알아볼 내용은 JavaScript의 얕은 복사 깊은 복사 에 대해 알아보겠습니다. 우선 JavaScript의 자료형은 원시값과 참조값으로 나뉩니다. 원시값 Number String Boolean Null Undefined 참조값 Object Symbol 원시 값은 값을 복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 복사한 값과 복사된 값이 서로에게 영향을 미치지 않습니다. // 원시값 복사 => 기존의 값에 영향을 미치지 않는다 const num = 1 let num2 = num num2 = 2 // 1 console.log(num) // 2 console.log(num2) 하지만 참조값은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킵니다. //..

이번 포스팅에서 알아볼 내용은 자바스크립트의 중요한 개념 중 하나인 Hoisting입니다. JavaScript에서의 Hoisting이란?? *인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할 달 하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면에 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. 그럼 호이스팅을 설명할때는 어떻게 하는지?? 호이스팅을 설명할 때는 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 현상 으로 해당 현상을 말할 수 있습니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 하지만 선언과 초기화를 동시에 수행하는 경우에 선언 코드까..

서버에 이미지를 올릴 때 이미지를 Base64로 변환하여 DB에 저장하고 웹에서 보여줄 때 다시 디코딩해서 보여주는 방법을 많이 사용합니다 변환하는 이유가 궁금했습니다. 이유 중 하나는 비동기 함수를 사용해 이미지를 업로드하고 바로 화면에 보여줄 로직이 있을 때 이미지 자체를 업로드 후 로딩시키게 되면 DB에 저장하는 시간 혹은 서버 파일에 저장하는 시간보다 View가 mount 되는 시간이 더 빨라 이미지가 보이지 않기 때문입니다. 처음에는 비동기 함수의 반환이나 reponse를 늦추는 방법을 사용했지만 옳지 않은 방법이어서 구글링 하던 도중 찾아낸 방법 중 하나가 JavaScript로 Base64 인코딩 디코딩입니다. 업로드 이미지를 Base64로 변환하는 방법은 다양합니다. Base64 인코딩, 디..

브라우저와 서버 간에 통신을 도와주는 Promise 기반의 HTTP 클라이언트 라이브러리입니다. Axios란? Axios는 서버와 브라우저를 위한 Promise 기반 HTTP 클라이언트입니다. 서버 사이드에서는 http 모듈을 사용하고, 클라이언트( 브라우저 )에서는 XMLHttpRequests를 사용합니다. npm install axios yarn add axios Axios의 특징 브라우저를 위한 XMLHttpRequests 생성 서버를 위한 http 요청 생성 Promise API를 지원 요청 및 응답 인터셉트 요청 및 응답 데이터 반환 요청 취소 JSON 데이터 자동 변환 XSRF를 막기 위한 클라이언트 사이드 지원 *XSRF : 사이트 간 요청 위조하여 클라이언트에 대한 공격 ( 공격 대상은 C..

이번 포스팅에서 다뤄볼 Vue.js 어디서든 Store 호출하기입니다. store.js import { createStore } from "vuex" const store = createStore({ state(){ return{ data : 'Vuex' } }, mutations : { setDataFunction(context, text){ context.data = text } }, actions : { setTimeOutFunction(context, text){ setTimeout( text => { this.commit('setDataFunction', text) }, 3000) } }, export default store Actions 함수에서 Mutations 함수를 호출할때 사용하는 구..

Vuex 설치 명령어 //npm npm install vuex@next --save //yarn yarn add vuex@next --save Vuex는 Vue.js의 applications이며 state management pattern( 상태 관리 패턴 ) 역할을 합니다. 모든 컴포넌트에서 접근할 수 있는 중앙 데이터 저장소로 코드의 재사용성을 확장시켜주는 기능이 있습니다. 상위 컴포넌트와 하위 컴포넌트 간에 props, emit 같은 기능의 상위 호환이라고 생각하시면 됩니다. vue 3 버전은 vuex 4 버전은 호환하고 vue 2 버전은 vuex 3 버전을 호환합니다. vuex 예시코드 Main.js import { createApp } from 'vue' import App from './App..