공유받은 프로젝트 내에서 pip install -r requirements.txt 를 이용해서 모듈을 설치했는데 main.py를 실행시키면 해당 모듈을 찾을 수 없다고 나오고, 결국 하나하나 pip install로 설치해야 하는 문제 발생
| 파이썬 람다 함수 사용법 정리 (2) | 2024.11.04 |
|---|---|
| YAML 파일이란? (1) | 2024.09.13 |
| 20240808 (0) | 2024.08.08 |
| 20240807 (0) | 2024.08.07 |
| 20240806 (0) | 2024.08.06 |
아무래도 블로그에 코드를 넣는 글이 많다보니, 예쁜 syntax highligthing 테마를 적용하고 싶어졌다. 그 과정을 쉽고 간단하게 남겨본다.
1. 티스토리 기본 플러그인
사실 티스토리에서 제공하는 기본 포맷도 썩 나쁘지는 않다고 생각하므로 그 방법을 먼저 남긴다.
티스토리 블로그 관리 -> 플러그인 에서 선택할 수 있는 "코드 문법 강조" 플러그인이다. 이후 게시글을 작성할 때, 코드블럭을 선택하여 넣으면 원하는 테마를 적용할 수 있다. 내가 사용하던 테마는 Atom One Dark. 딱히 호불호 없을 무난무난한 다크 테마라고 생각된다.
2. highlight.js 에서 테마 가져와서 사용하기
기본적으로 제공하는 테마가 심심하고 나만의 개성을 찾고 싶어 새로운 방법을 탐색하기 시작. 우선 이 방법을 사용하려면 위의 티스토리 기본 "코드 문법 강조" 플러그인을 해제해야 된다. highlight.js 홈페이지에서 아래로 쭉 내려오면 HTML 태그를 이용해서 스타일을 적용할 수 있게 제공하고 있다. 사용하고 싶은 테마의 종류는 Demo 메뉴에서 미리 확인해 볼 수도 있다. 내가 고른 테마는 어두운 배경에 분필 색감이 인상적인 "base16-chalk"를 골랐다.
원하는 테마를 골랐으면 이름을 잘 기억하고 cdnjs 코드를 티스토리 블로그에 복붙하러 간다. 자, 이제 티스토리 블로그에 적용해 보자. 블로그 관리 -> 꾸미기 -> 스킨 편집 -> html 편집으로 들어간다. 그리고 highlight.js 홈페이지 아래로 쭉 내려가면 복붙할 수 있는 cdnjs 코드를 긁어와 <head></head> 태그 사이에 복붙한다. 물론 본인이 원하는 테마를 적용하기 위해서는 일부 수정이 필요하다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/base16/chalk.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/*.min.js"></script>
<script>hljs.highlightAll();</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js" integrity="sha512-axd5V66bnXpNVQzm1c7u1M614TVRXXtouyWCE+eMYl8ALK8ePJEs96Xtx7VVrPBc0UraCn63U1+ARFI3ofW+aA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>hljs.initLineNumbersOnLoad();</script>
내가 고른 테마인 base16-chalk를 적용하기 위해 styles/base16/chalk.min.css 파일을 선택, 라인 넘버까지 포함하기 위해 highlightjs-line-number.js 까지 추가해주었다. 기존 블로그 게시글이 잘 변경된 것을 확인하였다. 그런데 줄바꿈 너비가 좀 맘에 안들긴 한다...
3. CSS 수정으로 줄바꿈, 둥근 모서리 적용하기
폰트 사이즈, 줄간격, 둥근 모서리 등의 자잘한 옵션들을 바꿔주기 위해 CSS에서 code를 검색한다. 코드 블럭에 적용되는 #article-view pre code.hljs 내부의 css 코드를 입맛에 맞게 고쳐주니 잘 변경된다. 입맛에 맞게 border-radius를 추가하고, font-size는 줄이고, line-height도 줄였다. 값들은 조금씩 조정해가며 새로고침 하면서 예쁜지 안예쁜지 확인한다.
당분간 이 설정으로 글 많이 써야겠다.
추가) 모바일에서 보면 제대로 설정이 안나온다... 해결방법 고민해보기
| 카카오 Adfit 수익 현황 (4) | 2024.10.13 |
|---|---|
| 블로그 오픈~ (0) | 2024.08.03 |
문제상황
유저가 textarea에서 입력을 하면, 드랍다운에 추천 텍스트를 보여주고, 드랍다운 클릭을 통해 텍스트를 자동으로 채워주는 기능을 개발하고 있었다. 그런데 textarea가 비활성화되는 blur 이벤트가 click 이벤트보다 먼저 발생하여 드랍다운 메뉴가 먼저 사라지고, 유저는 드랍다운 메뉴가 있던 빈 자리를 클릭하게 되는 것이었다.
ChatGPT의 해결 방법 : setTimeout()
gpt는 setTimeout()을 사용할 것을 추천해주었다. 즉, blur 이벤트의 처리를 약간 지연시켜 click 이벤트가 먼저 발생하도록 만드는 것이다. setTimeout()을 이용해 blur 이벤트의 콜백 함수(드랍다운의 display를 none으로 설정)를 100ms정도 되는 짧은 시간 뒤에 실행되도록 지연시킨다. 이렇게 하면 click 이벤트가 먼저 발생하고, 그 후에 blur 이벤트가 발생하게 되어 드롭다운 메뉴 등을 정상적으로 선택할 수 있게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Blur Event Example</title>
</head>
<body>
<textarea id="myTextarea" rows="4" cols="50">Click outside of this textarea to see the issue.</textarea>
<div id="dropdownMenu" style="display: none; border: 1px solid #000; padding: 10px; position: absolute;">
<p>Dropdown Item 1</p>
<p>Dropdown Item 2</p>
<p>Dropdown Item 3</p>
</div>
<script>
const textarea = document.getElementById('myTextarea');
const dropdownMenu = document.getElementById('dropdownMenu');
textarea.addEventListener('focus', () => {
// Textarea가 포커스를 얻으면 드롭다운 메뉴를 보여줍니다.
dropdownMenu.style.display = 'block';
});
textarea.addEventListener('blur', () => {
// setTimeout을 사용하여 blur 이벤트의 처리를 지연시킵니다.
setTimeout(() => {
dropdownMenu.style.display = 'none';
}, 100);
});
dropdownMenu.addEventListener('click', (event) => {
// 드롭다운 메뉴가 클릭되었을 때의 동작을 정의합니다.
alert('Dropdown item clicked!');
});
</script>
</body>
</html>
실제 해결 방법 : mousedown 이벤트로 blur 이벤트 리스너 제거
우선 기능 개발이 급해 gpt의 추천대로 setTimeout()을 사용했지만, 급한 불을 끄고 난 뒤에 일정 시간을 지연시키는 방법이 밀리세컨을 직접 저렇게 숫자로 코드에 넣는 것이 하드코딩스럽기도 하고 괜히 마음에 걸렸다. 나중에 수정한 방법은 mousedown 이벤트를 활용한 방법이다.
mousedown 이벤트는 사용자가 마우스 버튼을 누를 때 발생하므로, click 이벤트보다 먼저 발생한다. 이 이벤트를 활용해 사용자가 클릭하는 순간, blur 이벤트 리스너를 제거하여 클릭이 먼저 처리되도록 해결하였다. (나중에 gpt에게 다시 물어보니 mouseup 이벤트에서 다시 blur 이벤트 리스너를 추가하여 클릭이 완료된 후에 blur 이벤트가 발생할 수 있도록 원상복구 하란다. 출근하면 바꿔놔야겠다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Blur Event Example</title>
</head>
<body>
<textarea id="myTextarea" rows="4" cols="50">Click outside of this textarea to see the issue.</textarea>
<div id="dropdownMenu" style="display: none; border: 1px solid #000; padding: 10px; position: absolute;">
<p>Dropdown Item 1</p>
<p>Dropdown Item 2</p>
<p>Dropdown Item 3</p>
</div>
<script>
const textarea = document.getElementById('myTextarea');
const dropdownMenu = document.getElementById('dropdownMenu');
function hideDropdown() {
dropdownMenu.style.display = 'none';
}
// blur 이벤트 리스너를 추가하는 함수
function addBlurListener() {
textarea.addEventListener('blur', hideDropdown);
}
// blur 이벤트 리스너를 제거하는 함수
function removeBlurListener() {
textarea.removeEventListener('blur', hideDropdown);
}
textarea.addEventListener('focus', () => {
// Textarea가 포커스를 얻으면 드롭다운 메뉴를 보여줍니다.
dropdownMenu.style.display = 'block';
});
textarea.addEventListener('mousedown', () => {
// mousedown 시점에 blur 이벤트 리스너를 제거합니다.
removeBlurListener();
});
document.addEventListener('mouseup', () => {
// mouseup 시점에 blur 이벤트 리스너를 다시 추가합니다.
addBlurListener();
});
dropdownMenu.addEventListener('click', (event) => {
// 드롭다운 메뉴가 클릭되었을 때의 동작을 정의합니다.
alert('Dropdown item clicked!');
});
// 초기에는 blur 이벤트 리스너가 활성화된 상태로 시작합니다.
addBlurListener();
</script>
</body>
</html>
결론
사실 두 방식 모두 잘 작동했기에 뭐가 더 나은 방법이라 말하긴 어렵다. 내부 구현이 어떻든 유저가 체감하는 퍼포먼스만 좋으면 되니까...ㅋㅋㅋ 그래도 역시 지연시킬 시간을 얼마를 주는게 좋을지 고민하는 것보단 동적으로 이벤트 리스너를 제거하고 다시 추가해주는게 좀 더 내스타일 해결방법이란 생각이 든다.
| 자바스크립트에서 큐(Queue) 사용하기 (3) | 2024.09.27 |
|---|---|
| 로컬 스토리지(LocalStorage)란 무엇인가?, 어떻게 사용하는가? (1) | 2024.09.19 |
| CORS(Cross-Origin Resource Sharing)란 무엇인가? (1) | 2024.09.06 |
| JWT 로그인 인증 방식: Stateful vs Stateless (1) | 2024.09.06 |
| 메뉴 드롭다운 구현하기 (1) | 2024.09.03 |