omaeng

본문은 egovframework 4.1 (springboot 2.7.0), tibero6 으로 구성되어 있는 서비스에 log4j를 적용한 내용을 기술한 글입니다. 블로그로 글을 남기게 된 이유는 ... log4j가 기본적으로 제공하는 dbDriver에 tibero가 없기 때문이다! 구글링을 해보니 -Dlog4jdbc.drivers=com.tmax.tibero.jdbc.TbDriver (vm argument)를 작성하고 ... log4j.log4j2.properties를 만들고 등등의 방법이 많았다. 하지만 필자는 파일을 새롭게 만들고 싶지 않고, log4j2를 추가하기도 싫어서 새로운 방법을 긴 시간의 삽질을 하며 성공했다 ㅎㅎ 환경구성 JDK: 1.8 Build Tool : mavne DataBase:..

안녕하세요. 이 글은 전자전부프레임워크 3.10에 카카오 로그인 서비스를 적용하는 과정을 기록하는 게시글 입니다. 1편은 아래 링크를 참조해주시길 바랍니다! https://omaeng.tistory.com/34 전자정부프레임워크 3.10 + 카카오 로그인 적용 (1편) 안녕하세요. 이 글은 전자전부프레임워크 3.10에 카카오 로그인 서비스를 적용하는 과정을 기록하는 게시글 입니다. 카카오 로그인? 카카오 로그인은 카카오계정으로 다양한 서비스에 로그인할 omaeng.tistory.com 전자정부프레임워크 3.10 개발프레임워크는 정보시스템 개발을 위해 필요한 기능 및 아키텍처를 미리 만들어 제공함으로써 효율적인 어플리케이션 구축을 지원합니다. “전자정부 표준프레임워크”는 공공사업에 적용되는 개발프레임워크의..

안녕하세요. 이 글은 전자전부프레임워크 3.10에 카카오 로그인 서비스를 적용하는 과정을 기록하는 게시글 입니다. 카카오 로그인? 카카오 로그인은 카카오계정으로 다양한 서비스에 로그인할 수 있도록 하는 OAuth 2.0 기반의 소셜 로그인 서비스입니다. 카카오 로그인 사용 시, 서비스는 서비스 ID 및 비밀번호를 입력받고 검증하는 과정을 직접 구현하지 않고도 사용자에 대한 인증과 인가를 간편하고 안전하게 처리할 수 있습니다. 사용자는 카카오 로그인이 적용된 서비스에 카카오톡 또는 카카오계정 ID와 비밀번호로 손쉽게 로그인할 수 있습니다. 로그인 프로세스 첨부된 이미지에서 자세한 프로세스 확인 가능합니다. 위 로그인 프로세스에서 가장 중요한 점은 Step2에서 제공받은 사용자 정보로 서비스 회원 여부 확인..

이름을 가지는 라우트 라우트 뷰를 이동할 경우에 path가 아닌 name으로 이동하는게 스크립트를 작성할 시 더 유용할 수 있습니다. home foo bar const router = new VueRouter({ routes: [ { path: '/bar/:id', name: 'bar', component: () => import( "../views/Bar.vue"), } ] }) router-link를 통해 name: {이동하고자 하는 route 이름}, params:{route에 선언된 변수} 값으로 route를 이동시킬 수 있습니다. This is Bar{{$route.params.id}} 또한 넘겨준 변수의 값을 사용하여 vue 파일에서 사용할 수 있습니다. 선언적 방식 이외에도 프로그래밍 네비게..

vue router? 단일 페이지 어플리케이션(SPA)에서 서버 요청 없이 화면의 이동을 매끄럽게 해주는것이 가장 중요하다. vue router는 vue core와 밀접한 관계를 가지고 있고, vue에서 화면전환을 담당해 주는 라이브러리다. 프로젝트 생성 라우팅을 하기 위해서 간단한 프로젝트를 vue cli로 생성 참고 2021.09.08 - [분류 전체보기] - [vue.js] vue 프로젝트 만들기 router만 추가적으로 선택해주고 (스페이스바를 누르면 *표시가 활성화됨) 프로젝트를 생성 나머지 설정을 선택해주고 프로젝트를 IDE로 open 프로젝트 구조는 위 사진과 같이 되어있다. 여기서 router를 사용하기 위해 선언을 하는 곳은 root 위치의 main.js App.vue rouet 폴더의 ..

vue framework를 사용해 프로젝트를 만들어 보겠습니다. vue를 사용하는 방법은 다양하지만 저는 vue/cli를 통해 기본 프로젝트를 생성해 보겠습니다. Vue CIL? Vue 기반 프로젝트의 생성부터 각종 플러그인 추가 및 세팅까지 도와주는 툴이다. 이름에서도 알 수 있다시피 CLI 기반의 툴이며, vue ui 명령어를 사용하면 웹 기반 UI를 불러올 수 있다. 여러모로 다양한 기능을 제공하기에, 본격적인 Vue.js 프로젝트를 만들고자 한다면 필수적으로 사용하게 될 툴이다. Vue CLI 설치하기 Vue CLI를 설치하기 위해서는 로컬PC에 nodejs가 설치되어 있어야합니다. 명령어 프롬프트창(CMD)에서 명령어를 입력 후 엔터를 눌러줍니다. npm install -g @vue/cli 설치..

더보기 빌드 환경 구성하기 GitLab CI/CD 환경을 구축하기 위해선 빌드파일을 만들 환경 구성이 필수이다. Git과 GitLab의 pipeline 프로세스 위 Git과 GitLab의 pipeline 프로세스 그림을 보면 CODE가 local에 있는 버전의 작성된 코드이고, RELATED CODE 가 저장소에 COMMIT(로컬에서 변경사항을 기록한 상태) 된 CODE이다. 사실은 COMMIT 을 하면 로컬에서 가지고 있는 버전이 올라가는 의미이지만, PUSH 행위를 통해 원격 저장소에 COMMIT(로컬의 기록된 변경사항) 할 수 있다. 여기서 운영 서버에 빌드 환경을 구성해야 하는 이유는 CI/CD의 동작이 GitLab runner(운영서버에 위치하여 각종 cmd 명령어를 수행하는 녀석) + 소스(원..

이번에는 자료구조에 대해서 학습하겠습니다. 처음으로 Set 자료구조이다. 기본적으로 제공하는 데이터 삽입 삭제가 가능하다. 첨부된 캡처를 기준으로 설명하면 자료를 삽입하고 자료에서 .has메소드를 통해서 자료구조 내의 일정한 값이 존재하는지에 대한 여부를 검사할수 있다. 나아가 forEach를 통해 순회하면서 자료에 접근할 수 있고, 삭제 메소드를 통해 자료구조의 데이터를 삭제할 수도 있다. 다음으로는 WeakSet에 대해 알아보겠다. WeackSet은 참조를 가지고 있는 객체만 저장이 가능한 자료구조로 숫자, 문자열, null 값을 자료구조 안에 삽입할 수 없다. 하지만 배열이나 함수 2중배열 같은 경우 WeakSet에 삽입할 수 있다. //weakset //참조를 가지고 있는 객체만 저장이 가능하다...

기존 JavaScript에서 중복되는 객체의 선언을 줄여주는 코드가 ES2015에 나왔다. Key 값과 Value의 값이 일치하는 경우라면 리턴 구문에서 중복되는 변수의 값을 제거할 수 있다. function getObj() { const name = "omaeng"; const getname = function() { return name; } const setname = function(newname){ name = newname; } const nameprint = function(){ console.log(name); } return{getname,setname} } var obj = getObj(); console.log(obj.getname()); //"omaeng" Destrunturing ..

Spread operator는 펼침 연산자라는 뜻이다. 펼침이라는 의미로 배열 안에 있는 데이터를 펼쳐서 보여준다는 의미가 있다. let pre = ["apple", "orange",100]; //펼침 연산사. let newData = [...pre]; console.log(pre,newData); ["apple", "orange", 100] ["apple", "orange", 100] 변수인 pre와 newData가 같은지 검사해보면 false가 나온다. 같은 값이 나오더라도 === 연산자로 검사해보면 false가 나오는 이유는 Spread operator로 변수를 재 정의했기 때문에 주소 채계가 달라졌기 때문이다. 또, spread operator는 배열의 어디든 위치할 수 있어서 배열 안에 배열을 ..