이클립스에서 코드를 누가 수정했는지 확인하려면 어떻게 해야할까?

✨시작하며 이클립스에서 코드를 누가 수정했는지 확인하려면 어떻게 해야할까? 그 방법에 대해 알아보자! History 먼저 History View가 있다. History를 통해 변경사항을 추적하는 화면은 아래처럼 보인다. 하지만 이렇게 하면 현재 수정중인 코드의 특정 라인을 누가 수정했는지 추적하기 힘들어진다. 그럴 때는 이클립스의 Git Blame같은 기능을 사용하면 된다! Show Revision Information(Git Blame) 추적을 원하는 파일을 실행한 후, 단축키 CTRL + F10을 누른다. 나타나는 창에서 Show Revision Information을 누른다. 이후 OK를 눌러주면 아래처럼 좌측 코드라인에 색이 추가된다. 라인에 커서를 가져가면 해당 라인에 대한 변경사항이 나타난다...

• format_list_bulleted IT/Git
• · 2023. 11. 15.
• textsms

JSP에서 템플릿 리터럴에 백틱을 사용하면 에러가 나는 이유

✨시작하며JSP에서 템플릿 리터럴에 백틱을 사용하면 데이터가 제외되고 출력된다.어떻게 하면 템플릿 리터럴을 출력하도록 할 수 있을까?   🧩코드 조각바로 ${count} 앞에 역슬래시()를 입력하면 된다!아래의 코드처럼 리터럴 앞에 역슬래시를 붙이게 된다면, 템플릿 리터럴 값이 정상적으로 출력되는 것을 확인할 수 있다.간단한 예를 들어보자.HTML과 같은 경우에서는 현재 ${count}번 입니다.라고 입력해도 count값이 잘 출력되겠지만, JSP에서는 현재 번 입니다.처럼 출력된다.JSP에서는 현재 \${count}번 입니다.처럼 입력해야 현재 ${count}번 입니다.처럼 출력된다.// 클릭하면 항목 추가var count = 1;function fn_dataAdd(e) { count++; ..

• format_list_bulleted Troubleshooting
• · 2023. 11. 14.
• textsms

개인 도메인 구매 후 Netlify에 연동하기

Netlify로 생성된 사이트에 대해 도메인을 커스텀화하는 방법을 소개한다. 기본 제공되는 사이트명.netlify.app을 나만의 주소로 변경하기 위해 호스팅케이알에서 도메인을 구입하고 이를 Netlify와 연동하는 과정을 설명한다. 도메인 구입 시 가격, 이벤트 도메인의 환불 불가능성 등을 주의하며, Netlify의 DNS 설정을 통해 도메인을 연동하는 방법을 상세히 서술한다. ✨시작하며 Netlify로 사이트를 생성 시 기본적으로 제공되는 도메인은 사이트명.netlify.app이다. 무료 도메인이라고 생각하면 나쁘지는 않지만, 나는 이를 커스텀 도메인으로 변경해 나만의 주소를 가진 사이트를 만들고 싶었다. 따라서 호스팅케이알(메가존)에서 도메인을 구입한 후 이를 연동하기로 했다! 도메인 구입하기 이미..

• format_list_bulleted Programming/Network
• · 2023. 11. 13.
• textsms

Mybatis에서 ${}과 #{}의 차이

Mybatis에서 동적 SQL 작성에 필수적인 ${}와 #{}의 차이점과 사용 방법을 설명한다. ${}는 문자열 치환으로 SQL Injection 위험이 있어 안전하지 않다. 반면, #{}는 PreparedStatement를 이용한 값 바인딩으로 SQL Injection을 방지하며, 안전하고 디버깅이 쉽다. 일반적으로 보안을 위해 #{} 사용이 바람직하다. ✨시작하며 Mybatis는 데이터베이스와의 상호 작용을 돕기 위해 동적 SQL 작성에 유용한 기능을 제공해 준다. 여기서 주로 사용되는 $과 #의 차이점에 대해 알아두고, 상황에 따라 적절한 방법으로 사용하는 것이 좋겠다고 생각되어 정리하게 되었다. ${}와 그 사용 예시 ${}은 파라미터가 문자열로 치환되기 때문에 SQL Injection이 발생할 ..

• format_list_bulleted IT/Java
• · 2023. 11. 12.
• textsms

jQuery로 선택한 테이블 행 강조하기

사용자가 선택한 항목을 시각적으로 강조하는 코드에 대해 설명한다. 'selected' 클래스를 추가, 제거하여 특정 행을 강조하는 방법을 소개하며, 이를 통해 사용자 경험을 향상시킬 수 있다. 코드의 장점과 개선할 부분을 고려하여, 더욱 효과적인 결과를 도출하는 데 도움이 될 것이다. ✨시작하며 선택된 행을 강조하는 코드가 필요해졌다. 사용 시 사용자가 선택한 항목을 시각적으로 구분함으로써 사용자 경험을 향상할 수 있을 것이다. 🧩코드 조각 selected 클래스가 있는 모든 요소에 배경색을 적용한다. $(document).on("click", "#species-table tbody td", function(){ $("#species-table tbody tr").removeClass('selected'..

• format_list_bulleted Programming/HTML, CSS, JS
• · 2023. 11. 11.
• textsms

인터넷 익스플로러 사용자를 엣지 브라우저로 이동시켜야 하는 이유

인터넷 익스플로러 사용자를 엣지 환경으로 안내하는 방법을 설명한다. 인터넷 익스플로러의 지원 종료에 따라, 웹사이트 호환성과 사용자 경험 향상을 위해 사용자를 엣지로 이동시키는 자바스크립트 코드를 제시하며, 해당 코드의 작동 원리를 분석한다. 이를 통해 익스플로러로 발생하는 문제를 방지하고 웹사이트의 품질을 높일 수 있다. ✨시작하며 인터넷 익스플로러의 지원이 종료되었음에도 현재까지 많은 사용자가 익스플로러를 사용하고 있다. 왜 사용자들을 엣지 환경으로 안내해야 할까? 바로 이 작업을 통해 웹사이트 호환성과 사용자 경험을 향상하고, 익스플로러로 인해 발생하는 여러 문제를 방지할 수 있다. 상황에 맞게 적절하게 사용하자. 어떻게 이동시켜야 할까? if(/MSIE \d|Trident.*rv:/.test(na..

• format_list_bulleted Programming/HTML, CSS, JS
• · 2023. 11. 10.
• textsms

이미지 경로에 유튜브 썸네일 주소 사용하기

사용자가 직접 유튜브 주소 ID를 입력받아 썸네일을 가져오는 방법과 유튜브 주소 ID값과 썸네일 주소를 어떻게 가져오는지 상세히 안내한다. 또한, 유튜브 썸네일 주소 파일명에 따른 다양한 썸네일 크기와 화질을 확인할 수 있게 안내한다. ✨시작하며 게시판 작업 중, 유튜브와 관련된 기능이 추가로 필요해졌다. 원래는 게시글 내용에 첫 번째로 첨부된 유튜브 값을 바탕으로 썸네일을 가져오려고 했으나, 사용자가 직접 본문에 유튜브 영상을 임베드하지 않아도 되는 것과 로직을 간결하게 만들기 위해 사용자로부터 유튜브 주소 ID값을 직접 입력받기로 했다. 기본 로직 게시글 작성 폼에서 유튜브 썸네일 사용여부를 라디오 버튼을 통해 선택한다. default로 미사용이 선택되어 있으며, 미사용이 사용된 경우 ID값을 입력하..

• format_list_bulleted Programming/HTML, CSS, JS
• · 2023. 11. 9.
• textsms

onKeyup이벤트로 정규표현식을 이용해 숫자만 입력받기

input에 오직 숫자만 입력받으려고 한다. 따라서 0~9가 아닌 문자열은 모두 제거하면 된다. 여기서 onKeyup은 키보드의 키를 눌렀다가 뗐을 때 발생하는 이벤트다. onKeyup="this.value=this.value.replace(/[^0-9]/g,'');" HTML 삽입 미리보기할 수 없는 소스 this.value는 현재 input 필드의 값을 말한다. 현재 input 필드에 '문자 테스트123'이라는 값이 있다고 가정하면 this.value는 '문자 테스트123'이 된다. 다음에 '문자 테스트123'이라는 값을 replace 한다. /[^0-9]/g는 정규 표현식으로, 숫자가 아닌 모든 문자를 의미한다. ^는 not을, 0-9는 숫자를, g는 global을 의미해 문자열 내에서 대상을 모두..

• format_list_bulleted Snippets
• · 2023. 11. 8.
• textsms

Postman에서 변수를 사용해 효율적인 POST 요청 보내는 방법

Postman을 이용해 API 테스트와 POST 요청 전송을 진행하는 과정에서, 사용자에 따라 변경되는 정보를 변수로 받아 처리하는 방법을 찾아냈다. 처음에는 Params의 Key와 Value를 이용했으나, 원하는 결과를 얻지 못해 Postman의 Pre-request Script를 활용하게 되었다. 이를 통해 변수를 효율적으로 사용하며 작업을 수행하게 되었다. ✨시작하며 API 테스트 및 POST 요청 전송을 위해 Postman을 다시 사용하게 되었다. 내가 전송할 데이터는 카카오 알림톡 데이터라 우선 Body > raw를 설정해 주고 raw 값을 입력해 주었다. 문제는 알림톡을 테스트 및 전송 시마다 사용자에 따라 전화번호나 이름 등의 정보가 변경될 텐데 이 정보를 하나하나 손수 커서를 맞춰 값을 수..

• format_list_bulleted Programming/API
• · 2023. 11. 7.
• textsms

session으로 URL 직접 접근 제어하기

비회원이 작성한 비밀글에 대한 URL 직접 접근이 가능한 문제를 발견하였고, 이를 해결하기 위해 세션에서 검증이 완료되었는지 확인하는 단계를 추가하였다. 특히, 비밀번호 인증 성공 시 세션에 인증 정보를 저장, 이후 접근 시 인증 여부를 검증하는 로직을 구현하였다. 또한, 세션 유지 시간을 설정하는 방법에 대해서도 설명하였다. ✨시작하며 전자정부 프레임워크에서 프로젝트 수행 중 비회원이 작성한 비밀글에 대해 URL 직접접근이 가능한 것을 확인했다. list로 불러올 경우 비밀글에 접근하려면 암호를 입력해야 하지만, view로 직접 URL을 입력해 접근하면 암호 입력 과정 없이 글에 접근할 수 있게 된다. 이렇게 되면 URL을 유추하거나 URL을 입력해 타인의 게시글에 접근이 가능해진다. 따라서 list에..

• format_list_bulleted Troubleshooting
• · 2023. 11. 6.
• textsms

HCL AppScan Source로 웹 취약점 진단하기

CKEditor 4 사용 중 발견한 보안 취약점과 이를 해결하기 위한 과정을 설명하는 글이다. WYSIWYG 에디터인 CKEditor에서 소스 편집 기능을 활용할 때 보안 규칙이 적용되지 않는 문제를 발견하고, 이를 해결하기 위해 여러 방법을 시도해 보았다. HCL AppScan Source를 활용해 보안 취약점을 찾아내는 과정, Eclipse IDE에 플러그인을 설치하는 방법, 그리고 진단 결과까지 자세히 기술하였다. 이 글을 통해 보안 취약점 테스트와 이를 해결하는 방법에 대한 이해를 돕고자 한다. ✨시작하며 현재 내가 진행 중인 프로젝트에서는 WYSIWYG 에디터로 CKEditor 4를 사용하고 있다. CKEditor에서는 소스 편집 기능을 제공한다. 일반적으로 사용자가 에디터에 글을 작성 시 보안..

• format_list_bulleted Programming/Security
• · 2023. 11. 5.
• textsms

드래그 앤 드롭 데이터를 Input에 넘기는 방법

Drag and Drop Event로 첨부파일을 업로드하는 과정에서 발생한 문제와 해결 과정을 담은 글이다. 파일을 Drag and Drop하여 업로드하는 기능이 적용되지 않는 문제를 발견하고, 이를 해결하기 위해 코드를 분석하며 여러 시도를 했다. 이 과정에서 뤼튼의 도움을 받아 문제를 해결했는데, jQuery 이벤트 객체를 사용하면 e.dataTransfer가 정의되지 않는 문제를 발견했다. 이를 바탕으로 코드를 수정하니 문제가 해결되었다. ✨시작하며 전자정부 프레임워크에서 프로젝트 수행 중 첨부파일 부분은 Drag and Drop Event가 정상적으로 적용되었는데, 파일첨부와 썸네일이 들어가는 게시판 스킨들에서 썸네일을 Drag and Drop Event로 등록 시 정상적으로 첨부파일이 업로드가 ..

• format_list_bulleted Troubleshooting
• · 2023. 11. 4.
• textsms

HTTP와 HTTPS는 대체 뭐가 다를까?

기본적으로 HTTP는 텍스트로 데이터를 주고받는 통신 규약으로, 보안성이 약하다. 반면, HTTPS는 SSL 프로토콜을 이용해 암호화된 데이터를 주고받아 보안성이 강화되어 있다. 이 글에서는 클라이언트-서버 모델, HTTP 메서드, SSL과 TLS 등에 대해 설명하며, HTTP와 HTTPS의 차이점을 명확히 이해할 수 있게 도와준다. ✨시작하며 URL을 확인하면 http 이후 s가 붙어있을 때도, 붙어있지 않을 때도 있다. HTTP와 HTTPS는 대체 무슨 차이가 있을까? 클라이언트-서버 모델 클라이언트-서버 모델은 웹 통신에서 클라이언트(일반적으로 웹 브라우저)가 서버에 요청을 보내고, 서버는 요청을 처리한 후 클라이언트에 응답하는 방식으로 작동한다. 예를 들어, 클라이언트가 웹 페이지를 불러오는 것이..

• format_list_bulleted IT/Network
• · 2023. 11. 3.
• textsms

Invalid escape sequence (valid ones are \b \t \n \f \r \" \' \\ ) 에러 해결방법

이스케이프 시퀀스란 백슬래시() 뒤에 한 문자나 숫자 조합이 오는 문자 조합을 말한다. 이 에러를 해결하기 위해선 Java 문자열에서 백슬래시()를 표현하기 위해선 이스케이프 문자로서의 백슬래시(\)를 사용해야 한다. 원인 File file = new File("\git\endangered\WebContent\images\20231102015937083_1207_0.jpg"); 첨부파일 업로드 중 파일 타입 테스트를 위한 코드를 추가했다. new File의 파일 경로 부분에서 유효하지 않은 이스케이프 시퀀스라는 에러가 발생했다. escape sequence(이스케이프 시퀀스) 백슬래시(\) 뒤에 한 문자나 숫자 조합이 오는 문자 조합을 말한다. 아래는 오라클에서 제공하는 이스케이프 시퀀스에 관한 문서 중..

• format_list_bulleted Troubleshooting
• · 2023. 11. 2.
• textsms

Parameter와 Argument를 구분하는 방법

parameter는 함수 정의 시 사용되는 변수로, 함수와 메서드의 입력 변수명을 의미한다. 반면, argument는 함수 호출 시 넘기는 변숫값을 의미한다. 또한, 인수와 인자는 같은 말이지만, 매개변수와 인자(인수)는 다른 말이라는 것을 잊지 말아야 한다. ✨시작하며 개발을 공부하며 헷갈려했던 parameter와 argument의 차이에 대하여 정리해 보았다. Prameter(매개변수) 함수와 메서드 입력 변수명(Variable)으로, 함수 정의 시 사용되는 변수를 말한다. function plus (num1, num2) { return num1 + num2; } 여기서 num1과 num2는 parameter이다. Argument(인자) 함수와 메서드의 입력 값(Value)으로, 함수 호출 시 넘기는..

• format_list_bulleted IT/Java
• · 2023. 11. 2.
• textsms