이 기술 블로그를 만들기 위해 5년을 미뤘다.

회사 업무로 elasticsearch를 이용한 영화 대사 검색 API를 만들었다. 검색 API 호출 시, 입력한 검색어와 일치하는 부분은 태그로 강조되도록 기능을 만들었다. 브라우저로 호출 테스트를 해 보니 정상적으로 기울여지게 출력되는 것을 확인할 수 있었다! 하지만 문제는 웹에서 발생했으니... 리액트 기반으로 검색 웹 프론트를 만들었는데, 태그가 그대로 문자열로 표출이 된다... 검색해 보니, 리액트는 XSS 공격을 막기 위해 무조건 렌더링할 때 저런 식으로 HTML 태그를 문자열로 변환한다고 한다. 해결법은 입력하고자 하는 상위 HTML 태그에 다음과 같이 써주면 된다. (보안 위험이 있으니 되도록 사용을 지양하자!) 나는 span 태그를 따로 만들어서 영화 대사가 들어가는 부분에 넣어줬다. 결과..

was로 톰캣을 사용하면 프로젝트 폴더가 자동으로 ROOT Path로 지정되기 때문에 접근하려는 폴더가 프로젝트 폴더 외부에 있는 경우에는 접근이 어렵다. (ex 나스) 톰캣 폴더 내 conf/server.xml 파일을 열어서 Host 내에 아래 코드를 추가한 후 톰캣을 재기동하면 http://도메인주소/경로명/파일명 으로 접근이 가능하다. 위 방법을 이용해서 영화 포스터를 가져오는 실습을 해보자. 1. server.xml 파일 수정 2. 톰캣 재기동 후 이미지(혹은 파일) 접근

리액트는 클래스형과 함수형으로 컴포넌트를 생성할 수 있는데, 주로 함수형 컴포넌트가 많이 사용된다. 이유가 무엇일까? 함수형 컴포넌트의 가장 큰 장점으로는 간단하게 함축적인 프로그래밍이 가능하다는 것이다. 각각의 특징을 표로 정리해 보았다. 클래스형 컴포넌트 함수형 컴포넌트 특징 render() 메소드와 Component 상속 필수 간편한 컴포넌트 선언 및 프로그래밍 가능 React Hook을 사용 단점 state, props 사용 불편 많은 메모리 사용 state와 생명주기(Life Cycle) 메소드를 별도로 구현해야 함 => useState, useEffect 사용 보통 서점에서 리액트 서적을 구입하면 클래스형 컴포넌트 기준으로 주로 기술되어 있어서 처음 리액트를 공부하는 사람들은 복잡한 코드에 진..

React는 함수형과 클래스형 컴포넌트의 생명주기 형태가 다르다. 나같은 경우는 처음 리액트를 독학할 때는 클래스형 기준으로 공부하고 이후 프로젝트 개발할 때는 함수형으로 주로 쓰다 보니 개념이 뒤죽박죽이 되었다. 블로그에 정리하면서 복습해 보자. (2021-11-01에 부족한 부분을 업데이트했습니다.) 마운트 1. construnctor() : 컴포넌트가 처음 렌더링될 때 호출(생성자 메소드) => 단 한 번만 실행 constructor(props) { super(props); } 2. getDerivedStateFromProps() : props로 받아온 값을 통해 state를 갱신하기 위한 메소드 render() 직전에 실행되며, 여러 번 실행될 수 있음 return된 값이 초기 state의 초기값..

심심해서 이번 주말에 LH 전환보증금 계산기를 만들었다. 리액트 문법 까먹을까봐 리액트로 만들었는데 컴포넌트도 안나누고 넘나 개떡같이 만든 것 같다. 다음 리액트 프로젝트는 이쁘게 만들어 보자. 이건 내가 까먹을까봐 정리하는 리액트 프로젝트 github pages에 배포하는 방법이다. 절차 1. gh-pages 패키지 설치 npm install --save gh-pages // 또는 yarn add gh-pages 2. 프로젝트 폴더 내 package.json를 열고 "homepage" 요소 추가 { // ... "homepage" : "http://sap03110.github.io/lh-deposit-calculator", // 본인 깃허브 주소 + 리퍼지토리명 // ... } 3. package.js..

어느 날 이클립스로 검색엔진 관리자 기능을 개발하다가 다음과 같은 오류에 직면했다. 오류 전문은 다음과 같다. 간단히 해석을 해보면 text 필드는 sorting이 안되므로 keyword 필드를 사용하라는 것 같다. Text fields are not optimised for operations that require per-document field data like aggregations and sorting, so these operations are disabled by default. Please use a keyword field instead. 해결법은 다음과 같다. 1. 해당 필드의 type을 keyword로 변경 이미 매핑된 필드의 type은 변경이 불가하다. 따라서 인덱스를 삭제하고 다..

지난 이야기는 아래 참조! LH 청년매입임대 당첨 및 입주 준비 - 1. 지원~열람 대학교 3학년부터 자취를 시작해서 어느덧 4년차 자취인이 되었다. 학생 신분이었기에 4년 동안 월세를 아끼기 위해 반지하를 전전했었다. 사실 LH 청년전세대출 등 좋은 방법이 많긴 했지만 어 guiyomi.tistory.com 4월 4일까지 주택 열람이 진행되고, 4월 11일까지 서류 제출 기간이었다. 서류 목록은 다음과 같았다. 1. 신청서(본인 작성) 2. 주민등록등본 3. 가족관계증명서 4. 개인정보동의서 생각보다 너무 쉽자너~?~~~ 특히나 직접 LH 지사로 안찾아가고 인터넷으로 신청하고 서류 제출도 할 수 있다는 게 넘나 좋은 것이었따! 하고 좋아했던 것도 잠시... 난 몰랐다. 서류 검증이 이렇게나 오래 걸릴 ..

대학교 3학년부터 자취를 시작해서 어느덧 4년차 자취인이 되었다. 학생 신분이었기에 4년 동안 월세를 아끼기 위해 반지하를 전전했었다. 사실 LH 청년전세대출 등 좋은 방법이 많긴 했지만 어차피 졸업 후 취업할 걸 염두하고 단기 월세방만 계약해서 살았었는데 어쩌다 보니 취준생 상태로 너무 오랜 기간 머물게 된 것이었다! 충기청 대출이나 알아볼까 고민했지만 100% 대출이 가능한 방이 서울에 거의 없기도 하고 회사 다니면서 부동산도 찾아보려니 너무 힘들어서 포기했다 ㅠㅠ 그런 와중에 LH 청약센터에서 청년매입임대 수시모집 공고가 떴길래 심심풀이로 지원했었다. 이 공고는 특이하게 메일로 열람신청을 먼저 하고 계약 순위를 정한다나...? 암튼 메일로 열람신청을 해놓고 열람일 하루 전 날 메일함을 확인해 봤는데..

MySQL/MsSQL/Oracle INSTR(컬럼명, '문자열') 문자열 대/소문자 구분은 안된다. 그리고 PostgreSQL의 경우에는 instr() 함수를 제공하지 않는다. 그렇기 때문에 위 방법 외에 LIKE 구문을 쓰거나 POSITION() 등의 인덱스 찾기 함수를 써서 하는 방법을 사용해야 한다. (물론 다른 DB에서도 마찬가지다.) SELECT * FROM 테이블명 WHERE POSITION('문자열' in 컬럼명) > 0 // 해당 문자열을 포함하지 않으면 0 반환

자주 사용하는 각 DB에서 널값을 처리하는 방법을 정리해 보자. MySQL IFNULL(컬럼명, '치환값') // 혹은 COALESCE(컬럼명, '치환값') Oracle NVL(컬럼명, '치환값') // 혹은 NVL2(컬럼명, '널이 아닐 경우 치환값', '널일 경우 치환값') PostgreSQL COALESCE(컬럼명, '치환값') 그 외에도 CASE문을 활용하여 널 값을 처리하는 방법이 있다.