타임리프(Thymeleaf) 본격적으로 사용하기 ( +@ 타임리프 벤치마크 성능 비교)
·
Develop/Back-End
타임리프 구문을 잘 모르겠다면 이전에 간단하게 정리해놓은 글이 있으니 먼저 보기 바란다.🤬 (타임리프와 jsp를 고민하고 있는 AA나 PL이 있다면 아래 타임리프 벤치마크 성능 링크도 남겨놓았으니 참고하면 좋을 듯) 아마 JSP에 익숙한 사람은 금방 손에 익을 것 같다. 개인적인 생각으로 자바스크립트로 동적으로 데이터 렌더링 하는 코드를 줄일 수 있으나 예외처리에는 조금 불편함이 있는 것 같다. 이번에 내가 맡게 된 업무는 동영상을 업로드 하여 광고 소재로 내보낼 수 있게 되었으니 해당하는 동영상을 자체적으로 만들거나 또는 수정할 수 있게 이미지를 이용하여 동영상을 만들거나 수정할 수 있는 웹 스튜디오를 만드는 것이였다.🤔 진행상황 서버에서 받은 데이터 조회 및 가공(포맷) 처리 기존 자바스크립트로 데이..
JAVA 에서 FFMPEG를 통한 영상 정보 읽기 및 영상 인코딩(압축) 처리 도전기
·
Develop/Back-End
이번에 내가 맡게 된 업무는 배너 이미지(소재) 만 등록 되던 기능에 운영중인 서비스 환경에 동영상 업로드 및 압축 기능을 추가하는거였다. 개발을 잘 모르는 사람들은 "아니 이미 파일 업로드 기능이 있는데? 그냥 기존에 업로드 하던 부분 조금만 손보면 되는거 아니야?" 이렇게 말을 할 수도 있지만 개발은 운영중인 서비스에 어떤 기능을 도입하는게 해당 기능을 새로 만드는 것보다 어렵다.. 🤨 그러니 운영 중인 서비스에 어느 기능을 넣을 땐 최대한 많이 검토하는 습관을 길러야한다!! 제일 힘들었던건 ffmpeg가 국내에 정보가 많이 없는 것 같다. 🤬 그래서 따라하기 좋은 예제를 github 이슈에 모아놓았다.. github 링크는 아래 레퍼런스에 남김 :) FFmpeg FFmpeg는 오디오와 비디오를 다루..
크롤링(Crawling) vs 스크래핑(Scraping) - 도대체 차이점이 뭔데?
·
변소
회사에서 누구는 크롤링이라 부르고...😩 나는 스크래핑이라하고... 😵 흔히 스크래핑과 크롤링에 대해 혼동하는 이유는 아마도 업무적 유사성으로 모두 웹 데이터를 수집하는 과정으로, 비슷한 결과물을 얻는 부분과 기술적 유사성으로 크롤링을 수행하는 과정 중에 스크래핑이 발생하며, 스크래핑을 수행하려면 먼저 크롤링을 해야 할 때가 많기에 이런 기술적 유사성으로 인해 두 용어의 경계가 모호해진 것 같다 그러나 크롤링과 스크래핑은 다르다 🤔 어떻게 다른지 크롤링과 스크래핑에 대해 살펴보자🤗 크롤링 웹 크롤러 스크래핑에 대한 정의는 다음과 같다 크롤링(Crawling) 크롤링은 웹 상의 다양한 웹 페이지를 자동으로 탐색하고, 이러한 웹 페이지들의 링크를 따라가며 데이터를 수집하는 프로세스를 말합니다. 크롤러 또는 ..
타임리프(Thymeleaf) 사용 방법 및 문법 정리
·
Develop/Back-End
들어가기 전 🔥 지금 있는 회사는 view 템플릿 엔진으로 thymeleaf 를 사용하고 있기에 간단하게 정리하여 글을 남긴다. "아니 나는 백엔드 개발자인데 ?" "이거 몰라도 되는 거 아니야?" 🤦‍♂️ 그런 안일한 생각은 하지 말자 물론 회사가 어느 정도 규모냐에 따라 체계적으로 맡은 언어가 명확하게 구분 지어 질 수도 있지만 열에 일곱은아닐 것이다 🥺 이건 내 개인적인 생각이지만 리액트(react.js)나 뷰(vue.js)도 프론트 개발자 또는 퍼블리셔와 원활한 커뮤니케이션을 위해 사이드 프로젝트로 해보는 것을 권장한다. (전에 스타트업에 잠깐 있었을 때 많은 도움이 되었다 특히 퍼블리셔와 소통하는 부분에서 🤪 나는 백엔드 개발자지만 당시 스타트업에 프론트 개발자가 채용 되지 않아 내가 리액트 즉..
[Java] 스트림(Stream) API 사용 방법 / 외부반복 내부반복 차이점
·
Develop/Back-End
Java 개발자라면 한번쯤 Stream API 에 대해서 들어보게 될 텐데 회사 *코드 컨벤션에 따라 익숙한 개발자들도 있을 것이고 사용을 아예 안하는 개발자도 많을 것 같은데🤪 나도 자바에선 자주 사용하지 않아 손에 익진 않았는데 사용하면서 퍼포먼스 측면에서도 나아지고 코드도 훨씬 간결해진듯... 😛 * 코드 컨벤션 (Code Convention) : 읽고 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약(하나의 작성 표준) 스트림이 무엇인지 간단하게 특징과 사용 방법을 블로그에 정리해보려고 해 😏 스트림 API는 자바 8부터 추가된 기능이야. 이걸 쓰면 컬렉션 처리가 훨씬 쉬워지고 성능도 높아져. 반복문을 직접 안 써도 되니까 코드도 간결해지고 가독성도 좋아져. 스트림은 데이터 처리를 파이..
dropzone.js 를 이용하여 동영상 업로드 미리보기 및 썸네일 기능 구현기
·
Develop/Front-End
이번에 내가 맡게 된 업무는 dropzone.js 를 이용하여 동영상 업로드와 미리보기 및 썸네일 기능을 만드는 것이였다. 요즘들어 부쩍 스크립트 만질 일이 많아졌는데 BE 코드를 다루지 못하고 있어서 아쉬움이 많다... 😭 업무 진행 당시 dropzone.js version : 5.5.0 진행상황 동영상 업로드 , 동영상 특정 구간 썸네일 추출 , 미리보기 기능 구현 완료! 😎 이슈 & 고민 및 해결 배너배리에이션 기능을 만들었던 이미지 등록하는 화면에서 당시에는 발견하지 못했던 버그들도 발견하면서 수정하고 dropzone.js 오픈 소스 라이브러리 코어 스크립트를 조금 수정하였다. 😂 이 업무를 진행하면서 이슈나 고민 거리는 없었던 것 같다 🤗 [지난 배너 배레이이션 작업 이후 체크 못한 결함 사항 ..
난독화 된 자바 스크립트 분석하기
·
Develop/Front-End
이번에 내가 맡게 된 업무는 난독화 된 스크립트를 분석하여 특정 행위를 하는 지 확인해보는 업무다. 🤔 다른 사람이 작성 한 코드를 보고 이해하는 건 역시 어려운 일이지만 이해를 하고 다음에 내가 적용할 일이 있으면 그것만큼 값진 경험도 없다고 생각한다.😂 이 일을 맡게 된 건 경쟁사 스크립트가 어뷰징 행위를 한다고 판단 하여 분석하게 되었다. 역시나 그 행위를 하고 있는게 맞았다...😛 진행상황 스크립트가 특정 행위를 한다고 예상. 1.기능 예상 시나리오 2.스크립트 분석 (변수 및 함수 , 전역 변수 용도파악) 2-1. 특정 조건 파악 2-2. 데이터 통신 간 요청 데이터 확인 , 응답 데이터 확인 3.디버깅 이슈 & 고민 및 해결 해당 코드를 분석하면서 어려움을 겪던건 난독화 된 코드이기도 했지만 ..
배너배리에이션 기능 - 자바스크립트 캔버스 API 도전기
·
Develop/Front-End
이번에 내가 맡게 된 업무는 배너 배리에이션 기능을 만드는 것이였다. 서비스에 없는 기능을 도입하는 것은 언제나 두렵고 설렌다. 그동안 내가 개발했던 프로그램들 비중은 주로 BackEnd 영역이다.. 그렇기에 개발하면서 많이 버벅거리고 답답했었지만 공식문서를 읽으면서 재미 있었던 것 같다. 이 기능을 개발하게 되는 사람들을 위해 도움이 되었으면 좋겠다 😊 * 배너 배리에이션 : 웹 페이지 또는 앱에서 사용되는 배너(Banner)나 광고 영역을 다양한 스타일로 변화시키는 기능을 말합니다. 이는 사용자에게 보다 다양하고 흥미로운 시각적 요소를 제공하여 웹 경험을 향상시키는 데에 사용됩니다. 진행상황 현재까지 기본적인 배너배리에이션 기능 틀을 갖추었고 특정 이미지 규격 파일을 업로드 하면 해당 이미지를 이용하..