코딩ㆍ개발 정보/HTML 연습 2024. 8. 29.
[쿠키 및 CSS 보안 설정] 외부 침입자를 막기 위한 방법
1. CSS를 이용한 보안 문제CSS 인젝션CSS 인젝션 공격은 공격자가 악성 CSS 코드를 삽입하여 웹 애플리케이션의 디자인을 조작하거나 사용자 데이터를 노출할 수 있는 공격입니다.예방 방법:사용자 입력 검증: 사용자 입력이 CSS 코드로 해석되지 않도록 항상 검증하고 필터링합니다.CSS 파일의 정적 로딩: 가능한 한 사용자로부터 직접 CSS를 받아서 처리하지 않도록 하세요. 정적 CSS 파일을 사용하는 것이 좋습니다.콘텐츠 보안 정책 (CSP): CSP를 설정하여 외부 CSS를 포함시키지 않도록 제한할 수 있습니다. 2. 쿠키 관련 보안 문제쿠키 변조사용자가 쿠키 값을 조작하여 애플리케이션의 보안에 영향을 줄 수 있습니다.예방 방법:쿠키 암호화: 쿠키 값을 암호화하여 클라이언트 측에서 변조되더라도 의..
코딩ㆍ개발 정보/HTML 연습 2024. 8. 29.
[JavaScript] 전화번호 - 표시 하고, 저장은 숫자로만
전화번호를 사용자가 입력할 때, 입력 형식을 자동으로 지정된 형식(예: 010-3333-1234)으로 변환하고, 데이터베이스에는 숫자만 저장되도록 하는 기능을 구현하려면 다음과 같은 단계로 진행할 수 있습니다.1. 자바스크립트로 입력 형식 처리사용자가 입력할 때마다 자바스크립트를 사용해 입력된 값을 실시간으로 포맷팅합니다. 이 작업은 oninput 이벤트를 사용하여 입력값을 감지하고, 숫자만 추출한 후 적절한 형식으로 변환한 다음, 다시 입력 필드에 설정하는 방식으로 구현할 수 있습니다. 전화번호: 2. 서버 측에서 데이터 저장 처리 (ASP)이제 숫자로만 이루어진 전화번호를 데이터베이스에 저장합니다. 요약자바스크립트를 사용해 사용자가 입력한 전화번..
코딩ㆍ개발 정보/HTML 연습 2024. 8. 28.
[ASP, MSSQL] dbconnection.asp 사용하기
dbconnection.asp 파일 생성 0 Then Response.Write "데이터베이스 연결 오류: " & Err.Description Response.EndEnd IfFunction GetConnection() Set GetConnection = connEnd FunctionSub CloseConnection() If conn.State = adStateOpen Then conn.Close End If Set conn = NothingEnd Sub%> sample.asp 파일 사용Dim rs, sql' 페이지 인코딩을 UTF-8로 설정합니다.Response.ContentType = "text/html"Response.Charset = "UTF-8"' ..
코딩ㆍ개발 정보/HTML 연습 2024. 8. 27.
[ASP, AJAX] 메뉴 검색 기능
1. 데이터베이스에서 메뉴 정보 저장메뉴 정보를 MSSQL 데이터베이스에 저장합니다. 메뉴의 이름, 링크(URL), 상위 메뉴 ID (계층 구조를 지원하는 경우), 기타 필요한 정보들을 테이블에 저장할 수 있습니다.예를 들어, 메뉴 정보를 저장할 테이블 구조는 다음과 같을 수 있습니다.CREATE TABLE Menus ( MenuID INT PRIMARY KEY, ParentID INT NULL, -- 상위 메뉴의 ID, NULL일 경우 최상위 메뉴 MenuName NVARCHAR(255), MenuLink NVARCHAR(255), SortOrder INT -- 메뉴 정렬 순서); 2. 검색 기능 구현클래식 ASP에서 사용자가 입력한 검색어를 바탕으로 데이터베이스에서 메뉴를 ..
코딩ㆍ개발 정보/HTML 연습 2024. 8. 21.
[도커] 시놀로지 SSH로 Docker 사용하는 명령어들
놀로지 NAS에서 SSH를 통해 Docker를 제어하려면, Docker 명령어를 사용하여 컨테이너를 관리할 수 있습니다. 여기서는 각 명령어를 순서대로 설명하겠습니다. 1. 도커 명령어로 컨테이너 실행하는 방법Docker 컨테이너를 실행하려면 docker run 명령어를 사용합니다.[형식]docker run -d --name [컨테이너_이름] [이미지_이름][예시]docker run -d --name my_container nginx 2. 도커 명령어로 컨테이너 내부 터미널 열기컨테이너 내부에서 터미널을 열고 작업하려면 docker exec 명령어를 사용합니다.[형식]docker exec -it [컨테이너_이름] /bin/bash[예시]docker exec -it my_container /bin/bash..
코딩ㆍ개발 정보/HTML 연습 2024. 8. 21.
[톰캣] tomcat에서 context 추가하는 방법 3가지
1. 서버(server.xml)에서 추가하는 방법 자세한 내용: 2024.08.20 - [코딩ㆍ개발 정보/HTML 연습] - [톰캣] server.xml , Context 설정2. 서버(conf/Catalina/localhost/app1.xml) 에서 추가하는 방법각 애플리케이션별로 별도의 context.xml 파일을 사용하는 방법은 다음과 같습니다. 이 방법을 사용하면 server.xml 파일을 수정하지 않고도 각 애플리케이션에 대해 별도로 설정을 관리할 수 있습니다.1. 애플리케이션의 context.xml 파일 생성각 애플리케이션의 설정을 위해 conf/Catalina/localhost/ 디렉토리 안에 개별적인 .xml 파일을 생성합니다. 이 .xml 파일은 애플리케이션의 Context ..
코딩ㆍ개발 정보/HTML 연습 2024. 8. 21.
[이클립스] 프로젝트 기본 Text file encoding을 UTF-8로 변경하기
Dynamic Web Project를 만들면 기본적으로 시스템의 Text encoding을 따라 가게 된다.MS949로 되어있는경우, 프로젝트 환경설정의 내용을 변경하는 것도 거추장스럽고, 파일을 매번 utf-8로 변경해 줄 수 도 없고, 해서, 프로젝트 생성 기본값을 변경하는 방법이다. Windows > Preferences > General > Workspace > Text file encoding 을 UTF-8로 변경 추가적인 인코딩 설정은 enc 검색해서 관련된 것들을 다 UTF-8로 변경하면된다.
코딩ㆍ개발 정보/HTML 연습 2024. 8. 20.
[톰캣] server.xml , Context 설정
Tomcat에서 여러 개의 서비스를 운영하려면 기본적으로 각 서비스가 서로 다른 URL 경로 또는 포트를 통해 접근할 수 있도록 설정해야 합니다. 이를 위해 Tomcat의 server.xml 파일을 수정하는 것이 일반적입니다.1. 컨텍스트 설정 (Context 설정)Tomcat에서 각 웹 애플리케이션은 Context라는 개념을 통해 구분됩니다. Context는 애플리케이션이 배포되는 경로를 정의합니다.server.xml 파일에서 요소 내에 각 애플리케이션의 를 정의하여 서로 다른 경로로 접근할 수 있도록 설정할 수 있습니다.예시: 위의 예에서 /app1과 /app2 경로를 통해 각각의 애플리케이션에 접근할 수 있습니다.2. 별도의 포트를 사용하는 방법각 애플리케이션을 서로..
코딩ㆍ개발 정보/HTML 연습 2024. 8. 20.
[도커] docker에 추가적인 프로그램 설치 방법
도커에 설치된 톰캣에서 터미널을 접속했는데 nano 같은 텍스트 편집기가 없을때 설치 방법 1. Docker 컨테이너 접속 docker exec 명령어를 사용하여 컨테이너에 접속합니다.docker exec -it /bin/bash예를 들어, 컨테이너 이름이 tomcat-2이라면:creban@TCLE:~$ sudo suash-4.4# docker exec -it tomcat-2 /bin/bashroot@tomcat-2:/usr/local/tomcat# 2. 패키지 목록 업데이트컨테이너에 접속한 후, 패키지 목록을 먼저 업데이트합니다.Tomcat Docker 이미지가 Debian 또는 Ubuntu 기반이라면, apt-get 명령어를 사용할 수 있습니다.apt-get update 3. nano 설치apt-..
코딩ㆍ개발 정보/HTML 연습 2024. 8. 19.
로그인 아웃/ 세션 기록 하는 방법
세션을 무한대로 유지하되, 브라우저가 닫히면 세션이 종료되도록 하는 것은 웹 애플리케이션의 일반적인 동작 원칙과는 약간 다른 접근을 필요로 합니다. 웹 세션은 서버 측에서 관리되기 때문에, 브라우저를 닫는 것만으로 세션을 자동으로 종료하는 것은 서버 측에서 직접적으로 처리하기 어렵습니다. 그러나 몇 가지 접근 방법을 사용하여 비슷한 동작을 구현할 수 있습니다.접근 방법브라우저 세션 쿠키 사용브라우저 세션 쿠키를 사용하면 브라우저가 닫힐 때 쿠키가 자동으로 삭제되며, 이를 통해 세션을 종료할 수 있습니다.세션 쿠키를 사용하여 로그인 정보를 저장하고, 쿠키가 삭제되면 서버 측에서 세션을 종료하는 방법입니다.브라우저가 닫힐 때 쿠키가 삭제되며, 서버 측에서 세션이 종료되도록 할 수 있습니다. 브라우저 탭/창 ..
코딩ㆍ개발 정보/HTML 연습 2024. 8. 16.
[시놀로지 도커] tomcat9 + mysql5 + jdbc9 세팅 방법
시놀로지, SSH로, 도커 이용 방법login as: crebancreban@tcle.co.kr's password:Using terminal commands to modify system configs, execute external binaryfiles, add files, or install unauthorized third-party apps may lead to systemdamages or unexpected behavior, or cause data loss. Make sure you are aware ofthe consequences of each command and proceed at your own risk.Warning: Data should only be stored in shar..
코딩ㆍ개발 정보/HTML 연습 2024. 8. 16.
[sublime text] JSP UTF-8 를 기본값 파일 만드는 방법
Sublime Text 3에서 HTML5 문서 템플릿을 빠르게 작성하는 Zen Coding (현재는 Emmet이라고도 불림) 기능을 활용하는 방법을 설명하겠습니다. JSP 파일에서 HTML5 템플릿을 적용하려면 다음과 같은 단계를 따르면 됩니다.1. Emmet 설치 및 설정 확인Sublime Text 3에는 기본적으로 Emmet이 내장되어 있으므로, 별도로 설치할 필요가 없습니다. 하지만 Emmet 기능이 활성화되어 있는지 확인하는 것이 좋습니다.- Emmet 설치 확인:Sublime Text 3의 Preferences > Package Control에서 Package Control: List Packages를 선택한 후 Emmet이 설치되어 있는지 확인합니다.만약 설치되어 있지 않다면, Package ..
코딩ㆍ개발 정보/HTML 연습 2024. 8. 16.
[sublime text] <html lang="ko"> 를 기본값으로 적용하는 방법
서브라임 텍스트 이용하다보면 ! 로 편하게 입력할 수 있는데 으로 되어있어서 매번 로 변경하려니 귀찮다. 이부분 해결 방법을 적어본다.우선, Sublime Text 3에서 HTML 템플릿을 수정하여 을 기본적으로 로 변경하려면 사용자 스니펫을 사용할 수 있습니다. 사용자 스니펫을 정의하여 HTML 문서 생성 시 자동으로 한국어 설정을 포함하도록 설정할 수 있습니다. 사용자 스니펫 만들기1. 스니펫 파일 생성:Sublime Text 3에서 Tools 메뉴를 열고 Developer > New Snippet...을 선택합니다.새 스니펫 파일이 열립니다. 2. 스니펫 정의:다음과 같이 스니펫 파일을 수정하여 HTML5 템플릿에서 을 로 변경합니다. ]]> ko text.html 3. 스니펫..
코딩ㆍ개발 정보/HTML 연습 2024. 8. 7.
[캐쉬 사용 안함] 크롬 설정 방법
방법 1. 기본적으로 캐시 비활성화 하기1. 개발자 도구 열기, 설정 클릭 F12 또는 Ctrl+Shift+I 2. Pref -> Network -> Disable cache .. 체크 3. 이제 개발자 도구를 열어두고, 작업하면 캐시가 비활성화 됩니다.방법 2. 임시로 캐시 삭제 하기1. 개발자 도구 열어 두고F12 또는 Ctrl+Shift+I 2. 새로고침 길게 3초 누르기, 캐시 비우기 선택 끝. 🐤 관련글 참고엣지 브라우저 캐시 비활성화 설정 방법파이어폭스 브라우저 캐시 비활성화 설정 방법
코딩ㆍ개발 정보/HTML 연습 2024. 8. 2.
[ASP, MSSQL] 쿼리 결과 분기 방법
ASP와 MSSQL을 사용하여 데이터베이스 쿼리 결과가 없을 때 "데이터 없음"이라고 알려주는 방법을 설명드리겠습니다. 아래의 단계에 따라 ASP 스크립트에서 데이터베이스 쿼리 결과가 없을 때 적절한 메시지를 사용자에게 표시할 수 있습니다. 1. ASP에서 MSSQL 데이터베이스 쿼리 실행먼저, ASP 스크립트를 사용하여 MSSQL 데이터베이스에 쿼리를 실행하고, 결과를 확인하는 기본적인 구조를 살펴보겠습니다. " rs.MoveNext LoopEnd If' 리소스 해제rs.CloseSet rs = Nothingconn.CloseSet conn = Nothing%> 설명:데이터베이스 연결: ADODB.Connection 객체를 사용하여 MSSQL 데이터베이스에 연결합니다.쿼리 실행: co..
코딩ㆍ개발 정보/HTML 연습 2024. 7. 31.
[CSS] Position: Relative - Absolute 다중 구성 처리 방법
스타일링을 할 때, 여러 레벨의 컨테이너와 서브 요소가 포함된 경우, 상대적(position: relative) 및 절대적(position: absolute) 위치를 설정하여 원하는 레이아웃을 만들 수 있습니다. 예시를 통해 이를 설명해보겠습니다. 우선, HTML 구조를 가정해봅시다: 내용 위의 구조를 가지고 SASS로 스타일을 잡아보겠습니다:.container { position: relative; .sub-container { position: absolute; top: 10px; // 원하는 위치 left: 10px; // 원하는 위치 .sub { position: relative; .sub-sub-c..
코딩ㆍ개발 정보/HTML 연습 2024. 7. 29.
[SCSS] node.js 및 Sass 사용 방법
Sass 또는 Less와 같은 CSS 프리프로세서를 사용하면 코드를 모듈화하고 중첩 구조를 사용할 수 있어 코드 관리가 용이합니다 CSS 프리프로세서 중 하나인 Sass를 예시로 사용 방법 1. Sass 설치Sass는 Node.js 기반으로 설치할 수 있습니다. Node.js와 npm(Node Package Manager)이 설치되어 있어야 합니다. 설치 방법은 다음과 같습니다: 1. Node.js 설치:Node.js 공식 웹사이트에서 설치 파일을 다운로드하고 설치합니다. 2. Sass 설치:터미널을 열고 다음 명령어를 입력하여 Sass를 전역(global)으로 설치합니다.npm install -g sass2. 프로젝트 구조 설정Sass 파일을 저장할 디렉토리 구조를 설정합니다. 예시로 다음과 같은 디렉..
