파이참 파일 확장자 타입 변경하기

파이참에서 파일을 만들다보면 확장자명을 지정하지 않고 파일을 만드면서 text 형식으로 지정하는 경우가 있다.
보통의 경우 auto-detected이지만, 잘못 지정하면 확장자를 바꿔도 기존에 지정한 형식으로 읽어온다.
이 경우 지정한 형식을 제거해주면 된다.

Setting - File Types

파이참 가상환경 생성

가상환경

라이브러리를 불러오다보면 의존성 패키지의 과거 버전이 필요할 때가 있다.
모든 패키지에 대응할 수는 없으니 파이썬이나 해당 패키지를 재설치 혹은 Downgrade를 진행해야 할 것이다.
위 문제를 해결할 수 있는 방법이 여러 파이썬을 생성해 각각 환경에 맞는 패키지를 설치해 따로 불러오는 방법으로 가상환경이라 한다.

가상환경 생성

설정에서 생성하기

프로젝트를 생성하고 코드 작업을 진행하다 버전 에러가 났을 때,

Files - Settings - Project:

- Python Interpreter 에서 Add... 를 눌러 추가할 수 있다.

가장 기본적인 Venv를 설치할 수 있다. anaconda 설치가 됐다면 conda 환경도 추가할 수 있지만, 기본적인 파이썬 Venv 설치를 진행할 예정.
파이썬 exe 경로와 가상환경 dir 경로를 잘 확인해주자

프로젝트와 같이 생성하기

보통의 경우는 파이참에서 프로젝트를 생성하며 가상환경 설치를 진행할 것이다.

터미널에서 생성하기

파이참같은 개발환경을 사용하지 못하고 리눅스 등 환경의 터미널에서 생성해야할 경우는 venv — 가상 환경 생성를 참조한다.

패키지 설치

파이썬 가상환경을 생성했다면 사용할 패키지를 설치하면 된다.

정상적으로 설치했다면 문제 없겠지만 어느 파이썬을 참조하고 있는지 터미널에서 확인해보자.

1
2
3
4
 # window
$ where python
# mac, linux .ect
$ which python

가상환경을 참조하지 못하고 있다면 아래 명령어로 (venv) 강제 진입해보자.

1
2
3
4
 # window
$ source ./venv/Scripts/activate
# mac, linux .ect
$ source ./venv/bin/activate

설정 interpreter에서

파이참 같은 경우엔 Python Interpreter - install 버튼을 선택해 설치할 패키지와 버전을 선택할 수 있다.

requirements.txt

버전을 일일히 기억하고 있기도 뭐하고 설치할 패키지가 많다면 하나하나 설치하는 것도 일이다.

pycaret같은 패키지를 보면 requirements.txt로 관리한다.

텍스트 파일에 원하는 패키지와 버전을 입력했다면 pip 명령어로 한번에 설치를 진행할 수 있다.

1
$ pip install -r requirements.txt

Jupyter ipynb에서 가상환경 사용

가상환경 이름과 표시될 이름을 설정해준다.

난 각각

과 <파이썬버전(dir 이름)>으로 설정했다.

1
ipython kernel install --user --name python_ml --display-name "Python3(python_ml)"

정상적으로 등록됐다면 jupyter 환경으로 접속하면 된다.

1
2
$ jupyter lab
$ jupyter notebook

주피터 랩을 추천한다.

외부링크

파이참, 파이썬 인코딩 설정

어떤 작업환경을 사용하든 가능하다면 UTF-8 포멧으로 작업하는걸 추천한다.

pycharm에서도 인코딩 방식 변경을 지원함.

file - setting - editor - file encodings에서 Global Encoding이 UTF-8이 아니라면 변경해주자.

프로젝트 인코딩과 속성 파일 인코딩 방식은 OS가 윈도우라면 새 프로젝트를 열 때 마다 기본값으로 돌아갈 것이다.
필요한 설정이 아니라면 크게 신경쓰진 말자.

encoding

※ 코드 파일 맨 윗단에 아래 주석을 추가하면 자동 UTF-8 인코딩 해준다.

1
# -*- coding: utf-8 -*-

pycharm에서 UTF-8로 변경했고 python 3++를 사용중이기에 추가할 필요는 없지만 작업 파일을 공유하거나 먼 미래에 열어볼 나를 위해 추가한다.

Rstudio 처음 세팅하기

Rstudio 기본 설치 프로그램

  • Rstudio는 R 언어를 사용하는 프로그램이니 R 언어팩을 설치한다.

  • 사용할 작업 환경인 Rstudio도 받아주고,

  • Rtools를 설치하면 R의 기본적인 Package 세트와 C/C++과 같은 의존성 세팅을 불러올 수 있다.

Rstudio 기본 세팅

나는 memo 앱을 사용할 때도 자동 줄바꿈을 사용하는 편이기에 Soft-wrap를 체크했다.

Soft-wrap R source files

윈도우 환경이라면 언어 인코딩 방식을 UTF-8로 변경하는걸 추천한다.

default text encoding

R Script

R studio 상단의 files 탭에서 project 경로를 생성하거나 py 혹은 ipynb 처럼 R Script, Rmd 파일창을 열 수 있다.

new

Rtools path 설정

R Script 등을 열었다면 Rtools의 경로를 지정해준다.

1
write('PATH="${RTOOLS40_HOME}\\usr\\bin;${PATH}"', file = "~/.Renviron", append = TRUE)

R은 PL/SQL처럼 동작한다. 원하는 명령어를 작성하고 해당 열에서 Ctrl+Enter 해주면 된다.

이후 Path값을 다시 불러오기 위해 R을 재시작한다. 나의 경우 R restart로 해결안되서 Rstudio 자체를 재실행했다.
그냥 깔끔하게 Rstudio를 껏다키는걸 추천한다.

패키지 불러오기

1
2
3
install.packages("Package_Name")
#혹은
install.packages("Package_Name", dependencies = TRUE)

패키지 함수를 사용하려면 다른 프로그램 언어들처럼 file에서 package를 import 해줘야한다.

1
library(Package_Name)

만약 콘솔에 사용하려는 패키지가 없다고 나온다면 install.packages("패키지명")를 해주자.

특수한 경우에 대한 오류는 R 패키지 리스트에서 stringi처럼 시스템 기본 요구사항이 들어있는 경우다.

stringi

일반적인 경우는 Rtools 설치에서 해결됐을테니 크게 신경쓸 필욘 없다.

외부링크

튜토리얼

hexo blog CSS 스타일 변경하기 (Feat. icarus theme)

블로그 스타일 세부설정을 위한 icarus theme 폴더

이전 포스팅인 블로그 테마 세부설정을 위한 clone theme를 보고오자.

Chrome DevTools

HTML? 몰?루 하던 시절엔 왜째서 기본 탑재된지 이해가 안가던 툴, 브라우저에서 F12를 누르면 어김없이 등장하는 코드뭉치 박스를 기억할 것이다.

오늘 만큼은 이놈을 유용하게 사용할 수 있겠다.

문제의 그 BOX

DevTools 위에 나오는 코드 뭉탱이(Elements)가 해당 페이지의 구성 요소들의 배치 형식, 아래 나오는 Styles 박스가 Elements에서 클릭한 요소의 CSS stlye로 보면된다.

사실 위 2개만 알면 건물을 새로 짖는게 아닌 이상 인테리어 수정 방법은 다 배운 셈이다.

수정하고픈 요소 찾기

DevTools에서는 친절하게도 임의 요소에 마우스를 올려두기만 해도 어느 영역에 대한 Class인지 화면에 표시해준다.

요소 식별

팁이 있다면 DevTools 좌측 상단의 “Select an element in the page to inspect it - Ctrl+Shift+C” 버튼을 눌러보자

식별된 요소가 포함된 class들을 기억하자.

내가 수정할 요소는 nav: pagination / ul: pagination-list is-hidden-mobile / a: pagination-link is-current인거같다.

pagination.stly 파일 안에서 pagination 요소와 pagination-link.is-current 하위 요소를 찾을 수 있었다.
중간의 ul은 moblie 모드에서는 숨기는 옵션? js로 설정하는 예외인거같다.

style

article의 img 요소처럼 style 커스텀 값이 없다면 부모 객체 아래에 직접 넣어주면 된다.

스크롤바 스타일 변경

집에서 쓸 때는 마우스 사이드 버튼에 page up/down을 할당하고 써서 몰랐는데, 외부에서 블로그에 접속하니 사이드바가 쥐꼬리만한게 너무 불편했다.

궁금하면 icarus에서 desktop mode로 직접 확인 ㄱㄱ

Elements에서 스크롤바를 정상적으로 식별할 수 없었지만, html 전체 요소 style에서 -wibkit-scrollbar라는 놈을 찾을 수 있었다.

쓸일이 있을진 모르겠지만 주석처리 해놓자.

.\include\style\base.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* ---------------------------------
*+desktop()
* ::-webkit-scrollbar
* width: 8px
* height: 8px
*
* ::-webkit-scrollbar-track
* border-radius: 3px
* background: rgba(0,0,0,0.06)
* box-shadow: inset 0 0 5px rgba(0,0,0,0.1)
*
* ::-webkit-scrollbar-thumb
* border-radius: 3px
* background: rgba(0,0,0,0.12)
* box-shadow: inset 0 0 10px rgba(0,0,0,0.2)
*
* ::-webkit-scrollbar-thumb:hover
* background: rgba(0,0,0,0.24)
* --------------------------------- */

블로그 테마 세부설정을 위한 clone theme

문제 발생

테마 스타일 커스텀을 하려 봤더니 Hexo v5 이후 방식인 npm으로 _config.icarus만 불러왔던 방식이 내 발목을 잡았다.

theme를 처음부터 다시 받아야할까?

태초마을인가 그릉가?

테마 폴더 끌어오기

그럴필욘 없고 themes 디렉토리에 테마 세부 설정을 위한 패키지만 받아오면 된다.

과거에 설정했던 테마 깃허브에 들어가서 Clone url을 받는다.

다음으로 \themes\ 경로에 $ git clone하면되지만, themes 폴더에 icarus 테마깔기에서 좋은 제안을 발견했다.

1
$ git clone --depth 1 https://github.com/ppoffice/hexo-theme-icarus.git

마지막으로 테마명을 일치시키기 위해 불러온 hexo-theme-icarus 디렉토리를 icarus로 변경해줬다.

가장 답답했던 페이지 가로축 범위 조정도 hexo icarus 테마에 커스텀 레이아웃, 스타일(css) 적용하기에서 적용법을 확인할 수 있었다.

외부링크

블로그 댓글 utterances 사용하기

utterances 세팅

utterances에 들어가서 설명을 읽어보는게 좋다.

github repo 생성

사용하기 위해 개인 github에 comment용 public repository를 생성한다.

굳이 repo를 생성하고 싶지 않다면 userID.github.io repo를 사용해도 된다.

app 설치

utterances app에 들어가서 github에 app을 설치하자.
나는 comment가 들어갈 repo인 hangack_blog_comment만 지정했다.

요소 설정하기

repo:박스에 위에서 생성한 개인 userID/repoName을 입력한다.

Blog Post ↔️ Issue Mapping 방식은 현재 상황엔 별로 중요하지 않지만 개인 세팅에 따라 반드시 특정 세팅을 지정할 필요도 있을 것이다.

  1. pathname
    • 포스트의 URI로 issue가 생성된다. URI가 바꼈을 때 문제가 될지도?
  2. URL
    • URL 기준으로 생성
  3. title
    • 포스트 제목
  4. og:title
    • open_graphic 제목
  5. Specific issue number
    • 이슈 번호를 생성해서 작성된다.
  6. specific term
    • 포스트 제목에 기입된 특정 단어를 기준으로 작성된다.

댓글 위젯 넣기

utterances에서 제안된 방식

테마 등 설정을 전부 끝냈다면 Enable Utterances 분류에 script 코드가 생겼을 것이다.

1
2
3
4
5
6
7
<script src="https://utteranc.es/client.js"
repo="userID/repoName"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>

이 코드를 post마다 넣어주면된다.

hexo의 경우엔 post.md 혹은 draft.md로 불러올 수 있겠지

hexo icarus에서

icarus에서는 utterances 타입을 지원하기에 _config.theme.yml에 comment 항목을 찾아서 아래 형식대로 기입하자.

1
2
3
4
5
6
comment:
type: utterances
repo: userID/repoName
issue_term: pathname
theme: github-light
crossorigin: anonymous

어? 안되잖아?

utterances.json 파일을 뜯어봤더니 crossorigin 요소에 대한 처리 방식이 없었다.

반면, utterances.js 파일에선 "crossorigin": "anonymous"로 기본값을 지정했기에 문제없다 판단하고 요소를 제거

1
2
3
4
5
comment:
type: utterances
repo: userID/repoName
issue_term: pathname
theme: github-light

댓글댓글단다

외부링크

hexo blog img(avatar, favicon, logo) 변경하기

Hexo 이미지 변경

hexo blog에서 사용하는 avatar, favicon, logo 등을 변경하는 방법은 간단하게 public\img 경로의 파일명을 그대로 이미지만 교체해주면 된다.

public

Hexo clean의 경우 문제점

하지만 블로그 관리 초기라 설정을 변경하거나 이미지를 교체하는 등 파일 첨삭이 있을 때마다 $ hexo clean 명령어를 남발하는데,
clean은 캐쉬 파일인 public 폴더를 통으로 삭제하는 명령어다.

그럼 캐쉬를 지울 때마다 img 내의 이미지들을 수정해줘야 한다.

난 이런 번거로운 일은 못한다.

그렇기에 $ hexo g의 작동방식을 알아야한다.
generate는 불러올 theme와 user의 config를 유지한 채, user의 source 디렉토리에서 UnderBar( _ ) 표시된 경우나 _posts같은 특수한 경우를 제외하고 public 폴더에 그대로 붙여넣는 특징이 있다.

그럼 해결법은 간단하다. source\img경로를 만들어서 원하는 파일을 _config.theme.yml에서 설정한 파일명 그대로 넣어두면 끝이다.

source

_config.theme.yml 설정 변경

경로를 수정하기 전에 각각의 이미지가 어떤 요소를 뜻하는지 알아야한다.

_config.theme.yml을 직접 뜯어보는걸 권장하지만 간단히 내가 설정한 4놈을 icarus 기준으로 설명하자면,

  • avatar: 블로그 좌측에 표시된 블로거의 아바타
  • favicon: 브라우저 열린 page 바에 표시되는 블로그 아이콘
  • logo: 블로그 상단의 대각선으로 Han-Gack
  • og_image: open_graph에 걸리는 이미지
    • open_graph: 외부 사이트에서 링크됐을 때 정보를 알려주기 위해 설정하는 옵션, 이미지 파일명이 기본값이랑 다르다면 head - open_graph 탭의 image를 설정하면 된다.

명칭에 대한 정보를 알았으니 yml 파일에서 파일명과 확장자명에 주의하며 사용할 옵션 위주로 수정하면된다.

hexo blog sidebar 트래킹과 post 개별 설정

toc

Hexo toc(Katalog) 사용하기에서 toc(Katalog)를 적용해 봤다.

sidebar sticky

하지만 sidebar가 트래킹되지 않아 불편하다.
현재 사용하는 icarus테마는 _config.theme.yml에서 다양한 옵션을 제공한다. 그 중 sidebar - left(or right) - sticky옵션이 트래킹 옵션이다.

위젯 박스를 왼쪽만 사용하고 있으니

1
2
3
4
5
sidebar:
# Left sidebar configurations
left:
# Whether the sidebar sticks to the top when page scrolls
sticky: true

로 설정하면 언제 어디서나 sidebar가 트래킹된다.

그렇다 어디서든 언제언제까지나 트래킹되는게 문제다.

원하는 방식은 특정 post를 읽을 때만 트래킹되는 방식이었으니 _config.theme.yml의 sticky 값은 다시 false로 돌려놓자.

post 개별 설정

우리에겐 scaffolds 디렉토리 내 post 기본 양식 설정과 _config.theme.yml에서 가져올 위젯 및 sidebar의 yml 양식이 있다.

그리고 이전 포스트에서 링크한 Hexo Front-matter에선

1
2
3
---

---

내부 양식이 yaml이라 한다.

넣을 코드와 코드를 넣을 공간이 준비되었고 작성한 양식을 불러올 방법도 있으니 우리는 draft.mdpost.md를 수정하기만 하면 된다.
설정 전에 작성한 포스트가 많다면..야 너두?

toc 트래킹만 사용한다면 아래 코드를 넣어주면 된다.

1
2
3
4
5
6
7
8
9
10
---
sidebar:
left:
sticky: true
widgets:
- type: toc
position: left
index: false
toc: true
---

개별 설정의 단점은 _config의 모든 설정을 불러오지는 않기 때문에 각종 옵션을 넣는다면

draft.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
---
title: {{ title }}
date: {{ date }}
categories:
-
tags:
-
sidebar:
left:
sticky: true
widgets:
- type: profile
position: left
social_links:
Github:
icon: fab fa-github
url: 'https://github.com/hangack'
Youtube:
icon: fab fa-youtube
url: 'https://www.youtube.com/channel/UCQuHrr7-mBtutw9V94XGH-g'
Twitch:
icon: fab fa-twitch
url: 'https://www.twitch.tv/hangack'
Steam:
icon: fab fa-steam
url: 'https://steamcommunity.com/id/HanGack/'
- type: toc
position: left
index: false
- type: categories
position: left
toc: true
---

Wa!

외부링크

Hexo toc(Katalog) 사용하기

Katalog? toc?

TOC: Table of contents, 목차

위키 등에서 주로 사용되는 index식 목차이며 클릭 시 해당하는 열로 이동하는 메커니즘이라 인식하면 된다.

Markdown에서 목차

html에서는 <h#>을 사용해서 목차를 표현하지만 md에서 목차 구분은 #의 개수로 한다.

기본값으로 # 1개는 post 제목 크기와 동일해, 나는 h2: ##부터 사용한다.

h4: ####부터는 기본 text 크기와 구분하기 어려우며 h5는 기본 텍스트와 크기가 같을 것이다.

h4

h4

h5

h5

h6

h6

# h7

h7

## h8

h8

테스트로 h8까지 작성해봤는데, hexo에선 h6까지만 인식한다.

toc 사용하기

Toc을 지원하는 테마를 사용한다면,
Front-matter에 toc: true를 넣어줌으로 사용할 수 있다.

1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
toc: true
---

위 Front-matter는 나의 page.md 설정값

toc 적용 확인

hexo s로 local 확인을 하거나 hexo g -d로 배포해서 toc 정상 적용되었는지 확인해본다.

TOC

icarus에서 세부 설정

icarus theme는 config에 toc type을 설정할 수 있도록 기본값이 작성되어있다.

Hexo icarus TOC default값

1
2
3
4
5
6
7
8
9
10
11
# Table of contents widget configurations
-
# Where should the widget be placed, left sidebar or right sidebar
position: left
type: toc
# Whether to show the index of each heading
index: true
# Whether to collapse sub-headings when they are out-of-view
collapsed: true
# Maximum level of headings to show (1-6)
depth: 3

position: Katalog box 위치
index: Katalog box 목차 앞에 숫자를 표현할 지 (ex: 1.2 icarus에서 세부 설정)
collapsed: 하위목차 간략화
depth: #번째 하위 목차까지 표시

*2021/11/20 기준 내 설정

1
2
3
4
5
6
7
8
9
10
11
# Table of contents widget configurations
-
# Where should the widget be placed, left sidebar or right sidebar
position: left
type: toc
# Whether to show the index of each heading
index: false
# Whether to collapse sub-headings when they are out-of-view
collapsed: false
# Maximum level of headings to show (1-6)
depth: 2

depth를 6으로 설정해주면 위에서 test한 h6까지 katalog에 표시될 것

외부링크