본문 바로가기
728x90

전체 글85

[Javascript / Java] Fetch API 응답 결과 값을 변수에 할당하는 방법 A to Z (feat. async/await, Promise) Spring Legacy 프로젝트를 주로 진행하기 때문에, ajax를 자주 사용하곤 한다. 그리고 최근 프로젝트가 다시 만들어지면서, jQuery를 최신 버전으로 업데이트하여 사용하게 되었다. 여기까진 문제가 없었지만, 언제나 버전 업데이트가 불쑥 문제를 일으키곤 한다. 일단 구현할 기능은 다음과 같다. ⓐ 비밀번호를 입력 후 서버단으로 전송한다. ⓑ 서버에서는 전송 받은 비밀번호가 DB의 비밀 번호와 일치하는지 확인한다. ⓒ 확인 결과를 클라이언트단으로 넘겨준다. ⓓ 클라이언트 단에서는 결과에 따라 이어서 진행한다. 지금 적으면서 생각해보니, ⓒ단계 진행없이 서버단에서 다 처리한 후 처리 결과를 클라이언트로 넘겨주면 끝이었는데, 기능별로 메소드를 구성하려는 욕심을 내다보니 프로세스가 더 추가된 것 같다.. 2022. 11. 17.
[Mediawiki] 미디어 위키에서 조건 별, 문서 통합 조회 기능 만들기(feat. DynamicPageList3 Extension, MediaWiki API) 미디어위키를 사용하다보니 생각보다 이용에 불편함이 많다. 그러다보니 이미 그런 불편함을 겪은 사람들이, Extension으로 많은 기능을 구현해 놓았음을 알 수 있었다. 덕분에 Extension을 설정해주는 것만으로 요청을 쳐낼 수 있었는데, 이번에 들어온 요청에 대해서는 결과가 조금 달랐다. 프로젝트에서 요청된 기능은 진행 현황을 확인할 수 있는 일종의 통합문서였는데, 예를 들면 이런 기능이다. - 카테고리 : 산림현황 - 상태 : 1월 서울숲 산림 조성 현황 ~ 12월 서울숲 산림 조성 현황까지 따로 문서가 있음 - 구현해야 할 기능 : '서울숲 산림 현황' 이라는 문서를 통해 1 ~ 12월 문서의 제목과 특정 일부 내용까지 미리보기식으로 조회할 수 있어야 한다. 즉, 표로 1 ~ 12월.. 2022. 8. 9.
[영화 추천 / 넷플릭스] 넷플릭스 볼만한 영화 추천 15선 (feat. 평점 포함) 요즘에는 OTT가 많이 발달해서 넷플릭스, 왓챠, 디즈니 플러스, 쿠팡 플레이, 티빙 등의 OTT를 통해서 영화를 많이 보게 되는데요. 그러다보니 안보고 지나갔던 영화나 새로 나온 영화들도 쉽게 접할 수 있어 좋은 것 같습니다. 물론 명작 영화 다시보기도 좋지만, 꽤 볼만한 영화를 새로 발견하는 것도 그만큼 재밌는 것 같습니다. 그래서 이번에는 제가 넷플릭스에서 보았던 영화들 중 괜찮았던 영화들을 한 번 모아 보았습니다. 명작 영화가 아니기에 순위나 순서를 따로 두지 않았다는 점 참고해주세요~ 그럼 영화 추천 시작하겠습니다!! [ 포스터 / 시놉시스 출처 : 네이버 영화, 다음 영화, 넷플릭스 ] 1. 사랑이 지나간 자리 (네이버 평점 8.91 / 다음 평점 9.2) - 1999 (드라마) Synopsi.. 2022. 8. 2.
[Mediawiki] 미디어 위키 틀(Template)과 양식(Form)의 이해 (feat. 사용 방법) 최근 미디어 위키를 사용할 일이 생겼다. 이를 위해 서버를 세팅하고 미디어 위키와 각종 Extension들을 설치했다. 슬프게도 설치나 설정방법은 레퍼런스가 있었지만, 사용 방법이나 이해를 쉽게 해줄만한 자료는 찾기가 어려워 고생했다. 어쩔 수 없이 맨 땅에 헤딩하듯, 하나하나 사용해보며 이해를 하고 사용 방법을 터득했는데, 이를 통해 얻은 지식을 공유하고자 한다. 일단 이번에 공유할 내용은 Page Forms 익스텐션을 통한 Form 작성 시 참고할 수 있는 내용으로 아래와 같다. [ 목 차 ] 1. 양식(Form), 틀(Template), 문단(Section)에 대한 설명 2. 틀 생성, Cargo 익스텐션(속성 포함), Semetic wiki(시맨틱 위키) 설명 3. Form 사용 방법 1. 양식(.. 2022. 7. 28.
[애니메이션 추천 / 디즈니 / 픽사 / 지브리] 안보면 후회할 명작 애니메이션 영화 추천 TOP 16 (+ 디즈니플러스 단편 추천) 세상에는 많은 재미있는 애니메이션들이 있습니다. 애니메이션하면 이전에는 어린이들을 위한 전유물로만 여겨졌었는데, 요즘에는 오히려 어른들을 위한 애니메이션이 더 많이 나오는 것 같습니다. 그만큼 기술이 발달하기도 했고, 스토리가 풍부해졌기 때문이라고 생각이 드는데 그러다보니 비교적 덜 자극적이고 구수한 맛을 느낄 수 있는 오래된 명작 애니메이션들은 지나치게 되는 것 같습니다. 그리고 그 중에서도 애니메이션 명가인 디즈니, 픽사, 지브리의 작품들은 당시 기술로 어떻게 만든 것인지 도무지 이해가 안되는 대단한 퀄리티를 자랑하는데요. 그래서 오늘은, 호불호 없이 안보면 후회할 디즈니 / 픽사 / 지브리 명작 애니메이션들을 추천드리려고 합니다. 다만, 아직 못 본 작품들도 많고 개인적인 성향이 많이 반영되어 있어.. 2022. 7. 7.
[Infra / Rocky Linux] VM VirtualBox로 Rocky Linux 서버 개발 환경 설정 한방에 끝내기(+ PostgreSQL, 포트 포워딩) 실무에서 서버 환경 설정하는 것이 아직 익숙하지 않아서, 매번 구글링의 도움을 받는다. 하지만 검색결과가 항상 달라지다보니 빠뜨리는 설정들이 생기곤 하는데, 이를 방지하기 위해서 정리하는 글을 쓰게 되었다. 이 글에서는 Oracle VM VirtualBox를 통해서 Rocky Linux 서버를 설치하고, 포트포워딩, PostgreSQL까지 설치하는 방법을 다루고자한다. 이미 환경 설정 자체는 다른 글들이 많기 때문에, 여기서는 순서와 링크 등으로 자세한 사항을 대체한다. [ 환경 설정 방법 ] 1. Rocky Linux 설치 → 아래 블로그 글 따라하기 ( 언어, 시간대 설정만 한국으로 설정할 것 ) [LINUX] VMware에 Rocky Linux 설치하는 방법 How to Install Rocky L.. 2022. 7. 4.
[Three.js / Javascript] OBJ 파일 로드 후 오브젝트 원점 이동 구현(feat. 오브젝트 사이즈 구하기, 부모/자식 요소 분리) Three.js를 프로젝트에 적용하는 이유로는 직접 메쉬를 만들어서 구현하려는 이유도 있겠지만, Blender나 여러 가지 툴을 통해서 생성된 파일을 로드해 3D 모델로 보여주는 이유도 클 것이다. (개인적으로는 후자의 예가 더 많을 것이라 생각한다) 그러나 파일을 로드해보면 파일에 따라 기준점이 제각각이다. 이런 경우에는 카메라의 위치나 모델의 위치 등에 의해 화면에 출력되는 시점도 제각각이 되는데, 여러 가지 기능을 구현하려다보면 이 문제가 항상 걸림돌이 된다. 그렇기 때문에 나는 이를 해결하기 위해, 오브젝트를 로드할 때 원점으로 이동시키는 기능을 구현하고자 했다. 하지만, 구글링을 통해 많은 정보를 찾아보아도 제대로 된 정보를 얻을 수가 없었다. 그렇게 며칠간 고생한 끝에 다행히도 stackove.. 2022. 6. 13.
[Three.js / Javascript] TextGeometry 글자 사이즈 변경(update)하기(feat. dat-gui) Three.js로 프로젝트를 진행하는 도중, 텍스트를 출력해야하는 일이 생겼다. 텍스트 출력 자체는 Three.js 의 example이나 레퍼런스들이 꽤 있어서 구현하기가 어렵지 않았는데, 폰트 크기를 사용자가 조절할 수 있도록 UI 기능으로 제공하려고 하니 관련 기능을 찾기가 쉽지 않았다. 우선 시도해본 것은 TextGeometry의 size 속성값을 찾아 변경해보는 것이었는데, 콘솔로 찍어 발견한 geometry.parameters.parameters.size 속성 값을 변경해보았지만, 값이 변하더라도 크기가 변하는 그런 쉬운 일은 일어나지 않았다. 구글링을 해보고 별 짓을 다 해보았지만, TextGeometry의 size를 update 시켜 줄 기존 기능이나 방안은 없어보였다... 구글링으로 나온 .. 2022. 6. 13.
[Three.js / Javascript] ThreeJS 카메라 키보드 이동 구현하기(직접 구현) Three.js는 WebGL을 이용한다. 예전에 Direct 3D를 배웠기 때문에 OpenGL 사용 경험이 있는데, 그래서 그런지 친숙했다. 하지만 삼각함수, 보간 등 여러 가지 수학적 이론이나 계산이 어려워서 힘들었는데 ThreeJS도 기본 구현된 것에 커스텀으로 무언가 기능을 만들어 쓸려니 쉽지만은 않았다. 결국 프로젝트에 쓰기 위해, 카메라 이동을 처리하는 과정에서 머리가 복잡해지기 시작했다... ThreeJS는 편의상 여러가지 화면 컨트롤을 제공한다. 흔히 사용하는 OrbitControl도 있지만 TrackballControl, FirstPersonControl, FlyControl, PointerLockControl 등이 제공된다. 이 중에서 FlyControl이나 PointerLockContr.. 2022. 6. 8.
[Javascript / Spring Legacy / JSP] Spring Framework에서 자바스크립트 모듈 import 하는 방법 (without NodeJS) 오늘도 어김없이 스프링 프로젝트를 진행하는 도중, Javascript 라이브러리(three.js)를 쓸 일이 생겼다. 최근 Javascript 라이브러리는 NodeJS를 기본사양으로 하기 때문에 import/export로 모듈화하여 사용되는 경우가 많다. three.js도 그런 상황이었는데, 레퍼런스를 보고 따라하다보니 import를 해야했는데 NodeJS가 아니라서 에러가 지속적으로 발생하면서 해결되지 않았다. 그러나 결국 갖은 구글링과 시도 끝에 해결했는데 다른 사람들도 시간을 많이 낭비할 수 있을 것 같아 이렇게 공유하고자 한다. 참고로, three.js는 three.module.js 로 자바스크립트 모듈을 사용하는 방식과 three.js / three.min.js 와 같이 기존 방식을 모두 제공한.. 2022. 5. 18.
[Spring Legacy / Javascript / jsPDF] PDF 다운로드 기능 구현 - 2. 테이블 생성 A to Z (feat. jsPDF-autotable) 이 글에서는 jsPDF, jsPDF-AutoTable 라이브러리를 통해 PDF에서 테이블 생성하려고 할 때, 힘들었던 부분에 대한 모든 것을 다루고자 한다. 단순한 PDF 생성, jsPDF 사용법을 알고 싶거나, 아직 jsPDF에 대해 잘 모른다면 아래 링크 글을 참조해주시면 좋겠다. ▼ PDF 다운로드 기능 구현 - 1. 텍스트, Footer 생성 (feat. jsPDF, jsPDF-autotable, error) 에 대해 다룬 글 [Spring Legacy / Javascript / Library] PDF 다운로드 기능 구현 - 1. 텍스트, Footer 생성 (feat. jsPDF, jsPDF-autotabl 프로젝트를 진행하면서 PDF 다운로드 기능을 구현하게 되었다. 처음에는 간단하게 jsPDF.. 2022. 4. 29.
[Spring Legacy / Javascript / jsPDF] PDF 다운로드 기능 구현 - 1. 텍스트, Footer 생성 (feat. jsPDF-autotable, error) 프로젝트를 진행하면서 PDF 다운로드(PDF 작성) 기능을 구현하게 되었다. 처음에는 간단하게 jsPDF와 html2canvas 라이브러리의 조합으로 해결해보려고 했지만, 역시 간단하기만 한 것은 의도대로 사용하기가 참 힘들다. 그래서, PDF 관련 라이브러리에 대해 조사하면서 알게 된 내용을 먼저 간략히 공유하고자 한다. 더 많은 라이브러리가 있겠지만, 내가 접했던 라이브러리 목록은 다음과 같다. 1. jsPDF : PDF 파일을 생성해주는 javascript 라이브러리 2. html2canvas : 현재 브라우저 화면을 캡쳐하여(canvas에 그려) 이미지로 만들어주는 javascript 라이브러리 3. PDFMake : PDF 파일을 생성해주는 javascript 라이브러리 4. iText : PD.. 2022. 4. 29.
[Spring Legacy / Java / Javascript] AJAX로 전달한 JSONArray를 Controller(서버단)에서 파싱하기 A to Z (feat. Generic Type, JSONObject 파싱) 프로젝트에서 Javascript에서 JSON 형식으로 구성된 객체를 Array로 만들어 Controller에서 받아 처리하는 기능을 구현하게 되었다. 예를 들면, [ {num : 1, score : 90}, {num : 2, score : 80}, {num : 3, score : 70} ] 과 같은 형태의 데이터이다. AJAX로 data를 넘길 때 해당 배열 데이터를 넘기고, Controller에서 파라미터에 JSONArray 타입으로 받도록 하면 되지 않을까 싶지만, 아쉽게도 Spring이 거기까지 처리해주진 못한다. 그래서 오늘은 JSONArray 형식의 데이터를 서버단에서 받을 수 있게 처리하는 방법을 공유하고자 한다. 추가적으로, 제너릭 타입(Generic Type)을 이용해 JSONArray에서.. 2022. 4. 21.
[Android Studio / App] 안드로이드 스튜디오 http 통신 허용 하기(feat. iOS http 허용 / android http 허용) 최근 개인 프로젝트를 진행하기 위해 안드로이드 스튜디오를 학습하고 있습니다. 학습 도중 다른 분들도 필요할 수 있는 내용이 있어 공유드리고자 합니다. 이제는 보안상의 이유로 https를 쓰는 것이 당연시 되고있지만, 이전에는 http로 통신하였습니다. 그러다보니 프로젝트 진행 도중 아직 http로 통신해야하는 경우가 간혹 발생하곤 합니다. 그러나 이제는 브라우저 뿐 아니라 각종 디바이스에서도 http 통신을 기본적으로 막고 있기 때문에 해결방법을 찾다가 애를 먹기 일쑤입니다. 이를 방지하기 위해 안드로이드 스튜디오에서 개발 시, iOS와 android에 각각 설정을 추가해 http 통신을 허용하는 방법을 알아보도록 하겠습니다. [ 개발 환경 ] - OS : WINDOWS 10 - FLUTTER : 2.1.. 2022. 4. 18.
[보안 취약점 / 브라우저] 긴급! 크롬, 엣지, 웨일 등 브라우저 보안 취약 이슈 발생 및 대처 방안 공유(CVE-2022-1096) 긴급한 보안 이슈가 발생하였기에 개발자를 포함한 모든 사용자분들에게 내용을 공유해드리려고 합니다. 최근 크로미움의 V8 엔진에 보안 취약점(CVE-2022-1096)이 발생하였습니다. 이 보안 취약점은 제로데이(해당 취약점에 대한 패치가 나오지 않은 시점에서 이루어지는 공격) 취약점입니다. 제로데이 취약점은 앞에서 괄호 내용으로 적혀있듯 패치 전에 공격이 이루어 지는 것으로 결국, 해커들에게 이미 이용되고 있는 취약점이니 발견 즉시 긴급하게 대응해야합니다. 크로미움에 문제가 생겼으므로 크로미움 기반의 브라우저는 모두 보안 취약점이 발생한 것과 동일합니다. 크로미움 기반 브라우저 목록은 다음과 같습니다. - 구글 크롬 - 브레이브 - 코드위버스 크로스오버 크로미엄 - 코모도 드래곤 - Cốc Cốc - D.. 2022. 4. 11.
[Javascript / JSP] 팝업창 load시 외부 script 소스 파일 참조 안 될 때 해결하기(feat. datepicker) 프로젝트를 진행하다보면 datepicker를 사용하게 되는 경우가 많다. 그런데 기본 페이지를 사용할 때는 문제없던 datepicker가, 팝업창에서 사용하려고 하면 먹통이 되는 경우가 곧잘 발생하곤 한다. 여러가지 문제가 있겠지만, 협업을 진행하는 프로젝트 사양을 다 정확하게 파악하고 해결하기란 쉽지 않다. 그래서, 오늘은 팝업창 내에 외부 script 파일이 참조 되지 않거나 불러올 수 없어 해결이 되지 않을 때, 쉽게 해결할 수 있는 방법을 공유하고자 한다. 예시는 datepicker 이지만 모든 외부 스크립트 참조에 해당하는 사항이니 유사한 문제면 다 해결할 수 있을 것이다. [ 해결 방법 ] 일단 기본 상황은 다음과 같다. 위처럼 기본 페이지 JSP에 각종 스크립트와 css가 참조되어 있는 상태.. 2022. 4. 8.
[Javascript] Drag&Drop(파일 끌어다 놓기) 방식으로 파일 업로드 구현하기 프로젝트를 진행하면서 파일 업로드 시 드래그앤드롭으로 처리하는 기능을 구현해야했다. 다행히, 최근에 많이 사용되는 방식이기에 구글링을 통해 쉽게 코드를 발견할 수 있었다. 구현을 위해 참고한 블로그는 바로 고라니 님의 블로그 글이었다. 필자의 글은 실무 내용에 가깝기에, 상세한 내용을 알고 싶다면, 해당 글을 참고하면 좋을 것 같다. https://dev-gorany.tistory.com/254 글이 워낙 상세하게 설명되어있어, 쉽게 구현할 수 있었지만 내가 구현해야하는 프로젝트의 기능과는 차이점이 있었다. 글에서는 Drag&Drop을 하면 바로 업로드가 되는데, 나는 파일 선택까지만 진행이 되어야 했다. 파일 내용은 글을 저장할 때만 전달되어야했기에 file 내용만 바꾸는 식으로 코드를 변경해야했다. .. 2022. 4. 8.
[Spring / Legacy / Error] taglib의 http://www.springframework.org/tags 와 dispatcherservlet의 bean이 읽히지 않는 현상 Spring Legacy 프로젝트(특히, 전자정부프레임워크)를 진행하면 뜻하지 않는 많은 오류를 맞이하게 된다. 오늘은 서버 이전으로 인해 기존 프로젝트를 svn으로 내려받는 도중 bean과 uri들이 읽히지 않는 현상이 발생하여 그 해결 방법을 공유하고자 한다. 에러 발생 환경은 다음과 같다. - 사용 환경 - ◆ eGovFramework : 3.9 ◆ JDK/JRE : 1.8 ◆ 형상 관리 도구 : svn ◆ IDE : Eclipse 일단, 필자가 작업한 환경은 eGovFramework의 3.10 버전이었다. 즉, 3.10 버전에서 작업한 프로젝트를 3.9 버전으로 옮겨야하는 상황이었는데, 기존 서버에서는 버전 차이에도 불구하고 문제없이 잘 돌아갔기에 원인을 짐작하면서도 쉽게 찾지 못했다. 서버 이전.. 2022. 4. 5.
반응형