redballs의 등록된 링크

 redballs로 등록된 티스토리 포스트 수는 56건입니다.

kakao AdFit 수익 분석 [내부링크]

본 포스트는 광고 플랫폼인 카카오 애드핏으로 블로그에 광고를 붙였을 때의 수익분석에 대한 글입니다. '22년 7월 초 정도에 호기심에 블로그에 광고 플랫폼을 연동해 보았습니다. 일단은 티스토리에서 연결을 제..

React + Express + Typescript - 01. 서버 환경 구성 [내부링크]

본 포스트에서는 Front-end는 리액트, Back-end는 Express 기반의 Node.js를 사용하여 하나의 프로젝트로 간단한 Application을 구성해 보겠습니다. 구성할 Application은 이전 포스트에서 진행했던 네이버 API 조..

Node.js Express 환경 설정 [내부링크]

본 포스트는 Express 기반의 Node.js 애플리케이션 서버를 구성하고 static 경로를 설정하는 방법을 설명합니다. 서론 Node.js 서버 애플리케이션을 개발할 때 주로 사용하는 Framework는 Express와 Nest 정도가..

Each child in a list should have a unique "key" prop. 오류 [내부링크]

본 포스트는 React에서 배열을 다룰 때 발생할 수 있는 오류인 Each child in a list should have a unique "key" prop 오류 원인 및 해결 방법에 대해 설명합니다. React로 개발할 때 목록 구현을 위해 보통 아래..

VSCode 터미널에서 npm 실행 안됨 [내부링크]

이 포스트는 VSCode에서 Node.js 설치 후 npm, tsc 등 명령을 실행했을 경우 "'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고.....

Github 프로젝트 VSCode로 Checkout 하기 [내부링크]

본 포스트는 협업을 위해 Github에 업로드 되어 있는 프로젝트를 비주얼 스튜디오 코드로 체크아웃 하는 방법을 설명합니다. 1. 체크아웃 대상 프로젝트 다른 포스트에서 진행했던 searchNaverApiTs 프로젝트를 체..

VSCode 프로젝트 Github 업로드 하기 [내부링크]

본 포스트는 비주얼 스튜디오 코드로 작성한 프로젝트를 깃헙에 업로드 하는 방법을 설명합니다. VSCode에서 작성한 프로젝트는 아래 방법으로 Github에 업로드해서 공동 작업을 할 수 있습니다. 1. 프로젝트 생성..

React 기초 (목록 - TypeScript) 10 - Github [내부링크]

본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 이번 과정에서 작성한 전체 소스코드는 중간중간 포스트에서 표시했습니다. 하지만 혹시 잘..

[Oracle, Tibero] 테이블 레이아웃 조회 [내부링크]

오라클이나 티베로에서는 아래와 방법으로 테이블 목록을 조회할 수 있습니다. SELECT A.OWNER , A.TABLE_NAME , A.TABLESPACE_NAME , B.COMMENTS FROM DBA_TABLES A , DBA_TAB_COMMENTS B WHERE A.OWNER = B.OWNE..

React 기초 (목록 만들기) 08 - Github [내부링크]

본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 이번 과정에서 작성한 전체 소스코드는 중간중간 포스트에서 표시했습니다. 하지만 혹시 잘 안되시는 분들이..

React 기초 (목록 - TypeScript) 09 - 키워드 검색 구현 [내부링크]

본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 이제 이번 프로젝트의 마지막 과정입니다. 지난 포스팅까지 해서 목록을 구성하고 탭 메뉴로..

React 기초 (목록 - TypeScript) 08 - Tab 버튼 구현(#2) [내부링크]

본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 지난 포스트에서 탭을 선택하여 토글하는 부분까지 확인을 했습니다. 이번 포스트에서는 선..

React 기초 (목록 - TypeScript) 07 - Tab 버튼 구현(#1) [내부링크]

본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스트에서 뉴스와 도서 목록을 각각 구성해서 목록 UI를 완성해 보았습니다. 뉴스와..

React 기초 (목록 - TypeScript) 06 - ListView UI 구성 [내부링크]

본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스트에서는 Naver API를 호출하여 응답 데이터를 확인해 보고, 응답 데이터에 맞는 i..

React 기초 (목록 - TypeScript) 05 - API 호출 [내부링크]

본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스트까지 TypeScript로 Hello World를 출력하는 프로그램을 작성해보고 컴파일, 번들..

React 기초 (목록 - TypeScript) 04 - Hello World [내부링크]

본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스트에서는 tsc 명령으로 TypeScript를 JavaScript로 컴파일 해보았고, 컴파일 한 Ja..

React 기초 (목록 - TypeScript) 03 - 컴파일 [내부링크]

본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스트에서는 프로젝트 경로를 생성하고 개발에 필요한 모듈들을 설치해 보았습니다. R..

React 기초 (목록 - TypeScript) 02 - 프로젝트 생성 [내부링크]

본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 이전 포스트에서 개발할 내용을 확인해 보았으니, 이제 개발에 필요한 환경을 구성하고 프로..

React 기초 (목록 - TypeScript) 01 - Concept [내부링크]

본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 우리가 사용하는 JavaScript라는 언어는 동적 타입의 인터프리터 언어입니다. 따라서 별도로..

React 기초 (목록 만들기) 07 - 키워드 검색 구현 [내부링크]

본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스팅까지 해서 목록을 구성하고 탭 메뉴를 만들어서 탭을 전환할 때마다 탭에 맞는 Naver API를 호출..

React 기초 (목록 만들기) 06 - Tab 버튼 구현 [내부링크]

본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스팅까지 해서 뉴스와 도서 목록을 각각 구성해서 UI까지 만들어 보았습니다. 지금은 뉴스와 도서를..

React 기초 (목록 만들기) 05 - ListView UI 구성 [내부링크]

본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스트에서 Naver News API를 호출해서 아래 형태로 결과를 받아보는 부분까지 진행해 보았습니다. 인..

iOS 13 iPad의 User-agent 이슈 [내부링크]

PC 홈페이지와 모바일 홈페이지를 같이 운영하다 보면 사용자가 어느 쪽으로 접속하던 사용하는 매체에 맞는 환경으로 이동시켜 주기 위해 user-agent 속성으로 현재 접속한 환경을 판단합니다. iOS의 같은 경우..

React 기초 (목록 만들기) 04 - API 호출 [내부링크]

본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 포스트에서는 간단하게 "Hello World"를 출력하는 프로그램을 작성하고 실행시켜서 확인해 보았습니다...

세션 클러스터링 시 JEUS의 jSessionId [내부링크]

본 포스트는 제우스에서 세션 확인 및 유지를 위해 jSessionId를 사용할 때 주의사항에 대한 포스트입니다. HTTP 프로토콜은 기본적으로 Stateless 합니다. 클라이언트에서 서버에 요청할 때마다 새로운 연결을 생..

JEUS 7과 Spring 4.3.x. 버전 이슈 [내부링크]

JEUS 7에서 운영 중인 솔루션에 기능을 add-on 하면서 솔루션의 Spring framework 버전을 4.1.6에서 4.3.18로 올렸더니 아래와 같은 오류가 나며 WAS가 구동되지 않는 현상이 있었습니다. java.lang.illegalStateE..

트랜잭션 간 Deadlock [내부링크]

본 포스트는 트랜잭션 설정에 따른 데드락이 발생하는 원인과 Spring의 Transaction Propagation Level (전파 레벨)에 대한 글입니다. 프로젝트 오픈 후 특정 인원 몇몇 한정으로 로그인을 시도하면 Timeout이 발..

[webpack-cli] TypeError: cli.isMultipleCompiler is not a function 오류 [내부링크]

webpack-cli 4.9.x 버전을 사용하고 있는데 아래와 같은 오류를 만난다면 webpack-cli 버전을 4.10.0 으로 재설치하시면 됩니다. [webpack-cli] TypeError: cli.isMultipleCompiler is not a function at Command...

React 기초 (목록 만들기) 03 - Hello World [내부링크]

본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 저번 시간에는 프로젝트 경로를 생성하고 개발에 필요한 모듈들을 설치해 보았습니다. 설치하는 과정에서 의..

Sequence order 옵션에 따른 성능 [내부링크]

본 포스트는 오라클이나 티베로에서 시퀀스의 cache 및 order 옵션 조합에 따른 성능 개선에 대한 글입니다. 운영하고 있는 시스템이 여러가지 사유들로 거래량이 제법 큰 폭으로 증가했었습니다. 증가한 범위가..

Partition truncate 시 온라인 거래 지연 이슈 [내부링크]

본 포스트는 파티션 테이블을 사용할 때 글로벌 인덱스와 로컬 인덱스 구성에 따른 차이를 정리한 글입니다. 프로젝트 요건 중 고객별 개인화 마케팅을 위해 전체 고객의 구매나 성향 패턴에 대한 데이터를 Weekly..

React 기초 (목록 만들기) 02 - 프로젝트 생성 [내부링크]

본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 개발할 내용을 설계해보았으니 개발에 필요한 환경을 구성하고 프로젝트를 생성해 보도록 하겠습니다. 코드..

WAS Connection Pool 부족 현상 [내부링크]

본 포스트는 WAS에서 커넥션 풀 부족 현상을 개선하는 방법 및 스프링(Spring Framework)에서 트랜잭션을 설정하는 방법에 대한 글입니다. '22년 초부터는 마이데이터 사업자(토스나 뱅크샐러드 등)의 스크래핑이..

React 기초 (목록 만들기) 01 - Concept [내부링크]

본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다. 금융 IT에 종사하다 보니 Front-end 개발을 주로 하지만 Vue나 React 같은 Library 보다는 주로 jQuery 기반..

[Google Chrome] Network 분석을 위한 HAR 파일 사용 [내부링크]

본 포스트는 크롬 브라우저의 개발자 도구를 사용하여 네트워크 기록을 분석할 수 있는 HAR 파일 사용법에 대한 설명입니다. 개발을 하다가 특정 환경이나 사용자에게 오류가 발생하는 경우, 특히나 Back-end가 아..

Response Header 시간 구하기 [내부링크]

본 포스트는 HTTP Response Header 의 값 중 서버 시간을 구해서 사용하는 방법에 대한 설명입니다. 클라이언트에서 서버의 시간을 참조할 일이 있을 경우, 서버 API에서 응답값에 현재 시간을 보통 포함시켜서 전..

클라이언트와 서버의 시간 차 해소 [내부링크]

요즘 개발하는 서비스들은 대부분 국내에서 뿐만 아니라 해외에서도 사용 가능한 형태로 개발합니다. 해외에서 서비스를 사용하는 경우 뿐 아니라 사용자가 각자 사용하는 Device의 국가, 시간 설정을 대한민국이..

JavaScript 함수의 실행 순서 [내부링크]

몇 년 전에도 모 프로젝트에서 지원 요청이 와서 한 번 Code Review 하여 해결을 했었고, 얼마 전에도 운영 중인 시스템에서도 동일한 Case가 있었던 것을 보면 아주 기초적인 사항임에도 생각보다 잘 지켜지지 않..

[Google Chrome] User-Agent 조작하기 [내부링크]

본 포스트는 크롬의 개발자 도구를 사용하여 useragent 값을 변경해 가면서 테스트 할 수 있는 방법에 대한 설명입니다. 대고객 서비스를 운영하다 보면 타 업체의 앱과 제휴하여 서비스를 제공하는 경우가 종종..

I.E 에서 momentJs 사용 시 주의사항 [내부링크]

백오피스나 내부 사용자를 위한 시스템은 Edge로 전환 후 I.E에 대한 고려를 이제 걷어내어도 되겠지만, 대고객 서비스를 하는 시스템들은 계속 I.E에 대해 고려할 필요가 있습니다. JavaScript에서 일자 formatti..

MAX + 1 채번 이슈 [내부링크]

보통 순번 채번이 필요한 경우 대부분 Sequence를 사용합니다. 하지만 아래와 같은 사유로 시스템을 운영하다 보면 MAX + 1로 처리된 순번도 눈에 많이 보입니다. 1. 오래 전에 작성했거나, 2. 컬럼 조합에 따른..

조건문에서 indexOf, includes 활용 [내부링크]

JavaScript에서 여러 개의 조건을 나열할 때 아래와 같이 or를 길게 연결해서 사용합니다. const code = data.code; if (code === 'A' || code === 'B' || code === 'C' || code === 'D' || code === 'E') { //Do..

중복 로그인 체크 오류 [내부링크]

SI 업체에서 진행한 프로젝트를 인수인계 받아서 운영하던 초기에 간헐적으로 자신의 아이디가 중복 로그인되어 로그인이 끊어진다는 민원이 들어왔다. B2C 사이트이고 뭔가 보안에 문제가 있을 수도 있으니 얼른..

[Google Chrome] Nework 탭 살펴보기 [내부링크]

PC Web을 개발하던, Mobile Web을 개발하던 반드시 Network로 서버와 인터페이스 하여 데이터를 주고 받는 업무가 발생한다. 이때 편리한 Debugging을 할 수 있는 Chrome 개발자 도구의 [Network] 탭을 살펴보도록..

JS UI Rendering, Data bind [내부링크]

몇 년 전 모 프로젝트에서 지원 요청이 와서 가서 보고, 얼마 전에 내 프로젝트에서도 발생한 걸 보면 아주 기초적인 사항임에도 생각보다 잘 지켜지지 않는 사항인가보다. 대기업 SI 프로젝트에 몸담고 있다보면..

Python 개발환경구성 (3) - PyDev 설치 [내부링크]

물론 모든 프로그램은 기본적인 텍스트 에디터를 사용해도 되지만, 각자에게 편리한 IDE 환경으로 개발하면 생산성을 향상시킬 수 있습니다. 보통 Python은 Visual Studio로 개발하는 편이 가장 편리하다고 하지만..

Python 개발환경구성 (2) - IDLE [내부링크]

아나콘다를 기본 경로에 설치하면 C:\Anaconda3 경로에 설치됩니다. 해당 경로에 가보면 Lib\idlelib 이라는 폴더가 있습니다. 해당 폴더에 들어가보면 idle.bat 라는 파일이 있으며, 더블 클릭하면 파이썬 IDLE(I..

Python 개발환경구성 (1) - Anaconda 설치 [내부링크]

PC에서 Python을 개발할 수 있는 환경을 구성해보도록 하겠습니다. Python은 당연히 Windows OS와 MAC OS를 지원하지만, 지금부터 Python을 시작하는 목적은 "시스템 트레이딩" 이므로 Windows OS에 설치하도록 하..

[Google Chrome] 보안 옵션 해제 [내부링크]

JavaScript 에는 Same-origin Policy 라는 규칙이 있다. 한국어로 하자면 동일 출처 정책인데, 한 출처에서 로드된 문서나 스크립트가 다른 출처의 자원과 상호작용하지 못하도록 규정하는 내용이다. JavaScript..

[Google Chrome] Device Emulation [내부링크]

개발을 하다보면 Google Chrome 에 멋진 기능들이 많이 있습니다. 오늘은 그 중에 Device Mode & Mobile Emulation 이라는 기능을 잠시 살펴보겠습니다. Chrome의 개발자 도구는 [F12] Key로 표시할 수 있습니다...

PhoneGap 개발환경구성 (iOS) [내부링크]

MAC OSX에서의 PhoneGap 개발환경 구성에 대해 알아 보겠습니다. 요즘 특정 Hybrid Framework에서는 Windows 환경에서도 iOS Application을 Build하는 방법을 제공하지만, Open Source인 PhoneGap에서는 아직 제공..

PhoneGap 개발환경구성 (Windows) [내부링크]

언젠가부터 Enterprise Mobile Application을 개발하는데 Hybrid 개발 방법이 많이 쓰이고 있습니다. 물론 Native나 Mobile Web과는 일정 부분의 득과 실이 있겠지만, 기업 입장에서 전체적인 개발 비용을 다운시..

[하이브리드앱 만들기] 모바일 간단 게시판 #4 - 글쓰기 페이지 [내부링크]

제목: 글쓰기 페이지 구성 (Client) 최초작성일: 2015-01-05 최종수정일: 2015-01-05 2015년 새해가 밝았습니다. 다들 2015년에는 하시는 일 원하시는대로 이루어지길 빌겠습니다. 물론 저도, 우리 꼬맹이도 건강..

[하이브리드앱 만들기] 모바일 간단 게시판 #3 - 상세 페이지 [내부링크]

제목: 상세 페이지 구성 (Client) 최초작성일: 2014-12-30 최종수정일: 2014-12-30 연말연시는 언제나 아쉬움이 많이 남는 것 같습니다. 그래도 이번 연말은 좋네요. 회사란 곳에 입사를 하고서부터는 정말 바쁘게..

[하이브리드앱 만들기] 모바일 간단 게시판 #2 - 목록 페이지 [내부링크]

제목: 목록 페이지 구성 (Client) 최초작성일: 2014-12-26 최종수정일: 2014-12-26 자 이제 목록 페이지를 개발해 보겠습니다. 목록 페이지는 서버에서 데이터를 조회해와서 List 형태로 화면에 출력하는 역할을..

[하이브리드앱 만들기] 모바일 간단 게시판 #1 [내부링크]

제목: Concept 최초작성일: 2014-12-23 최종수정일: 2014-12-23 이제 이틀만 지나면 크리스마스네요. 매년 이맘때쯤 "이번 일 년은 정말 빨리 지나갔어" 라고 생각하지만 올해는 더더욱 빠른 속도로 휩쓸고 지나가..