저작자표시 비영리 변경금지

'LSY' 카테고리의 다른 글

[LSY] 노래  (0) 2023.05.05
[LSY] 사진  (0) 2022.12.03

상대 경로 & 절대 경로를 사용할 수 있는 HTML 태그들은 다른 리소스를 불러오거나 참조하는 태그들이다.

페이지 이동 : <a>, <link>, <iframe>
멀티미디어 : <img>, <audio>, <video>, <source>
스크립트 관련 : <script>
폼 관련 : <form>, <input>


필요할 때마다 상대 경로와 절대 경로를 잘 활용하면 된다.

 

상대 경로 (Relative URL)

href="www.naver.com"처럼 scheme(프로토콜, 예 : https://)이 없는 URL을 작성하면, 브라우저는 해당 URL을 현재 문서의 경로를 기준으로 해석한다.
예를 들어, 현재 페이지가 https://www.example.com/page.html이라면,
href="www.naver.com" -> https://www.example.com/www.naver.com 처럼 변환되어 엉뚱한 주소로 이동한다.

 

절대 경로 (Absolute URL)

href="https://www.naver.com"처럼 http:// 또는 https://를 포함한 주소는 절대 경로이다.
절대 경로는 현재 문서의 위치와 관계없이 항상 지정된 주소로 이동한다.
그래서 href="https://www.naver.com"으로 변경했을 때, 정상적으로 네이버 홈페이지가 열리는 것이다.

 

추가 설명 : //만 사용하는 경우

href="//www.naver.com"처럼 앞에 //만 붙이면, 현재 페이지의 프로토콜(http 또는 https)을 따라간다.
예 : 현재 페이지가 https://www.example.com/page.html이라면, href="//www.naver.com" -> https://www.naver.com
예 :  현재 페이지가 http://www.example.com/page.html이라면, href="//www.naver.com" -> http://www.naver.com
주로 프로토콜을 자동으로 맞추고 싶을 때 사용한다.

 

결론

href="이 부분에"

www.naver.com만 쓰면 상대 경로로 처리돼서 엉뚱한 경로가 나온다.
https://www.naver.com처럼 프로토콜을 포함하면 절대 경로가 되어 정확한 사이트로 이동한다.
//www.naver.com은 현재 페이지의 프로토콜을 따라가는 절대 경로 방식이다. 

 

https:// 또는 http://를 명시하는 것이 더 명확하고 안전한 방법이다.

저작자표시 비영리 변경금지

'HTML > 참고자료' 카테고리의 다른 글

[HTML] 태그 종류  (1) 2024.12.25
[HTML] form 태그 속성  (0) 2024.12.12

접속자가 몰려 서버가 느려지는 상황에서 주로 발생할 수 있는 문제 중 하나가 데이터베이스에 Lock이 걸리거나,

쿼리가 비효율적으로 실행되는 경우이다. 아래에  Lock 관련 문제를 확인하고 해결할 수 있는 쿼리를 정리하였다.

<MySQL>

-- 현재 활성화된 프로세스와 상태 확인
SHOW PROCESSLIST;

실행 중인 쿼리와 그 상태를 확인할 수 있다. 여기에서 State 값이 Locked 상태로 표시된 세션이

Lock을 유발하고 있을 가능성이 크다.

-- 특정 세션 종료
KILL [SESSION_ID];

Lock을 유발한 세션을 종료하기 위해 KILL 명령어를 사용한다.

[SESSION_ID] 자리에 SHOW PROCESSLIST; 쿼리에서 조회된 Id 값을 적는다.

<Oracle>

-- Lock이 걸린 테이블 조회
SELECT DO.OBJECT_NAME
     , DO.OWNER
     , DO.OBJECT_TYPE
     , VO.XIDUSN
     , VO.SESSION_ID
     , VO.LOCKED_MODE
  FROM V$LOCKED_OBJECT VO
     , DBA_OBJECTS DO
 WHERE VO.OBJECT_ID = DO.OBJECT_ID;

OBJECT_NAME이 테이블명

-- Lock이 걸린 테이블의 SID와 SERIAL# 조회(테이블별 확인)
SELECT A.SID, A.SERIAL#
  FROM V$SESSION A
     , V$LOCK B
     , DBA_OBJECTS C
 WHERE A.SID = B.SID
   AND B.ID1 = C.OBJECT_ID
   AND B.TYPE = 'TM'
   AND C.OBJECT_NAME = '테이블명';

v$ 뷰는 관리자 권한 필요

-- 조회된 SID와 SERIAL# 값으로 세션 종료
ALTER SYSTEM KILL SESSION '[SID], [SERIAL#]';
저작자표시 비영리 변경금지

'SQL > 참고자료' 카테고리의 다른 글

[SQL] 커넥션  (0) 2025.01.21
[SQL] 특정 테이블의 과거 데이터 조회  (0) 2024.09.13
[SQL] Function, Procedure, Trigger, Sequence, View 스크립트  (0) 2024.02.27
[SQL] PK 중복 여부에 따라 INSERT 또는 UPDATE  (1) 2023.12.09
[SQL] Function, Procedure, Trigger, View, Package, Index, Synonyms, Cursor  (0) 2023.08.31

<MySQL>

-- 총 허용 가능한 커넥션 수
SHOW VARIABLES LIKE 'max_connections';

-- 현재 커넥션 수
SHOW STATUS LIKE 'Threads_connected';

 

<Oracle>

-- 총 허용 가능한 커넥션 수
SELECT VALUE AS max_connections
FROM v$parameter
WHERE NAME = 'processes';

-- 현재 커넥션 수
SELECT COUNT(*) AS current_connections
FROM v$session
WHERE status = 'ACTIVE';

v$ 뷰는 관리자 권한 필요

저작자표시 비영리 변경금지

'SQL > 참고자료' 카테고리의 다른 글

[SQL] Lock 관련 문제 확인 및 해결  (0) 2025.01.21
[SQL] 특정 테이블의 과거 데이터 조회  (0) 2024.09.13
[SQL] Function, Procedure, Trigger, Sequence, View 스크립트  (0) 2024.02.27
[SQL] PK 중복 여부에 따라 INSERT 또는 UPDATE  (1) 2023.12.09
[SQL] Function, Procedure, Trigger, View, Package, Index, Synonyms, Cursor  (0) 2023.08.31

1. https://mvnrepository.com/artifact/javax.annotation/javax.annotation-api 접속 후 버전 선택

 

 2. Maven 또는 Gradle에 맞게 dependency 추가

 

3. Update Project

저작자표시 비영리 변경금지

'Java > 참고자료' 카테고리의 다른 글

[Java] Date & LocalDate & LocalDateTime 변수를 yyyyMMdd 문자열로 변환  (0) 2024.09.13
[Java] 특정 문자열 및 빈 값 체크  (0) 2024.08.29
[Java] Annotation  (0) 2023.08.15
[Java] Equals & HashCode  (0) 2022.11.25
[Java] Exception  (0) 2022.11.25

1. 기본 구조 태그
· <html> : 문서의 최상위 요소
· <head> : 메타데이터, 스타일, 스크립트 등을 포함
· <body> : 실제 화면에 표시되는 콘텐츠를 포함

2. 문서 구조 태그
· <header> : 헤더 영역(로고, 내비게이션 포함)
· <nav> : 내비게이션 링크를 그룹화
· <main> : 문서의 주요 콘텐츠를 포함
· <section> : 문서의 구획을 나누는 데 사용
· <article> : 독립적인 콘텐츠(예 : 블로그 글, 뉴스 기사)
· <aside> : 부가 정보(예 : 사이드바)
· <footer> : 문서나 섹션의 하단 영역

3. 텍스트 콘텐츠 태그
· <h1> ~ <h6> : 제목 태그 <h1>이 가장 크고 중요
· <p> : 단락
· <span> : 인라인 요소로 텍스트를 그룹화
· <strong> : 굵게 표시(중요성을 나타냄)
· <em> : 기울임꼴(강조를 나타냄)
· <a> : 하이퍼링크 생성

4. 리스트 태그
· <ul> : 순서 없는 리스트(점)
      · <li> : 리스트 항목
· <ol> : 순서 있는 리스트(숫자)
      · <li> : 리스트 항목
· <dl> : 정의 리스트
      · <dt> : 정의 제목
      · <dd> : 정의 내용

5. 테이블 태그
· <table> : 테이블 생성
      · <tr> : 행
      · <th> : 헤더 셀
      · <td> : 데이터 셀
      · <thead> : 테이블의 헤더 그룹
      · <tbody> : 테이블의 본문 그룹
      · <tfoot> : 테이블의 하단 그룹

6. 폼 태그
· <form> : 사용자 입력을 서버에 제출
· <input> : 다양한 입력 필드(텍스트, 라디오, 체크박스 등)
· <textarea> : 여러 줄 텍스트 입력
· <button> : 버튼 생성
· <select> : 드롭다운 리스트
      · <option> : 선택 항목
· <label> : 폼 요소의 레이블

7. 멀티미디어 태그
· <img> : 이미지 삽입
· <video> : 동영상 삽입
· <audio> : 오디오 삽입
· <source> : 멀티미디어 소스 지정
· <figure> : 이미지와 캡션 그룹화
      · <figcaption> : 이미지 캡션

8. 시맨틱 및 메타 태그
· <meta> : 문서의 메타정보 제공
· <link> : 외부 리소스 연결(예 : CSS 파일)
· <script> : JavaScript 코드 삽입
· <style> : 인라인 CSS 스타일 정의

9. 기타 태그
· <div> : 블록 요소로 콘텐츠를 그룹화
· <iframe> : 다른 HTML 페이지를 삽입
· <br> : 줄바꿈
· <hr> : 수평선

주요 태그 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 태그 정리</title>
</head>
<body>
    <header>
        <h1>HTML 태그의 종류</h1>
    </header>
    <main>
        <section>
            <h2>리스트 예제</h2>
            <ul>
                <li>순서 없는 리스트 항목</li>
                <li>또 다른 항목</li>
            </ul>
        </section>
        <article>
            <h2>테이블 예제</h2>
            <table border="1">
                <thead>
                    <tr>
                        <th>제목 1</th>
                        <th>제목 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>내용 1</td>
                        <td>내용 2</td>
                    </tr>
                </tbody>
            </table>
        </article>
    </main>
    <footer>
        <p>HTML 태그 예제</p>
    </footer>
</body>
</html>
저작자표시 비영리 변경금지

'HTML > 참고자료' 카테고리의 다른 글

[HTML] 상대 경로 & 절대 경로  (0) 2025.02.23
[HTML] form 태그 속성  (0) 2024.12.12

2024년 파이썬 IDE 순위

 

1. PyCharm

    · 제작사 : JetBrains
    · 특징 : 강력한 자동 완성, 디버깅 도구, 코드 품질 검사, 다양한 플러그인 지원
    · 용도 : 대규모 프로젝트 및 전문 개발자들이 선호


2. Visual Studio Code (VSCode)
    · 제작사 : Microsoft
    · 특징 : 경량 에디터, 확장성 높음, 다양한 플러그인, Python 확장팩 제공
    · 용도 : 웹 및 AI / ML 개발에 적합


3. Jupyter Notebook

    · 특징 : 대화형 개발 환경, 데이터 시각화와 문서화가 용이, 코드와 결과를 한눈에 확인
    · 용도 : 데이터 과학, AI 모델 프로토타이핑에 적합


4. Spyder

    · 특징 : MATLAB과 유사한 인터페이스, 데이터 분석에 강점
    · 용도 : 과학 컴퓨팅 및 데이터 분석


5. IDLE

    · 특징 : 기본 파이썬 설치 시 포함, 간단하고 빠른 스크립트 실행
    · 용도 : 초보자 및 간단한 스크립트 작성

 

2024년 AI 개발을 위한 파이썬 IDE 3가지 추천

 

1. Jupyter Notebook / JupyterLab

    · 용도 : 데이터 과학, AI 모델링, 실험 및 프로토타이핑
    · 특징
          · 코드, 결과, 마크다운을 함께 작성할 수 있는 대화형 환경
          · 데이터 시각화, 실험 결과 확인이 용이
          · 다양한 커널과 확장 플러그인 지원 (TensorFlow, PyTorch, scikit-learn 등)
          · JupyterLab은 Jupyter Notebook의 확장 버전으로 파일 브라우저, 터미널, 텍스트 에디터를 통합 제공
    · 추천 이유 : 모델 학습 및 실험을 시각적으로 확인하면서 개발할 때 최적

2. PyCharm (Professional Edition)

    · 용도 : 대규모 AI 프로젝트, 고급 AI 애플리케이션 개발
    · 특징
          · 강력한 코드 분석, 리팩토링, 디버깅 기능
          · TensorFlow, PyTorch, scikit-learn 등 주요 AI 프레임워크 지원
          · 통합된 데이터 과학 도구와 Jupyter Notebook 지원
          · 버전 관리 시스템(Git) 및 가상환경 관리 용이
    · 추천 이유 : AI 모델링뿐만 아니라 AI를 활용한 대규모 소프트웨어 개발에 적합

3. Visual Studio Code (VSCode)

    · 용도 : AI 모델 개발, 데이터 전처리, API 배포
    · 특징
          · 가볍고 빠르며 다양한 확장팩(예: Python, Jupyter, TensorFlow, PyTorch) 지원
          · 통합 터미널 및 Git 버전 관리 기능
      · 다양한 언어 및 프레임워크와 호환 가능
      · Jupyter Notebook과의 통합으로 실험과 코드 실행을 동시에 수행
    · 추천 이유 : AI 모델링뿐만 아니라 배포 단계까지 진행해야 하는 AI 프로젝트에 최적

 

· 요약

    · Jupyter Notebook / JupyterLab - 프로토타이핑 및 데이터 시각화에 강점
    · PyCharm - 대규모 AI 소프트웨어 개발에 적합
    · VSCode - 모델 개발 및 배포에 유연하고 강력한 도구

IDE 주요 기능 장점 단점
Jupyter Notebook - 코드와 결과를 한 번에 확인 가능
- 데이터 시각화 및 실험 단계에 적합
- Markdown 지원		 - 빠른 프로토타이핑
- 인터랙티브한 실행 환경
- 쉬운 데이터 시각화		 - 대규모 프로젝트에 비효율적
- 버전 관리 어려움
- IDE 기능 부족
PyCharm - 코드 분석, 디버깅, 리팩토링
- 통합형 테스트 지원
- AI 및 ML용 플러그인 지원		 - 대규모 프로젝트 관리에 적합
- 강력한 디버깅 도구
- 자동 완성 및 코드 인사이트
  제공		 - 무겁고 리소스 많이 소모
- 초기 학습 곡선 높음
- 일부 기능은 유료
VSCode - 가볍고 확장성이 뛰어남
- 다양한 플러그인 제공
- 원격 개발 및 컨테이너 개발 지원		 - 가볍고 빠른 성능
- 커스터마이징 유연성
- 다양한 언어 및 툴 지원		 - 복잡한 프로젝트 설정 필요
- 디버깅 및 리팩토링 도구
  PyCharm 대비 부족

 

저작자표시 비영리 변경금지

'Python > 참고자료' 카테고리의 다른 글

[Python] 기초-1  (2) 2023.03.12

미리보기 가능한 파일 형식

 

브라우저에서 기본적으로 지원하거나 간단한 JavaScript 처리를 통해 미리보기가 가능한 파일들

1. 문서 형식
    · PDF (.pdf)
        · 주요 브라우저들(Chrome, Firefox, Edge 등)이 내장 PDF 뷰어를 제공
    · 텍스트 파일 (.txt, .md)
        · 간단한 텍스트이기 때문에 브라우저에서 바로 표시 가능
2. 이미지 형식
    · JPEG (.jpg, .jpeg)
    · PNG (.png)
    · GIF (.gif)
    · SVG (.svg)
    · WebP (.webp)
        · 대부분의 이미지 포맷은 브라우저가 기본적으로 지원
3. 멀티미디어 형식
    · 오디오 파일 :
        · MP3 (.mp3), OGG (.ogg), WAV (.wav)
    · 비디오 파일 :
        · MP4 (.mp4), WebM (.webm), OGG (.ogg)
        · 브라우저가 내장 플레이어를 통해 미리보기 및 재생 가능
4. 코드 및 마크업 파일
    · HTML (.html), CSS (.css), JavaScript (.js)
        · 브라우저에서 직접 실행하거나 미리보기 가능
    · XML (.xml), JSON (.json)
        · 브라우저에서 구조화된 형태로 표시 가능

 

미리보기 불가 또는 어려운 파일 형식

 

브라우저에서 기본적으로 열리지 않고, 다운로드 후 전용 소프트웨어에서 열어야 하는 파일들

1. 오피스 문서
    · Excel 파일 : .xlsx, .xls
    · Word 파일 : .docx, .doc
    · PowerPoint 파일 : .pptx, .ppt
        · 복잡한 데이터와 기능을 포함하고 있어 브라우저에서 직접 렌더링이 어려움
2. 아카이브 파일 (압축 파일)
    · ZIP (.zip), RAR (.rar), 7z (.7z)
        · 파일 압축 해제가 필요하며 브라우저에서 직접 열 수 없음
3. 이진 파일
    · 실행 파일 (.exe, .bin)
        · 보안상 브라우저에서 실행되지 않으며 다운로드만 가능
4. CAD 및 3D 모델링 파일
    · DWG (.dwg), STL (.stl)
        · 전용 CAD 소프트웨어가 필요
5. 디스크 이미지 파일
    · ISO (.iso)
        · 디스크 이미지 마운트 소프트웨어가 필요

 

저작자표시 비영리 변경금지

'IT' 카테고리의 다른 글

[IT] 쿠키 & 세션 & 토큰 & 캐시  (0) 2023.07.15
[IT] 서버 이중화  (0) 2023.05.30
[IT] Cloud Service 장단점  (0) 2023.05.30
[IT] Web Server & WAS  (0) 2023.02.26
[IT] Edge Computing  (0) 2022.12.05

+ Recent posts

티스토리툴바