키자드에 등록된 총 56개의 포스트를 확인하실 수 있습니다.
본 포스트에서는 Front-end는 리액트, Back-end는 Express 기반의 Node.js를 사용하여 하나의 프로젝트로 간단한 Application을 구성해 보겠습니다. 구성할 Application은 이전 포스트에서 진행했던 네이버 API 조..
본 포스트는 광고 플랫폼인 카카오 애드핏으로 블로그에 광고를 붙였을 때의 수익분석에 대한 글입니다. '22년 7월 초 정도에 호기심에 블로그에 광고 플랫폼을 연동해 보았습니다. 일단은 티스토리에서 연결을 제..
본 포스트는 협업을 위해 Github에 업로드 되어 있는 프로젝트를 비주얼 스튜디오 코드로 체크아웃 하는 방법을 설명합니다. 1. 체크아웃 대상 프로젝트 다른 포스트에서 진행했던 searchNaverApiTs 프로젝트를 체..
이 포스트는 VSCode에서 Node.js 설치 후 npm, tsc 등 명령을 실행했을 경우 "'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고.....
본 포스트는 React에서 배열을 다룰 때 발생할 수 있는 오류인 Each child in a list should have a unique "key" prop 오류 원인 및 해결 방법에 대해 설명합니다. React로 개발할 때 목록 구현을 위해 보통 아래..
본 포스트는 Express 기반의 Node.js 애플리케이션 서버를 구성하고 static 경로를 설정하는 방법을 설명합니다. 서론 Node.js 서버 애플리케이션을 개발할 때 주로 사용하는 Framework는 Express와 Nest 정도가..
본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 이번 과정에서 작성한 전체 소스코드는 중간중간 포스트에서 표시했습니다. 하지만 혹시 잘 안되시는 분들이..
오라클이나 티베로에서는 아래와 방법으로 테이블 목록을 조회할 수 있습니다. SELECT A.OWNER , A.TABLE_NAME , A.TABLESPACE_NAME , B.COMMENTS FROM DBA_TABLES A , DBA_TAB_COMMENTS B WHERE A.OWNER = B.OWNE..
본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 이번 과정에서 작성한 전체 소스코드는 중간중간 포스트에서 표시했습니다. 하지만 혹시 잘..
본 포스트는 비주얼 스튜디오 코드로 작성한 프로젝트를 깃헙에 업로드 하는 방법을 설명합니다. VSCode에서 작성한 프로젝트는 아래 방법으로 Github에 업로드해서 공동 작업을 할 수 있습니다. 1. 프로젝트 생성..
본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스트까지 TypeScript로 Hello World를 출력하는 프로그램을 작성해보고 컴파일, 번들..
본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스트에서는 Naver API를 호출하여 응답 데이터를 확인해 보고, 응답 데이터에 맞는 i..
본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스트에서 뉴스와 도서 목록을 각각 구성해서 목록 UI를 완성해 보았습니다. 뉴스와..
본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 지난 포스트에서 탭을 선택하여 토글하는 부분까지 확인을 했습니다. 이번 포스트에서는 선..
본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 이제 이번 프로젝트의 마지막 과정입니다. 지난 포스팅까지 해서 목록을 구성하고 탭 메뉴로..
본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 우리가 사용하는 JavaScript라는 언어는 동적 타입의 인터프리터 언어입니다. 따라서 별도로..
본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 이전 포스트에서 개발할 내용을 확인해 보았으니, 이제 개발에 필요한 환경을 구성하고 프로..
본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스트에서는 프로젝트 경로를 생성하고 개발에 필요한 모듈들을 설치해 보았습니다. R..
본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스트에서는 tsc 명령으로 TypeScript를 JavaScript로 컴파일 해보았고, 컴파일 한 Ja..
본 포스트는 제우스에서 세션 확인 및 유지를 위해 jSessionId를 사용할 때 주의사항에 대한 포스트입니다. HTTP 프로토콜은 기본적으로 Stateless 합니다. 클라이언트에서 서버에 요청할 때마다 새로운 연결을 생..
본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스트에서는 간단하게 "Hello World"를 출력하는 프로그램을 작성하고 실행시켜서 확인해 보았습니다...
PC 홈페이지와 모바일 홈페이지를 같이 운영하다 보면 사용자가 어느 쪽으로 접속하던 사용하는 매체에 맞는 환경으로 이동시켜 주기 위해 user-agent 속성으로 현재 접속한 환경을 판단합니다. iOS의 같은 경우..
본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스트에서 Naver News API를 호출해서 아래 형태로 결과를 받아보는 부분까지 진행해 보았습니다. 인..
본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스팅까지 해서 뉴스와 도서 목록을 각각 구성해서 UI까지 만들어 보았습니다. 지금은 뉴스와 도서를..
본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스팅까지 해서 목록을 구성하고 탭 메뉴를 만들어서 탭을 전환할 때마다 탭에 맞는 Naver API를 호출..
본 포스트는 파티션 테이블을 사용할 때 글로벌 인덱스와 로컬 인덱스 구성에 따른 차이를 정리한 글입니다. 프로젝트 요건 중 고객별 개인화 마케팅을 위해 전체 고객의 구매나 성향 패턴에 대한 데이터를 Weekly..
본 포스트는 오라클이나 티베로에서 시퀀스의 cache 및 order 옵션 조합에 따른 성능 개선에 대한 글입니다. 운영하고 있는 시스템이 여러가지 사유들로 거래량이 제법 큰 폭으로 증가했었습니다. 증가한 범위가..
본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 시간에는 프로젝트 경로를 생성하고 개발에 필요한 모듈들을 설치해 보았습니다. 설치하는 과정에서 의..
webpack-cli 4.9.x 버전을 사용하고 있는데 아래와 같은 오류를 만난다면 webpack-cli 버전을 4.10.0 으로 재설치하시면 됩니다. [webpack-cli] TypeError: cli.isMultipleCompiler is not a function at Command...
본 포스트는 트랜잭션 설정에 따른 데드락이 발생하는 원인과 Spring의 Transaction Propagation Level (전파 레벨)에 대한 글입니다. 프로젝트 오픈 후 특정 인원 몇몇 한정으로 로그인을 시도하면 Timeout이 발..
JEUS 7에서 운영 중인 솔루션에 기능을 add-on 하면서 솔루션의 Spring framework 버전을 4.1.6에서 4.3.18로 올렸더니 아래와 같은 오류가 나며 WAS가 구동되지 않는 현상이 있었습니다. java.lang.illegalStateE..
요즘 개발하는 서비스들은 대부분 국내에서 뿐만 아니라 해외에서도 사용 가능한 형태로 개발합니다. 해외에서 서비스를 사용하는 경우 뿐 아니라 사용자가 각자 사용하는 Device의 국가, 시간 설정을 대한민국이..
본 포스트는 HTTP Response Header 의 값 중 서버 시간을 구해서 사용하는 방법에 대한 설명입니다. 클라이언트에서 서버의 시간을 참조할 일이 있을 경우, 서버 API에서 응답값에 현재 시간을 보통 포함시켜서 전..
본 포스트는 크롬 브라우저의 개발자 도구를 사용하여 네트워크 기록을 분석할 수 있는 HAR 파일 사용법에 대한 설명입니다. 개발을 하다가 특정 환경이나 사용자에게 오류가 발생하는 경우, 특히나 Back-end가 아..
본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 금융 IT에 종사하다 보니 Front-end 개발을 주로 하지만 Vue나 React 같은 Library 보다는 주로 jQuery 기반..
본 포스트는 WAS에서 커넥션 풀 부족 현상을 개선하는 방법 및 스프링(Spring Framework)에서 트랜잭션을 설정하는 방법에 대한 글입니다. '22년 초부터는 마이데이터 사업자(토스나 뱅크샐러드 등)의 스크래핑이..
본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 개발할 내용을 설계해보았으니 개발에 필요한 환경을 구성하고 프로젝트를 생성해 보도록 하겠습니다. 코드..
SI 업체에서 진행한 프로젝트를 인수인계 받아서 운영하던 초기에 간헐적으로 자신의 아이디가 중복 로그인되어 로그인이 끊어진다는 민원이 들어왔다. B2C 사이트이고 뭔가 보안에 문제가 있을 수도 있으니 얼른..
JavaScript에서 여러 개의 조건을 나열할 때 아래와 같이 or를 길게 연결해서 사용합니다. const code = data.code; if (code === 'A' || code === 'B' || code === 'C' || code === 'D' || code === 'E') { //Do..
보통 순번 채번이 필요한 경우 대부분 Sequence를 사용합니다. 하지만 아래와 같은 사유로 시스템을 운영하다 보면 MAX + 1로 처리된 순번도 눈에 많이 보입니다. 1. 오래 전에 작성했거나, 2. 컬럼 조합에 따른..
백오피스나 내부 사용자를 위한 시스템은 Edge로 전환 후 I.E에 대한 고려를 이제 걷어내어도 되겠지만, 대고객 서비스를 하는 시스템들은 계속 I.E에 대해 고려할 필요가 있습니다. JavaScript에서 일자 formatti..
본 포스트는 크롬의 개발자 도구를 사용하여 useragent 값을 변경해 가면서 테스트 할 수 있는 방법에 대한 설명입니다. 대고객 서비스를 운영하다 보면 타 업체의 앱과 제휴하여 서비스를 제공하는 경우가 종종..
몇 년 전에도 모 프로젝트에서 지원 요청이 와서 한 번 Code Review 하여 해결을 했었고, 얼마 전에도 운영 중인 시스템에서도 동일한 Case가 있었던 것을 보면 아주 기초적인 사항임에도 생각보다 잘 지켜지지 않..
PC Web을 개발하던, Mobile Web을 개발하던 반드시 Network로 서버와 인터페이스 하여 데이터를 주고 받는 업무가 발생한다. 이때 편리한 Debugging을 할 수 있는 Chrome 개발자 도구의 [Network] 탭을 살펴보도록..
JavaScript 에는 Same-origin Policy 라는 규칙이 있다. 한국어로 하자면 동일 출처 정책인데, 한 출처에서 로드된 문서나 스크립트가 다른 출처의 자원과 상호작용하지 못하도록 규정하는 내용이다. JavaScript..
PC에서 Python을 개발할 수 있는 환경을 구성해보도록 하겠습니다. Python은 당연히 Windows OS와 MAC OS를 지원하지만, 지금부터 Python을 시작하는 목적은 "시스템 트레이딩" 이므로 Windows OS에 설치하도록 하..
아나콘다를 기본 경로에 설치하면 C:\Anaconda3 경로에 설치됩니다. 해당 경로에 가보면 Lib\idlelib 이라는 폴더가 있습니다. 해당 폴더에 들어가보면 idle.bat 라는 파일이 있으며, 더블 클릭하면 파이썬 IDLE(I..
물론 모든 프로그램은 기본적인 텍스트 에디터를 사용해도 되지만, 각자에게 편리한 IDE 환경으로 개발하면 생산성을 향상시킬 수 있습니다. 보통 Python은 Visual Studio로 개발하는 편이 가장 편리하다고 하지만..
몇 년 전 모 프로젝트에서 지원 요청이 와서 가서 보고, 얼마 전에 내 프로젝트에서도 발생한 걸 보면 아주 기초적인 사항임에도 생각보다 잘 지켜지지 않는 사항인가보다. 대기업 SI 프로젝트에 몸담고 있다보면..
제목: 목록 페이지 구성 (Client) 최초작성일: 2014-12-26 최종수정일: 2014-12-26 자 이제 목록 페이지를 개발해 보겠습니다. 목록 페이지는 서버에서 데이터를 조회해와서 List 형태로 화면에 출력하는 역할을..
제목: 상세 페이지 구성 (Client) 최초작성일: 2014-12-30 최종수정일: 2014-12-30 연말연시는 언제나 아쉬움이 많이 남는 것 같습니다. 그래도 이번 연말은 좋네요. 회사란 곳에 입사를 하고서부터는 정말 바쁘게..
제목: 글쓰기 페이지 구성 (Client) 최초작성일: 2015-01-05 최종수정일: 2015-01-05 2015년 새해가 밝았습니다. 다들 2015년에는 하시는 일 원하시는대로 이루어지길 빌겠습니다. 물론 저도, 우리 꼬맹이도 건강..
언젠가부터 Enterprise Mobile Application을 개발하는데 Hybrid 개발 방법이 많이 쓰이고 있습니다. 물론 Native나 Mobile Web과는 일정 부분의 득과 실이 있겠지만, 기업 입장에서 전체적인 개발 비용을 다운시..
MAC OSX에서의 PhoneGap 개발환경 구성에 대해 알아 보겠습니다. 요즘 특정 Hybrid Framework에서는 Windows 환경에서도 iOS Application을 Build하는 방법을 제공하지만, Open Source인 PhoneGap에서는 아직 제공..
개발을 하다보면 Google Chrome 에 멋진 기능들이 많이 있습니다. 오늘은 그 중에 Device Mode & Mobile Emulation 이라는 기능을 잠시 살펴보겠습니다. Chrome의 개발자 도구는 [F12] Key로 표시할 수 있습니다...