sammyDevLog

[Python][MAC] VSCode에서 ModuleNotFoundError: No module named 계속 발생

3sammy — Thu, 16 May 2024 01:19:18 +0900

개발 환경
- device : 2021 Macbook Pro M1 Pro 14inch (맥북프로 14 M1 Pro 모델)
- OS : macOS Ventura 13.2

에러 내용 및 상황

저는 MAC 환경에서, Python을 설치했고 VSCode에서 확장프로그램을 다운받아 사용중입니다. 디버깅이 필요해서 VSCode의 Python Debugger를 추가 다운해서 사용했는데, 계속 모듈이 없다는 에러메세지만 발생하고 있었습니다.

ModuleNotFoundError: No module named 'requests'

VSCode의 터미널에서 python3 main.py 를 하면 정상적으로 실행이 잘 되었었고, 혹시나 하는 맘에

pip install requests
pip3 install requests
pip uninstall requests → pip install requests

재설치까지 모두 해보았지만 결국 안되었습니다.

디버깅은 아래의 코드가 실행되었습니다.

/usr/bin/env /usr/local/bin/python3 /Users/{folder}/.vscode/extensions/ms-python.debugpy-2024.6.0-darwin-arm64/bundled/libs/debugpy/
adapter/../../debugpy/launcher 53409 -- main.py

원인

원인은 VSCode IDE 에서의 Python 실행 환경 버젼의 싱크가 맞지 않아서입니다. IDE의 실행 환경을 맞춰주면 됩니다.

해결

1. 터미널에서 python3 —-version 을 해서, 현재 버젼을 확인합니다.

위 처럼 version을 체크해야지, 현재 vscode에서 구동할때 사용하는 버젼을 알 수 있습니다.

저는 Python 3.9.13 이네요.

2. VSCode에서 명령어 창을 열어 아래 순서대로 구동 환경을 바꿔줍니다.

2-1. cmd + shift + P 를 눌러, 커맨드 창을 엽니다.

2-2. Python: create Environment 을 입력하여 구동 환경을 만들어줍니다.

2-3. Venv를 클릭합니다.

2-4. 1번에서 확인한 자신의 버젼과 동일한 Path를 선택합니다.

3. VSCode IDE 하단의 버젼과 일치하는지 확인합니다.

레퍼런스

https://code.visualstudio.com/docs/python/environments

Using Python Environments in Visual Studio Code

Configuring Python Environments in Visual Studio Code

code.visualstudio.com

[python] OSError: [Errno 63] File name too long 해결 Method

3sammy — Sun, 11 Jun 2023 02:16:12 +0900

⚙

개발 환경 - device : 2021 Macbook Pro M1 Pro 14inch(맥북프로 14 M1 Pro 모델) - OS : macOS Ventura 13.2

⚠️

본 포스팅은 저의 개인적 생각을 기반으로 작성되었습니다. 따라서 정답이 아닌, 에러 해결을 위한 하나의 과정으로서 참고하시길 바랍니다. *수정이 필요한 부분이 있을 경우, 댓글로 알려 주시면 수정하도록 하겠습니다

에러 내용 및 상황

zip파일의 압축을 해제하기 위해서, zip.extractall(zip_folder) 기능을 사용하고 있음

그런데 압축 폴더명도 길고, 파일명도 길어서 아래의 에러가 발생하고 있음

OSError: [Errno 63] File name too long: {파일경로}/{파일명.zip}

원인

위 에러는 python에서 파일 경로와 파일 이름이 결합하여 너무 길어지는 경우 지나치게 긴 경우 발생함

대부분의 운영 체제에서는 파일 이름의 최대 길이를 제한하고 있으며, 이를 초과하면 파일 이름이 너무 길다는 오류를 발생시킴

::결론:: 너무 긴 파일명!

해결

파일명 혹은 파일 경로를 단축하여, 길지 않게 바꿔주면 된다. 다음은 파이썬에서 해결할 수 있도록 간단하게 작성해본 기능이다.

파이썬 코드

def modify_zip_filenames(zip_file_path):
    with zipfile.ZipFile(zip_file_path, 'r') as zip_ref:
        for member in zip_ref.infolist():
            # 파일 이름이 255자를 초과하는지 확인
            if len(member.filename) > 255:
                # 파일 이름을 255자로 수정
                modified_filename = member.filename[:255]
                member.filename = modified_filename

            yield member, zip_ref

적용

def exportZip(download_dir='~/'):
    # zip 파일로 다운로드 한 경우 압축해제
    pages_zip = glob(get_dir(os.path.join(download_dir, 'Export*.zip')))
    for zip_fp in pages_zip:
        zip = zipfile.ZipFile(zip_fp)
        # 압축할 폴더 생성
        zip_folder = get_dir(os.path.join(download_dir, zip_fp.replace('.zip', '')))
        os.makedirs(zip_folder, exist_ok=True)

        # 압축 풀기
        for member, zip_ref in modify_zip_filenames(zip_fp):
            zip_ref.extract(member, zip_folder)

        # zip 파일 제거
        os.remove(zip_fp)

레퍼런스

void(0)에 대하여 + 마우스 우클릭 활성화하기

3sammy — Sun, 11 Jun 2023 01:09:21 +0900

왜 href에 `javascript:void(0)`를 사용할까?

<a href="javascript:void(0);">
	<div>
		...
	</div>
</a>

or
<a href="javascript:undefined;">Main</a>

레거시 사이트들의 소스를 살펴보면 위와 같은 형태로 a태그의 href를 처리한 경우를 볼 수 있다.

왜 a태그에 href="javascript:void(0);"를 사용했을까?

void(0)을 사용하면, undefinded가 반환된다. 즉, 위 코드는 a태그의 고유 동작인 링크 이동을 막기 위함이다.

즉, a태그에 걸어둔 공통 CSS 스타일링을 유지하며 실제 Link 이동을 방지하기 위함이라고 볼 수 있다.

하지만 위에 처럼 a태그의 리다이렉트를 막기 위해 javascript:void(0); 을 처리하게 될 경우, 어떤 문제가 발생할까?

문제 : 마우스 우클릭 액션이 막힌다

마우스 우클릭을 했을 때의 “새탭에서 링크 열기/링크 주소 복사” 기능(액션)은 모두 href의 주소를 기반으로 작동한다.

즉, a태그의 href 링크가 비어져 있어 위 동작을 했을 때. 새탭에선 about:blank#blocked 등의 링크가 열리는 불상사가 발생한다.

담당 서비스에선?

<div class="prod-list">
	<a href="javascript:void(0);" type="B">...</a>
	<a href="javascript:void(0);" type="A">...</a>
	<a href="javascript:void(0);" type="A">...</a>
</div>


// script
$(document).on("click",'.prod-list a',function (event) {
	const type = $(this).attr("type");
	if(type == 'B'){
		window.location.href = "..."
	}else{
		window.location.href = "..."
	}
	...
}

지금 내가 담당하는 서비스에선, href="javascript:void(0);"를 통해 링크 기능은 막은 뒤, 모든 a태그에 클릭 이벤트를 동적으로 부여해, 타입에 따라 링크를 바꾸는 추가적인 작업을 진행한다. (예시 코드 참조)

하지만 위와 같이 할 경우, PC에서 상품마다 우클릭 기능이 제한되어. 효율적인 쇼핑의 경험을 방해하는 요인이 된다. 따라서 마우스의 우클릭을 살리면서, 링크 변환을 수행할 수 있도록 처리가 되어야 한다.

마우스 우클릭 액션을 살리고, a태그의 리다이렉션은 막는 방법

아주 간단하게, event.preventDefault(); 처리를 통해 해결이 가능하다.

마우스 우클릭 액션을 위해, href에 필요한 링크를 삽입한다.

onclick 이벤트 내부에 event.preventDefault() 를 선언하여, a태그의 기본 동작을 막는다.

<div class="prod-list">
	<a href="/100/detail?type=B" type="B">...</a>
	<a href="/101/detail" type="A">...</a>
	<a href="/102/detail" type="A">...</a>
</div>

// script
$(document).on("click",'.prod-list a',function (event) {
	const type = $(this).attr("type");

	event.preventDefault(); // a태그의 기본동작을 방지한다

	// 이동은 아래에서
	if(type == 'B'){
		window.location.href = "..."
	}else{
		window.location.href = "..."
	}
	...
}

event.preventDefault()에 대하여

위 기능에 대해선 아래 포스팅에서 더욱 세부적으로 다뤄보겠다.

[React] useEffect와 useCallback 차이 간단 정리!

3sammy — Wed, 8 Mar 2023 01:10:36 +0900

useCallback()

useCallback(함수, [검사값]) 검사값이 변경되었을 때에만 함수를 생성하는 Hook이다.

함수를 memoize → 재사용하기 위해서 사용(랜더링 성능 최적화)

검사값에 따른 랜더링 비교
- [] : 검사값이 비어있으므로, 최초 랜더링시에만 함수를 선언하고 이후 계속 재사용한다
- [number] : number 값이 변경되었을 때에만, 함수를 다시 선언

사용 이유
- 자식 컴포넌트에게 props로 함수를 전달할 때 사용 → 자식 컴포넌트의 불필요한 랜더링을 방지
- 함수 변경이 없거나, 연산이 큰 함수를 최초에만 선언하기 위해서 사용

useEffect()

사이드 이펙트를 방지하기 위해서 사용함

상세 사례

API Fetching : 컴포넌트 내에 axios를 선언해놓았는데, 해당 컴포넌트가 부모에 의해 계속 재랜더링된다면? 불필요한 api 요청이 계속 반복됨(side effect 발생)

const [data, setData] = useState([]);

// 컴포넌트 최초 마운트시에만 실행 -> 
useEffect(() => {
  const fetchData = async () => {
    const result = await axios(
      'https://23log.tistory.com/api/v2/getPost'
    );
    setData(result.data);
  };
	// fetch 후 setDate()로 state 등록
  fetchData();
}, []);

이벤트 리스너 추가/제거 : 컴포넌트 마운트 될 때, 이벤트 추가하고. 해제될 때 이벤트 제거를 위해서

useEffect(() => {
  function handleResize() {
    // 등록하고자 하는 이벤트 등록
  }

	// 검사값배열이 [] : 최초 랜더링 시 실행
  window.addEventListener('resize', handleResize);
	// 클린업 함수 : 
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

DOM 업데이트 시 처리 등

그래서, 차이점은?

둘다 두번째 인자로 검사값(종속성 배열)을 받고 있어 비슷한 형태인데, 어떤 차이점이 있을까? 바로 위 설명처럼, 사용 목적에 그 차이점이 존재한다.

useCallback
- 콜백함수를 자식에게 전달해줄 때 사용
- 자주 렌더링 위험이 있는 요소를 성능 최적화를 위해 사용
- const onChange = useCallback(e => {...}); 이렇게 지정하고 자식에게 던진다!

useEffect
- 사이드 이펙트 방지를 위해 사용
- API 통신(data fetch), 이벤트 리스너 추가, DOM 업데이트 등
- useEffect(()=>{...}); 함수 호출을 통해, 실행한다!

다시 시작하는 맥북 셋업 - Alfred 설정 백업하기

3sammy — Fri, 3 Mar 2023 00:57:39 +0900

Alfred 설정 백업 방법

Advanced 로 접속하면, 우측 하단에 Reveal in Finder 버튼이 보인다.

해당 버튼을 누르면 폴더가 나타나는데, 거기의 Alfred.alfredpreferences 파일이 존재한다.

해당 파일을 신규 Mac으로 가져가서 동일 폴더에 덮어 씌우면 모든 설정이 그대로 백업된다!

야호!

[MAC] 업데이트 이후 오류 해결하기. xcrun: error: invalid active developer path

3sammy — Sun, 29 Jan 2023 10:01:02 +0900

⚙

개발 환경 - device : 2021 Macbook Pro M1 Pro 14inch(맥북프로 14 M1 Pro 모델) - OS : macOS Ventura 13.2

⚠️

에러 내용 및 상황

MAC OS를 기존 몬트레이에서, 벤추라로 업데이트했다. 그 후 평소처럼 git을 사용하려는데, 위와 같은 에러가 발생했다.

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools ), missing xcrun at: /Library/Developer/CommandLineTools/us/bin/xcrun

원인

맥북 OS를 업데이트하면 꼭 기존에 설치되었던 커맨드라인툴 을 인식하지 못하는 문제가 발생한다고 한다. (대다수의 유저가 겪는 현상..)

이럴 땐, 재설치가 답이다.

해결

xcode-select --install

터미널을 열고, 위의 명령어를 입력하여 CommandLineTools(command line developer tools)를 설치한다.

입력하면, 개발자 도구 팝업이 나오는데 설치를 진행한다. 보통 3~5분 정도면 설치가 끝난다.

다시 git을 실행해보면, 정상적으로 인식하는 걸 확인할 수 있다.

[후기] 로지텍 MX Master 3S 페일 그레이, 3달 후 변색에 대하여

3sammy — Fri, 25 Nov 2022 00:38:13 +0900

2023년 8월 18일에 로지텍 MX Master 3S 페일 그레이 색상을 구매했다.

로지텍 MX Master 3S 개봉기, 구매 이유와 Logi Option까지

구매 이유2년 넘게 사용했다. 옆엔 세월의 흔적 ㅎㅎ..원래 로지텍의 MX Anywhere 2 모델을 사용했다. 아마존에서 벌크로 된 제품을 저렴한 가격에 구매했었다.당시 사용한 MX Anywhere 2에서 맘에 드는 점은 아래와 같았다.손에 딱 알맞는 사이즈 : 손이 일반 남성 사이즈이긴 하지만, 마우스라는게 손 안에 딱 맞게 들어오니 컨트롤이 훨씬 쉬었다.다양한 버튼들 지원 : Anywhere 시리즈의 경우 휠이 좌우로 틸팅?

https://23log.tistory.com/180

위 글을 읽으면 알 수 있지만, 주요 구매 이유는

컴퓨터 주변 기기 브랜드 중, 단연 No.1이 로지텍!

자체 소프트웨어(Logi Option+)의 활용성 및 확장성!

3S 모델에 적용된 무소음 클릭!

이런 것들이 있고, 그 중에서도 페일 그레이(화이트) 색상으로 구매한 이유는 나의 데스크 환경이 화이트를 바탕으로 되어 있었기 때문이다.

변색 이슈?

MX Master 3S 페일 그레이 색에서 색 변색, 착색 이슈(discoloration)가 있다는 글을 구매 전에도 본 적이 있다. 아무래도 화이트 색상이다보니 사용에 따라 노랗게 착색되거나 변색되는 현상인데. 구글에서 검색하니 외국에선 꽤나 많은 이슈가 있는 것으로 보인다.

다음의 사진들은 reddit 커뮤니티 외국 사용자들의 사용 후기입니다.

https://www.reddit.com/r/logitech/comments/vxutdo/mx_master_3s_pale_gray_have_turned_yellow/

https://www.reddit.com/r/logitech/comments/wadhau/mx_master_3s_pale_gray_is_turning_yellow_due_to/

3달 사용 후, 상태

2023년 8월 18일 구매 이후, 현재 기준(11월 25일). 3달 이상 실 사용한 상태이다. 3달 동안 퇴근 후 매일 마우스를 조작하였으며, 웹서핑, 디자인 작업, 개발 작업 위주로 사용했다.

마우스를 사용한 게임(FPS류)을 하지 않아 하드하게 사용했다 말할 순 없지만, 웹서핑이나 디자인 등등 마우스 기반의 작업이 많았기에 결코 라이트하게 사용하진 않았다.

사진3) 굴곡진 부분은 그림자로 인해 어둡다

아무래도 손바닥과 가장 밀착되는 부분이 변색 이슈가 있을 것 같아, (사진3)처럼 플래시를 터트렸지만 별도의 오염이나 이염은 없었다. 지금도 처음 상태처럼 화이트에 회색 한방울 떨어뜨린 색감을 보여준다.

결론 : 3달 이상 하드하게 사용했지만, 변색 및 착색 이슈는 없었다.

후기

데스크 셋업으로 인해, 맨 처음부터 내 선택지는 페일 그레이 색상이었다. 변색 이슈를 보긴 했지만, 뽑기겠거니 하는 생각에 그냥 구매했다.

다른 지인이 MX Master 3 블랙 색상을 사용중이었는데, 3 버전의 경우 플라스틱 같은 재질로 되어 있다. 그래서 오래 사용할 경우, 검정색임에도 특유의 기름때가 묻거나 좀 맨들해지는 사용감을 보게 되었다.

하지만, MX Master 3S의 경우 겉 재질이 지우개 같은 고무 느낌? 타이어 같은 고무가 아닌 약간 맨들한 실리콘 같은 고무라고 해야하나? 그런 재질이어서 기름때가 묻거나 사용감이 드러나진 않았다. 또 사용할수록 뭔가 계속 잡고 싶어졌다.

나는 현재도 MX Master 3S 페일 그레이 색상을 구매한 것을 아주 잘한 소비라 생각한다. 무소음도 만족스럽고, 이전 Anywhere2에서 겪었던 휠씹힘도 없고, 색상도 아주 마음에 든다. (다만, 가로 스크롤은 뭔가 활용하기가 어렵다)

변색 이슈로 인해 구매가 꺼려졌던 분들이 계시다면, 이 글이 약간의 도움이 되길 바랍니다. 궁금한 사항은 댓글 달아주시면, 답글 달도록 하겠습니다 :D

[에러 리포트] 파이썬 셀레니움, ValueError: There is no such driver by url

3sammy — Sun, 13 Nov 2022 21:19:18 +0900

⚙

개발 환경 - device : 2021 Macbook Pro M1 Pro 14inch(맥북프로 14 M1 Pro 모델) - OS : macOS Monterey 12.5.1

⚠️

에러 내용 및 상황

셀레니움을 활용하여, 노션에서 티스토리로 자동 업로드를 실행하던 도중. 위와 같은 에러가 발생함.

생각해보니 크롬 웹드라이버를 설치하지 않았던 것 같아서, 내 버전에 맞는 크롬 드라이버를 설치함
- https://chromedriver.chromium.org/downloads
- M1으로 분류된 항목이 없어서, arm64로 설치

하지만 실행을 하니, 셀레니움을 로드할 때 아래의 에러가 발생함

ValueError: There is no such driver by url https://chromedriver.storage.googleapis.com/106.0.5249.61/chromedriver_mac_arm64.zip/107.0.5304.62/chromedriver_mac64_m1.zip

원인

코드상에서 from webdriver_manager.chrome import ChromeDriverManager 으로, 크롬의 웹드라이버 매니저를 import 하는데 이 때, 버젼을 받아오는 과정에서 에러가 발생함

크롬드라이버 사이트를 확인해보니,
- 이전 버전에선 chromedriver_mac64_m1.zip 의 형태로 _m1 키워드가 파일명에 포함되고 있는데
- 최신의 버전으로 갈 수록, _m1 이란 키워드가 사라지고 arm64로 대체되고 있음

에러의 url로 접속해보면, 해당 파일명의 드라이버가 없어서 에러 페이지로 연결됨을 확인할 수 있음

따라서 새롭게 올라가는 파일명 형식으로의 대응이 필요함

::결론:: 드라이버 파일명이 _arm64 로 바뀌어 업로드 되고 있으나, 웹드라이버 매니저가 이를 캐치하고 못하고 있음

추가내용

웹드라이버 매니저 webdriver-manager 는, selenium(셀레니움) 모듈의 웹드라이버 경로 지정의 번거로움을 해결해주는 하나의 모듈이다.
- 셀레니움 사용시, 크롬의 웹 드라이버 경로를 사용자가 직접 지정하고 교차 검증까지 해야 한다.
- 하지만 위 웹드라이버 매니저를 설치하게 되면, 모듈이 알아서 버젼을 탐색 → 버젼에 맞는 웹드라이버 다운로드 및 경로를 한번에 셀레니움에 넘겨주게 된다.

따라서 기존에 설치된 웹드라이버 매니저가 이전 버전이어서, 새롭게 바뀌어 올라가는 파일명에 대응하지 못하고 있었다.

해결

pip uninstall webdriver_manager
pip install git+https://github.com/SergeyPirogov/webdriver_manager@master

기존 웹드라이브 매니저를 삭제하고, 최신의 버전으로 새롭게 설치한다.

레퍼런스

https://stackoverflow.com/questions/74011776/valueerror-there-is-no-such-driver-by-url

https://github.com/SergeyPirogov/webdriver_manager/pull/445

크롬 확장 프로그램 압축 및 설치, 2가지 방법 간단 정리

3sammy — Sun, 13 Nov 2022 20:09:08 +0900

본 포스팅은 망분리 환경에서 크롬 확장 프로그램을 설치하기 위한 방법에 대해 기술하였습니다.

확장 프로그램 압축하기

<방법1> 사이트 이용 (추천 )

아래의 압축 사이트에 접속한다.
Get .CRX Chrome Extension file, it's source code and download .CRX to your computer.
Turn any Chrome extension into white box. Learn from code, debug and pentest it! Hey, stranger! Take a look at the special page Just download chrome extension!. This article uncovers a number of extremely useful Chrome Extensions to download.
https://crxextractor.com/

크롬 웹 스토어으로 이동하여, 설치하고자 하는 확장프로그램 페이지로 이동한다.
Chrome 웹 스토어
브라우저에 새로운 기능을 추가하고 인터넷 탐색 환경을 맞춤설정할 수 있는 소규모 프로그램입니다.
https://chrome.google.com/webstore/category/extensions?hl=ko

원하는 확장프로그램 페이지의 URL을 1번 사이트에 넣고, 다운로드 → GET .CRX 버튼을 눌러 다운로드를 받는다.

컴퓨터가 손상될 수 있다는 경고가 뜨지만, 계속 한다.

crx 파일을 원하는 PC로 가져간다.

끝.

<방법2> 개발자 모드 내 압축/해제 이용하기

원하는 확장프로그램을 다운로드 받아 설치한다.

chrome://version/ 으로 이동하여, 프로필 경로 확인한다.

프로필 경로의 폴더로 이동한 뒤, \Extensions 폴더로 들어간다.

확장 프로그램(chrome://extensions/) 목록에서 ID 값을 활용하여 압축하고자 하는 폴더로 이동한다.

chrome://extensions/ 에서 확장프로그램 압축 버튼 클릭한 뒤, 4번 폴더를 선택하여 확장프로그램 압축한다 → crx, pem 파일이 생성된다.

crx 파일을 원하는 PC로 가져간다.

압축/해제 방법의 경우 폴더 구조나 지정 방식에 따라 압축이 잘못되는 경우가 있습니다. 이 경우, 설치시 손상되었다며 제대로 진행이 불가하게 됩니다. 설치가 안된 파일들도, 첫번째 방법의 사이트를 이용해서 바로 압축 → 해제 하니 정상 설치되었습니다. 사이트를 이용하는 방식이 더욱 안정적이고 편리하므로, 첫 번 째 방식으로 사용을 추천드립니다!

확장 프로그램 설치하기

확장프로그램 관리로 이동한다.
chrome://extensions/

crx 파일을 드래그하여 페이지에 두면, 설치가 진행된다.

Next.js 프로젝트 셋업 하기

3sammy — Sat, 1 Oct 2022 12:37:25 +0900

Getting Started | Next.js

Welcome to the Next.js documentation! If you're new to Next.js, we recommend starting with the learn course. The interactive course with quizzes will guide you through everything you need to know to use Next.js. If you have questions about anything related to Next.js, you're always welcome to ask our community on GitHub Discussions.

https://nextjs.org/docs/getting-started

1️⃣ 설치하기

프로젝트 생성을 원하는 폴더로 이동하여, 터미널을 연다.

아래의 명령어를 입력한다.
```
npx create-next-app@latest
```

원하는 프로젝트명을 입력하면, 자동으로 생성 및 관련 라이브러리 및 디펜던시를 설치해준다.

2️⃣ 실행하기

yarn dev

vscode/터미널 에서 yarn dev 명령어를 입력하여 프로젝트를 실행한다http://localhost:3000 로 접속하면 아래 사진처럼 정상적으로 사이트가 로드됨을 확인 할 수 있다.

⌨️ 실행되는 파일은?

_app.js

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

최초엔 _app.js 파일이 실행되며, 내부에 존재하는 컴포넌트를 실행하는 형태로 되어 있습니다.

위 파일에서 글로벌 스타일(globals.css)을 정의할 수 있습니다.

next.js/_app.tsx at canary · vercel/next.js

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters You can't perform that action at this time. You signed in with another tab or window.

https://github.com/vercel/next.js/blob/canary/examples/next-forms/pages/_app.tsx

index.js

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
				...
      </main>

      <footer className={styles.footer}>
				...
      </footer>
    </div>
  )
}

이후 pages 폴더에 존재하는 index.js 파일을 랜더링합니다.

위 js파일이 정상적으로 랜더링되어 위와 같은 Welcome 페이지를 브라우저에 표시하여 줍니다.

위의 파일에서 head에 meta 태그 등을 선언할 수 있고, 이런 과정을 통해 SEO 최적화를 가능하게 해줍니다.

next.js/index.tsx at canary · vercel/next.js

https://github.com/vercel/next.js/blob/canary/examples/next-forms/pages/index.tsx

CSR, SSR에 대한 장단점 정리 (feat. SPA)

3sammy — Sat, 1 Oct 2022 12:35:12 +0900

ℹ️ SSR (Server Side Rendering)

서버 사이드 랜더링은 서버측에서 데이터를 모두 구성하여 클라이언트에게 전달해주는, 전통적인 랜더링 방식입니다. 서버에서 HTML을 모두 작성하여 브라우저에게 전달, 브라우저는 랜더링을 통해 사용자에게 보여주는 형태이죠.

☀️ 장점

검색 엔진 최적화(SEO)에 유리
- 이미 HTML 내에 모든 정보가 포함되어 있으므로, 검색엔진이 사이트를 탐색할 때 해당 정보를 가지고 올 수 있습니다.

단점

서버의 부하 증가 + 웹 로딩 속도 증가
- 웹의 정보가 많아질수록 서버에서 담당하는 처리양도 늘어나게 됩니다.
- 웹에서 모든 정보를 다 처리해서 전달하므로, 서버의 부하가 클 수록 웹 로딩 속도도 증가하게 됩니다.

사용자 경험(UX) 감소
- 새로운 페이지로 이동할 때마다 새로고침(깜빡)이 일어나게 됩니다.
- 여기에 웹 로딩 속도까지 오래걸린다면?

ℹ️ CSR (Client Side Rendering)

클라이언트 사이드 랜더링인, CSR은 말 그대로 클라이언트 측에서 모든 랜더링을 진행한다는 의미입니다.

브라우저에게 비어있는 HTML과 JS를 전달하고. JS가 실행되는 과정을 통해 서버로 부터 관련 데이터를 받아 랜더링을 진행하는 형식입니다.

☀️ 장점

최초 랜더링 이후, 필요한 부분만 서버에서 데이터를 받아오기 때문에 빠른 응답이 가능합니다.

공통적으로 사용되는 레이아웃이나 CSS, JS를 다시 다운로드 받을 필요가 없기 때문에 서버 부담이 감소합니다.

모듈화 및 컴포넌트화가 용이해집니다.
- 필요한 부분만 랜더링을 진행하는 방식이기 때문에, 컴포넌트에 대해서 독립적인 구성이 가능해집니다.
- 간편 로그인 컴포넌트를 개발한다고 했을때, 로그인 페이지 전체를 개발하는 것이 아닌. 해당 컴포넌트만 개발하여 서버로 따로 요청하는 방식으로 처리할 수 있습니다.

APP LIKE 한 경험이 가능해집니다.
- 별도의 새로고침 없이 페이지를 랜더링하기 때문에 앱과 같은 경험을 제공해줍니다.
SPA(Single Page Application)
SPA는 싱글 페이지, 즉 하나의 페이지로 구성된 어플리케이션을 의미합니다.
최초의 첫 페이지를 랜더링 한 이후, 공통 요소들(헤더, 푸터)는 유지한 채 메인 컨텐츠를 교체하는 식으로 구성하는 형태입니다. 실제 앱 처럼 구동이 가능하기 때문에 (아마도?) 20년도 이후로 크게 주목받기 시작했습니다.
해당 페이지를 구성하는 대표적인 기술로는, Vue.js, React.js 가 존재합니다.

단점

보안상의 문제가 발생할 수 있습니다.
- CSR, SPA 구조상 클라이언트 측에서 다양한 로직이 수행되는데, 만약 이 과정에서 비즈니스 로직이 노출된다면 보안상 이슈가 발생할 수 있습니다.
- 프론트엔드 상에선 비즈니스 로직을 최소화하는 것이 필요합니다.

검색 엔진 최적화(SEO)가 어렵습니다.
- 검색 엔진 BOT의 크롤링 과정에서 비어있는 HTML을 받아가기 때문에, 사이트의 정보를 실시간으로 반영하기 어렵습니다.

‍♂️ SPA으로 구성된 페이지에서 SSR 필요한 이유?

가장 대표적으론 검색 엔진 최적화(SEO)를 하기 위해서 입니다.

사용자가 사용하기 편한 UI/UX를 지닌 사이트를 만드는 것도 중요하지만, 사용자를 자신의 사이트로 불러올 수 있도록 노출시키는 것도 중요합니다. 구글/네이버 와 같은 포털에서 얼마나 잘 노출되어 새로운 유저를 끌어올 수 있느냐는, 사이트의 성패를 결정하기도 합니다.

따라서 검색 엔진 봇이 우리 사이트의 새로운 정보, 예를 들면 신규 입점 상품이라던가 신규 경제 칼럼과 같은 내용들을, 제대로 긁어가고 포털 사이트에 노출시키도록 해줘야 합니다.

따라서 Next.js 와 같은 라이브러리를 통해 SSR과 CSR의 단점을 커버하여 웹을 구성하는 것이 중요합니다.

Next.js 는 첫 페이지는 백엔드 서버에서 작업하여, 비어있는 HTML이 아닌 데이터가 존재하는 페이지를 반환하고 그 이후부턴 CSR과 같은 방식을 취하도록 하는 라이브러리입니다.

next.js 프로젝트 셋업과 최초 실행 코드에 대한 간단한 설명은? ⬇️⬇️

Next.js 프로젝트 셋업 하기

프로젝트 생성을 원하는 폴더로 이동하여, 터미널을 연다. 아래의 명령어를 입력한다. npx create-next-app@latest 원하는 프로젝트명을 입력하면, 자동으로 생성 및 관련 라이브러리 및 디펜던시를 설치해준다. vscode/터미널 에서 yarn dev 명령어를 입력하여 프로젝트를 실행한다 http://localhost:3000 로 접속하면 아래 사진처럼 정상적으로 사이트가 로드됨을 확인 할 수 있다.

https://23log.tistory.com/185

*본 포스팅은 원티드 프리온보딩 기술 챌린지 과제를 위해 작성된 글입니다.

내가 보려고 만든, 잠스트 무릎 보호대 시리즈 총정리! (테니스, 러닝 보호대 추천)

3sammy — Tue, 6 Sep 2022 00:17:31 +0900

구매하기 위해서 정리한 내용인데, 나와 같은 고민을 하고 있는 사람들이 보면 좋을 것 같아서 공유합니다. 합리적인 소비에 참고해주세요 !

인트로

원래 운동을 러닝 위주로 했는데, 최근에 등산과 테니스에 순차적으로 빠지게 되면서 점점 무릎을 혹사하는 환경에 처하게 되었다. 그러다 코로나 걸린 이후 ‘확찐자’가 되며 체중이 늘었고, 그로 인해 무릎에 부담이 더욱 가중되는 환경에서 서울 둘레길 26K를 트레일하게 되었다.

그리고 그 이후부터 왼쪽 무릎 아래가 너무 시큰거리기 시작했다 생각보다 통증이 심해졌는데, 등산은 잠깐 쉰다해도 러닝과 테니스는 계속 하고 있기 때문에, 좀 제대로 된 무릎 보호대를 장만 해야겠다 싶었다.

가볍게 사용하기 최고다!

난 이전부터 잠스트의 JK-BAND 제품 두개를 구매해서 러닝 할 때 사용했다. 이젠 라벨이 노랗게 물들 만큼 자주 또 오래동안 사용했는데, 아직까지도 벨크로 짱짱하고 고정도 잘 되는걸 보면서 이번 보호대도 잠스트로 사야겠다 맘먹었다. 아무 생각없이 쿠팡으로 보는데, 왠걸 너무 종류도 용도도 다양한 것이 아닌가..

원래 이런거 구매할 때 다 비교해보고 가장 적합한 걸 합리적으로 구매하려 하는데, 이번에도 그 심리가 발동했다.. 하나씩 정리하다 못해 표까지 만들었는데, 그 자료가 꽤 괜찮길래, 호오오옥시나 필요한 사람이 있을까봐 포스팅을 하게 된다. (정보 공유는 좋은거니까 ^-^Vv)

⚠️

저는 일반 소비자입니다. 잠스트와 아무런 연관도 없고, 쿠팡 파트너스로도 활동하지 않는, 그냥 커머스 개발자 입니다..

유튜브와 상품 설명, 후기들을 바탕으로 내용을 정리하였습니다. ’파편화된 정보를 한번에 볼 수 있구나’ 정도로 편하게 봐주시면 감사하겠습니다. 정리하는 과정에서 제 개인적 주관이나 견해가 들어갈 수 있음을 참고바랍니다.

시리즈별 비교

슬개골 폐쇄형(일체형) : 움직임이 편하며, 혈액순환이 편함
- 러닝, 마라톤 등이나 편하게 움직이는걸 선호할 경우

슬개골 오픈형(구멍형) : 슬개골 주변 움직임 제한, 무릎 고정력 좋음, 장시간 운동에 적합
- 등산, 계단 오르기, 줄넘기 등 무릎이 자주 움직이는 경우

RK-1+

잠스트 RK-1+ 모델

슬개골 폐쇄형(일체형)

무릎 외측 서포트 : 무릎 부담 완화
- 바깥 지지대

소재 : 아쿠아홀(러닝 쾌적)

추천 운동 : 러닝

쿠팡가 : 54000

무릎이 오픈되지 않은 일체형이기 때문에, 러닝이나 마라톤 등에 쾌적한 경험을 제공함. 러닝을 전문적으로 하는 분들께 추천!

JK-2

잠스트 JK-2 모델

슬개골 오픈형(구멍형)

무릎 패드 : 무릎 아래 부담 감소
- 하단
- 무릎 위 반원형 패드

소재 : 파워 더블 라셀(통기성, 착용감 좋음)

추천 운동 : 등산

쿠팡가 : 49500

무릎 패드를 통해 무릎 부담을 덜어주는 구조임. 바깥 지지대가 없으므로, 등산 등의 운동에 적합해 보임

EK-5

잠스트 EK-5 모델

슬개골 오픈형(구멍형)

액티브 경량 가드 : 좌우 흔들림 억제
- 바깥 지지대
- 무릎 좌우에 패드

대퇴 크로스 스트랩

소재 : 파워 더블 라셀(통기성, 착용감 좋음)

추천 운동 : 조깅, 등산, 테니스 등

쿠팡가 : 49500

바깥 지지대와 무릎 좌우를 잡아주는 형태임. 대퇴부 쪽 스트랩을 통해 대퇴부를 잘 잡아줌.

ZK-7

잠스트 ZK-7 모델

슬개골 오픈형(구멍형)

무릎 패드 : 무릎 안정감 향상
- 무릎 위 반원형 패드

액티브 경량 가드 : 좌우 흔들림 억제
- 바깥 지지대

X 스트랩, 병렬 스트랩 : 고정력 높음

소재 : 파워 더블 라셀(통기성, 착용감 좋음)

추천 운동 : 농구, 배구, 스노우보드 등

쿠팡가 : 84640

스트랩을 통해 고정력을 높여, 급격한 턴이 많은 스노우보드, 농구, 배드민턴, 테니스 등의 격한 운동에 적합함.

	RK 시리즈	JK 시리즈	EK 시리즈	ZK 시리즈
타입	일체형	오픈형	오픈형	오픈형
무릎 지지	X	상단, 하단	좌우	상단
좌우 흔들림	바깥 지지대 O	X	바깥 지지대 O	바깥 지지대 O
소재	아쿠아홀	파워 더블 라셀	파워 더블 라셀	파워 더블 라셀
금액	4~5만원대	4~5만원대	3~4만원대	7~8만원대
서포팅 범위	무릎 좌우	무릎 아래 위주	무릎 전체	무릎 전체
서포팅 강도	적당한 지지	적당한 고정	적당한 고정	강력한 고정
추천 운동	러닝	등산	등산, 테니스, 농구 등	농구, 테니스, 스노우보드
한줄 정리	러닝 특화	무릎 집중 보호	전천후용	격한 운동용

내 선택은?

나는 앞서 말했듯, 메인으로 가져가는 스포츠가 아래 세가지 이다.

러닝 ‍♂️
- 보통 3~7K 정도를 6분대 페이스로 러닝함.
- 운동 빈도 : 높음

등산 ⛰
- 요즘은 잘 안가는데, 1달에 1번은 가는 편. 조만간 백팩킹 도전 예정!
- 운동 빈도 : 낮음

테니스
- 매주 레슨을 받고 있으며(곧 1년차), 코트가 잡히면 경기함!
- 운동 빈도 : 보통

일단 러닝만 하는게 아니고, 테니스와 등산도 하고 있으므로 RK 시리즈는 제외하였다. 무릎이 아파서 무릎 주위 서포팅이 강한 JK 시리즈도 고민했지만, 바깥 지지대가 없는 부분이 아쉬웠다.

→ 바깥 지지대가 있을 경우 관절 주변 근육 부담을 덜어주는데, 이것이 러너들에게 좋다고 한다. (영상 참고)

이렇게 남은건 EK 시리즈와 ZK 시리즈인데, 농구나 스노우보드 처럼 회전이 격한 운동은 안하고 있으므로 전천후에 좋은 EK 시리즈로 결정했다. 그중에서도 가장 빡세게 근육을 잡아줄 수 있는 EK-5 으로 선택했다.

이제 아푸지말구 운동 열시미하자 !_!

참고자료

https://www.youtube.com/watch?v=MiAhSYK3Wv8

[MAC] 안정적인 파이썬 3.9.x 버전, M1에 설치하기

3sammy — Thu, 1 Sep 2022 21:33:28 +0900

안정적인 버전?

본인에게 필요한 버전을 설치하면 된다. 하지만 아무래도 가장 최신(Latest) 버전은 안정화가 덜 되어 있을 수 있고, 특정 에러를 맞닥뜨렸을 때 정보를 얻기도 어렵다. 따라서 한단계 낮은 마이너 버전의 최신 패치를 받으면 된다.

현재 파이썬은 10버전까지 릴리즈 되었다.

버전마다 기능이나 라이브러리는 약간 상이하겠지만, 최신 버전은 안정성이 다소 떨어질 수 있으니 바로 이전 버전인 3.9 버전의 최신으로 다운받는다.

220901 기준으로, 3.9.13 버전이 가장 최신이고 안정적인 버전이다.

Version 표기법! (v3.9.10) - 첫 째 자리, 메이저(Major) : 엄청난 변화가 생겼을 때! 이전 버전과 확연한 차이! - 둘째 자리, 마이너(Minor) : 기능에서 변화되거나 새로운 기능이 추가되었을 때! - 셋째 자리, 패치(Patch) : 사소한 변경으로, 오류나 에러 등을 해결한 경우

설치

Python Release Python 3.9.13

Release Date: May 17, 2022 Note: The release you're looking at is Python 3.9.13, a bugfix release for the legacy 3.9 series. Python 3.10 is now the latest feature release series of Python 3. Get the latest release of 3.10.x here. According to the release calendar specified in PEP 596, Python 3.9.13 is the final regular maintenance release.

https://www.python.org/downloads/release/python-3913/

하단에서 본인의 운영체제에 맞게 다운로드 한다.

M1 PRO 칩이므로, universal2 를 선택한다.

퀵하게 퀵퀵퀵! 설치한다!

터미널을 열고, python3 --version 을 하여 설치가 제대로 되었는지 확인한다.
3버젼 이하에선 그냥 python --version 을 하면 되지만, 3버젼부턴 python3 라고 명시해주자.

설치 끝!

설치가 끝났으니, 이제 원하는 파일을 실행한다.

따로 파이참과 같은 IDE는 사용하지 않으므로, 필자는 터미널에서 바로 실행했다.

pip3 install requirements.txt : txt파일로 관리되는 라이브러리 설치하기

python3 main.py : 파이썬 실행하기

옵시디언(Obsidian) 플러그인과 테마, 오프라인 설치 방법

3sammy — Thu, 25 Aug 2022 22:15:48 +0900

인트로

업무 내용 정리 및 관리를 위해, 옵시디언을 적극 활용하고자 생각했다.. 계속 마크다운(.md)으로 업무 내용을 정리했기 때문에, 마크다운 파일 기반의 관리 프로그램인 옵시디언을 도입하는데, 망설임은 없었다.

옵시디안의 장점은, 600여개에 달하는 막강한 기능의 외부 플러그인 인데, 망이 분리되어 있는 상황에서 편하게 사용이 불가능하다.

커뮤니티 플러그인이나 테마를 검색하는 과정에서 옵시디언 API가 통신을 하는데, 이때 해당 URL이 내부망에서 허용되지 않았기 때문에, fetch가 되지 않는다..

이에 따라 내부망에서도 옵시디언을 사용할 수 있도록, 오프라인 환경에서 커뮤니티 플러그인과 테마를 적용해보고자 한다.

방법

플러그인 설치 방법

외부망이 되어있는 환경(커뮤니티 플러그인에 접속이 가능한)에서 옵시디언을 켠다.

원하는 플러그인을 설치한다.

자신이 지정한 보관함(vault)의 .obsidian/plugins 폴더로 이동한다.
- .obsidian 폴더는 숨김처리 되어있다.
- MAC 유저는, cmd + shift + . 으로 숨김파일을 볼 수 있다.

해당 폴더 내에 설치한 플러그인이 각 폴더별로 생성되어 있다. 플러그인은 플러그인 폴더 내 아래의 파일들만 있으면 동작한다.
- main.ts
- style.css
- msconfig.json
  이 녀석들만 있으면, 어디든 가지고 다닐 수 있다!

폴더 통째로 압축하여, 내부망으로 가지고 간다!

unzip 한 뒤, 내부망의 보관함(vault)속 .obsidian/plugins폴더에 넣어준다.
- plugins 폴더가 없다면, 직접 생성한다.

옵시디언을 재실행하면, 커뮤니티 플러그인에 추가되어 있는 것을 볼 수 있다. 원하는 플러그인을 ON 하여 사용한다.

테마 설치 방법

옵시디언 설정 - Appearance - Themes - Manage 로 접속하여 원하는 테마를 설치한다.

{자신의 vault 주소}/.obsidian/themes 로 가보면, 테마 CSS 파일들이 존재한다.
- Manage 버튼 옆에 폴더 버튼이 있다. 이걸 눌러도 된다.

해당 CSS 파일들을 압축하여, 내부망으로 가져온다.

unzip 한 뒤, 동일 폴더에 압축을 풀어준다.
- 동일하게 themes 폴더가 없으면 생성한다.

옵시디언 재실행 후, 1번의 Manage 메뉴를 눌러보면 설치한 테마들이 표시된다.

만약 fetch를 못받아와 아무런 테마가 보이지 않는다면, 아래의 방법을 따라한다.
1. .obsidian폴더 내에 appearance.json 파일을 생성한다.
1. 아래의 내용을 적어 저장한다.
```
{
	"cssTheme" : "{3번의 CSS 파일명}"
}
```
  - 필자는 "cssTheme" : "California Coast" 테마를 적용했다.
1. 위 방법으로 하면 정상 인식되고, 이후 Manage 에서도 정상적으로 CSS 파일들을 인식한다.

끝!

마무리

옵시디언은 정말 강력한 툴이다. 마크다운을 알고있는 유저라면 사용법은 어렵진 않지만, 잘 쓰려면 많은 공부가 필요하다.

특히, 나는 옵시디언을 접하며, “두번째 뇌”와 “제텔카스텐”이란 개념도 처음으로 접하였는데, 새로운 지식 관리 방법에 머리가 띵- 했다. 이 개념들은 내 삶을 관통하는 답답함이나 의문들에 대한 하나의 구체적인 방법론을 제시하고 있었다. 아직은 어려운 개념이지만 계속 공부하고 또 방법론을 하나씩 적용해보며, 나에게 알맞는 “두번째 뇌”를 구축 해봐야겠다.

어려운 만큼 내 생활에 잘 적용하면 좋을 것 같다. 옵시디언을 통해 어제보다 오늘 더 정돈되고 단정한 삶을 살 수 있을 것 같아 좋다. 내일이 더욱 기대가 된다 :D

로지텍 MX Master 3S 개봉기, 구매 이유와 Logi Option까지

3sammy — Fri, 19 Aug 2022 01:27:21 +0900

구매 이유

2년 넘게 사용했다. 옆엔 세월의 흔적 ㅎㅎ..

원래 로지텍의 MX Anywhere 2 모델을 사용했다. 아마존에서 벌크로 된 제품을 저렴한 가격에 구매했었다.

당시 사용한 MX Anywhere 2에서 맘에 드는 점은 아래와 같았다.

손에 딱 알맞는 사이즈 : 손이 일반 남성 사이즈이긴 하지만, 마우스라는게 손 안에 딱 맞게 들어오니 컨트롤이 훨씬 쉬었다.

다양한 버튼들 지원 : Anywhere 시리즈의 경우 휠이 좌우로 틸팅? 기울이기? 가 된다. 그래서 나는 휠 좌우 기울이기를 앞/뒤 버튼으로 사용했고. 앞으로/뒤로 버튼을 원하는 대로 커스텀해서 사용했다.

버튼 커스터마이징의 편리함 : 로지텍 소프트웨어를 통해 각 버튼별로 커스터마이징이 가능하다. 근데 소프트웨어 중에 캡쳐 기능을 제공하는데, 이게 클립보드에 저장되도록 설정할 수 있어 굉장히 편리하다. 사실상 이 부분이 다시 로지텍을 선택한 이유라고 해도 무방하다.

휴대하기 좋은 사이즈 : 역시 사이즈가 작으면 이동이 간편하다. 맥북은 트랙패드가 많은 걸 커버해주지만, 포토샵 같은 작업은 마우스의 영역이긴 하다.. ㅎㅎ..

열심히 잘 사용하고 있었는데, 저번주부터 마우스의 휠이 계속 씹히는 휠 씹힘 현상이 생겼다. 이게 한 두번이면 괜찮은데, 진짜 휠을 해도 스크롤이 내려가질 않아 굉장히 답답했다..

휠 씹힘 이 현상은 Mag Scroll 휠을 탑재한 로지텍 마우스의 고질병인 부분인데, 아래로 내려가다가 위로 스크롤 방향을 빠르게 전환했을 때 주로 발생한다.

근데 난 기본 단방향 스크롤에서 휠이 씹히고 있어서 많이 불편했다.

장비 소개

제 친구 중에 마술사 친구가 있는데, 친구가 런던으로 워홀을 떠났다. 떠나기 전 친구에게 부탁받기도 했고 또 응원하는 맘으로 명함을 만들어줬다. 사실 대가 없이 한 일이라 딱 제작 비용까지만 받으려 했는데 친구가 너무 고맙다고 애플 제품을 선물해주겠다는게 아닌가?

그래서 트랙패드를 냅다 얘기했다. 왜냐면, 클램쉘 모드로 맥북을 사용중이라 트랙패드가 필요했다. 하지만 그럼에도!! 포토샵 같은 작업을 위해선 마우스가 필요하다. (난 늘 소비를 하기 위한 이유는 차고 넘친다 생각한다 )

여담) 마술사 친구의 브이로그 보고가세요!

https://www.youtube.com/watch?v=iWlgP6VHJdk

정말 멋진 친구입니다. ㅎㅎ

구매했다!

그렇게 MX MASTER 3S를 구매했다!

이전부터 MX MASTER 시리즈를 눈여겨 보고 있었는데, 쓰고있는 애니웨어가 굉장히 만족스러워서 괜찮았다. 그리고 가격도 10만원이 넘어가는게 좀 부담스럽기두 했구.

이젠 더이상 쓸 수 없는 상황인지라, 곧바로 복지포인트 받은거에 돈 보태서 구매했다. 오랜만에 테크기기 개봉이라 설렜다 ㅋ

색상은 페일그레이 색으로 했다. 데스크 셋업이 전체적으로 화이트여서 선택했다. 만족스럽다. 곱다 고와 ㅎㅎ. 그런데 찾아보니 MX Master 3S 페일 그레이 색에서 색 변색, 착색 이슈(discoloration)가 있다고 한다.. 음 걱정은 되는데 그렇다고 검정으로 살 건 아니었다. 이 부분은 사용한 뒤에 한달사용기 등으로 다시 공유해보겠다.

(추가) 실 사용 후기

3달 동안 실사용 해보았다. 과연 변색이 되었을까? 그 후기를 확인해보자!

https://23log.tistory.com/188

짧은 사용 후기

일단 무소음 클릭이 굉장히 마음에 든다. 약간 서걱서걱 거리는 느낌이어서 좋다.

휠을 굴리는 압력에 따라 변화되는 Shift 방식이 신기했다. 빠르게 굴리면 무한모드에 진입하는데 확실히 긴 문서 읽기 편리했다.

휠 씹힘의 경우.. 글쎄.. 막 엄청 부드럽게 트랙패드로 스크롤 하는 것 처럼 자연스럽진 못했다. 실제로 휠씹힘도 몇회 정도 발생했다. 지금은 스크롤 속도 조정하고 해서 좀 덜해지긴 했는데, 휠 씹힘은 여전히 있는 것 같다. (혹은 내 맥북 문제일수도 있구 )

소프트웨어 커스터마이징은 정말 최고다! 특히 크롬에선 가로 스크롤을 키보드 좌우로 설정해두었는데 유튜브나 영상 컨텐츠 볼 때 5초 이동이 간편해서 너무 좋다 ㅎㅎ

소프트웨어 다운로드 링크

Logi Options+ | 로지텍 제품용 소프트웨어 앱

제품 관리 및 커스텀을 위한 차세대 앱. 특징: 사전 정의 설정, 커스텀 버튼 구성, 신규 인터페이스, 장치 상태 정보 등

https://www.logitech.com/ko-kr/software/logi-options-plus.html

옵션 프로그램이 훨씬 좋아진 것 같다 ..

무접점 키보드 윤활 준비물과 방법, 간단 정리

3sammy — Sat, 13 Aug 2022 18:38:02 +0900

저는 한무무(한성 무접점 키보드, GK888B)와 앱코 해커 K965P V2 무접점 키보드를 가지고 있습니다. 집에서 개발할 때 입문으로 한무무를 사용했는데, 무접점에 맛이 들려 회사에서도 앱코 해커를 사용중에 있습니다 :D

이전에 키보드 윤활을 하기 위해 정리한 내용들입니다. 하지만 앱코 키보드 상하판 분리가 어려워(크랙이 너무 심해서 실패..) 결국 간편 버젼으로 윤활을 진행했었습니다

준비물

윤활제 : 키보드 타입에 따라 크라이톡스 105 or 슈퍼루브 선택
→ 앱코/한성 무접점은 노뿌타입 → 러버돔이 실리콘이라 슈퍼루브 가능
→ 토프레는 러버돔이 고무라서 크라이톡스로 해야함

그리스

납작붓

납작솔

핀셋 : 다이소에서 꺾인형태 구매 가능

잠깐! 노뿌란?
기계식 키보드에서 체리축, 카일축 이란 말을 보신적 있으신가요? 이는 해당 축을 만든 제조사 명을 따라 이름이 붙여진 경우들입니다.
이처럼 무접점 키보드 또한 노뿌(중국 noppo)와 토프레(일본 Topre)라는 회사가 대표적으로 있는 무접점 제조사입니다.
여담으로 무접점의 원조는 토프레입니다. 그리고 토프레가 생산한 대표적인 키보드의 상품명이 ‘리얼포스' 입니다. 노뿌는 중국에서 토프레의 키감을 연구하다가 만든 무접점으로, 제가 사용하는 두개의 키보드 모두 노뿌 라인입니다.
노뿌는 실리콘돔을 사용하여 만든 방식이고, 토프레는 러버돔이 고무와 다른 재질이 섞여있습니다. 이런 재질의 차이로 인해 서로 다른 키감을 가지며, 서로 다른 윤활제를 사용해야 합니다.

제가 구매한 윤활제 (슈퍼루브)

슈퍼루브 오일 펜타입

슬라이더/스프링 윤활

4,300원

슈퍼루브 그리스 튜브형

스테빌라이저 윤활

8,800원
- 85g으로 구매했는데, 12g짜리로 구매해도 충분하다..

윤활 방법

키캡을 분리한다

하우징을 분리한다
- 살짝 벌려주고 교통카드 같은걸로 눌러가며 벌려주기..

연결 선을 분리한다

기판의 나사를 제거한다

스프링을 뺀다

러버돔을 제거한다

스위치를 뽑는다

윤활 작업!

역순 조립!

윤활은 어디?

정석 방법

스프링 윤활

스프링에 솔로 크라이톡스 105 혹은 슈퍼루브 오일을 바른다.

귀찮으면 그냥 지퍼백에 크라이톡스 5~6방울 넣고 흔들고 넣는다.

스프링 윤활보다 슬라이더 윤활의 만족도가 높음.. 귀찮으면 스킵 가능

슬라이더 윤활

뽑은 슬라이더들의 원형 기둥에 붓으로 윤활제 펴바르기

귀찮으면 그냥 지퍼백 넣고 흔들기

오링 작업

오링은 슬라이더가 움직이며 하우징을 치는 소리를 미세하게 막는 역할

빨간색 오링의 경우 파란거보다 두꺼워서, 잡소리를 더 줄여줄 수 있음

간편 방법

슬라이더 윤활

키캡을 제거한 상판에서 납작붓에 오일을 코팅한다

슬라이더 옆 작은 틈새에 붓을 넣고 얇게 펴바른다.

스테빌라이저 윤활

철사의 한쪽 끝에다가 구리스 등을 바르고 플라스틱 부품에 잘 묻힌다.

참고

CAR Home / public : 네이버 블로그

https://blog.naver.com/12tuna/222268003658

ABKO K965P V2 무접점 키보드 + 풀윤활

이번 리뷰는 앱코사의 무접점 키보드 K965P V2 순정 및 윤활 리뷰입니다.그레이-베이지 배색의 실버하우...

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=diswh&logNo=221175656754

[JSP] JSP, 서블렛, EL, JSTL에 대한 개념 정리

3sammy — Sat, 13 Aug 2022 18:25:51 +0900

Spring 환경에서 개발을 해야하는데 ‘아.. 이거랑 이거 차이가 뭐였지..?’ 싶은 개념을 빠르게 적립하고 넘어가고 싶은 분들을 위해 작성하였습니다!

인트로

이전 싸피 교육 과정을 통해 Spring MVC에 대한 내용이나, 스프링 부트 등을 배웠지만, 그 이후 프로젝트에서는 프론트엔드 쪽으로 더욱 깊게 들어갔습니다.

하지만 현재 저는 Spring Framework 환경에서 업무를 하고 있습니다. 풀스택..이라 하면 부끄럽지만, 아무튼 프론트단 부터 백엔드, SQL까지 건드리고 있습니다.

업무에 빠르게 적응하고 제 역할을 하기 위해선 배웠던 내용이나 업무에 활용하는 개념들을 리마인드 및 재정립 할 필요가 있다고 생각했고, 간단하게나마 내용들을 정리했었습니다.

취업 초반에 정리한 내용들을 본 본문에서 공유하고자 합니다.

JSP와 Sevlet

JSP와 서블렛은 뗄수 없이 함께 등장하는 용어입니다.

우선 서블렛(Servlet)은 간단히 말하면 자바에서 실행하는 웹 코드입니다.
- doGet 등의 메소드를 통해 진행되며,
- out.println(”<h1>새미의 블로그</h1>”) 의 형태로 HTML 코드를 생성하고 있습니다.

반면 JSP는 HTML 코드로 작성하고, 사이사이에 자바 코드를 넣는 형식입니다.
- 기본적인 작성이나 방식은 html 파일과 동일합니다.
- 스클립틀릿(<% ~ %>) 을 통해 html 파일 내부에 자바 코드를 삽입할 수 있습니다.
```
<h1>새미의 블로그</h1>

<%
	String name = "새미";
%>
```

왜 두개로 나누어졌을까요?
- 협업에 용이합니다.
  - 기존 서블릿의 경우 Java 코드에서 작성되므로, 디자이너나 퍼블리셔가 HTML 코드를 작성하기에 어려웠습니다.
  - JSP파일로 나눠질 경우, 퍼블리셔는 JSP 파일에서 코드를 작성하고 개발자는 Back단 로직에만 집중 할 수 있어 협업에 용이하게 됩니다.
- 코드 가독성이 높아집니다.
  - Java 코드에서 HTML을 out.println() 방식으로 작성하는 것과, HTML 코드 사이에 Java 코드를 넣는 것은 차이가 크겠죠?
  - JSP를 통해 코드 가독성이 높아집니다.

이를 표로 정리하면 다음과 같습니다.
파일 형식 설명 방법 중시하는 것
Servlet .java 자바에서 작성하는 HTML 코드 out.println() Login (로직)
JSP .jsp HTML에 넣는 자바 코드 <% ~ %> Presentation (디자인, 표현)

그럼 어떻게 JSP가 실행될 수 있죠?

그 이유는 JSP Contatiner에 의해, JSP가 서블릿으로 변환되기 때문입니다.

그림이 다소 판이지만 ㅎㅎ

위의 흐름을 보면 특정 유저가 23log.tistory.com/index 으로 요청을 보냈다고 합시다. 그러면 JSP 컨테이너는 Controller가 지정한 파일(index.jsp) 파일을 찾아 읽게됩니다.

이때 index.jsp 파일 내부에 다양한 if 조건문 이나 변수 들을 사용했다면? JSP 컨테이너는 이를 우선적으로 계산하거나 할당하여 다시 하나의 파일을 생성하게 되고, 이를 바탕으로 서블릿 파일을 생성합니다.

네! 바로 java코드로 작성된 java파일을요! 그럼 이제 해당 java 파일을 읽을 수 있으므로, 자바는 컴파일한 뒤 실행하게 됩니다.

중요한 포인트는 JSP로 작성된 파일은, JSP Container에 의해 서블릿(.java) 파일로 변환되어 실행된다. 는 점입니다!

JSP 작성을 도와주는 녀석들, EL, JSTL에 대하여

EL(Expression language)

Expression language 로 JSP 2.0부터 추가된 개념

자바 빈의 속성 값을 보다 쉽게 꺼내 쓸 수 있는 도구

종류

${ } : JSP가 실행될 때 즉시 반영된다. (Immediate evaluation)
- 객체 프로퍼티 값을 꺼낼때 주로 사용
#{ }
- 시스템에서 필요하다고 판단될 때 그 값을 사용한다. (Deferred evaluation) 사용자 입력값을 객체의 프로퍼티에 담는 용도로 주로 사용

${변수명}으로 선언하여, 다양한 연산자(산술, 비교, empty)를 사용 할 수 있는 도구
- ${fn:} 등을 통해 함수 사용 가능
- HTML
  - <span>${prod.brndNm}</span> : 프론트단 노출 용도
- javascript
  - "${prod.brndNm}"
  - JS에선 “” 안에 넣어서 사용한다.

사용의 이점?

원래의 경우 리퀘스트와 세션안에 있는 데이터를 받아오기 위해, <% 스크립틀릿 %>안에서 받아오는 처리를 수행해야 한다.

// 최상단에서 값을 할당하고
<%
    Student loginMember = (Student) session.getAttribute("student");
    Student student = (Student) request.getAttribute("student");
%>

// 필요할 때 객체로서 get메소드로 호출
<input type='text' name='age' value='<%=student.getAge()%>' readonly>

// 스크립틀릿을 이용하여 작성함
<%
if(loginMember != null && "admin".equals(loginMember.getStudentNo())) {
%>
    <p><%=student.getStudentNo()%></p>
<%
    }
%>

즉, EL이 없으면 <% 스크립틀릿 %>으로 값을 가져오고, 할당하고 하는 등의 과정이 필요함

EL이 도입되면?
- 객체 할당과 같은 과정 없이, 바로 ${student.name} 만 작성하여 사용이 가능함
- <%%> 객체 할당 과정이나, <%= 변수명 %>과 같은 과정을 하나로 압축 할 수 있다.

JSTL

JSTL (Jsp Standard Tag Library)

JSTL = JSTL + EL의 조합을 의미한다.

HTML내의 스크립틀릿을 편하게 변환하여 준다.
<%= value> → ${value}
<%= if> → <c:if>
<%= for> → <c:forEach>

JSTL은 JSP페이지 내에서 java코드를 사용하지 않고 로직을 내장하는 방법을 제공한다.

사용의 이점?

스클립틀릿으로 분기 처리를 하게 되면?

<%
	if(count > 10){
%>
		<h1>횟수가 초과되었습니다.</h1>
<%
	}
%>

이를 JSTL로 표현하면?

<c:if test="${count > 10}">
		<h1>횟수가 초과되었습니다.</h1>
</c:if>

사용법

core를 header에 추가한다.

<% @taglib uri="http://java.sun.com/jstl/core" prefix="c" %>

필요한 JSP 태그를 사용한다.

<c:if test=""></c:if>
<c:forEach items=""></c:forEach>

태그명	설명
`<c:set>`	변수명에 값을 할당
`<c:out>`	값을 출력
`<c:if>`	조건식에 해당하는 블럭과 사용될 scope설정
`<c:choose>`	다른 언어의 switch와 비슷
`<c:when>`	switch문의 case에 해당
`<c:otherwise>`	switch문의 default에 해당
`<c:forEach>`	다른언어의 loop문 items 속성에 배열을 할당할 수 있음

참조

최종 정리

	설명
JSP	HTML안에 `스크립틀릿`으로 Java 코드를 넣은 파일
EL	JSP에서 객체의 값을 쉽게 뽑아주는 기능
JSTL	JSP에서 자주 사용하는 스크립틀릿을 하나의 태그로 묶은 라이브러리
Servlet	자바가 실행할 수 있는 웹 코드(.java)

과거에 간략하게나마 정리했던 내용이라, 부족한 부분이나 틀린 정보가 있을 수 있습니다. 댓글로 말씀해주시면 수정하도록 하겠습니다! :D

자바스크립트, 클릭 이벤트의 발생 대상(target) 가져오기

3sammy — Sat, 13 Aug 2022 12:45:45 +0900

하고자 하는 것

자바스크립트에서 이벤트가 어디서 발생했는지 해당 DOM을 가져오고자 합니다.

방법

이벤트 부여 방식

자바스크립트에서 이벤트를 부여하는 방식은 크게 아래 두가지가 있습니다. *바닐라 JS 기준

<a href="javascript:void(0)" id="addCart">
     <span class="cart-text">장바구니</span>
</a>

위 처럼 a태그가 선언되어 있고, 여기에 클릭 이벤트를 걸려고 합니다.

마크업 안에 onclick으로 이벤트 걸기

<a href="javascript:void(0)" id="addCart" onclick="addCart();">
     <span class="cart-text">장바구니</span>
</a>

<script>
	function addCart() {
			alert('장바구니에 담았습니다.');
			//...
	}
</script>

onclick을 통해, 해당 태그를 클릭했을 때 어떤 동작을 할지 설정하기!

DOM을 가져온 뒤, addEventListener(”click”, ...)으로 이벤트 걸기
```
let elem = document.getElementById('addCart');
elem.addEventListener("click", function(){
	alert('장바구니에 담았습니다.');
});
```
- JS를 통해 해당 DOM을 가져와 클릭 이벤트를 걸어버리는 방식!

이벤트 발생 대상 가져오기

발생 대상 역시, 위의 두가지 방법 그대로 말씀드리겠습니다.

onclick 안의 함수에 파라미터로 this 객체를 보내기
```
<a href="javascript:void(0)" id="addCart" onclick="addCart(this);">
     <span class="cart-text">장바구니</span>
</a>

<script>
	function addCart(elem) {
			console.log(elem);
	}
</script>
```
- 클릭시, a태그의 DOM 객체가 반환된다. <a href="javascript:void(0)" id="addCart" onclick="addCart(this);"><span class="cart-text">장바구니</span></a>
- 여기서 dataset이나 내부 text 등을 활용하면 된다.

addEventListener 콜백 함수에 event 파라미터 설정하기
```
let elem = document.getElementById('addCart');
elem.addEventListener("click", function(event){
		console.log(event);
});
```
- 이 경우, 클릭이 발생한 PointerEvent {…} 란 이름의 이벤트 객체가 반환된다.
- 해당 값 중, target에 불러오고자 했던, 이벤트 발생 대상 정보가 담겨있으니 innerText, dataset 등을 활용하면 된다.

왜 이렇게 사용하는데?

개인적인 견해입니다 :D 조금 더 공부 한 뒤에 새롭게 알게된 사실이 있으면 수정할게요! 다양한 의견 주시면 감사하겠습니다.

태그 내 정보나 data를 활용하기 위해서
상품 리스트가 있는 페이지에는 하나의 상품을 div 태그로 묶고 dataset을 통해 다양한 정보를 입력한 상태라고 하자. 이런 상황에서 해당 div 영역을 클릭할 때 해당 상품의 가격을 가져오고 싶다면?
이럴 땐, 해당 div마다 이벤트를 걸어놓고 this 혹은 event 객체로 가져온 div 태그의 정보를 활용하여 필요한 사항을 처리하면 된다.

하드 코딩을 줄이기 위해 (⇒ 코드 확장성)
1번의 내용과 비슷한 맥락인데 특정 함수에서 버튼마다 분기처리를 해야하는 과정에서 위와 같이 클릭 이벤트 대상 정보를 가져오지 못하면, 보내는 함수 자체가 onclick=”addCart(’delivery’)” , onclick=”addCart(’pickup’)” 처럼 특정 분기 형태를 직접 하드 코딩으로 입력하게 된다.
이렇게 되면 다른 구분값이 생기는 상황을 자동으로 커버하지 못하게 된다. 지금은 분기가 두개라 두개의 태그로 가능하지만, 만약 분기처리해야할게 늘어난다면? 입력하는 데이터도 그만큼 늘어나게 된다.

결국은 코드의 재사용성과 확장성, 가독성을 위함이다.
Why 가독성? 함수가 하는 일을 파라미터에 따라 처리되는 것이 아닌, 자바스크립트 코드단에서 처리하기 때문에 자바스크립트 문서 하나만으로 컨트롤이 가능해짐. (HTML 파일과 JS 파일을 번갈아가며 볼 필요가 줄어듦)
하나의 기능을 결정짓는, 하나의 변수가, 하나의 메소드에 존재하는 모습!

스프링 배치(Spring Batch) 간단한 정리

3sammy — Fri, 12 Aug 2022 08:01:24 +0900

업무를 진행하며 배치 프로세스에 대해 실무에서 처음으로 접하게 되었습니다. 기본적 개념이지만, 간략하게 정리한 바를 공유합니다.

스프링 배치

배치란? 데이터를 원하는 대로 가공해서 처리하는 자동화된 프로세스

배치는 일반적으로 읽기->처리->쓰기의 3단계로 이루어진다.

배치(batch) = 일괄 처리 = 큰 데이터를 한번에 처리하고 결과를 저장

배치 서비스는 다음의 특징이 존재함
- 대용량 데이터 : 배치 어플리케이션은 대량의 데이터를 가져오거나, 전달하거나, 계산 등을 처리할 수 있어야 함
- 자동화 : 사용자의 개입 없이 실행되어야 함
- 견고성, 신뢰성, 성능 ... 링크

JOB

job은 배치 처리 과정을 하나의 단위로 만들어 표현한 것

최상단 계층에 존재함

하나의 Job안에는 여러 Step(단계)가 있음

즉, 여러 Step을 포함하는 컨테이너

Job 객체를 생성하는 빌더는 여러개가 있으나, 여기선 JobBuilderFactory를 사용함

@Bean(name = JOB_ID)
public Job nameJob(
        @Qualifier(JOB_ID + ".step1") Step step1
){
    return jobBuilderFactory.get(JOB_ID)
            .start(step1)
            .build();
}

JobBuilderFactory를 통해 Job 생성을 한 뒤, Step을 주입받는다.

Step

@Bean(name = JOB_ID)
public Step nameStep1(){
    return stepBuilderFactory.get(JOB_ID + ".step1")
        .allowStartIfComplete(true)
        .tasklet(실행하려는SQL메소드)
        .build();
}

stepBuilderFactory를 통해 스텝을 생성함

배치에서 상태를 보여주는 단위로, 스텝은 잡을 구성하는 독립된 작업 단위임

스텝에는 Tasklet, Chunk 기반으로 두가지가 존재함

Tasklet

스텝이 중지될 때까지 execute를 계속 반복해서 수행함

초기화, 저장 프로시저 실행, 알림 전송과 같은 잡에서 일반적으로 사용됨

Job은 여러개의 Step으로 구성되고, Step은 Tasklet(기능)으로 구성됨

배치 작업 하나 = Job

@Bean(name = JOB_ID + ".NaverTotalEpEqlInfTasklet")
public Tasklet naverTotalEpEqlInfTasklet(){
    return new NaverTotalEpEqlInfTasklet();
}

Chunk

아이템 기반 처리에 사용된다.

참고

https://cheese10yun.github.io/spring-batch-basic/

https://juneyr.dev/2019-07-24/spring-batch-tasklet

https://joont92.github.io/spring/Spring-Batch/

생각 정리

배치란 한 마디로, 특정 주기로 자동으로 실행되는 프로그램 입니다!

언제 사용 될까요?
- 회원 탈퇴 시, 특정 데이터(주문 내역 등)를 삭제해야 한다고 가정합시다. 만약 A 회원에게 1만건의 주문이 존재한다면 이를 처리하는데 시간이 오래 걸리겠지요. 그리고 이와 같은 회원 100명이 모두 합심하여, 유저들의 접속이 활발한 저녁 7시에 탈퇴를 하게 된다면? 서버에 부하가 발생하여 서비스에 영향을 주게 되겠지요.
- 이런 상황에선 탈퇴한 유저에겐 탈퇴에 대한 상태값 혹은 탈퇴 일시만 지정을 해주어 모든 로직에서 제외처리를 시켜버리고. 실제로 데이터를 삭제하는 것은 유저들의 접속량이 적은 새벽 시간대를 활용하여 일괄적으로 처리해버린다면, 서비스적으로 더욱 안정적으로 될 것 입니다.
- 즉, 유저의 유입이 적은 새벽 2시(특정 시간)에 탈퇴 유저의 주문내역 삭제(특정 행동)를 매일(특정 주기별로) 실행해라. 와 같이 지정하는 것을 배치라고 보시면 됩니다.
실제로 유저 탈퇴시 곧바로 데이터들이 삭제됩니다

추가적으로 배치는 실무에서 많은 것들 편하게 해줍니다.
- 실시간으로 특정 데이터를 처리했을 때, 해당 처리 결과에 대한 보장이 제대로 이루어지지 않는다면? → 배치로 실패한 결과들에 대해서 재실행을 실시하여 커버를 할 수 있습니다.
- 배치는 실패 로그를 쌓을 수 있으므로, 결과에 대한 확인이 가능해집니다.

담당 업무상 배치 프로세스를 많이 다루진 않지만, 조금 더 공수가 큰 개발을 하게 되면 배치를 직접 짜볼 기회도 있을 것 같습니다. 재밌을 것 같아요

[에러] 마이바티스(Mybatis) : 요소 콘텐츠 오류

3sammy — Thu, 11 Aug 2022 23:50:16 +0900

Error creating document instance.  Cause: org.xml.sax.SAXParseException; lineNumber: 424; columnNumber: 95; 요소 콘텐츠는 올바른 형식의 문자 데이터 또는 마크업으로 구성되어야 합니다.

원인

위와 같은 오류는 MyBatis에서 <, > 부등호 사용시 발생하는 에러
```
<select id="selectGod" resultMap="resultGodDto">
	select *
	from GOD
	where GOD_PRC > 9900
</select>
```
- 마이바티스는 위와 같이 태그<select> 를 통해 쿼리를 감싸고 구성하는 마크업 형태를 취하고 있습니다.
- 이때, > 중괄호를 사용하게 되면 마이바티스가 이를 닫는 태그로 인식하게 되어 에러를 반환하게 됩니다.

해결

<![CDATA[ ]]> 를 통해 부등호를 감싸서, 괄 호자 수문문자 문자열로 처리해주면 됩니다.

예시
- <![CDATA[<=]]> : 문제가 되는 부등호만 감싸거나
- 아래처럼 전체 쿼리를 감사는 경우도 있습니다.
```
<select id="selectGod" resultMap="resultGodDto">
	<![CDATA[
		select *
		from GOD
		where GOD_PRC > 9900
	]]>
</select>
```
  - 단, 전체 쿼리를 감싸는 경우 감싼 부분 안에 <if>문 과 같이 중괄호를 사용하는 녀석이 없는지 확인하셔야 합니다!

[MAC] Crontab(크론탭)으로 파이썬을 특정 주기 자동 실행시키기

3sammy — Wed, 10 Aug 2022 10:00:38 +0900

Cron? Crontab?

크론(Cron) : 유닉스(Unix)와 리눅스(Linux) 환경에서 사용자가 설정한 시간에 특정 작업을 수행하도록 만든 명령 파일

크론탭(Crontab) : 위의 Cron이 언제 어떤 일을 하는지 설정한 파일

쉽게 생각하면 윈도우의 스케줄러같은 녀석이라 생각하면 됩니다!

만들고자 하는 것

나는 매일 저녁 10시에 티스토리로 내가 작성한 글을 자동으로 비공개 발행해주고, 매일 아침 8시에 발행한 글을 공개 발행하는 크론탭을 생성하고자 한다.

크론탭 설정 방법

크론탭 작성 방법!

본 실행은, MAC OS 에서 이루어졌습니다 *Window 사용자는, 윈도우 스케줄러를 사용하시면 됩니다.

️

본문에선 크론탭을 만들어 파이썬 코드를 실행하는 과정만 neat하게 기술하였습니다!

터미널을 연 뒤, 아래 과정을 실행한다. *필자는 zsh 를 사용했다.

crontab -e : 에디터를 통해 크론탭을 생성한다.
- 위의 명령어를 치면, vi(vim) 편집기가 실행된다.
- 만약 등록된 크론탭이 없다면 새로 파일을 만들어 주고, 있다면 편집하도록 해준다.
- 만약 등록이 안된다면, 관리자 권한으로 실행해본다. sudo crontab -e

vi 편집기에서, i 혹은 a를 눌러 작성을 시작한다.
- i : 현재 커서 위치부터 입력 시작 (이걸로 하고 키보드로 커서를 움직이면 됩니다)
- a : 현재 커서의 위치 다음 칸부터 입력

{시간 셋팅} {파이썬 경로} {실행할 파일 경로} {(선택)로그 경로} 의 형태로 작성한다.
⚠️
크론탭은 공백을 기준으로 구분되며, 한 줄엔 하나의 명령어(cron job, 행동)만 입력해야 한다. # 는 vi 편집기에서 사용하는 주석이다!
- {시간 셋팅} = {분} {시} {일} {월} {요일}
```
*/3 * * * * : 매일 3분 간격으로 실행
*/10 * * * * : 매일 10분 간격으로 실행 (00:10, 00:20, 00:30 ..)
30 10 * * * : 매일 오전 10시 30분마다 실행
```
  - 크론탭을 생성해주는 사이트를 활용하여, 크론탭 주기를 설정하면 편하다. [바로가기]
    Crontab(크론탭), Spring 스케줄러 Cron 생성 사이트 모음
    크론탭 구루는, 간결한 UI로 크론탭 주기를 생성해주는 사이트입니다. 크론메이커는 크론탭 → 의도으로 가는 흐름이 아닌, 의도 → 크론탭을 생성해주는 방식입니다. 해당 사이트는 MAC의 crontab이 아닌, Spring 스케쥴러에서 활용되는 형식입니다. Spring 스케줄러에서 Cron을 사용하셔야 하는 분들이 있다면, 참고하시면 좋을 것 같습니다. 각 영역 별로 구분자가 무엇을 의미하는지도 나와있어서, 익히며 만들기에도 좋습니다.
    https://23log.tistory.com/172
- {파이썬 경로}
  - 절대 경로로 입력한다.
  - 터미널에 which python3 를 입력하여, 경로를 반환받아 활용한다.
- {실행할 파일 경로}
  - 절대 경로로 입력한다.
- {로그 경로 2>&1}
```
> {저장할 로그파일 경로} 2>&1

# > : 하나의 로그를 갱신하여 기록
# >> : 계속 파일을 생성하며 누적할 경우
```
  - 저는 하루에 2번 실행되는 결과를 확인하기 위해, >> 계속 누적되는 형식으로 하고자 하였습니다.
  - 파일명을 log_`date +\%Y\%m\%d`_`date +\%H\%M\%S`.log 으로 설정하였고, log_20220809_231800.log 이런 형식의 로그 파일이 생성되었습니다.

테스트를 위해, 아래처럼 크론탭을 생성하였다.

#테스트 크론탭(10분 간격으로 실행 테스트)
10 * * * * /Users/jacob/opt/anaconda3/bin/python3 /Users/jacob/{경로}/main.py >> /Users/jacob/{경로}/logs/log_`date +\%Y\%m\%d`_`date +\%H\%M\%S`.log 2>&1
# {시간 셋팅} {파이썬 경로} {실행할 파일 경로} >> {로그 경로/로그명.log 2>&1}

작성을 완료한 이후, vi 편집기를 저장하여 빠져나와야 한다.
1. esc 키를 눌러, 편집 모드에서 나온다.
1. :wq 를 입력하여, 저장 후 나온다.

crontab -l : 등록되어 있는 크론탭 리스트를 확인해본다.

지정한 시간이 되면 동작한다. 로그까지 확인해보자.

실전! 상황에 맞추어 작성하기

나는 매일 저녁 10시에 티스토리로 내가 작성한 글을 자동으로 비공개 발행해주고, 매일 아침 8시에 발행한 글을 공개 발행하는 크론탭을 생성하고자 한다.
- 매일 22시에 main.py 실행 → 0 22 * * * 매일 08시에 main.py 실행 → 0 8 * * *

#매일 08시에 티스토리 비공개 발행
0 8 * * * /Users/jacob/opt/anaconda3/bin/python3 /Users/jacob/{경로}/main.py >> /Users/jacob/{경로}/logs/log_`date +\%Y\%m\%d`_`date +\%H\%M\%S`.log 2>&1

#매일 22시에 티스토리 공개 발행
0 22 * * * /Users/jacob/opt/anaconda3/bin/python3 /Users/jacob/{경로}/main.py >> /Users/jacob/{경로}/logs/log_`date +\%Y\%m\%d`_`date +\%H\%M\%S`.log 2>&1

로그를 확인해보면 파이썬 실행 결과가 적혀있음을 확인 할 수 있다! 만세!

에러 정리

로그에서, Permission denied 가 나온 경우

로그에서, Operation not permitted 가 나온 경우

파이썬 모듈을 찾지 못하는 경우 ModuleNotFoundError

[MAC] Crontab 오류 정리(Operation not permitted, Permission denied)

case1 오류가 발생했다면, case2까지 설정해주어야 크론탭이 정상 동작합니다! :D case1) Permission denied 발생 원인 : 해당 파일의 실행 권한이 없기 때문! 사람이 아닌 컴퓨터가 파일을 실행시키는 것이기..

https://23log.tistory.com/171

모두 위 포스팅으로 정리해두었습니다! :D

회고

이커머스 업무를 하다보면, 다양한 프로세스 등을 보게 됩니다. 그때 스프링 배치를 처음 보게 되어, 호기심에 이것저것 살펴보다 처음으로 Cron 이란 것을 알게되었습니다. 주로 프론트엔드 단을 맡고 있어서, 직접 배치를 짜거나 스켸줄러를 설정하거나 하진 않았는데. 파이썬 자동 실행 환경을 구성하다가 그때 보았던 크론을 쓰게 될 줄은 몰랐습니다.. 그런데 막상 하나씩 찾아가며 해보니 너무 재밌는 경험이네요. 역시, 사람은 경험을 해봐야 하는 것 같습니다

크론이 어떻게 구성되는지 기본 원리나 설정 방식을 이해하고, 빠르게 크론탭 생성 사이트를 활용해서 내가 원하는 것을 만들어내서 시간을 많이 절약할 수 있었습니다. 역시 새로운 것을 활용할 땐, 기본 개념을 이해하고, 내가 원하는 것을 찾아내어 빠르게 적용하는 방식 을 취하는게 효율적이라는 생각을 하며, 오늘을 마무리합니다!

참고

https://great-developer.tistory.com/218

https://f-dever-error-log.tistory.com/29

https://miniweb4u.tistory.com/147

https://velog.io/@jay2u8809/Crontab크론탭-시간-설정

https://happist.com/553442/서버에서-자동-실행을-가능케-해주는-crontab크론탭-설정

Crontab(크론탭), Spring 스케줄러 Cron 생성 사이트 모음

3sammy — Wed, 10 Aug 2022 00:20:04 +0900

crontab.guru

Crontab.guru - The cron schedule expression editor

The quick and simple editor for cron schedule expressions by Cronitor We created Cronitor because cron itself can't alert you if your jobs fail or never start. Cronitor is easy to integrate and provides you with instant alerts when things go wrong. Learn more about cron job monitoring.

https://crontab.guru/

크론탭 구루는, 간결한 UI로 크론탭 주기를 생성해주는 사이트입니다.

각 영역 별로 구분자가 무엇을 의미하는지도 나와있어서, 익히며 만들기에도 좋습니다.

자신이 설정한 크론탭 주기가 언제인지 문장으로 보여주며 그 밑에 next 텍스트를 누르면, 어떤 주기로 실행되는지 예시까지 보여주고 있어, 이해가 수월합니다.

재밌는 점은, 크론탭에 커서를 찍으면 해당 부분이 문장에서 어디인지 보여준다는 점입니다.

CronMaker

CronMaker is a simple application which helps you to build cron expressions. CronMaker uses Quartz open source scheduler. Generated expressions are based on Quartz cron format. For your feedback send email to cronmaker@cronitor.io

http://www.cronmaker.com/?0

크론메이커는 크론탭 → 의도으로 가는 흐름이 아닌, 의도 → 크론탭을 생성해주는 방식입니다.

해당 사이트는 MAC의 crontab이 아닌, Spring 스케쥴러에서 활용되는 형식입니다.

자세히는 모르지만 … - crontab.guru : 5자리 크론탭 생성, 리눅스 환경(mac)에서 사용 - CronMaker : 7자리 크론탭 생성, 스프링 스케쥴러에서 사용

Spring 스케줄러에서 Cron을 사용하셔야 하는 분들이 있다면, 참고하시면 좋을 것 같습니다.

출처 : https://madplay.github.io/post/a-guide-to-cron-expression

맥에서 파이썬 코드를 자동으로 실행하는 자동화 환경을 만들다가, 크론탭 사이트 정리하는 글까지 오게 되었네요.. 프론트엔드 쪽에 관심이 많아 직접적으로 크론을 활용할 일은 많지 않지만, 새로운 지식을 배우고 정리하는 일은 역시 재밌네요!

[MAC] Crontab 오류 정리(Operation not permitted, Permission denied)

3sammy — Tue, 9 Aug 2022 23:15:42 +0900

case1 오류가 발생했나요? 그렇다면 case2까지 체크하셔서 설정해주셔야지 크론탭이 정상 동작합니다! :D

case1) `Permission denied` 발생

원인 : 해당 파일의 실행 권한이 없기 때문!
- 사람이 아닌 컴퓨터가 파일을 실행시키는 것이기 때문에, 해당 파일에 대한 실행 권한을 허가해주어야 합니다.

해결 : 터미널에서 chmod +x {경로/파일.py} 을 실행하기
- chmod +x 명령어를 실행하여, 권한을 부여하기 (터미널에서 실행하면 됩니다)
```
# 해결
chmod +x /users/main.py

# 실행시, 별도 응답은 없습니다 ^^;
```
chmod +x {경로/파일} 컴퓨터에게 {경로}에 있는 파일 접근 권한을 부여하는 명령어

case2) `Operation not permitted` 발생

원인 : cron 어플리케이션이 disc에 접근하는 권한을 부여하지 않았기 때문!

해결 : 아래의 과정을 따라간다.
1. 맥북의 시스템 환경설정 → 보안 및 개인 정보 보호 → 개인 정보 보호 을 연다
1. 좌측 리스트 중 전체 디스크 접근 권한 을 선택한 뒤, 좌측 하단 자물쇠를 눌러 권한 부여를 선택한다.
1. 우측 리스트 밑 + 버튼을 눌러, cron을 추가해주면 된다.
1. 열기 창이 뜨면, cmd + shift + G 를 눌러 경로를 아래로 이동해주어 크론을 열어준다. *경로 : /usr/sbin/cron
1. 리스트에 정상적으로 크론이 등록되었다면, 다시 자물쇠를 눌러 잠궈준다.
1. 끝!

case3) 파이썬 모듈을 찾지 못하는 경우 `ModuleNotFoundError`

에러 상세

Traceback (most recent call last):
  File "/Users/.../main.py", line 2, in <module>
    from clients.SeleniumClient import SeleniumClient
  File "/Users/.../main.py", line 4, in <module>
    from webdriver_manager.chrome import ChromeDriverManager
ModuleNotFoundError: No module named 'webdriver_manager'

자세한 원인은 모르나, 파이썬 실행 환경이 차이가 있어 발생하는 오류라고 생각했다.
- 맥에서 파이썬 검색시, python3 python3.10 등등 다양한 패키지가 설치되어 있었다.
- 저는 다른 글을 보고 /usr/local/bin/python3 을 입력했는데, 찾아보니 해당 파일은 python3.10 의 바로가기 사본이었습니다.
- 실제 파이썬 코드를 실행했던 환경은 python3 였고, 해당 위치를 터미널에서 which 키워드로 조회해본 결과 다른 경로였습니다.

python3 환경에서 실행에 필요한 모듈들을 설치했었는데, 다른 파이썬 버젼으로 실행하다 보니 모듈을 찾지 못하는 것이라 생각합니다.

다시 제대로된 환경으로 경로를 바꾸니 정상 실행되었습니다!

# 3의 배수마다(3,6,9,12 ...) 실행되는 크론탭
*/3 * * * * /Users/jacob/opt/anaconda3/bin/python3 {경로}/main.py

베링거(behringer) MPA40BT-PRO 전원이 안들어올때, 배터리 교체 방법

3sammy — Sun, 7 Aug 2022 09:25:12 +0900

인트로

아버지께서 베링거(behringer) MPA40BT-PRO 모델을 사용하고 계시는데, 전원이 들어오지 않았다. A/S 센터에 문의해보니 배터리가 방전되서 그렇다고 ESH 5-12 로케트 배터리 를 구매하여 변경하면 된다고 답변이 왔다.

쿠팡에서 배송비 포함하여 18,500원 에 가장 저렴하게 판매중이라 구매했다.

https://www.coupang.com/vp/products/35840966?vendorItemId=3280484929&sourceType=MyCoupang_my_orders_list_product_title&isAddedCart=

배터리 교체 방법

아래의 판 부분의 나사를 제거하고 뜯으면, 기존 배터리가 보인다.

이미 바꾼 후에, ‘아 글써야하는데!’ 라고 생각되어 사진상에선 교체 후 배터리가 있습니다..;;

손톱으로 하면 들릴 수 있다.. 일자드라이버 처럼 얇은 걸로 뜯어내길 추천한다.

배터리를 조심히 위로 들어올리면, 뒤엔 전원선이 있다. 또, 배터리는 검정색 케이스?에 쌓여있다.

배터리 교체를 위해 저 케이스의 옆면을 들어올려 열어줘야 한다.

기존에 있던 연결선을 제거한다.

세게 물려있으므로, 일자드라이버로 사이에 틈을 만들어서 꺼냈다.

추천하는 방법은 아닙니다. 더 좋은 방법이 있다면 댓글로 알려주세요.

그렇게 꺼낸 기존 배터리..

늘 그렇듯, 조립은 분해의 역순이다. 다시 로케트 배터리의 연결부분에 전선 색에 맞게 끼운 뒤 헐렁한 연결 부위를 롱노즈/뺀찌를 통해 눌러 다시 연결시킨다.

다시 배터리를 끼우게 되면, 공간이 타이트해서 왠만한 움직임에는 빠지거나 하지 않는다. 어느정도만 고정시켜도 괜찮다.

그 후에 전원을 연결해보면 배터리 상태 부분에 정상적으로 불이 들어오는 것을 확인 할 수 있다.

고장 이유

위 배터리는 연축전지이다. 아래의 경우에 배터리 수명이 단축될 수 있으니 유의하자.

일정 전압 이하로 과도하게 방전 시킬 경우, 배터리 수명이 단축된다.

과충전 시, 배터리 수명이 단축된다.

방전된 배터리를 오래 방치하면, 충전이 잘 안되며 성능 및 수명이 매우 저하된다. 방전된 배터리는 바로 보충전을 한 후에 보관하거나 사용해야 한다.

납축전지의 특성

자동차의 제너레이터는 보통 약 13.7V∼14.2V 정도의 전기를 발전시켜 배터리에 충전을 합니다. 그러나 이 장치에서 이상이 발생하여 과도한 전기가 배터리에 공급되는 경우에는 과충전 상태가 됩니다. 과충전이 되면 전해액 내 물이 전기분해가 일어나 급격히 감소되고 배터리의 수명이 단축됩니다 .

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=stable00&logNo=221514290019

설명은 여길 참고했다.

티스토리 API 토큰 발급받기

3sammy — Sun, 7 Aug 2022 02:08:35 +0900

API 등록하기

아래 링크로 접속 후, 계정 정보를 입력합니다.

TISTORY

나를 표현하는 블로그를 만들어보세요.

https://www.tistory.com/guide/api/manage/register

서비스명 : 프로그램명

설명

로고등록 : 생략 가능

서비스 URL : 자신의 블로그 링크로 기입 (https)

CallBack : API 사용 토큰을 발급받는 용도, 서비스 URL과 같은 링크로 작성

그 후 등록을 누르면, APP ID Secret Key 가 발급되어 있는 것을 볼 수 있다.

Access Token 발급 받기

티스토리 오픈 API에선 Authentication Code 방식을 통해 토큰을 발급받고록 하고 있다.

소개

https://tistory.github.io/document-tistory-apis/

아래 정보를 입력하여, URL을 완성한다.
```
https://www.tistory.com/oauth/authorize?
  client_id={발급받은 APP ID}
  &redirect_uri={서비스 URL=자신의 블로그 주소}
  &response_type=code
```
- 만약, 아래와 같이 URL이 반환되었다면 오픈 API 앱관리에 들어가 서비스 URL이 동일한지 확인해보자. 필자는 서비스 URL에 https://23log.tistory.com/ 마지막이 / 가 되어 있었다..
  - ?error=invalid_request&error_description=Maybe_redirect_uri_was_mismatched

인증 방식을 허가한다.
- 정상 접속 되었다면, 다음 화면이 표시되는데 허가하기를 누른다.

그럼 자신의 서비스 URL로 이동하며, 브라우저 창에 code가 나타나게 된다.
https://23log.tistory.com/?code=코드어쩌구저쩌구...state={state-param}
해당 코드를 복사한다.

4. 이제 Access Token을 발급받기 위해 아래 URL을 채워 보낸다.

https://www.tistory.com/oauth/access_token?
  client_id={발급 받은 APP ID}
  &client_secret={발급 받은 Secret Key}
  &redirect_uri={자신의 블로그 주소}
  &code={위에서 받은 code}
  &grant_type=authorization_code

크롬 개발자 도구를 열어, 네트워크 탭으로 이동한다.

그 후 위 URL로 접속하면 응답값을 확인할 수 있다.

만약 Check_the_callback_request_parameters 이라는 항목이 응답으로 오면,
- 4번의 URL을 잘못 입력했을 경우거나
- 혹은 코드가 달라진 경우인데, 2번을 다시 시도해서 코드를 새로 발급받아 시도한다.

응답값의 Access Token을 활용한다!

[jQuery] $(function(){}) 란?

3sammy — Tue, 15 Mar 2022 23:38:22 +0900

결론

$(function(){
	...
})

// 위/아래는 같은 의미이다.

$(document).ready(function(){
	...
})

즉시실행 함수 앞에 제이쿼리 표시 구분자인 $가 있다면, document.ready를 축약적으로 적은 것이다.

사용 이유

페이지에서 document.ready의 사용빈도는 높은 편인데, 이를 간결하게 쓰기 위해서 축약형을 사용한다.

왜 사용빈도가 높냐면,

window.onload의 경우 여러번 선언되어도 단 한번만 인식되지만, document.ready는 여러번 선언되면 그거만큼 여러번 실행되기 때문에 위험도가 적은 편이다.

또한 JSP 특성상 공통 컴포넌트에 대해 include 처리를 많이 하게 되는데, 그 과정에서 페이지의 계층 구조를 명확히 파악하지 못하면 onload를 두번 써버리는 불상사가 발생할 수 있다.

window.onload : CSS,JS,이미지리소스 등 모든 요소가 올려진 다음에 실행됨
document.ready : 브라우저가 DOM 트리를 생성한 직후에 실행됨
*추후 자세히 다루겠습니다.

주의 할 것!

// 이건 그냥 즉시실행함수
(function(){
	...
});

// 이게 document.ready 축약형
$(function(){
	...
})

바로 구조가 즉시 실행 함수와 굉장히 유사하다는 점이다.

랜선(RJ45) 테스트기 사용 방법 (간략 정리 주의)

3sammy — Sun, 13 Feb 2022 23:34:12 +0900

인트로가 좀 길어요, 위에서 바로 사용방법을 누르세요

인트로

이전 게시글을 보면 알겠지만, 저는 현재 아래층의 랜 케이블을 연결해서 사용을 하고 있습니다.

공유기 2대로 멀티 Wifi 만들기 (공유기 허브 AP 모드)

공유기 허브모드, AP모드라고 검색하면 더욱 상세한 포스팅이 나온다. 여기선 필자가 겪은 상황에 대해서만 쓰고 추후 포스팅을 통해 상세히 다루겠다. 하려는 것과 준비물 하려는 것 : 랜

23log.tistory.com

이 과정에서 5층에서 가져온 랜선을 연결하기 위해 창문용 랜케이블 브릿지를 사용하고 있었습니다. 하지만 최근 간헐적으로 인터넷이 끊기는 문제가 발생했습니다. 처음엔 서브 공유기 AP 허브 모드가 풀려있어서 그런가 보다 했는데, 그 이후에도 계속 장기간 사용을 하지 않으면 네트워크가 맘대로 끊기는 (IP 할당이 이상한) 현상이 발생했습니다.

요 제품!

아무래도 위 제품(창문형 브릿지)의 영향이 있다고 생각했습니다. 왜냐면, 한쪽 면의 입구가 밖 창문에 있었거든요. 나름대로 플라스틱 컵으로 덮어 먼지를 막아보겠다 했지만, 그렇게 쉽게 되진 않겠죠.. 음. 네트워크 대공사가 필요한 순간이었습니다.

참고로 현재 메인 공유기 <-> 랜선 <-> 창문형 브릿지 <-> 랜선 <-> 서브 공유기 <-> 맥북 의 형태로 연결되어 있습니다. 총 3단계를 거쳐 들어오고 있습니다.

구매처

구매는 쿠팡으로 했습니다. 당장 할 수 있는 환경이 주어지고, 생각이 끓어오른다면 바로 실행하는 편이라 로켓배송이 필요했습니다.

쿠팡에서 로켓이 가능한 랜선 테스트기 중 가장 저렴한 녀석으로 구매했습니다. 한 4,700원 정도였던 것 같습니다.

사용 방법

왼쪽(커다란) 녀석이 마스터, 오른쪽(얇은) 녀석이 리모트/슬레이브 입니다.

건전지는 마스터 부분에 9V 전지를 끼우면 됩니다.

사용방법은 무척 간단합니다.

테스트하려는 랜 케이블을 마스터의 우측에다가, 슬레이브 위쪽에 꽂으면 됩니다.

마스터는 (좌측부터) 전화선/인터넷선(랜선)
슬레이브는 위쪽이 인터넷선/ 아래가 전화선 입니다.

위 처럼 꽂고 전원 버튼을 ON으로 두면 1번부터 빠르게 점멸하며 테스트를 시작합니다.

버튼 설명
ON : 빠르게 점멸하며 테스트
S : 느리게 점멸하는 모드, 어느 라인이 안되는지 확실히 확인하고자 할 때

랜케이블을 다이렉트로 구성하였다면, 1 ➡️ 2 ➡️ 3 ➡️ 4 ➡️ 5 ➡️ 6 ➡️ 7 ➡️ 8 순서대로 점멸하며 내려옵니다.

이 과정에서 잘못된 라인, 혹은 제대로 랜 커넥터가 연결되지 않다면 특정 라인의 불이 들어오지 않을 것입니다. 이렇게 하면 손쉽게 현재 랜선이 정상인지를 확인 할 수 있습니다.

만약 크로스 케이블로 구성하였다면, 3 ➡️ 6 ➡️ 1 ➡️ 4 ➡️ 5 ➡️ 2 ➡️ 7 ➡️ 8 번이 순서대로 점멸할 것입니다
(크로스로 구성하지 못해 확인은 못했습니다 ..)
(추후 확인하여 수정할게요!)

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

실제로 정상적인 랜선 두개와 창문형 브릿지를 연결해서 테스트를 해보니 5번 라인에서 불이 들어오지 않는 것을 확인했습니다.

브릿지가 문제일 것이라고 추측만 했는데, 실제로 문제가 있는 걸 확인하니 묘한 쾌감을 느꼈네요..

이용 후기

1. 진즉 살 껄!

맨 처음 이런 네트워크를 구축한게 2년전이었습니다.. 그땐 맥북을 들고 왔다갔다 하며 실제 공유기에서 내 맥북까지 제대로 쏴주는지만 확인했습니다.. 이번에도 그 과정을 또 하려니 정신이 아득해져서 알아본건데, 금액이 이렇게 저렴할 줄은 몰랐습니다..

그래, 그 때는 경험은 없었고 패기는 넘쳤지. 지금은 시간은 없고 잔머리(노하우)가 늘은 거고..

아무튼 5층과 6층을 왔다갔다 하는건 똑같지만, 적어도 터미널에서 ping을 계속 날릴 필요는 없어졌다는게 큰 장점이었습니다. 직관적이었고 너무 편했습니다. 그리고 가벼웠어요..

2. 또 만났네?

통신 소대장으로 복무하며 저 랜 테스터기를 많이 보았습니다. 하지만 네트워크반이 아니라서 직접 해당 장비를 조작할 기회는 없었습니다. 그러다가 전역한 후에 저 장비를 보게 될 줄은 몰랐네요.. 감회가 새롭다 해야할까요..

지금 생각하면 통신 소대장으로 복무한 경험은 참 좋은 것 같습니다. 통신 장비가 안될 때, 조작부/케이블/장비 까지 순차적으로 테스트하며 원인을 찾아가는 방식을 몸소 체득할 수 있었으니까요. 확실하게 가능한 변수들을 찾아놓고, 완벽하게 통제 가능한 환경에서 테스트 하는 일들을 계속 하다보니 지금도 자연스럽게 습관화 된 것 같습니다. 그리고 이런 습관들은 직장에서 개발 업무를 할 때 큰 도움이 되고 있는 걸 보면, 참 삶은 모르는 것 같아요. 앞으로도 다양하게 부딪혀 보아야겠어요.

왜 랜 테스터기 사용 방법을 설명하다 이런 결론에 도달했는지는 모르겠지만, 아무튼 오늘도 블로깅 끝!

방 리모델링 끝나고, 현재 개발 업무건 끝나면 다양한 포스팅으로 올게요!

...args / 스프레드 변수 / 확산 매개변수 / 나머지 매개변수에 대하여

3sammy — Wed, 2 Feb 2022 02:43:45 +0900

인트로

다른 사람의 Javascript 코드를 보다보면 매개변수로 들어오는 ...args를 자주 볼 것이다.
과연, ... 이 무엇일까?

용어의 다른 이름은?

function sum(...args){
    ...
}

먼저 위 코드처럼 매개변수의 위치에 존재하고 있다. 따라서, 아래처럼 여러가지 이름으로 불리고 있다.
우선 여기선 확산 매개변수 라고 부르겠다.

확산 매개변수
나머지 매개변수
스프레드 변수
(외국) ...
(외국) three dots

정의

확산 매개변수는 자바스크립트의 함수 선언의 매개변수에서 활용되는 개념이다. ES6에서 추가된 문법으로 ... 을 사용하여 매개변수로 들어오는 변수의 나머지 값들을 받아오게 하는 기능이다.

... 은 확산 연산자 / 스프레드 연산자 이다.
이는 배열의 나머지 값들을 손쉽게 받아오는 기능으로 ES6에서 추가되었다.
이를 함수의 매개변수 부분에 선언하면 손쉽게 함수를 확장 할 수 있는 확산 매개변수의 기능을 할 수 있게 된다.

사용법

함수의 매개변수 부분에서 ... 을 선언하여 나머지로 인입되는 매개변수를 받으면 된다.

function getGrade(a,b,c ...args){
    ...
}

getGrade(10,20,30,40,50);
// 위 처럼 실행할 경우, 10, 20, 30은 정상적으로 a,b,c라는 변수명으로 맵핑된다.
// 나머지 추가적으로 들어오는 40, 50은 나머지로 취급되어 args 객체 안으로 들어간다.

args 는 배열처럼 사용 가능한 객체 이다.
...args 는 매개변수의 맨 마지막에 쓴다.

매개변수에서 ...args 는 하나만 존재해야 한다.

function getGrade(a, b, c, d, e, ...agrs){}; // [O]
function getGrade(...args1, ...args2, ...args3){}; // [X]

넌 왜 사용했는데?

이번에 외부 스크립트를 삽입하는 개발건을 진행중에 있다. 이 과정에서 코드의 직관성을 높이고 함수의 재사용성을 높이기 위해 다양한 방법을 고민했다.

그리고 자바스크립트에서 함수를 여러가지 방면으로 활용하는 방식을 고민했다. 자바에서는 메소드 오버로딩 을 통해 하나의 함수명을 다방면으로 쓸 수 있는데, 자바스크립트에선 이를 지원하지 않는다.

자바스크립트 함수는 매개변수에 따라 다르게 활용될까?

인트로 자바 Java의 OOP 개념 중에 메소드 오버로딩 Method Overloading 이 있다. 이는 메소드가 동일 이름을 가지고 있어도, 들어가는 매개변수가 다르면 다르게 인식된다는 의미이다. pulbic int getGrade(){

23log.tistory.com

위 글 처럼, 자바스크립트는 매개변수에 따라 다르게 활용되지 않는다 그렇담 함수를 다양하게 사용하려면 어떻게 해야할까?

바로 이 궁금증에서 시작해서 확산 매개변수를 찾아보게 되었고, 관련된 함수를 작성하게 되었다.

확산 매개변수의 사용법

function printAll(arr){
  for(let i = 0; i < arr.length; i++){
      console.log(arr[i]);
  }
}

function getText(a,b, ...args){
    console.log('첫번째 매개변수 : ' + a);
    console.log('두번째 매개변수 : ' + b);
      printAll(...args);
}

getText(10, 20, [1,2,3,4,5]);

// 첫번째 매개변수 : 10
// 두번째 매개변수 : 20
// 1
// 2
// 3
// 4
// 5

만약 args로 들어왔다고 해서 args 만 쓴다면 이는 객체로 인식한다.
- 따라서, 위 상황에서 printAll(args)를 했다면, 그냥 객체 1개, 매개변수 1개를 입력한 상황이 된다.
- typeOf(args) = Object 이다.
따라서, 나머지 매개변수(배열)로 입력된 값을 고~대로 배열로 보내주기 위해선 printAll(...args) 를 입력하여 그대로 보내주면 된다.

확산 매개변수의 존재 유무 파악하기

args 는 배열처럼 사용 가능한 객체이기 때문에, args.length로 판단이 가능하다.

args.length == 0 : 넘어온 매개변수 없음
args.length > 0 : 넘어온 매개변수 있음

애플케어플러스(Apple Care+) 만료일 당일에도 리퍼를 받을 수 있을까?

3sammy — Tue, 1 Feb 2022 17:13:00 +0900

선 결론

애플 케어 플러스(이하 '애케플')이 적용 받는 시점은, 센터에서 진단 후의 접수일을 기준으로 처리되는 것 같습니다!

후 과정

지난 2020년 1월 28일 에어팟 프로와 함께 애플케어플러스를 구매했다. 그리고 정말 열심히도 들었다.

그러다 작년 급성 저음성 난청에 걸리며, 에어팟 프로를 리퍼 받았다.

급성 저음성 난청에 걸렸다. 그 때의 짧은 기록

그리고 5개월 정도를 사용했는데, 에어팟 프로 전체를 떨어뜨리며 물에 빠지게 되었다..

충격과 함께 떨어졌는데, 한 쪽 유닛이 상태가 이상했고 전체적으로 물에 들어간 터라 찝찝했다.

애플 케어 플러스가 생각나서 조회해보니 1/29일 까지로 되어 있었다. 오늘이 28일인데, 바로 내일이 만료네? 이거 되는거야?

[설정-블루투스-에어팟 프로 옆 i 버튼]을 누르면 애플케어플러스의 보증 기한이 나타난다.
이 기한이 2022/01/29 로 되어 있다는 의미이다.

https://getsupport.apple.com/

Get Support

getsupport.apple.com

우선 애플 지원 센터로 접속하여, 에어팟을 선택하고. 물리적 손상 또는 액체에 의한 손상을 선택했다.

그리고 손상된 에어팟 교체를 선택하였고, 빠른 접수를 위해 제품 가져가기를 눌렀다. 로그인 과정 이후 일련변호를 입력하면 예약 할 수 있는 화면이 나타난다.

에어팟의 일련번호는 [설정-블루투스-에어팟 프로 옆에 i 버튼]을 누르면 나타난다.

그러면 위 처럼 예약 지도가 나오는데, 이중에서 예약 가능 시간을 선택하면 가장 빨리 예약할 수 있는 센터가 순서별로 나온다.

아주 다행히 29일(만료일)에 가능한 센터가 있어 곧바로 예약했다.

그리고 만료일 당일에 방문해서 진단을 받았다. 왼쪽 유닛에 손상이 있고, 물에 빠졌으므로 케이스/왼쪽 유닛/오른쪽 유닛 전체의 리퍼가 결정되었다. 그리고 애플케어플러스가 29일까지 만료였으므로 이를 적용하여 전체 리퍼(4만원)으로 진행했다.

자세히는 모르겠지만 아래의 과정으로 진행되는 것으로 보였다.

1. 문제가 되는 제품의 문제를 진단

2. 진단이 끝난 후, 해당 문제의 해결 방법을 결정

3. 그 방법이 리퍼라면, 애플 센터에 '리퍼' 로 접수

위 과정에서 3번의 접수일을 기준으로 애플 케어 플러스가 적용되는 것으로 보인다.

만약 문제의 원인을 파악하는데 오래걸린다면
즉, 진단하는데 이틀 정도가 소요되어 접수일이 보증일을 넘긴다면. 애플 케어 플러스의 보증을 받지 못할 수도 있겠다고 생각했다.

에어팟 프로의 경우 센터에서 재고를 보유하고 있지 않아 배송을 요청해야 한다고 한다.

음, 설 연휴 끝나고 찾아가서 받아오면 될 것 같다.

덧.

많은 사람들이 애플의 A/S 정책에 불만을 가진다. 특히, 애케플 리퍼의 경우 '곧 만료 인데 리퍼나 받아야 겠다' 라고 생각하여 찾아가는 경우가 많다. 하지만 애플에선 리퍼 사유가 없으면, 진행하지 않아준다. 애케플도 비싼 돈 주고 가입했고, 리퍼도 공짜가 아닌 일정 금액을 지불하는데 왜 안되냐고 불만을 가진다. (나도 그렇다)

하지만 센터에서 접수하는 과정을 가만히 들여다 보니, 애플에선 센터에게 제공하는 명확한 가이드 라인이 있는 것으로 생각한다. 그래서 이 기준에 맞지 않으면, 리퍼든 뭐든 진행될 수 없는 것이다.

따라서 센터의 엔지니어는 이 기기의 리퍼 사유가, 애플에서 제공하는 기준에 부합하는지를 검증하고. 맞을 경우에만 리퍼를 할 수 있는 상황인 셈이다. 그래서 정상인 제품을 가져가면 센터 입장에선, 기준에 맞지 않아 진행할 수 없으니 '리퍼 대상이 아니에요..' 라는 대답을 할 뿐인것 같다..

3차 예방접종 부스트샷 예약 취소..

3sammy — Mon, 31 Jan 2022 13:11:16 +0900

취소 이유

3차 부스트샷을 취소했다. 이유는 이번에 진행하는 개발건이 부스트샷 접종 즈음 테스트를 진행한다고 했기 때문이다. 그래서 개발도 마무리하고, 미비된 부분도 얼른 개발하기 위해선 이틀간의 백신 휴가가 불가하다고 생각이 들었다. 구정 연휴동안 쉬면 그 만큼 개발 시간도 없고 해서 취소를 결정했다.

추가적으로 백신 접종은 180일이란 기한에 맞게 하는 것이 좋다는 얘기를 들어서, 이 기한을 맞춰야지 싶었다. 3차 백신 맞아도 오미크론 돌파 감염 된다는 기사도 많이 보긴 했고. 뭐. 암튼 취소, 취소!

취소 방법

예방 접종을 예약한 병원에서 해도 되지만, 구정 연휴라 전화가 어려울 것 같아 홈페이지에서 진행하려고 한다.

우선 아래의 예방 접종 사이트로 접속한다.

https://ncvr2.kdca.go.kr/

예방접종 사전예약 시스템

ncvr2.kdca.go.kr

그리고 전체 메뉴 중에 예약 조회/변경/취소 메뉴로 접속한다. 정보를 입력한 뒤, 예약 조회를 클릭한다.

3차 부스트샷 예방 접종 변경이니, 3차 예약변경 같아 보이지만 저기에 없다..
한참 찾았는데, 예약 조회에 있다..

예약조회 로 접속해야 한다.

여기서 취소하면 된다! 끝!

이 글은 예방 접종(백신)에 대하여 반대하거나 취소를 독려하는 글이 아니라,
저 처럼 취소가 어딨는지 헤맬지 모르는 분들을 위한 안내글 입니다.

[firebase] 배포 에러, your account has permission to access it.

3sammy — Mon, 31 Jan 2022 02:33:49 +0900

문제

Error: Failed to get Firebase project [프로젝트명]. Please make sure the project exists and your account has permission to access it.

만약 파이어베이스 배포 명령어인 firebase deploy 를 했을 때, 위와 같은 에러를 만났다면?
이는 현재 로그인 중인 계정이 현재 프로젝트에 적용된 파이어베이스 계정과 달라, 접근이 안되는 경우이다.

해결 방법

firebase login 을 하여, 현재 로그인한 계정 정보를 확인한다.
Already logged in as 계정명@gmail.com 의 형태로 확인된다.
firebase logout 을 하여, 현재 계정에서 로그아웃한다.
다시 재로그인하여, 배포를 진행한다.

필자의 경우, 현재 두개의 계정에서 2개의 파이어베이스 프로젝트를 배포하고 있다.

이전 프로젝트 배포를 위해 다른 계정으로 로그인을 했었는데, 그 로그인이 계속 유지되고 있어 위 문제가 발생했다.
firebase-tool은 프로젝트(폴더) 단위로 로그인되는게 아니라 글로벌(PC)하게 로그인 되는 구나..

아주 간단한 문제에, 간단한 해결이었는데 처음 보는 에러에 벙벙해졌었다.. ㅎ_ㅎ..

급성 저음성 난청에 걸렸다. 그 때의 짧은 기록

3sammy — Sun, 30 Jan 2022 21:33:44 +0900

나는 에어팟 프로로 노래를 자주 듣는 편이다. 특히 러닝을 하거나 출근길에 자주 듣는데, 어느날부터 에어팟의 상태가 좀 이상했다.

왼쪽 유닛에서 '끼기긱'하는 기계음이 자꾸 섞이는 것. 소리가 엄청 커서 표정이 일그러지거나 하는 정도까진 아니지만, 그냥 좀 거슬리는 정도였다. 그런 상태가 좀 있었지만, 그냥 참고 들었다. 왜냐면 귀찮았거든, 그냥 일시적인줄만 알았거든. 특히 갑자기 받은 러닝 삘을 이어가려면 신나는 노래는 필수였기에, 이상하더라도 그냥 들으며 뛰었었다.

발단 (증상)

그러다 가끔 왼쪽 귀에서 서서히 증상이 나타났다. 이명이 났을 때 처럼 삐---- 하는 소리가 났고, 어쩔 때는 공기압 달라졌을 때 처럼 귀가 가득 차는 느낌이 들었다. 이때까지도 그냥 그려러니 했다.

뭔가 이상하다고 느낀 것은, 진동음이었다. 어느 날 부터 왼쪽 귀에서 강한 진동음이 들리기 시작했다. 그, 기계로 가득찬 공간에 들어가면 기계 돌아가는 웅- 웅- 하는 기계음있지 않는가? 그런 소리가 왼쪽 귀에 가끔 들리기 시작했다. 그리고 점차 항상 들리는 상태가 되었다. 그래서 이 상태에서는 노래를 들어도, 노래가 나오는 이어폰 끝 부분 -> 진동음 -> 내 귀(듣는 다는 느낌) 의 순서로 전해졌다.

이는 점차 심해져 항상 진동음이 들리게 되었다. 그래서 이 진동음 보다 낮은 소리로 하는 말은 잘 알아듣기가 어려웠다. 이 진동음 보다 큰 소리, 높은 톤의 경우엔 알아 들을 수 있었다. 사람 말소리가 아예 안들리는 게 아니라, 진동음 때문에 덮혀서 안들렸다.

결론적으론 이게 들리지 않는 상태였다. 나는 이런 상태가 되어서야 되어서야, 이비인후과에 갔다.

진료

반반차를 쓰고 회사 근처 이비인후과를 찾았다. 증상을 말했다. 그리고 청력 검사를 했다. 분명 버튼을 누르는 손이 보이는데, 왼쪽 귀에선 전혀 들리지 않았다. 무서웠다.

그리고 진료 결과를 받았다. 왼쪽 귀의 청력이 심각하게 손상되었단 얘기와 함께, '급성 저음성 난청'이란 병명이 나왔다. 심장이 쿵 내려앉았다. 난청이라니, 불치병에 걸린 것 같은 기분이었다.

집에가서 저음성 난청에 대해 많이 조사해보았다. 저음성 난청은, 급성 여부에 따라 심각도가 다르다고 한다.
급성의 경우, 치료를 통해 회복이 가능하고 청력도 돌아올 수 있다고 하지만 급성이 아니라면, 만성으로 되어 청력을 회복이 어렵다고 한다..
나의 경우 급성에 가까웠기에, 약간의 희망은 가졌지만 마음은 놓이지 않았다.
(의사 쌤이 '급성'이란 말씀을 하지 않으셨거든..)

원인

나의 경우, 예상되는 원인은 상태가 안좋은 소리를 지속적으로 들어, 청력이 손상된 것이라 생각했다. 그래서 곧바로 에어팟 프로를 리퍼 받기로 결정했다.

이전에 애플케어플러스를 가입했기 때문에, 더 쉽게 수리를 결심했다. 에어팟 프로 진단을 해보니 왼쪽 유닛의 마이크 부분이 안으로 들어가(손상) 있었다. 그리고 케이스도 기스가 많았다. 왼쪽/오른쪽/케이스까지 한번에 리퍼하는 것으로 결정되었다.

왼쪽 유닛에 손상이 있어서, 이런 결과가 나왔다니. 마이크 부분의 아주 작은 손상이, 청력 감소라는 큰 결과를 불러 일으켜 온 것이다. 이걸 참고 들었던 내가 안타깝고 미웠다.

경과

에어팟 프로 수리를 맡긴 후, 병원에서 약을 조제 받았다. 우선 급성 저음성 난청은 달팽이관의 내림프액의 압력이 올라가면서, 달팽이관이 함께 팽창하여 발생하는 것이 원인이라 했다. 그래서 이 내림프액의 압력을 낮춰주는 것이 필요하다.

이를 위해 스테로이드성분이 있는 알약 등을 복용했다. 그리고 이 내림프액은 카페인에 굉장히 안좋다고 한다. 그래서 이렇게 약을 복용받는 기간동안 매일 3샷씩 떄려 넣었던 아이스 아메리카노도 멈추었다.. 다만 디카페인으로 돌렸다.

그리고 2주간 약을 복용하니 점차 귀를 가득 채운 진동음이 줄어 들기 시작했다. 청력검사를 하니 많이 돌아왔다고 한다. 안도했다. 마음이 놓였다.

그리고 보름 정도가 지나 완전 회복이 되었다. 다행이었다.

결과

이제 에어팟 프로도 리퍼를 받아 정상이 되었다. 이제 다시 매일 커피 쓰리샷을 때리고, 노래 들으며 뛰는 일상으로 돌아왔다.

이 뒤로 깨달은 것이 있는데, 눈, 귀, 코, 입(이) 처럼 내 몸, 특히 감각과 관련된 부분은 작은 이상이 있다면 곧바로 병원엘 가야한다는 점이다. 이런 곳의 이상을 무시하고 넘어가면, 엄청난 스노우볼이 되어 큰 무서움으로 돌아온다. 조심하자. 조심해.

*이미지 출처는, 많은 도움을 받았던 유튜브 영상의 이미지이다.

https://www.youtube.com/watch?v=_d-iXzkWwj8

벽지에 묻은 캔들 촛농, 손 쉽게 제거하는 방법

3sammy — Tue, 25 Jan 2022 23:46:53 +0900

비극의 시작

작년이었나, 친구들을 불러 놀다가 촛농을 쏟았다. 좀 더 자세히 말하면,

캔들워머를 사용해서 캔들을 켜놓은 상태에서 팔꿈치로 워머를 툭 쳤다.
결말은 대참사

벽지는 물론이거와 애플워치 스탠드, 방 바닥, 섬유소재 장식품, 러그 등등 사방에 캔들 촛농이 튀었다.
닦으면 되겠지 했다.

하지만 나는 몰랐지, 캔들 촛농이 그렇게 빨리 굳는줄...

처참하지 않은가

비극은 향기와 함께

최대한 빨리 닦아보려 했지만 이미 다 굳었다. 그 때 당시엔 스크립퍼도 없어서
납작하고 날카로운 것들(30cm 자)을 가지고 열심히 긁어댔다. 하지만 역부족이었다.

분명 가성비 좋게 얼큰하게 취했었는데, 술이 확 깼다.

이제 그 근처만 가면 캔들의 향기가 가득했다. 애플워치 스트랩에도, 콘센트를 꼽기 위해 간 벽에서도

늘 향기가 가득했다. 비극은 향기와 함께였다. 다른 곳은 열심히 치워서 괜찮지만 벽지는 처리할 수 없었다.

어찌나 비극이 잘 보이던지, 어루만질 때마다 기분 나쁘게 미끌거렸다. 포기하고 흐린눈으로 살았다.

그런데 이젠 해당 문제를 청산해야만 했다.

왜냐고? 곧 새로운 가구(수납 침대)가 들어 올 텐데, 비극을 덮을 순 없었다.

더 치우기 싫어지기 전에, 해결해야만 했다.

손 쉽게 제거하는 방법

결론부터 말하면, 드라이기와 키친타올(두꺼운 휴지)가 있으면 된다.

문제가 되는 부위에 드라이기를 갖다대고 아주 뜨겁게 가동한다.

잘 안느껴지곘지만, 촛농이 위로 밀려가는 모습이다..

그리고 잠시 기다리면 촛농이 녹아 바람을 피해 도망가기 시작한다.

이 때 재빨리 두꺼운 휴지로 닦아내면 된다.

나의 경우, 드라이기를 아래에서 위 방향으로 향하게 했다.
그러면 좀더 올라가는 모습을 확인하기 좋았고, 위에 있으니 닦기도 편했다.

그렇게 조금 여러번 반복하다 보면, 벽지는 원래의 모습을 되찾게 된다.

맨 첫 사진과 상반되지 않는가..

끝!

향기로운 비극 끝!

티스토리는 정말 Velog를 대체 할 수 있을까?

3sammy — Mon, 24 Jan 2022 23:22:23 +0900

인트로

일단 이 글은 정보 전달 글이 아니다. 푸념글이다..

푸념 시작!

정말 티스토리의 글쓰기 환경은 그렇게 좋지 못하단걸 깨닫는다.

아니, 티스토리에 익숙한 사람이라면 괜찮을 것 이다. (사실 좋고 말고는 없지)

하지만 나는 마크다운 기반의 글쓰기 환경에 정말 익숙해져 있는 사람이고, 마크다운으로 글을 기록하고 공유하고 싶어하는 사람이다.

그래서 다시 블로그를 시작한 초기에는 "티스토리에서 마크다운 글쓰기 환경을 구축해볼게요!" 라는 포부도 비췄었다.

그 포부가 꺾이는 짧은 과정을 쓰자면,

마크다운 글 작성 ⏩ 티스토리 마크다운 에디터 모드

블로그를 다시 시작한 초기에 이렇게 많이 작성했다. 하지만 그 때 너무 불편한 나머지, 학을 뗐다..

마크다운으로 작성을 끝낸 뒤에, 글을 발행하면 무.조.건 글이 깨진다.
- 특히, 개발 후기 등을 남기기 위해서 코드 블럭이나 인라인 코드 블럭을 자주 사용하는데
  코드 안의 들여쓰기가 깨지거나, 원하지 않는 곳 까지 코드가 겹치게 된다..
- 지금 처럼 개괄식을 많이 쓰는데, 씹힌다..
글을 발행하고 수정하면, 기본 모드로 접속한다.
- 마크다운 모드에서 작성하다 기본모드로 변경하면, 마크다운의 글이 랜더링 되어서 기본모드로 들어간다.
  근데 이 과정에서 문단이나 글의 양식들이 미묘하게 변하게 된다..
- 하지만 발행 후 수정을 하게 되면 무조건 기본 모드로 들어가게 된다..
- 그래서 이를 피하고자 수정을 최대한 적게 하려 하는데.. 그게 쉽냐고

그럼 기본 모드로 작성하지 그래?

이건 힘들 것 같다.. 내가 줄글을 적고, 글에다가 색을 막 이쁘게 넣는 타입의 글을 쓴다면 모르겠지만.

나는 이쁘게 쓰는 것 보다, 체계적으로 작성하는 것이 좋다.

또한 글의 방향성도 정보 전달, 개발 기록이기 때문에, 개괄식/코드 블럭 등을 활용해야 한다..

하지만 기본 모드로 작성하면, 키보드가 아니라 마우스로 메뉴를 클릭해야 한다.

개괄식을 추가할 때에도 마우스로 메뉴를 눌러야 하고, 블록쿼터 만들 때도 그렇고.

(이미 마크다운에 익숙해졌는데, 이는 엄청난 페인 포인트이다)

또한 TOC (목차 바로가기) 가 지원되는 스킨을 구매했는데, 기본모드로 글을 작성하면 꼭 어느 부분에서 제목2 로 설정된 띄어쓰기(개행)가 발견된다. 그러면 빈 목차가 만들어진다. 이거 진짜 킹받는다.

그리고 결정적으로, 인라인 코드 블럭을 지원하지 않는다.

내가 이걸 얼마나 많이 쓰는데..

이걸 쓰려면 HTML 모드로 들어가서 <code></code> 를 적어야 한다..

그럼 어쩔건데? Velog로 갈꺼야?

그건 아니다. 그냥 이렇게 몇번 찡찡거리다가 방법을 찾겠지 싶다.

이전에도 썼지만 그럼에도 티스토리에 남아있는 이유는,

내 맘대로 스킨 편집이 가능하다는 점!

이건 진짜 좋다. 물론 더 연구해야하고 귀찮기도 하지만, 디자인을 너무너무 좋아하는 프엔 개발자로서
스킨 편집의 자유도는 필수적이다.
지금 보고있는 Velog 스타일의 Blockquote도 CSS 따와서 직접 수정한거다.

그리고 티스토리는 (일반적인) 블로그다!

Velog는 개발 블로그라는 성격이 강하다. 그러다 보니 일상적인 글이나 정보 공유 글을 올리기 다소 꺼려지게 될 것 같다.

실제로 나는, 개발뿐만 아니라 MAC을 쓰며 알게 된 사실들이나, 내가 찾은 정보를 다시 조합하거나, 내가 영감을 받은 이미지들이나, 쇼핑하다 알게된 사실 등등 내가 관심있는 것들을 블로그에 올리고 있다.

그래서 나는 개발에 대한 전문성도 좋지만, 무엇보다 내가 관심있는 것들을 공개할 수 있는 블로그가 필요하다.

포부2 시작!

앞으로의 블로그 계획을 적자면,

글쓰기 환경은 마크다운!
노션으로 할지, Typora로 할지는 고민..
글 업로드 환경을 하나로 통일한다!
기본모드/ HTML/마크다운 이 세가지 에디터 모드를 혼용하면 CSS가 제대로 적용 안될 수 있다.
따라서 하나의 업로드 환경을 정해서 올려야 한다.
게시글의 CSS를 좀 더 보기 좋게 수정하자!
지금 코드 블럭도 맘에 안들고, 문단별 자간도 맘에 안들고 그렇다..
빨리 CSS에다가 !important 달아야겠다..
코드블럭에 복붙 등의 기능 넣기..
노션 API를 활용해서, 노션에서 티스토리 글을 업로드 하는 서비스를 개발해보기!
한 고등학생이 Notion2Tistory 데스크탑 프로그램을 만들었다. 무려 API 개발 전에 만든 서비스이다.
이제 노션 API도 공개되었는데, API를 활용해서 웹에서 처리하는 사이트를 만들 수 있지 않을까? (포부2)

[JSP] JSTL에서 조건식, 삼항연산자 사용하기

3sammy — Mon, 24 Jan 2022 22:39:27 +0900

방법

<c:set var="val1" value="${tmp1 eq '' || empty tmp1 ? 'N' : 'Y'}">

JSTL 표기 안에다가 필요한 식을 기입하면 된다!

${ 조건 ? 참일 경우 : 거짓 일 경우}

사용 예

나는 컨트롤러에서 받은 변수의 검증 여부를 삼항연산자를 통해서 처리한다.

예를 들어 컨트롤러에서 reviewYn 이란 변수를 받아오고 사용 유무에 따라 HTML 코드의 랜더링 여부가 결정되는 코드가 있다고 하자.

<c:if test="'${reviewYn}' == 'Y'">
	<!-- 리뷰 레이어 사용 -->
	<div class="review-wrapper">
    	...
    </div>
</c:if>
<c:if test="'${reviewYn}' == 'N'">
	<!-- 리뷰 레이어 미사용 -->
	<div class="no-review-wrapper">
    	...
    </div>
</c:if>

이 때, 컨트롤러에서 null 값이 넘어오는 경우를 핸들링 해야 한다.

단순히 c:if test="조건식" 안에다가 empty reviewYn 을 추가하기 보단 삼항연산자를 활용해 값이 없을 경우, N 으로 설정하도록 하는 것이 에러를 핸들링하고 코드를 직관적으로 짜기 효율적이다.

<c:set var="reviewYn" value="${reviewYn eq '' || empty reviewYn ? 'N' : 'Y'}">

컨트롤러에서 reviewYn 이라고 받았다고 해서, c:set 할 때 다른 변수명을 기입할 필요는 없다.
그냥 받아온 변수명 그대로 var="reviewYn" 해도 된다.

자바스크립트 함수는 매개변수에 따라 다르게 활용될까?

3sammy — Mon, 24 Jan 2022 20:26:07 +0900

인트로

자바 Java의 OOP 개념 중에 메소드 오버로딩 Method Overloading이 있다.

이는 메소드가 동일 이름을 가지고 있어도, 들어가는 매개변수가 다르면 다르게 인식된다는 의미이다.

pulbic int getGrade(){...}
pulbic int getGrade(int a){...}
pulbic int getGrade(int a, int b){...}

위 getGrade() 함수는 모두 “getGrade” 라는 함수명을 가지고 있지만 모두 다른 함수로 사용 될 수 있다.

그래서 개발자는 메소드 오버로딩을 활용해 함수의 재사용성을 높일 수 있다.

그렇담, 자바스크립트 Javascript 에선 어떨까?

매개변수가 함수를 결정 짓지 않는다.

결론부터 말하면 자바스크립트는 매개변수가 없든, 100개를 입력 받든 모두 하나로 인식한다.

function getGrade() {
  console.log("empty arguments");
}

// SyntaxError: Identifier 'getGrade' has already been declared
function getGrade(var1) {
  console.log("only one arguments");
}

위 처럼 getGrade 라는 함수명을 사용해, empty arguments 와 1개의 매개변수를 받는 함수를 작성했다.

하지만 이렇게 하면 getGrade가 이미 선언되었다며 에러를 터트린다!

SyntaxError: /src/callback.js: Identifier 'getGrade' has already been declared (55:9)

선언한 함수와 다르게 매개변수 보낸다면?

1️⃣ 매개변수를 비워서(empty) 보낸다면?

function getGrade() {
  console.log("empty arguments");
}

getGrade();		//empty arguments
getGrade(123);		//empty arguments

이처럼 getGrade 함수는 no-argument로 선언하였는데, 갑자기 123이란 파라미터를 보내면 어떻게 될까?

자바스크립트는 받는 매개변수가 없이 되어 있기 때문에, 별다른 에러를 내지 않고 콘솔에 empty arguments를 두 번 찍게 된다!

2️⃣ 매개변수를 선언한 것 보다 더 많이 보낸다면?

자바스크립트에선 정해진 매개변수의 값을 제공받지 않는다면, 암시적으로 undefined를 반환하고 있다.

function getText(a,b,c,d,e) {
	console.log(a, b, c, d, e);
}

getText();				// undefined undefined undefined undefined undefined
getText(1,2,3,4,5,6,7,8,9);		// 1 2 3 4 5
getText(1,2,3);				// 1 2 3 undefined undefined
getText('','',1,2,3);			// undefined undefined 1 2 3

해당 매개변수가 없는 경우엔 undefined 를 반환하고 있다.

쉽게 이해하려면,
쉼표로 매개변수를 구분하고, 쉼표 위치별로 변수가 맵핑된다고 생각하면 된다.

결론, 그리고 JS에서 함수를 대하는 자세

우리는 자바스크립트의 함수를 좀더 유연하게, 자유롭게 대해도 괜찮다.

위의 예시에서 보았듯, 자바스크립트에서 함수는 그 함수명으로 오직 한 개만 선언 할 수 있다.

그리고 매개변수 개수와 관계 없이 변수를 마음대로 전달해도 괜찮다! 왜냐고? 어차피 JS가 알아서 실행시키니 말이다.

재선언이나 재사용을 고려할 필요 없이, 어떤 함수명으로 지을지만 고민하면 된다 :D

자바스크립트에서 저렇게 다양하게 들어오는 매개변수를 다루는 방법이 있는데,
그건 다음 포스팅에서 다루겠다.

[SQL] 신입에게 추천하는 SQL 작성 팁 (콤마 위치, WHERE 1=1)

3sammy — Sat, 22 Jan 2022 19:40:03 +0900

인트로

SM 회사의 개발자에겐 프론트, 백엔드 구분이 크게 존재하지 않는다. 내가 맡은 서비스에서 주어진 파트를 풀로 담당할 뿐이다. 그래서 나 또한 입사 이전에는 프론트 엔지니어를 꿈꾸었지만 지금은, 백엔드까지 함께 개발하고 있다. (그래도 프론트 단 개발이 많은 전시/프로모션 파트로 배정되어서, 프론트 개발의 갈증을 약간씩 해소하고 있다)

백엔드 또한 개발하다보니 DB도 함께 건들이게 되었다. 이전에 프로젝트로 MySQL 까진 다뤄봤는데, 여긴 오라클 DB를 사용중이었다. 그리고 실무로 쓰이는 쿼리문을 보며, 참으로 복잡하단 생각을 했다. (입사 초기엔 쿼리문 분석하느라 하루를 다 보냈다.. 지금도 .. ‍ )

실무에 쓰이는 쿼리문을 보며 가졌던 궁금증이나 약간의 미립자 팁들을 가져왔다.

SQL이 서툰 신입분들이 보고 도움이 되었으면 좋겠다.

콤마는 앞에 찍자!

SELECT A
       B,
       C,
       D,
FROM table
;

보통 다중 값을 조회하는 SELECT 문을 작성 할 때,습관적으로 콤마를 뒤에 찍게 된다.

하지만 그와 동시에 우리는 복붙을 자주 사용하게 되는데, 습관적으로 뒤에 찍은 콤마로 인해 D,의 형태로 셀렉문이 종료되어 에러가 날 수 있다.

따라서, 복붙과 실수를 방지하기 위해 콤마를 앞에 찍자!

SELECT A
      ,B
      ,C
      ,D
FROM table
;

조건을 붙일 땐, WHERE 1=1을 활용하자!

SELECT A
      ,B
FROM table
WHERE 1=1
  AND age >= 10
  AND grade in ('A', 'B', 'C')
;

조건절을 보면 WHERE 1=1 으로 시작되는 것을 실무에서 자주 볼 수 있다.

이를 분석해보면 1=1 은 참이다. 따라서 조건절의 시작을 true로 실행하는 모습이다.

그렇담 왜 이렇게 하는가?

1) 주석 처리를 쉽게 하기 위해서

WHERE 1=1
  AND age >= 10
  -- AND grade in ('A', 'B', 'C')
  -- AND 조건3
  AND 조건4

SELECT문을 작성하여 데이터를 체크하기 위해선 다양한 조건절을 활용하게 된다.
이 과정에서 조건절을 주석 처리하며 조회할 때 WHERE 1=1이 유용하게 활용될 수 있다.

만약 WHERE age >= 10 으로 작성했는데, age 조건을 주석처리 하고 싶다면?
다시 WHERE를 써야하는 수고로움이 발생될 것이다..

2) 다이나믹 쿼리를 작성하기 위해서

다이나믹 쿼리 Dynamic Query 란?
파라메터 Parameter로 들어오는 값에 의해, 쿼리를 동적으로 바꿔주는 기능이다.
if문 등을 통해 조회하는 쿼리문을 수정할 수 있다.
Spring 프레임워크의 마이바티스 MyBatis가 사용 예시이다.

<SELECT id="select">
  SELECT A
        ,B
  FROM table
  WHERE 1=1
      <if test="name != null">
        AND name = #{name}
    </if>
    AND grade in ('A', 'B', 'C')
  ;
</SELECT>

만약 파라메터로 이름을 받았을 때, 이름을 조건절에 추가한다고 한다면 위와 같이 작성 할 수 있다.

이 과정에서 WHERE 1=1을 작성하지 않는다면, 다음과 같이 작성될 것이다.

...
      <if test="name != null">
        WHERE name = #{name}
    </if>
    AND grade in ('A', 'B', 'C')
...

그런데 name이 존재하지 않는다면, WHERE 키워드 없이 작성되게 될 것이다.

따라서 항상 참인 조건을 앞에 걸어둠으로써 다이나믹 쿼리의 if문으로 작성되는 조건이 없더라도 지장이 없도록 할 수 있다.

주의 할 점

WHERE 1=1을 작성할 때 주의할 점은, 단순 조회가 아닌 데이터의 변경이 일어나는 UPDATE나 DELETE 에선 그 작성을 유의해야 한다.

<delete id="delete">
  DELETE 
  FROM table
  WHERE 1=1
      <if test="name != null">
        AND name = #{name}
    </if>
  ;
</SELECT>

만약 이처럼 파라메터로 들어오는 이름에 대해서 삭제하는 SQL문을 작성했다. 하지만 만약 name 파라메터가 없다면?

DELETE 
FROM table
WHERE 1=1
;

다음의 모습처럼 조건이 참인 상태로 되어, table의 모든 값이 삭제되는 중대한 문제가 발생될 것이다.
UPDATE나 DELETE 에선 문제를 예방하기 위해 WHERE 1=1 사용을 지양하는 것이 좋다.

WHERE 1=1 은 조회문에서만 사용하자 ^--^
왜냐면 주석처리가 쉬우니까...

이클립스 디버깅 모드에서 Timeout 에러 해결하기

3sammy — Thu, 20 Jan 2022 22:14:55 +0900

Error

- Eclipse, STS 등에서 디버깅 모드로 구동 시, 타임아웃 오류와 함께 구동이 안되는 문제가 발생

- 서버 구동 시간도 450초 설정했는데, 외않돼?..

해당 글은 이클립스 Tomcat 서버 시작시, timeout 오류 해결하기 여기 있다.

원인

- 디버깅 모드에서 너무 많은 브레이크 포인트(Break point)를 설정했기 때문

해결 방법

- 디버깅 모드에서 Remove All Breakpoints 를 눌러 모든 브레이크 포인트를 삭제한다.

원활한 실행을 위해서, Project Clean 을 실행하고 구동하는게 좋다.

생각

이미 만들어진 결과물을 SM하는 과정에서, 디버깅 모드는 정말 중요하단걸 느끼고 있다..

이클립스 Tomcat 서버 시작시, timeout 오류 해결하기

3sammy — Thu, 20 Jan 2022 22:05:55 +0900

Error

오류 메시지: Server Tomcat v8.5 Server at localhost was unable to start within 45 seconds. If the server requires more time, try increasing the timeout in the server editor.

Eclipse, STS 등에서 서버 구동 시, 타임아웃 오류와 함께 구동이 안되는 문제가 발생

원인

- 이클립스의 서버 실행(Server Start) 시간 제한이 45초로 걸려있으면, 오류가 발생할 수 있음

- 이는 이클립스가 자체적으로 45초 이내에 서버 실행이 안되면 문제가 있다고 판단하는 것

- 라이브러리 등을 추가하다보면 서버 구동 시간이 45초를 넘기는 경우가 발생할 수 있음

해결 방법

1. 서버 탭에서 현재 문제가 되는 톰캣 서버를 더블 클릭하여 셋팅 화면을 연다.

2. 우측 Timeouts 탭에서 Start 시간을 충분히 늘려준다.

편의상 Start, Stop을 각각 450초, 30초로 설정했다.
Stop은 셋팅할 필요 없다고 하는데..

생각

VSCode에 익숙해져있다가 이클립스 환경에서 개발하려니 간단한거도 모르는거 투성이다.

제 2의 sammy가 이 글을 보고 있다면, 빠르게 오류를 해결하고 태연하게 업무에 복귀할 수 있길 바란다.

라디오 버튼 값 jQuery와 JS로 가져오는 방법 정리

3sammy — Tue, 18 Jan 2022 23:42:00 +0900

인트로

HTML의 라디오 버튼을 접근 할 수 있는 방법은 무엇일까?
여러개의 선택지 중에 선택된 것을 고를 수 있을까?
라디오 버튼의 id는 label에 연결되는데, 여러개의 라디오 버튼을 어떻게 가져올까?
...
등등의 물음으로 시작한 서칭이다.

Example

<input type="radio" name="review.score" id="score1" value="1">
<label for="score1">1점</label>
<input type="radio" name="review.score" id="score2" value="2">
<label for="score1">2점</label>
...

input type은 radio로 id 값은, label의 연결로 활용되었다.

label은 for = id값 으로 연결해서 사용한다.
이렇게 연결하면 label을 클릭할 경우, 해당 id값의 input이 클릭 처리된다.

jQuery 로 처리하기

$("input[name='review.score']:checked").val()
// score의 라디오 중 체크된 것의 값만 가져옴
// 아무것도 선택안되어있으면, undefined

$("input[name='review.score']").is(':checked')
// 전체 radio 중에서 하나라도 체크되어 있는지 확인
// 아무것도 선택안되어있으면, false

input에서 지정한 name 속성값을 활용하여 가져온다.
제이쿼리의 경우 간단하게 체크된 값만 가져오거나, 체크된 값이 존재하는 지 등 필요한 상황별로 기능들을 제공하고 있어 간편하다.

바닐라 JS(javascript) 에서 처리하기

var radios = document.getElementsByName('review.score');

radios.forEach(elem => {
    if(elem.checked){
        console.log(elem.value);
    }
});

radio 버튼과 체크 박스는 배열요소이다
radios.value 를 하면, 배열.value 과 같은 의미이기 때문에, undefiend로 나올 수 밖에 없음
따라서 배열을 순회하며 checked 여부를 가져오고 그 값을 처리/반환 하는 방향으로 가야한다.

배열.forEach는 배열에서 사용하는 반복문으로, 리턴값이 없다는 특징이 있다.

무접점 키보드 키캡 및 상판 (분해 없이) 간이 청소하기

3sammy — Tue, 28 Dec 2021 00:02:50 +0900

인트로

이전부터 사용해온 한무무와 새로 들이게 된 앱코 무접점 키보드, 이렇게 두 키보드를 청소하고자 한다. 한 번에 키캡 청소부터 윤활 작업까지 하면 좋겠지만, 시간적 여유가 없으므로 오늘은 키캡 청소만 진행하려고 한다.

(사실 아직 슈퍼루브 윤활제가 도착하지 않았다..)

사실 맘 같아선 하우징 분리해서 풀 윤활 및 청소를 하고 싶었는데, 당근으로 구매한 앱코 키보드의 하우징에 크랙이 너무 심해서 깨질 것 같았다. 한번 도전은 해봤지만, 하단 부분 결착이 너무 견고해서 분해에 활용한 카드가 계속 부셔졌다.. 그래서 시간 아낄 겸, 분해 없이 키캡 및 상판 청소만 진행하고자 한다. 다음 기회에 하우징 분리 및 풀윤활에 도전하도록 하고, 오늘은 한성 무접점 무선 키보드 GK888B 와 앱코 해커 K965P V2 의 키캡 및 상판 청소를 간단하게 시작해보겠다.

- 소요시간 : 40분 씩

준비물

중성 세제
1.5L 페트병
타올
면봉 (뾰족 + 보통)
물티슈

위 준비물들은 간단하게 청소하는 용도이다.

청소하자!

당연한 소리지만, 아래의 순서를 따른다.

키캡 리무버로 모든 키캡을 제거한다.
중성 세제에 키캡을 넣고 세척한다.
상판을 면봉, 물티슈, 휴지를 이용해 청소한다.

2번 상세) 중성 세제로 키캡 세척하기

두가지 방법이 있다. 1번은 물 그릇에 중성 세제를 푼 물을 담아 놓고 키캡을 넣어 휘적휘적 하는 방법, 2번 방법은 1.5L 페트병에 키캡을 넣어서 흔드는 방법. 1번의 경우 뒤적뒤적 손으로 휘젓는게 귀찮다. 반면 2번은 세척 과정은 편하지만 키캡을 뺄 때 좀 귀찮다. 난 2번 방법으로 했다. 왜냐면 한번도 안해본 거여서 한번 경험삼아.

1. 페트병에 4/5 정도 물을 채우고, 세제를 5~6방울 떨어뜨린다.

2. 먼저 흔들어서 거품을 만들어준다.

3. 모든 키캡을 넣는다.

4. 천천히 위 아래로 돌리며 키캡들이 씻기는 소리를 감상한다.

스스로 세탁기가 되었다는 생각을 하면 더욱 즐거워진다.

5. 10분 정도 담궈둔다.

6. 물을 빼준다.

이 때, 손가락 하나를 넣어주면 키캡은 빠지지 않고 물만 뺼 수 있다.

7. 키캡을 페트병에서 빼준다.

7-1. 잘 안빠진다면, 다시 물을 넣어서 자연스럽게 빠지도록 한다.

7-2. 혹은 손가락으로 계속 건들이며 빼준다.

8. 키캡의 물기를 잘 턴 뒤, 타올 위에서 말린다.

내부가 밖에 나오도록 말려야 한다. 안그럼 잘 안마른다.

3번 상세) 상판 청소하기

0. 에어건/헤어드라이기 등을 이용해 먼지 들을 사전에 날려준다.

1. 손으로 잡을 수 있는 이물질을 제거한다.

보통 머리카락, 종이 등이다.

2. 면봉의 뾰족한 부분을 활용해서 스테빌라이저의 구리스를 제거해준다. (윤활 작업 미실시 시 skip)

구리스에도 많은 먼지가 끼어있다. 필자는 윤활 작업간 새로 구리스를 칠할 예정이니, zero-base로 하기 위해 다 지웠다.
면봉으로 제거가 힘들다면, 휴지와 뾰족한 도구(샤프, 핀셋 등)로 닦아주자.

3. 물티슈와 면봉을 활용해 상판 사이사이를 구석구석 청소한다.

하우징을 분해했다면, 상판 부분만 따로 떼어낼 수 있어서 청소가 간편하지만 오늘은 분해 없는 청소다.
물티슈를 상판 위에 얹고 면봉을 활용해 키보드 사이사이를 구석구석 닦는다. 뾰족한 면봉을 활용하면 좁은 틈도 닦을 수 있다.

휴지와 면봉이면 뭐든 할 수 있다.

4. 눈에 보이는 먼지들을 면봉을 이용해 제거한다.

5. 만족할 때까지 반복한다.

느낀점

#1.

사실 위 과정은 굉장히 초보적인 과정이다. "키캡을 물로 씻고, 상판은 닦는다" 이게 전부다. 하지만 모든 블로그에서 하우징을 분해한 풀윤활과 세부적인 청소를 말하고 있을 때, 한 명 쯤은 간단하게 간이로 알려주는 것도 필요하다고 생각했다. 삶에서 풀윤활이 반드시 정답은 아니니 말이다. 때론 누군가도 나처럼 '케이스에 크랙이 나있어서', '하우징 분해가 어려워서' 간이 청소를 찾을 수 있다고 생각했다.

#2.

노래를 들으며 키보드 상판을 한참을 청소했다. 면봉으로 열심히 청소해도 계속해서 먼지나 이물질이 나왔다. 대체 어디서 나오는거야 싶다가도, 참 여기저기 징하게 들러 붙어있다고 생각했다. 눈썹털, 머리카락, 먼지등을 열심히 면봉으로 찾아 없애는 작업을 반복했다. 분명 더럽고 귀찮고 어쩌면 시간이 아까운 작업이었지만, 도리어 아무 생각이 없이 편안했다. 숨어있는 이물질을 찾아내어 제거하는 과정을 반복하다보면 성취감도 느낄 수 있었다.

#3.

어쩌면 너드틱하고, 마이너한 취미 혹은 행동일 수 있다. 혹자는 '그 노력으로 차라리 연인을 만나라' 라고 할 정도니 말이다. 하지만, 아무런 생각 없이 상판 청소를 반복하다보면 참 마음이 편안했다. 그와 동시에 가지가지한 고민 없이 한가지에 집중한 적이 요근래 언제였나 스스로 물어보게 되었다. '오늘은 나만의 시간이야' 라며 카페에 가고, 좋아하는 노래를 들으며 드로잉을 하다가도 새롭게 개발해야 할 것들이 떠오르게 되면 펜을 멈추게 된다. 한 가지에 오롯이 집중하지 못하고 '지금 내가 드로잉 하는게 맞는가? 텔레그램 자동화 해야지!' 싶은 생각이 나를 방해했다. 그런 의미에서 키보드 상판 청소는 생각많은 너드들을 위한 테라피 일 수 있다고 생각한다.

키보드 타건을 시작하면, 분명 다시 더러워 질 것이다. 머리카락이 끼고, 먼지와 눈썹 들이 떨어져 뒹굴 것이다. 나는 키캡 사이에 보이는 먼지를 보며 그 더러움을 가늠할 것이다. 하지만, 어쩔 수 없다. 쌓이는 먼지는 막을 수 없고, 나는 키보드를 쳐야만 하고, 언젠가는 청소를 해야만 한다. 어쩔 수 없는 반복이니 조금은 다른 생각과 접근으로, 이 불필요한 행동에 즐거움을 부여하면 좋을 것 같다.

Node.js + express으로 telegram Bot 만들기

3sammy — Tue, 21 Dec 2021 01:26:46 +0900

인트로

현재 파이어베이스 기반의 서버리스 환경에서 프론트를 구성 및 배포하였는데, telegram Bot을 사용하려면 백엔드를 구성해야 한다. 백엔드는 Spring 밖에 할 줄 모르지만 (업무로 활용하는게 Spring..) 한번 node.js를 간단하게 활용하여 봇을 테스트 해보려 한다.

정말 네트워크, 서버, ... 백엔드의 영역은 너~어무 어렵다..

간단한 개념 정리

간단하게 알아본 내용을 정리했다. 잘못된 내용은 지적해주시면 빠르게 고치겠다.

NodeJS
- node.JS 는 javascript 를 활용한 "서버"이다.
- javascript는 브라우저에서만 사용(런타임) 할 수 있는 언어였다.
- 하지만 node.js 는 그 한계를 극복하여, 브라우저 외의 런타임(구동 환경)을 가능하게 한다.
- 정확한 사실은 따로 찾아보길 권장합니다..
Express
- nodejs를 위한 웹 프레임워크 중 하나
- nodejs로 웹 서버를 구성하게 되면, 라우팅이며 세션 관리며 이래저래 많은 것들을 다 짜야한다.
  하지만, express를 사용하면 간단하게 웹 서버를 구축하도록 도와준다.
  - 예를 들면, 프론트에서 라우팅을 만들려면 js를 통해 신나게 만들어야 하지만
    vue를 사용하면 vue-route를 사용하여 손쉽게 SPA를 만들도록 도와준다.
- express-generator란?
  - vue create [project] 혹은 create-react-app 처럼 기본 셋팅을 만들어주는 도구
  - 잘 만들어진 셋팅 환경을 사용하는 것

환경 셋팅하기

백엔드 서버 구성하기

IDE : VSCode
F/W : node.js + express

npm, yarn 등의 기초 셋팅은 완료된 상태입니다.

express-generator 글로벌 설치
- npm install -g express-generator
- express --version을 통해 설치 확인
express --view=pug [폴더명] 으로 폴더 생성
cd [폴더명] -> npm install 으로 패키지 설치 진행
아래 두 방법 중 하나로 실행
- DEBUG=botserver:* npm start
- npm start
http://localhost:3000 로 접속해보기

텔레그램 봇 생성

telegram 앱에서 BotFather 찾기
/newBot 으로 새로운 봇 생성하기
bot의 name 지정하기 ‍♂️ 채팅방에서 보이는 이름
bot의 username 지정하기 ‍♂️ @username 형태의 아이디
- 사용된 적이 없는, 고유한 username 을 지정한다.
- username의 끝은 항상 bot, Bot으로 끝나야 한다.
생성 완료되었고, token 이 발급되었다.
*해당 토큰이 곧 API_KEY 이다.

chat_id 확인하기 (1:1 대화)

위의 채팅방에서 t.me/nodeJS_w_bot 부분을 클릭하여 대화를 시작한다.
그 후 아무 메시지를 작성해서, 대화하려는 chat id을 알아낸다. (그룹방도 동일)
https://api.telegram.org/bot{TOKEN}/getUpdates을 URL에 치기
대화하는 유저의 채팅 ID가 표기된다.
해당 chat.id 를 활용하여 해당 id의 유저와 대화를 할 수 있다.

node.js와 텔레그램 봇 연동하기

npm i node-telegram-bot-api --save 모듈 설치하기
telegramtoken과 chatId 를 telegram.json혹은 .env 환경변수로 저장하기
.config/telegram.json으로 생성
.gitignore에 위 파일을 추가하여 git 업로드 방지하기
telegram 봇을 설정할 ./bots/telegram/index.js 파일 생성하기

// API KEY 값 import
const { token, chatId } = require('../../config/telegram.json');
// telegram Bot 선언
const TelegramBot = require('node-telegram-bot-api');

// 텔레그램 봇을 생성하고, polling 방식으로 메세지를 가져옴
const bot = new TelegramBot(token, { polling: true });

function start() {
   // '/echo' 라는 명령어가 오면, 로직 수행 후 => 따라 말한다.
   bot.onText(/\/echo (.+)/, (msg, match) => {
      // 'msg' : 텔레그램으로 부터 수신한 메세지
      // 'match' : 정규식을 실행한 결과

      const chatId = msg.chat.id;
      const resp = '따라하기 : ' + match[1];

      bot.sendMessage(chatId, resp);
   });

   // .on('message')을 통해 bot이 어떤 메세지든 수신하도록 해줌
   bot.on('message', (msg) => {
      const chatId = msg.chat.id;
      console.log(chatId);
      // send a message to the chat acknowledging receipt of their message
      bot.sendMessage(chatId, '메세지 수신 완료!');
   });
}

module.exports = {
   start: start,
};

const { token, chatId } = require('../../config/telegram.json'); 으로 따로 저장한 변수 설정 파일 불러오기
const TelegramBot = require('node-telegram-bot-api'); 모듈 import
function start() {...}의 형태로 메소드를 모듈화 하여 선언
레퍼런스 참고

./bin/www 파일에서 index.js에 선언한 텔레그램 봇 start 모듈 실행하기

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('botserver:server');
var http = require('http');
var telegramBot = require('../bots/telegram');

/**
 * telegramBot start
 */
telegramBot.start();

...

서버가 실행될 때, 자동으로 봇이 실행되도록 설정하는 부분

완성된 결과물

여러가지 생각들

텔레그램 봇의 메소드는 크게 세가지 (물론 더 있겠지..)
- bot.on('msg', [함수]) : 어떤 형태든 메세지를 듣는, 수신하는 함수
- bot.onText('match', [함수(param)]) : 'match' 의 메세지를 수신하여 비교 및 실행하는 함수
- bot.sendMessage(chatId, 'msg') chatId의 유저에게 msg를 발송하는 함수
./bin/www 의 역할은 무엇인가?
- app.js와 ./bin/www 중에서 최초로 실행되는, 즉 자바로 치면 main method는 무엇인가?
- app.js 라면, 왜 start() 함수를 www에서 선언했는가?
start() / module.exports = {...} 처럼 모듈화를 하면, 재사용성 및 직관성이 좋아진다.
setInterval()함수를 이용하여 서버 시작 시 30초마다 메세지가 발송되는 함수를 작성했는데, 정상 동작한다!
최초에 기획한 자동화 챗봇을 구현할 수 있겠다.
firebase의 cloud funtion 없이도 시간별로 특정 기능을 수행하는 기능을 구현할 수 있겠다!
(비용 절감)

남은 일들

그룹 채팅으로 테스트하기
챗봇 firebase에 업로드하여 상시 구동 여부 체크하기
하나의 firebase 프로젝트 안에 다른 앱으로 프론트/백엔드를 구성할 수 있는지?
firebase의 fire store 연동 테스트하기
데이터 구조화 등등 수행하기!

References

[node.js] telegram 연동하여 bot(1:1) 만들기

안녕하세요. 멍개입니다~~ 오늘은 node.js에서 telegram을 연동하여 봇을 만들기 위해 telegram을 연동하는...

blog.naver.com

넷플 지옥 고지/시연 개발자 짤, "내일 너는 회사에 간다"

3sammy — Mon, 20 Dec 2021 01:20:56 +0900

'내일 너는 회사에 간다' 보고 갑자기 삘타서 개발자 시연 짤도 만들어봤다..

이거 문의는 누구한테 하면 되나요...

운영 반영 안됐는데요

지라 이슈 체크하세요

[Vue.js] 스크롤 내리면 나오는 '맨 위로' 버튼 만들기

3sammy — Sun, 19 Dec 2021 22:38:40 +0900

인트로

렌탈스튜디오 예약시 간단하게 웰컴가이드 를 제공하고 있다. 기존에는 MVP(minimum value production) 를 위해 구글 독스를 이용해 PPT 형식으로 만들었다. 하지만

가독성이 너무 좋지 않았고
브라우저별 조작(제대로 드래그가 안되는 등)이 원활하지 못했다.

홈페이지 개발의 갈증을 해소하고 싶은 만큼, 내가 직접 웰컴 가이드를 수정하고 싶다고 생각했다. 기존처럼 좌우로 스와이프 하는 형태의 웰컴가이드를 제작할까도 고민했지만, 많은 글을 전달해야 하는 정보 전달 특성 상 우리에게 익숙한 세로 스크롤 형태를 채택하게 되었다.

하지만

세로로 길게 되어있는 줄글의 형식 상 원하는 글로 바로 가는 것이 어려웠고, A부터 Z까지 다 훑어봐야 한다는 불편함이 있었다. 이를 해소하기 위해선

바로가기를 header에 넣어두고, 헤더를 fixed로 상단 고정 하자
TOC(Table of Content)를 제공하여 전체 목차를 제공하자

두가지 방안을 생각하게 되었고, 빠른 개발을 위해 2번을 채택하게 되었다.

1번의 경우 기존에 구성한 CSS를 다시 편성해야 했다. 현재 MVP식의 개발을 위해 385px로 width를 고정한 상태여서 다시 div를 구성하고
~~..어쩌구 저쩌구.. 주절주절 ..~~

암튼 그래서 현재 구성에 기능을 더하고자 2번을 채택했다.

하지만2

2번 방식을 선택하게 되면, 맨 위로 올라가는 버튼을 위치시켜야 한다.
그리고 요즈음의 사용자 경험에 맞도록 하기 위해, 이 버튼은 스크롤을 내렸을 때만 등장하도록 개발해야 했다.

Why UX?

이미 많은 글이 존재하고 있기 때문에 시선의 분산이 발생

385px의 제한된 크기에서 맨 위로 버튼의 심미성을 증가시키기엔 많은 노력이 필요
나는 최소한의 노력으로 개발해야 하는 1인 개발자다..

위 두 가지 이유로 인해, 유저는 맨 위로 버튼의 존재조차 모를 것

하지만 스크롤을 내렸을 때 등장한다면,

새로운 버튼의 등장(with Animation)으로 인해, 버튼에 대한 시각적 인지

디자인적 요소에 대한 고민을 덜 수 있음(이미 시각적 인지가 가능하므로)

적용기

Vue에서 적용하는 방법은

document.addEventListener('scroll', method); 를 통해, 스크롤 이벤트를 걸기!
- 최신 프레임워크에서 구식 기능을 쓰는 식..
v-container 와 v-scroll 을 활용하여, v-container에 스크롤 액션을 리스닝하기!
- Vue 프레임워크에 맞는 방식!

이 중에 나는 1번을 선택했다.. 새로운 기능을 써보기도 싶었지만, 바닐라 JS에 좀 더 익숙해지고 싶었고, 이전에 사용해봤던 방식이라 빠르게 적용이 가능했다 (잊지말자! MVP!)

특히,

~~내년엔 꼭!~~

리액트를 연습해볼 생각이기 때문에, Vue의 편한 기능에 물들어지면 안되었다..
(라며 뗀석기 사용하기..)

Vue3에서 스크롤 이벤트 걸기

기본적인 스텝은 다음과 같다.

가상 DOM이 마운트 될 때, 이벤트 리스너 등록하기 + 이벤트 연결
- ```
mounted() {
  this.target = document.querySelector('#target');
  this.target.addEventListener('scroll', this.handleScroll);
},
```
- DOM 생성 후에 이벤트를 달아야 하기 때문에, created() 가 아닌 mounted() 를 해야한다.
  *lifeCycle에서 훑으며 읽은 내용이라 제대로 공부한 뒤에 수정하겠습니다
- 필자의 경우 전체 홈페이지가 아닌, 일부 div에서만 발생하므로 해당 DOM에 이벤트를 등록했다.
  또한 이벤트 리스너 삭제를 하기 위해, 해당 객체를 data로 따로 저장하였다.
- 전체 홈페이지에 거는 경우엔, document.addEventListener('scroll', ... ); 하면 된다.
1번에서 연결된 이벤트에 원하는 액션 달기
- ```
handleScroll: function (e) {
  this.scrollTop = e.target.scrollTop;
  if (this.scrollTop > 400) {
    this.isScrollDown = true;
  } else {
    this.isScrollDown = false;
  }
}
```
- 이벤트 발생하는 곳의 scrollTop 값을 가져오고, 해당 값이 특정 값을 넘어가면 버튼이 표시되도록 하기 위해 위처럼 작성했다.
페이지 이동(마운트 해제 전) 되기 전에, 이벤트 리스너 삭제하기
- ```
beforeUnmount() {
  this.target.removeEventListener('scroll', this.handleScroll);
},
```
- 스크롤을 달았던 객체를 다시 불러와서 삭제 전에 이벤트 리스너를 삭제한다.
- vue2에서는 beforeDestroy()를 사용했었는데, vue3에서는 라이프사이클에서 사라지게 되었다.
  따라서 beforeUnmount() 를 사용했다.
- 이벤트를 삭제하지 않으면, 해당 이벤트가 계속 등록되어 있어 사이드 이펙트가 발생 할 수 있다.

적용 된 전체 코드

<script>
export default {
   data() {
      return {
         isScrollDown: false,    // v-show를 통해 맨위로 버튼을 등장시키는 변수
         scrollTop: 0,                     // 스크롤 값 저장용
         target: null,           // 이벤트가 등록되는 변수
      };
   },

   // 1번 가상 돔 마운트 시, 이벤트 등록
   mounted() {
      this.target = document.querySelector('#target');
      this.target.addEventListener('scroll', this.handleScroll);
   },

   // 3번 마운트 해제 전, 이벤트 삭제하기
   beforeUnmount() {
      this.target.removeEventListener('scroll', this.handleScroll);
   },
   methods: {
     // 2번 이벤트 액션
      handleScroll: function (e) {
        this.scrollTop = e.target.scrollTop;
        if (this.scrollTop > 400) {
          this.isScrollDown = true;
        } else {
          this.isScrollDown = false;
        }
      }
   },
};
</script>

이슈 사항

중복호출.. 몬지..알지?..

하지만 이렇게 작성하게 되면, 스크롤이 발생할 때마다 메소드가 반복 호출되게 된다.
지금은 스크롤이 많지 않아 큰 문제는 되지 않지만, 이런 사소한 문제도 핸들링해보는 경험이 필요하다..

반복 호출을 줄이기 위해선, 이벤트를 제어하는

디바운싱(Debouncing)
쓰로틀링(Throttling)

을 사용해야 한다.

이중에 쓰로틀링(Throttling) 은 함수 호출 이후 특정 시간 안에 중복 호출 시 무시되도록 하는 기능인데, 쓰로틀링이 스크롤 액션간 많이 활용된다. 필자 또한 이를 활용하여 문제를 해결하고자 한다!

그 해결기는 다음 포스트에 작성하겠다!

완-성!

[Vue.js] 환경 변수(.env) 설정하여 API KEY 숨기기

3sammy — Thu, 9 Dec 2021 20:30:09 +0900

인트로

여러 공간에서 사용되는 API KEY가 존재하는데, 이를 한번에 변수처럼 관리하고 git에 업로드를 방지해야 한다.

npm 라이브러리인, dotenv를 이용했다.

설정

npm install dotenv 를 하여 vue3에 해당 라이브러리를 추가한다.
최상위 폴더에 .env 파일을 추가한다.
- 파일 안에 필요한 API KEY를 작성한다. 단, 앞에 VUE_APP_을 추가해야지 전역에서 정상적으로 인식한다. 추가로 전역 변수/상수의 경우 대문자로 작성하는 것이 일반적 규칙이다.
- ```
작성예)
VUE_APP_API_KEY=abc!@#$
```
git에 업로드를 방지하기 위해, .gitignore에 위 파일을 추가한다.
- ```
# local env files
.env
.env.local
.env.*.local=
```
main.ts에 해당 파일을 import 및 적용한다.
- ```
import dotenv from 'dotenv';

dotenv.config();
```
테스트
- ```
created() : {
    console.log(process.env);
}
```
  테스트 결과 로그에 정상적으로 출력을 확인했다.
실 사용한다.
- ```
...
ApiKey: process.env.VUE_APP_API_KEY,
...
```
- 배포 후에도 정상 적용 되었다.

한계 및 앞으로

API KEY를 숨기기 위해 환경변수를 적용했는데, 실제 운영 배포한 파일의 소스를 뜯어보면 다시 그래도 API KEY가 들어가있는 것을 확인할 수 있다. Vue를 사용해서 스크립트로 변환되었기에 망정이지 ... 그냥 .js로 작성했으면 더욱 쉽게 발각되었을 것이다..

일단 위 NPM은 git에 업로드 되는 것을 방지하기 위한 녀석이라고 생각하고, 운영 배포된 서버에서는 어떻게 숨겨야 하는지 다시 찾아보고 적용해봐야겠다.

[Vue.js] Vue3 + TS 환경에 구글 애널리틱스(GA)를 적용하기

3sammy — Sun, 5 Dec 2021 22:15:25 +0900

개발 환경
- Vue3 (v4.5.13)
- typescript (v4.1.5)
- vue-gtag-next (v1.14.0)

인트로

이번에 스튜디오 홈페이지를 개발하여 오픈했다. 프론트는 Vue3를 사용하였고, 백엔드는 따로 구성하지 않고 파이어베이스를 통해 진행하였고 호스팅까지 진행했다.

배포한 이후 몇명의 사용자가 오는지 측정하고자 하였는데, 그럴려면 DB에 사이트 조회수를 카운팅해야 했다. 물론 이것도 필요하긴 하지만, 그 추이를 파악하기 위해선 어드민 페이지도 필요했다. 당장의 MVP를 만들기엔 불필요한 부분이었다.

~~그리고아직 리얼타임 DB 적용해본적이 없다ㅎ~~

그래서 GA를 달기로 결정했다. 기본적으로 방문자 수 카운팅과 추이를 확인할 수 있었고, 많은 마케터들의 성과 측정 도구인 만큼 한번 사용해보고 싶었다.

~~그리고 달면 왠지 멋있어 보이잖아~~

Vue에 GA를 적용하는 방법 세 가지

NPM : vue-analytics (불가 ‍♂️)

vue-analytics을 설치하는 건데 이는 현재 불가능하다.
- npm install vue-analytics
구글측에서 Google Analytics를 단순 분석/트래킹용 (analytics.js) 에서 글로벌 사이트 태깅 (gtag.js) 으로 확장을 진행하고 있다.
- 그 흐름에 맞춰 이 라이브러리도 deprecated(더이상 지원하지 않는) 되었다.

NPM : vue-gtag

위에서 언급한 글로벌 사이트 태깅을 지원하기 위해 확장한 라이브러리
- 글로벌 사이트 태그 (gtag.js)는 자바스크립트 태깅 프레임워크이자 API 이다.
  구글 아날리틱스, 구글애즈, 구글 마케팅 플랫폼에 이벤트 데이터를 전송할 수 있도록 도와준다.

적용 방법

npm install vue-gtag
NPM LINK
main.js 에서 라이브러리를 적용 및 렌더시킨다.

import Vue from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag";

Vue.use(VueGtag, {
config: { id: "UA-1234567-1" }
});

new Vue({
render: h => h(App)
}).$mount("#app");

에러

main.ts에서 app.use(VueGtag, {...})를 하면, 계속 VueGtag가 없다는 에러가 발생함

Issues checking in progress...
ERROR in src/main.ts:11:9
TS2345: Argument of type 'typeof VueGtagPlugin' is not assignable to parameter of type 'Plugin_2'.

...

   9 | const app = createApp(App);
  10 |
> 11 | app.use(VueGtag, {
     |         ^^^^^^^
  12 |    config: { id: '111' },
  13 | });
  14 |

라이브러리의 주소를 계속 참조를 못하길래, 트라이 하다가 포기
- Vue3 + TS환경, 특히 타입스크립트를 사용하고 있기 때문에 안된다고 판단

NPM : vue-gtag-next (성공 )

vue-gtag와 동일하지만, Vue 3를 지원하기 위해 개발된 라이브러리

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

// GA
import VueGtag from 'vue-gtag-next';

const app = createApp(App);

app.use(VueGtag, {
   property: { id: 'G-1234567' },
});

app.use(store).use(router).mount('#app');

적용 끝~!

라이브러리 하나로 설정이 되다니, 너무 편리하다. 렌탈스튜디오 홈페이지인 만큼 꾸준히 유저가 유입되는 구조라 GA를 테스트해보고 사용하기 적합하다고 생각한다. 유저들이 어떤 디바이스로 접근하고 어떤 페이지에 머물르는지 확인 할 수 있는게 참.. 신기할 따름이다.

이제 GA 에서 어떤 기능들이 있고, 유의미한 인사이트를 뽑기 위해선 어떤 걸 보아야 하는지 공부해봐야겠다!
물론 그 전에 SPA에서 GA를 어떻게 최적화 할 수 있을지.. 내가 시도한 미립자 팁도 같이 공유해야겠다.

끝!

Velog가 아닌 티스토리를 택한 (사소한) 이유들

3sammy — Thu, 2 Dec 2021 14:25:47 +0900

인트로

블로그를 (다시) 시작해야겠다고 마음을 먹었다.

어차피 노션으로 이슈를 정리하는데, 잘 정리해서 공개하면 좋을 것 같아서
개발자에게 있어, 개발 블로그는 좋은 포트폴리오여서
글을 쓰는 과정에서 지식이 재정립되기 때문

또한 간간이 달리는 댓글들도 뿌듯했다. 물론 '어떻게 글을 작성해야 할까'에 대한 고뇌 가 상당하기 때문에, 고민도 되었지만 글을 써서 여러 사람에게 공개하는 과정은 나에게 있어 도움이 되는 것은 분명했다. 위와 같은 이유들로 인해 블로그를 다시 시작하려고 한다. 그리고 이 과정에서 또 선택이 생긴다.

어떤 플랫폼을 선택할 것인가.

블로그는 여러가지가 있지만, 나는 Velog, 티스토리, 브런치 위 세 가지를 놓고 고민했다.

사실 브런치는 개발이란 주제에는 적합하진 않지만, 개인적으로 좋아하는 플랫폼이라 넣었다. 그래, 사실 이 글은 Velog, 티스토리에 대한 글이 주요 흐름이다.

Velog

마크다운 기반의 글쓰기 환경
- 노션을 메인 DB로 활용하며 마크다운이 익숙해졌다.
- 개발 업무를 진행하며 내부망이지만 Typora로 작업 내용을 기록한다.
- 그러다 보니 마크다운의 편리함과 간결함에 반했다.
개발자를 위한, 개발자에 의한!
- 개발과 관련된 내용 기록이 벨로그에 많이 모여있을 만큼, 커뮤니티 형성이 잘 되어 있다.
이런 기능도 좋더라
- TOC(Table of Content) : 목차가 우측에 따라오며 바로가기를 지원해준다.
- 시리즈, 글, 태그 별로 간결하게 표시해준다.
‍♂️ 처음부터 다시 시작이라니..
- 아무래도 플랫폼을 옮기면 처음부터 다시 시작해야했다.
  지금 블로그도 그렇게 열심을 다하진 않아도 나름 메이저 글이 있어 방문자가 나오는 편인데, 새로 시작하면.. (나죽어~)
- 내가 그렇게 열심을 다해 활동할까..
‍♂️ 스킨에 대한 자율성이 없어
- 튜닝의 끝은 순정이다 라고 하지만, 이것도 튜닝을 해본 사람이 하는 말이다.
  특히 나처럼 학생 때부터 열심히 안드로이드 폰을 루팅하길 좋아했던 나는, 튜닝에 미쳐있다고 봐야한다.
- 그런 의미에서 스킨에 대한 자유도가 없는 것은 좀 많이 아쉽다..
- 그리고 나는 디자인 + 개발자의 포지션을 갖고 싶다. CSS 수정하고 싶다..

티스토리

사실 Velog의 내용들을 반대로하면 티스토리에 대한 내용이다.
(개발)이 주 내용이지만? 다른 내용도?
- 개발적 이슈, TIL(Today I learned) 뿐만 아니라 IT 제품이나 살면서 알게된 내용들도 소개하고 싶다.
- 그런데 뭔가 벨로그로 가면, 개발에 대한 이야기만 적어야 할 것 같단말이지
굉장한 자유도가 있다.
- 스킨 편집이나 기능, 외부 스크립트를 마음대로 붙일 수 있다.
- 곧 GA를 달려고 한다.
‍♂️ 마크다운 글쓰기는 아쉬워
- 물론 티스토리도 에디터 모드 중 마크다운을 지원하고 있다.
- 그래서 일단 현재 Typora로 글을 작성하고 옮기고 있다.
- 여러분이 보는 이 글이 마크다운 에디터로 작성한 글이다.

결론

결론적으로 Velog가 아닌 티스토리를 택했다. 단, 다음의 내용들을 보완할 예정이다.

마크다운 기반의 글쓰기 환경이 되도록 셋팅한다.
- 현재 하이라이트 코드 블록 / 인라인 코드 블럭 을 수정했다.
- 계속 Typora 작성 -> 마크다운으로 옮기기 를 테스트 할 예정이다.
추가 기능을 넣어보자!
- 개발한 스튜디오 홈페이지에 GA를 삽입했는데, 방문자수를 보며 신기했다.
  티스토리도 한번 적용해봐야겠다.
- TOC가 스크롤에 따라 따라오도록 기능을 추가해보자!
깔끔하고 잘 만들어진 스킨을 적용한다. (완료)
- 그 일환으로 JB SKIN 167 v3.2.0 을 구매해서 적용했다.
- 블로그 스킨치고 5만원 이란 거금이지만, 아무것도 없는 상태에서 빌드업하기엔 시간이 너무 많이 소요된다.
- 따라서 잘 만들어진 스킨을 바탕으로 내가 원하는 디자인과 기능을 붙이는게!
  완성도나 시간/비용 절약 측면에서 유리하다.
글을 많이 쓴다!
- 이전에 수익 신청했다가 거절된 적이 있는데, 그 후로도 꾸준히 블로그 방문을 기록했다. 차라리 그때 열심히 더 해서 신청해볼걸, 싶었다.
- 3개월 내에 20개 이상의 글(개발 관련)을 작성해서 수익 신청 성공할거다!
  - 혹시 모르지, 취미가 될 수도

공유기 2대로 멀티 Wifi 만들기 (공유기 허브 AP 모드)

3sammy — Mon, 19 Apr 2021 06:10:32 +0900

공유기 허브모드, AP모드라고 검색하면 더욱 상세한 포스팅이 나온다.
여기선 필자가 겪은 상황에 대해서만 쓰고 추후 포스팅을 통해 상세히 다루겠다.

하려는 것과 준비물

하려는 것 : 랜선으로 연결된 서로 다른 공간 (5층, 6층)에 wifi 만들기

준비물 : 공유기 2대

상황 설명

먼저 필자는 위와 같은 상황이다.

5층에 200MB 정도 되는 인터넷이 가입되어 있고, 이 인터넷을 통해 데스트톱 1대와 유선 연결 / 와이파이 1개가 구성되어 있다.

6층에서도 5층의 와아파이를 쓰고 싶지만, 아무래도 층과 위치가 달라서 1MB도 나오지 못한다.

따라서 5층 메인 공유기에서 랜선을 길게 연결해서 6층으로 올려, 직접 유선랜 환경을 구성했다.

특히 창문을 지나서 나가야 하는 만큼, 창문과 같은 구조에서도 꺾여서 가능한 RJ45 랜 케이블 연결선으로 가설했다.

자세한 그림은 아래와 같은데,

이렇게 구성해서 사용중이었으며 맥북에선 70MB/s 정도의 원만한 속도로 사용중이다.

그런데 여전히 와이파이가 되질 않아서, 아이패드 등에 와아파이가 필요하면 늘 맥북에서 인터넷 공유를 켜서 사용중이다..

유용한 기능이긴 하나, 매번 켰다 끄는게 지친다..

따라서 필자는

- 추가적인 인터넷 설치 필요 없이 (6층 개통 X)

- 기존처럼 유선랜 환경을 유지하며

- 6층에 wifi를 빵빵 터트리고 싶다.

허브 모드 하는 방법

내가 원하는 상황을 하기 위한 최적의 방법은, 남는 공유기 1대로 허브 모드를 만드는 것이다.

허브 모드란, 새로운 IP를 생성해서 부여하지 않고 기존 꺼를 분배만 하는 역할을 수행하는 녀석이다.

**메인 공유기는 건들지 않는다. 멀쩡하게 잘 되는 녀석은 건들지 말자

1️⃣ 서브 공유기 전원 켜서 초기화하기

말 그대로 서브 공유기 전원을 연결해서 켠 뒤, 아무런 랜선을 꼽지 않은 상태로 하드웨어 초기화를 진행한다.

필자는 아이피타임 N604S 모델을 서브 공유기로 설정했다. 왜냐면 남았거든.

공유기 밖에 잘 보면 RST이라 되어있는 녀석이 있다. 이걸 5~10초 꾹 눌러주면, 하드웨어 초기화가 된다.

(전체 불이 점등되었다든가, CPU 램프만 빠르게 뛴다거나, 특정 불이 꺼진다거나 하면 초기화 된거다. 볼펜 떼주자)

출처 : https://emflant.tistory.com/204

2️⃣ 서브 공유기와 유선으로 PC와 연결하기

해당 공유기의 초기 셋팅을 바꾸기 위함이다. 서브 공유기 4번 포트 ↔️ 맥북 를 유선랜으로 연결한다.

그리고 맥북은 wifi를 꺼서 그 어떤 인터넷도 연결되지 않게 한다.

3️⃣ 서브 공유기 SW 초기 셋팅하기

192.168.0.1 로 접속해서 공유기 셋팅 화면으로 접속한다.

접속 시 위에 어떤 공유기의 셋팅 화면으로 접속했는지 모델명이 표시되어 있는데 이게 맞는지 확인해야 한다.

만약 메인 공유기의 미약한 와이파이에 접속했다면, 메인 공유기의 SW를 건드리게 되므로 주의한다.

필자는 와이파이 연결되었는지도 모르고 메인 공유기 설정 바꿨다 고생좀 했다..

아래 상황은 빠르게 기술하고, 추후 사진을 넣겠다.

1. DHCP 서버 설정 - DHCP 서버 동작 - [중지] - 적용
2. 내부 네트워크 설정 - 기본 네트워크 주소 - 192.168.0.200 으로 설정 - 재시작
 // 자신이 원래 사용하는 네트워크의 주소가 중요하다.
 // 만약 xxx.xxx.100.xxx 가 원래 사용하는 주소라면
 // 변경 할 때, x.x.100.200으로 바꾸어야 한다.
 // 중요한 것 = 사용하는 네트워크 주소 중 마지막만 200으로 바꾸기!

저렇게만 설정해주면, 허브 모드 설정이 끝난다.

그럼 이제 서브 공유기는 SW 설정이 끝나고, 네트워크 연결 없이는 다시 셋팅 화면 접속이 불가해진다.

(설정을 잘못했다면 그냥 하드웨어 초기화해라)

4️⃣ 서브 공유기 ↔️ 메인 공유기 연결하기

이제 메인 공유기(좌측)에서 나온 랜선을 서브 공유기(우측) 1번 포트에 연결한다.

그럼 각 공유기의 연결 상황은 다음과 같다.

[메인 공유기]
ㄴ WAN    : 가입한 SK 인터넷 회선
ㄴ 1번 포트 : 5층 데스크톱 유선 연결
ㄴ 2번 포트 : 6층으로 가는 랜선
ㄴ 3번 포트 : -
ㄴ 4번 포트 : -

[서브 공유기]
ㄴ WAN    : -
ㄴ 1번 포트 : 5층에서 오는 랜선
ㄴ 2번 포트 : -
ㄴ 3번 포트 : -
ㄴ 4번 포트 : 6층 맥북과 연결하는 랜선

이제 저렇게 연결하면 기본적으로 6층의 맥북은 유선으로 연결이 되었다.

자, 이제 휴대폰으로 6층 와이파이를 보자. 그러면 비번이 없는 iptime이 있다고 뜰 것이다.

이것을 이제 설정하기 위해 앞서 설정한 192.168.0.200 을 주소창에 쳐서 들어간다.

그리고 서브 공유기 무선 네트워크 설정으로 들어가서 와이파이에 비번을 설정해주면 된다!

따라서 이제 6층에서도 4칸 짜리 와이파이가 구성되었다.

속도 측정을 하니 50Mb/s 정도 측정된다. 성공이다.

[JAVA][백준 17142] 연구소 3

3sammy — Fri, 2 Apr 2021 08:17:45 +0900

사이트명	백준
문제 링크	www.acmicpc.net/problem/17142
주요 알고리즘	조합, BFS
사용 언어	Java 자바
알고리즘이 낯선 사람들을 위해 생각 노트를 같이 두었습니다.

1. 문제

2. 입력 / 출력

Check Point

- 풀이 알고리즘의 결정

1. 바이러스 개수는 최대 10개 = 10C5 조합 결과 250개

2. 최대 칸 수 50칸 = 50^2 그래프 탐색시 최대 걸리는 시간 2500

===> 완전 탐색으로 가능

- 출력 값

출력이 결국 모든 칸에 바이러스가 있게 되는 최소 시간. 따라서 칸과 시간을 중점으로 체크해야 한다.

3. 풀이

3-1. 생각 노트

1. 바이러스(2)인 수를 전부 virusList에 넣기
2. nCm 의 형식으로 모든 경우에 대한 조합 생성
3. 조합을 기준으로 virusList에서 get(i)로 해당 값을 Queue에 넣고 실행

이 때, 중요한 포인트는

1. 시간이 증가되는 것처럼 동시에 진행된다? BFS

- 경로 찾기, 다양한 경우가 중요하면 DFS

2. BFS에서 Queue에 삽입한다? 거기도 방문 체크를 하자!

- 이거 까먹기 쉽다..

3-2. 변수명

변수명	설명
static ArrayList<Virus> virusList	바이러스들의 위치와 시간값을 기록하기 위한 리스트. 이 리스트는 맨 처음 입력받은 대로 고정이고 조합 결과에 따라 인덱스로 접근할 수 있게 해줌.
다른 변수들은 코드에 적어두었습니다.

3-3. 코드 보기

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.LinkedList;
import java.util.Queue;

/* 풀이 생각
 * 1. 바이러스(2)인 수를 전부 virusList에 넣기
 * 2. nCm 의 형식으로 모든 경우에 대한 시간 계산
 * 3. m번 반복하며 BFS로 바이러스 확산 처리
 */

// 바이러스의 시간과 위치를 기록하기 위한 객체
class Virus {
	int x;
	int y;
	int time;
	
	public Virus(int x, int y, int level) {
		this.x = x;
		this.y = y;
		this.time = level;
	}
}

public class Main {
	
	static int N, M;
	static int[] picked; // 뽑은 조합을 기록

	static ArrayList<Virus> virusList = new ArrayList<>();
	
	static int[][] map;
	static boolean[][] isVisit;
	static int blank;		// 빈칸 기록
	
	static int[] dx = {-1,1,0,0};
	static int[] dy = {0,0,-1,1};
	
	static int min = Integer.MAX_VALUE;
	
	public static void main(String[] args) throws Exception {
		
		
		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		
		String[] input = br.readLine().split(" ");
		N = Integer.parseInt(input[0]); // 연구소 크기
		M = Integer.parseInt(input[1]); // 바이러스 개수
		
		map = new int[N][N];
		
		// ==============
		//  * 데이터 입력
		// ==============
		for (int i = 0; i < N; i++) {
			input = br.readLine().split(" ");
			for (int j = 0; j < N; j++) {
				int num = Integer.parseInt(input[j]);
				
				map[i][j] = num;
				
				if(num == 2) {
					virusList.add(new Virus(i,j,1));
				}else if(num == 0) {
					blank++;			// 비어있는 칸(바이러스가 퍼져야 할)의 갯수 
				}
			}
		}
		
		// 빈칸 없는 경우 바로 끝
		if(blank == 0) {
			System.out.println(0);
			return;
		}
		
		// 뽑은 조합을 저장하기 위한 배열
		picked = new int[M];
		
		// 조합 + 탐색 시작
		combination(0, 0);
		
		// 다 못채우면 그냥 끝냄 ->
		if(min == Integer.MAX_VALUE) {
			System.out.println(-1);
			return;
		}
		
		System.out.println(min);
		
	}

	// cnt(현재까지 뽑은 수), cur(현재 가르키는 번호)
	private static void combination(int cnt, int cur) {
		if(cnt == M) {
			BFS();		//조합이 완성되면 탐색 시작
			return;
		}
		
		for (int i = cur; i < virusList.size(); i++) {
			picked[cnt] = i;
			combination(cnt+1, i+1);
		}
	}

	private static void BFS() {
		Queue<Virus> q = new LinkedList<>();
		isVisit = new boolean[N][N];
		
		// 뽑힌 수대로 바이러스 리스트에 접근해서 Q에 삽입
		for (int i = 0; i < M; i++) {
			q.add(virusList.get(picked[i]));
			isVisit[virusList.get(picked[i]).x][virusList.get(picked[i]).y] = true;
		}
		
		int time = 0;		// 걸린 시간 기록
		int count = 0;		// 빈칸 확산 카운팅
		
		while(!q.isEmpty()) {
			Virus v = q.poll();
			
			for (int k = 0; k < 4; k++) {
				int nx = v.x + dx[k];
				int ny = v.y + dy[k];
				
				
				// 이전에 있던 바이러스의 시간값을 받아오므로 계속 증가할 수 밖에 없음
				time = v.time;
				
				// 범위 밖 OR 이미 방문 = 아웃
				if(!(0 <= nx && nx < N && 0 <= ny && ny < N) || isVisit[nx][ny]) continue;
				
				// 빈칸이어서 확산한 경우)
				if(map[nx][ny] == 0) {
					isVisit[nx][ny] = true;
					count++;
					q.add(new Virus(nx,ny,v.time+1));
				}
				
				// 확산은 못하지만 지나갈 수 있는 경우)
				if(map[nx][ny] == 2) {
					isVisit[nx][ny] = true;
					q.add(new Virus(nx,ny,v.time+1));
				}
				
			}
			
			// 만약 이미 빈칸이 채워졌다면 사전에 종료시킴으로써 시간값의 계속 증가를 방지
			if(count == blank) {
				time++;	// 이경우, 새로 뽑은 시간값 할당이 안되므로, 임의로 1 증가
				break;
			}
		};
	
		if(count != blank) return;	// 다 못채우면 그냥 끝내기
		
		// time-1의 이유 : 마지막에 +1한 상태를 q에 날리기 때문
		min = Math.min(min, time-1);
	}

}

3-4. 마무리

틀린 이유

1. 각 바이러스마다 시간 값을 기록하고 이를 지도에 반영했다.

- 머릿속으로 '각 바이러스마다 Queue로 접근하며 확산할텐데, 그럼 그 때의 시간을 어떻게 기록하지?' 에 대한 고민의 결과였다..

- 저것을 기록하기 위해 copyMap을 만들고, deep copy를 해서 직접 배열 내의 값을 time으로 할당하는 작업을 가졌다. (활용도 안하면서)

- 왜 계속 실제 map을 바꿔야 한다고 생각했을까? 방문 배열만 활용해서 방문한 것 처럼 처리가 되는데

2. 비활성 바이러스더라도 지나갈 순 있다.

- 비활성 바이러스에 대한 처리를 아예 하지 않았다. 생각을 못한거다..

이건 조합을 활용한 BFS 문제다. 따라서 조합에 대한 코드를 빠삭히 알고 있어야 한다.

또 실제 지도를 업데이트 해야 한다는 생각때문에 코드를 복잡하게 구성했다. 예시에 나온 것 처럼 실제 맵을 업데이트 할 필요 없이, 방문 배열만 확인하면 된다. 그래서 비어있는 칸을 blank로 입력 받아서 이를 확인하는 작업을 수행하면 된다.

사실 더 쉽게 짤 수 있을 것 같은데, 일단 내가 틀렸던 부분 위주로 수정해서 업로드했다.

다양한 반례에 대해 생각하자.

[JAVA][백준 16236] 아기상어

3sammy — Tue, 30 Mar 2021 07:50:53 +0900

사이트명	백준
문제 링크	www.acmicpc.net/problem/16236
주요 알고리즘	시뮬레이션, BFS,
사용 언어	Java 자바
알고리즘이 낯선 사람들을 위해 생각 노트를 같이 두었습니다.

1. 문제

2. 입력 / 출력

3. 풀이

3-1. 생각 노트

골드4의 아기상어 문제.

일단 삼성의 주요 기출 형태(구현) 중 하나이다. 조합같은 개념이 적용되진 않아서 어려운 편은 아니다.

그저 문제를 잘 읽고, 그대로 잘 구현 하면 된다.

상어는 물고리르 탐색하고 -> 식사 가능한걸 먹는다!

3-2. 변수명

변수명	설명
Class Fish	물고기들의 시간값(거리)를 기록하기 위한 객체
ArrayList<Fish> feedList	식사 가능한 경우 들어가는 후보 먹이 리스트! 추후 정렬을 통해 어느것을 먹을지 결정한다.
Queue<Fish> q	이동 가능한 경우에 들어가는 이동 대기열!

3-3. 코드 보기

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Comparator;
import java.util.LinkedList;
import java.util.Queue;

public class BOJ16236_아기상어 {

	// 먹이가 될 물고기
	private static class Fish {
		int x, y, time;

		public Fish(int x, int y, int time) {
			super();
			this.x = x;
			this.y = y;
			this.time = time;
		}
	}
	
	static int N;
	static int[][] map;
	static boolean[][] isVisit;
	
	static Fish shark;		// 상어도 물고기! 상어의 위치를 기록
	static int size = 2;
	static int eaten = 0;
	
	static ArrayList<Fish> feedList = new ArrayList<>();
	static int answer;
	
	static int[] dx = {-1, 1, 0, 0};
	static int[] dy = {0, 0, -1, 1};

	public static void main(String[] args) throws Exception {
		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		
		String[] input = br.readLine().split(" ");
		N = Integer.parseInt(input[0]);
		
		map = new int[N][N];
		isVisit = new boolean[N][N];
		
		for (int i = 0; i < N; i++) {
			input = br.readLine().split(" ");
			
			for (int j = 0; j < N; j++) {	
				map[i][j] = Integer.parseInt(input[j]);
				
				if(map[i][j] == 9) {
					shark = new Fish(i, j, 0);
					map[i][j] = 0;
				}
			}
		}
		
		simulation();
		System.out.println(answer);
	}

	private static void simulation() {
		
		Queue<Fish> q = new LinkedList<>();
		q.add(shark);
		isVisit[shark.x][shark.y] = true;
		
		while(true) {
			while(!q.isEmpty()) {
				Fish now = q.poll();
				int time = now.time;

				
				for (int k = 0; k < 4; k++) {
					int nx = now.x + dx[k];
					int ny = now.y + dy[k];
					
					// 범위 밖 -> 아웃
					if(!(0 <= nx && nx < N && 0 <= ny && ny < N) || isVisit[nx][ny]) continue;
					
					// [식사 가능] 먹이 리스트에 추가
					if(map[nx][ny] < size && map[nx][ny] != 0) {
						q.add(new Fish(nx, ny, time+1));
						isVisit[nx][ny] = true;
						feedList.add(new Fish(nx, ny, time+1));
					}
					
					// [이동만 가능] 사이즈랑 동일 OR 비어있음(0)
					if(map[nx][ny] == size || map[nx][ny] == 0) {
						q.add(new Fish(nx, ny, time+1));
						isVisit[nx][ny] = true;
					}
				}
			}
			
			if(!feedList.isEmpty()) {
				eat();
				// 식사가 끝났으면, 방문 배열 초기화
				
				q.clear();
				isVisit = new boolean[N][N];

				// 다시 이동하는 큐(q)에다가 현재 상어 추가
				q.add(shark);
				isVisit[shark.x][shark.y] = true;
			}else {
				return;
			}
		}
		
	}

	// 먹이 리스트가 값이 존재하면, 식사 시작
	private static void eat() {
		
		// 정렬을 통해 우선순위별로 먹이 리스트 재정렬
		Collections.sort(feedList, new Comparator<Fish>() {
			@Override
			public int compare(Fish o1, Fish o2) {
				if(o1.time == o2.time) {
					if(o1.x == o2.x) {
						if(o1.y > o2.y) {
							return 1;
						}else {
							return -1;
						}
					}else {
						if(o1.x > o2.x) {
							return 1;
						}else {
							return -1;
						}				
					}
				}else if(o1.time > o2.time){
					return 1;
				}else {
					return -1;
				}
			};
		});

		Fish now = feedList.get(0);
		
		// 상어 위치 이동, 상어가 먹은 횟수 증가, 상어 걸린 시간 증가
		shark.x = now.x;
		shark.y = now.y;
		
		if(++eaten == size) {
			size++;
			eaten = 0;
		}
		
		answer += now.time;
		
		// 지도 위에 해당 위치 0 처리
		map[now.x][now.y] = 0;
		
		// 먹이 리스트 초기화
		feedList.clear();
	}

}

3-4. 마무리

이전에 한번 푼 문제였는데, 다시 푸니 틀렸다...

틀린 이유 분석

- BFS를 수행할 때, time+1로 시간값이 증가하므로 4방 탐색을 하는 단계마다 먹이 리스트에 넣으면 거리(시간)계산을 안해도 되겠다는 생각으로 접근

- 하지만, 몇몇 값에선, time값이 늦게 반영되어 동일한 시간값이지만 체킹을 못하고 넘어가는 경우가 발생..

- 아, 식사 가능한 경우에도 먹이 리스트에 넣고 + 이동 Q에도 넣어야 한다. 이부분 살짝 애매하면 꼬인다.

따라서, 로직 자체를 while로 무한루프를 만들고 [BFS 탐색 -> 식사] 를 반복하는 형태로 변경

BFS는 BFS로만 두고, 로직을 끼우지 말자. 딱 탐색이라는 기능만 구현해두는게 맞다.

아.

이전 코드를 다시 보는데, 내가 썼던 변수명이나 스타일이 똑같았다..

역시 사람 안변한다는 걸 느낀다.. 아니, 변하진 않고 더 발전하겠지..

	파일 형식	설명	방법	중시하는 것
Servlet	`.java`	자바에서 작성하는 HTML 코드	`out.println()`	Login (로직)
JSP	`.jsp`	HTML에 넣는 자바 코드	`<% ~ %>`	Presentation (디자인, 표현)

sammyDevLog

[Python][MAC] VSCode에서 ModuleNotFoundError: No module named 계속 발생

에러 내용 및 상황

원인

해결

레퍼런스

[python] OSError: [Errno 63] File name too long 해결 Method

에러 내용 및 상황

원인

해결

파이썬 코드

적용

레퍼런스

void(0)에 대하여 + 마우스 우클릭 활성화하기

왜 href에 javascript:void(0)를 사용할까?

문제 : 마우스 우클릭 액션이 막힌다

담당 서비스에선?

마우스 우클릭 액션을 살리고, a태그의 리다이렉션은 막는 방법

event.preventDefault()에 대하여

[React] useEffect와 useCallback 차이 간단 정리!

useCallback()

useEffect()

그래서, 차이점은?

다시 시작하는 맥북 셋업 - Alfred 설정 백업하기

Alfred 설정 백업 방법

[MAC] 업데이트 이후 오류 해결하기. xcrun: error: invalid active developer path

에러 내용 및 상황

원인

해결

[후기] 로지텍 MX Master 3S 페일 그레이, 3달 후 변색에 대하여

변색 이슈?

3달 사용 후, 상태

후기

[에러 리포트] 파이썬 셀레니움, ValueError: There is no such driver by url

에러 내용 및 상황

원인

추가내용

해결

레퍼런스

크롬 확장 프로그램 압축 및 설치, 2가지 방법 간단 정리

확장 프로그램 압축하기

<방법1> 사이트 이용 (추천 )

<방법2> 개발자 모드 내 압축/해제 이용하기

확장 프로그램 설치하기

Next.js 프로젝트 셋업 하기

1️⃣ 설치하기

2️⃣ 실행하기

⌨️ 실행되는 파일은?

_app.js

index.js

CSR, SSR에 대한 장단점 정리 (feat. SPA)

ℹ️ SSR (Server Side Rendering)

☀️ 장점

단점

ℹ️ CSR (Client Side Rendering)

☀️ 장점

단점

‍♂️ SPA으로 구성된 페이지에서 SSR 필요한 이유?

다음 글

내가 보려고 만든, 잠스트 무릎 보호대 시리즈 총정리! (테니스, 러닝 보호대 추천)

인트로

시리즈별 비교

RK-1+

JK-2

EK-5

ZK-7

내 선택은?

참고자료

[MAC] 안정적인 파이썬 3.9.x 버전, M1에 설치하기

안정적인 버전?

설치

설치 끝!

옵시디언(Obsidian) 플러그인과 테마, 오프라인 설치 방법

인트로

방법

플러그인 설치 방법

테마 설치 방법

마무리

로지텍 MX Master 3S 개봉기, 구매 이유와 Logi Option까지

구매 이유

왜 href에 `javascript:void(0)`를 사용할까?

case1) `Permission denied` 발생

case2) `Operation not permitted` 발생

case3) 파이썬 모듈을 찾지 못하는 경우 `ModuleNotFoundError`