말은 쉽지, 코드를 보여줘!

거버넌스(Governance)란 원문 그대로 해석하면 통치, 관리; 통치 방식 이라는 뜻이다. IT용어로 해석하자면 시스템을 개발하는 조직의 구조나 프로세스를 의미한다. ​ 표준 프로세스와 가이드를 기반으로 전체 팀을 운용하는 모델을 중앙 집중형 거버넌스 모델 이라고 하는데 일반적으로 표준개발팀과 서비스개발팀이 나뉘어져 있는 형태이다. 이 경우 전체 시스템이 같은 프로세스와 기술을 가지고 개발되기 때문에 소프트웨어 관리가 쉽고 각 서비스 개발팀은 사용자 중심 로직 개발에만 집중하면 되기 때문에 신규 서비스 구현도 비교적 빠르게 수행할 수 있다. ​ 하지만 오픈소스의 발달로 선택 가능한 기술들이 많고 각 요구사항에 따라 최적화된 기술을 사용하는 것이 좋은 경우가 더 많다. 중앙 집중형 거버넌스 모델에서 이..

개발을 하다보면 언어에서 기본적으로 제공되는 데이터타입을 별도로 만든 클래스 단위로 묶어서 관리해야 한다. 일반적으로 VO, DTO 라고 불리는 클래스 들인데 나름대로 정리한 규칙과 구분방법을 정리해보았다. ​ JPA Entity와는 구분한다. 통합해서 관리할 경우 Dirty Checking으로 원치 않게 DB 수정이 일어날 수 있다. set{필드명} 형태의 Setter 메소드는 만들지 않는다. 값 변경의 의도와 목적을 명확히 나타낼 수 있도록 approve, reject 같은 이벤트 형태로 작성하도록 한다. 일반적으로 VO, DTO 를 불변, 가변으로 구분짓는데 내 경우는 그렇게 구분하지 않고 있다. 대부분 불변으로 하되 VO든 DTO든 필요에 따라 얼마든지 가변이 될 수 있고 이벤트 형태로 변경의 의..

유저생성 일단 root 계정으로 접속한 상태에서 진행이 가능하다. ​ mysql 유저는 접속을 시도하려는 곳을 명시해서 아래와 같이 생성해야 한다. 아래는 로컬에서 접속할 수 있는 test 유저와 원격 접속 가능한 test 유저를 생성한 것이다. create user 'test'@'localhost' identified by 'test'; create user 'test'@'%' identified by 'test'; 유저 삭제명령도 아래와 같이 접속을 시도하려는 곳을 포함해서 진행한다. drop user 'test'@'localhost' identified by 'test'; drop user 'test'@'%' identified by 'test'; 생성한 유저는 아래와 같이 확인할 수 있다. use..

관련 코드는 아래를 참고 하도록 한다. github.com/mypiece/react-example mypiece/react-example CRA 리액트+리덕스+리덕스사가 예제. Contribute to mypiece/react-example development by creating an account on GitHub. github.com 먼저 리덕스를 왜 사용하는지 생각해보자. 리덕스 사가는 미들웨어의 한 종류이다. 참고로 미들웨어는 아래와 같은 의미를 가지고 있다. 운영 체제와 응용 소프트웨어의 중간에서 조정과 중개의 역할을 수행하는 소프트웨어 이를 토대로 리덕스 사가를 재해석해보면 리액트와 리덕스 사이에서 무언가 추가적인 작업을 해주는 것으로 이해하면 된다. 즉, 리덕스에 의해 상태가 변경되기 전..

관련 코드는 아래를 참고 하도록 한다. github.com/mypiece/react-example mypiece/react-example CRA 리액트+리덕스+리덕스사가 예제. Contribute to mypiece/react-example development by creating an account on GitHub. github.com 리덕스의 개념 자체는 아래와 같이 그리 어렵지 않다. 상태 저장을 위한 스토어가 있고 컴포넌트에서는 여기에 있는 특정 상태를 구독한다. 초기상태와 이를 변경하는 액션타입을 미리 정의해놓고 이를 토대로 액션을 만들어줄 액션생성함수도 미리 만들어놓고 사용한다. 상태를 변경하기 위해 디스패치를 통해 액션 발생되면 리듀서에서는 이를 감지해서 상태를 업데이트 한다. 다만 이를..

우선 크롬 웹 스토어 로 접속해서 React Developer Tools, Redux DevTools 를 브라우저에 설치한다. 설치를 완료하고 크롬 개발자모드(F12)를 확인하면 Redux, Components, Profiler 탭이 추가된 것을 볼 수 있다. 리액트는 단적으로 보면 결국 렌더링을 효율적으로 해주는 라이브러리이다. 이에 대부분의 전역적인 설정은 최초 렌더링을 시작하는 src/index.js 에서 해주면 된다. 이 중 크롬 개발자 도구와의 연동 설정을 하면 어플리케이션에서 사용되는 리덕스의 상태와 컴포넌트 렌더링 등의 주요정보를 디버깅 할 수 있다. 이를 위한 설정이 src/index.js 파일의 아래 내용이다. createStore를 통해 리덕스 상태를 보관할 스토어를 만드는데 compo..

객체리터럴 선언시 만약에 key 이름으로 선언된 값이 존재하다면 value 를 생략해도 자동으로 매칭시켜준다. let name = "이름"; let languages = "언어"; let value = "벨류"; const extracted = { name, languages, value } //이 코드는 다음 코드와 같다. const extracted = { name: "이름", languages: "언어", value: "벨류" }

const {done, children, onToggle, onRemove} = this.props; //이는 아래와 같다. const done = this.props.done; const children = this.props.children; const onToggle = this.props.onToggle; const onRemove = this.props.onRemove; //아래와 같이 하면 키값을 변환해서 가져올 수 있다. const {done: convertName} = this.props; console.log(convertName); // == this.props.done

객체는 뭐고 객체는 뭐고 인스턴스는 뭔가? 그리고 클래스는 또 뭘까? 흔히들 클래스를 객체화한다거나 클래스를 인스턴스화 한다는 표현을 사용한다. 클래스는 말그대로 프로그래밍상 정의되어 있는 데이터와 메소드의 집합을 의미한다. 해당 코드 자체가 클래스가 된다. 이것을 사용하기 위해서는 객체화 또는 인스턴스화 작업이 필요하다. 자바도 그렇고 자바스크립트도 그렇고 new 지시어를 통한 작업이 바로 그것이다. 여기에서 객체란 인스턴스화를 위해 리턴된 값을 의미하고 인스턴스란 이를 통해 생성된 결과물을 의미한다. 아래 코드를 보자. function Test(){ this.name = '인스턴스'; return { name: '객체', getInstance: () => { console.log(this.name);..

나는 백엔드 개발자다. 최근에는 프론트엔드에도 많은 관심을 가지고 학습을 이어가고 있지만 정작 자바스크립트에 흥미를 느꼈던 시기에는 SI업체에 있었기 때문에 주어진 백엔드 작업을 쳐내는 것도 바빴고 게임에도 빠져 있어서 출퇴근 길에 구글링으로 지적호기심을 채우는 것이 고작이었다. 그때가 약 5년 전 이었던 것 같은데 Node가 등장하고 지금의 라인플러스에서 자바스크립트 고급 개발자를 공격적으로 모집하던 시기였던 것 같다. 자바스크립트의 발전을 넋놓고 지켜볼 수 밖에 없었다. 아무튼 지금에 와서 리액트를 학습하며 자바스크립트를 다시 들여다보게 되었고 과거 완전히 이해하지 못하고 넘어갔던 클로저에 대해 확실히 정리를 해두려 한다. 클로저가 대체 뭘까? 자바스크립트의 특정 함수를 가리키는 건가? 아니면 특정 ..