안녕하세요. 비스카이비전입니다. 오늘은 기쁜 소식을 하나 공유하고자 합니다.^^

이전에 구름IDE를 활용하여 토이 프로젝트로 진행했던 "우리 아이 색칠 공부"가 구름IDE 활용 사례로 선정되었습니다. 우리 아이 색칠 공부는 업로드한 이미지를 색칠 공부 도안으로 무료로 변환해주는 사이트입니다. 

https://blog.goorm.io/ide-case-coloring-book/

멋지게 제 토이 프로젝트를 소개해준 구름(groom)에 감사의 말씀을 전하고 싶네요! 구름 블로그에 제 이름과 블로그가 소개되니 신기하네요...^^;

저는 그동안 구름IDE를 토이 프로젝트, 마이크로 웹 서버, 개발 서버, 코딩 교육 등 다양하게 활용해왔습니다. 일례로, 저희 고향 교회의 말씀 암송 사이트인 "하늘누림교회 말씀새김"의 웹 서버, DB 서버도 구름IDE의 컨테이너 상에서 구동되고 있습니다.

http://nurim-church.run.goorm.io/index

웹 개발을 거의 처음 배웠을 때 만든 사이트라 다소 어설픈 부분이 있지만, 그래도 교회 성도님들이 잘 사용해주시고 계십니다. 들어가보시면 디자인이 매우 "부트스트랩"스럽다는 것을 발견하게 되실 것입니다.

원래는 고향 집에 있는 안 쓰는 PC를 서버로 활용했었는데, PC가 365일 켜져 있어야 하고 인터넷 역시 항상 이상 없이 연결되어 있어야 한다는 것을 장담하기가 힘들어, 중간에 구름 IDE로 서버를 이관했습니다. 

아무튼 제가 애용하고 있는 구름 IDE에서 이렇게 좋은 선물도 주시다니, 감사한 마음이 크네요! 무료 또는 적은 비용으로 구동 가능한 웹 서버가 필요하신 분들은 구름 IDE 한 번 사용해보세요. 

관련 글

- [flask] 색칠 공부 도안 만들어주는 사이트 제작

flask 프로젝트에서는 보통 작업 디렉토리에 static 폴더를 만든 후 그 안에 CSS, IMG, JS 폴더 등을 만듭니다.

CSS 파일은 CSS 폴더에, 자바스크립트 파일은 JS 폴더에, 이미지 파일은 IMG 폴더에 넣어놓습니다. 그렇다면, 이 이미지를 html에서 이미지 태그를 이용해서 삽입할 때 이 이미지 파일의 주소는 어떻게 될까요? 다음과 같이 url_for 함수를 활용하여 이미지의 주소를 만들어줘야 합니다. 

<img src="{{url_for('static', filename='IMG/sample.png')}}" width="200">

이렇게 해주면 sample.png라는 이미지가 html 문서에 잘 삽입됩니다. 

cmd에서 폴더를 삭제할 때는 rmdir 명령어를 사용할 수 있습니다. 여기서 rmdir은 remove directory의 약자입니다. cmd에서 폴더를 생성하는 명령어가 궁금하신 분들은 이전 글을 참고하세요.

- 윈도우 명령 프롬프트(cmd)에서 폴더 생성하는 명령어, mkdir

폴더 삭제(폴더가 비어있는 경우)

폴더가 비어있는 경우에는 아래와 같은 명령으로 폴더가 제거됩니다.

rmdir 폴더명

폴더 삭제(폴더가 비어있지 않은 경우)

하지만 폴더 안에 파일이 들어있는 경우에는 "디렉터리가 비어 있지 않습니다."라는 메시지가 출력되면서 폴더가 삭제되지 않습니다.

이 경우에는 /s 옵션을 추가해줘야 합니다. 

rmdir /s 폴더명

위 명령을 실행하면, "계속하시겠습니까(Y/N)?"라는 메시지가 출력되면서 사용자가 Y 또는 N을 입력해주길 기대합니다. 물어보지 않고 진행되게 하려면 /q 옵션도 추가해주면 됩니다.

rmdir /s /q 폴더명

예전에 회사 면접을 볼 때 면접관이 저에게 물었습니다. 웹 퍼블리싱 할 줄 아세요? 저는 그 당시에 웹 퍼블리싱이라는 용어를 잘 몰랐습니다. 저는 퍼블리싱(publishing)은 출판과 관련된 용어라고 생각했기에 '웹 퍼블리싱? 웹 사이트로 웹 소설 같은 걸 출판하는 행위를 말하는 건가?' 그렇게 헛다리를 집었던 기억이 납니다. 부디 오늘 이 글을 읽는 분들은 제대로 이해하고 넘어가시길 바랍니다.^^  

웹 퍼블리셔

웹 퍼블리싱은 디자이너가 웹 페이지에 대해 구상한 디자인을 HTML, CSS, JavaScript로 실제로 구현하는 행위를 뜻합니다. 웹 퍼블리싱을 하는 사람을 웹 퍼블리셔라고 부릅니다. 

프론트엔드 개발자

반면, 프론트엔드 개발자는 HTML, CSS, JavaScript를 활용하여 웹 페이지의 구조와 디자인 뿐만 아니라 API를 통해 서버( 백엔드)와 데이터를 주고 받는 것까지 구현하는 사람을 뜻합니다.

둘의 공통점

모두 HTML, CSS, JavaScript를 활용합니다. 사용자에게 보여지는 화면을 만들어냅니다. 

둘의 차이점

둘은 조금 다른 목적으로 JavaScript를 사용합니다. 웹 퍼블리셔는 요소들에 동적인 효과를 주기 위해(예를 들어, 어떤 버튼을 클릭하면 어떤 요소가 보여지게 하기 위해) JavaScript를 사용한다면, 프론트엔드 개발자는 서버와 통신하기 위해 JavaScript를 주로 활용합니다. 프론트엔드 개발자는 JavaScript를 이용하여 백엔드 개발자들이 서버에서 정성껏 준비해준 데이터를 잘 받아서 사용자에게 보여주고, 또 사용자가 입력한 데이터를 서버에 잘 전달해줍니다. 

정리하자면, 웹 페이지를 구현할 때 백엔드와 통신을 어떻게 할 것인지에 대해서 고민을 하는 사람은 프론트엔드 개발자라고 볼 수 있습니다. 그렇지 않고 화면 요소들의 배치와 디자인만 정확히 잘 구현하면 된다고 생각하는 입장에 있다면, 웹 퍼블리셔입니다.

관련하여 좋은 글이 있어서 링크를 걸어둡니다. 웹 퍼블리셔와 프론트엔드 개발자로 일해보신 분의 경험담을 담은 글이니 참고하시기 바랍니다. 

- 퍼블리셔에서 프론트개발자로 전향하면서 느낀 차이점

안녕하세요. 비스카이비전입니다. 단도직입적으로 말씀 드리자면 sqlite3에서는 컬럼 순서를 변경하는 것이 불가합니다.

만약 컬럼 순서를 바꾸고 싶으시다면, 테이블을 원하는 컬럼 순서로 새로 만드신 후에 기존 데이터를 다시 삽입하는 insert select를 활용하셔야 합니다.

기존 테이블의 데이터를 select 하실 때 새로운 컬럼 순서에 맞게 잘 선택해주셔야겠죠?

관련 글

- [sqlite3] sqlite의 경우 컬럼 수정 불가

PyQt 앱 윈도우 크기 고정하는 방법

PyQt로 만든 앱의 윈도우 크기를 고정하고 싶은 경우에는 PyQt6.QtCore에서 QSize를 불러온 후 setFixedSize 함수를 사용할 수 있습니다.

from PyQt6.QtCore import QSize

# 중략

self.setFixedSize(QSize(500, 300))

가로를 500, 세로를 300으로 설정한 경우에는 다음과 같은 사이즈의 고정된 창이 생성됩니다. 

사이즈가 고정된 앱이기 때문에 창 최대화 버튼이 비활성화되어 있는 것에 주목하십시오. 

PyQt 앱 윈도우 가로 크기만 고정하는 방법

가로 크기만 고정하고 싶을 때는 setFixedWidth 함수를 사용할 수 있습니다.

self.setFixedWidth(600)

PyQt 앱 윈도우 세로 크기만 고정하는 방법

가로 크기만 고정하고 싶을 때는 setFixedHeight 함수를 사용할 수 있습니다. 참고로 Height는 "헤이트"라고 발음하지 않고, "하이트"라고 발음합니다. 저는 긴 시간동안 헤이트로 잘못 인지하고 있었습니다. 

self.setFixedHeight(400)

코드 공유

아무 내용도 없는 앱이지만, 전체 코드가 필요하신 분들이 계실 것 같아서 공유합니다. 

import sys
from PyQt6.QtWidgets import QApplication, QMainWindow
from PyQt6.QtCore import QSize

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("테스트 앱")
        self.setFixedSize(QSize(500, 300))
        # self.setFixedWidth(600)
        # self.setFixedHeight(400)
        
        
if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    app.exec()

관련 글

- [pyside6] 창 타이틀바에서 닫기 버튼, 최소화 버튼, 최대화 버튼 등을 비활성화 되게 하려면?

파이썬에서 간단히 오디오 파일을 재생해야 하는 경우 playsound 라이브러리를 활용할 수 있습니다. 사용법은 이전 글을 참고해주세요. 

- [python] playsound 모듈로 음악 재생하기  

그런데 최근에 이 라이브러리(버전 1.3.0)를 설치해서 테스트해봤는데 오디오 파일 재생이 안 되면서 다음과 같은 에러가 발생했습니다. 

Error 259 for command:
        play ./white-noise.wav wait
    지정한 명령 매개 변수를 드라이버가 인식할 수 없습니다.

    Error 263 for command:
        close ./white-noise.wav
    지정한 장치가 열려 있지 않거나 MCI에서 인식되지 않습니다.
Failed to close the file: ./white-noise.wav
Traceback (most recent call last):
  File "C:\Users\사용자명\Desktop\enjoy_python\ex6\ex6_4.py", line 30, in audio1_btn_clicked
    playsound("./white-noise.wav")
  File "C:\Users\사용자명\Desktop\enjoy_python\ex6\.venv\lib\site-packages\playsound.py", line 73, in _playsoundWin
    winCommand(u'play {}{}'.format(sound, ' wait' if block else ''))
  File "C:\Users\사용자명\Desktop\enjoy_python\ex6\.venv\lib\site-packages\playsound.py", line 64, in winCommand
    raise PlaysoundException(exceptionMessage)
playsound.PlaysoundException:
    Error 259 for command:
        play ./white-noise.wav wait
    지정한 명령 매개 변수를 드라이버가 인식할 수 없습니다.

이 에러 해결을 위해서 제가 취한 것은 버전을 1.2.2로 내린 것(downgrade)입니다. 

pip install playsound==1.2.2

그랬더니 해당 예외가 발생하지 않고 음악이 재생되었습니다. 

블로그, 웹/앱 개발, 출판 등의 활동을 할 때 항상 주의해야 할 것은 저작권입니다. 의도했든 의도하지 않았든 누군가의 저작권을 침해하면, 법적인 책임을 져야할 수도 있기 때문입니다. 단순히 취미, 공익 목적으로 블로그를 하고 있다고 해도(애드센스 광고를 붙이지 않았다고 해도), 저작권자가 허용하지 않은 범위로 저작물을 사용한다면 문제가 될 수 있습니다. 특히 사진, 영상, 음악이 저작권에 있어서 민감하다고 합니다. 신문사 기자가 촬영한 사진을 몰래 자신의 블로그에 올리거나 하면 신문사 쪽에서 간혹 소송을 걸기도 한다니 조심하십시오. 

CC0 라이센스

그렇다면, 어떤 라이센스를 갖고 있는 저작물을 사용해도 괜찮을까요? 바로 CC0 라이센스입니다. CC0는 Creative Commons 0의 약자입니다. CC0 라이센스를 갖고 있는 저작물은 복제해도 되고, 수정해도 되고, 재배포해도 되고, 상업적 목적으로 사용해도 됩니다. 또한 출처를 표시하지 않아도 됩니다. 저작권자의 허가를 받지 않고도 이 모든 것을 할 수 있습니다. 

열심히 만든 저작물을 CC0 라이센스로 배포해주시는 모든 분들께 진심으로 감사드립니다. 모두 대박 나시길 바래요!

안녕하세요. 비스카이비전입니다. 오늘은 웹 페이지 특정 요소에서 스크롤이 작동은 하지만 스크롤은 보이지 않게 하는 방법에 대해 살펴보도록 하겠습니다. 

test라는 id를 부여받은 div 요소가 있다고 가정하겠습니다. 너비를 200px로 고정시켰고, 배경색은 하늘색을 넣어줬습니다. 

<div id="test" style="width: 200px; background-color:skyblue;">
    <p>안녕하세요.</p>
    <p>수많은 소음 속에서</p>
    <p>진짜 신호를</p>
    <p>찾아가는</p>
    <p>비스카이비전입니다.</p>
    <p>반갑습니다.</p>
    <p>오늘도 행복하세요.</p>
</div>

스크롤바 넣기

이 div 요소의 높이를 한정시킨 후 스크롤바를 넣어보겠습니다. 요소의 높이가 한정되어 있지 않으면 스크롤 기능이 들어가지 않습니다. 별도의 css 파일에서 id가 test인 요소의 스타일을 정의하겠습니다.

#test {
    width: 200px; 
    height: 200px;
    background-color:skyblue;
    overflow-y: scroll;
}

스크롤바가 생긴 것을 확인하실 수 있습니다.

스크롤 기능만 남기고, 스크롤바는 없애기

이제 스크롤 기능만 남기고 스크롤바는 없애보도록 하겠습니다. css 파일에 관련된 코드를 추가해주면 됩니다. 웹 브라우저별로 조금 다른 코드가 필요합니다. 주석을 참고하세요. 

#test {
    width: 200px; 
    height: 200px;
    background-color:skyblue;
    overflow-y: scroll;

    -ms-overflow-style: none; /* 인터넷 익스플로러 */
    scrollbar-width: none; /* 파이어폭스 */
}

#test::-webkit-scrollbar {
    display: none; /* 크롬, 사파리, 오페라, 엣지 */
}

크롬, 엣지, 인터넷 익스플로러, 파이어폭스에서 확인해본 결과 모두 잘 적용되었습니다. 스크롤바는 없어졌지만, 스크롤 기능은 잘 남아 있습니다.

그런데 저 스스로 약간 헷갈리는 부분이 있습니다. 원래는 -ms-overflow-style: none;을 넣어줘야 인터넷 익스플로러 뿐만 아니라 엣지에서도 스크롤바 없애기가 적용되는 걸로 알고 있었는데, 지금은 크롬, 사파리, 오페라에 필요한 코드를 넣었을 때 엣지에서도 스크롤바 없애기가 적용됩니다. 아마도 크롬과 엣지가 같은 크로미움 엔진(?)을 써서 그런 것 같습니다.

pandas 데이터프레임 내 중복 데이터(중복 행)를 제거할 때는 drop_duplicates() 메소드를 사용합니다. 

중복 행 제거하기

다음과 같은 엑셀 파일이 있다고 가정하겠습니다.

보시다시피 3번째 행과 4번째 행은 같은 값들을 갖고 있습니다. 이런 경우에 drop_duplicates() 메소드를 사용하면 두번째로 출현한 4번째 행이 제거됩니다. 

import pandas as pd

df = pd.read_excel('./dataset1.xlsx')
print(df)

df1 = df.drop_duplicates()
print(df1)

생각해볼 점

중복 데이터라고 무조건 제거해야 할까요? 그렇진 않습니다. 모든 특성값이 같은 데이터를 관측 또는 측정하게 되는 경우가 있을 수 있습니다. 예를 들어 "12가3456" 번호판을 가진 차가 100km/h 제한 구간에서 121km/h로 달린 것을 과속측정기가 각기 다른 날에 찍혔을 수 있습니다. 이런 경우에 중복된 데이터라고 제거해버리면 벌금을 한 번 밖에 못 물리는 것이죠.

하지만 만약 같은 날, 같은 시점에 과속한 데이터를 과속측정기 기계 오류로 두 번 데이터베이스에 쌓았다면, 그런 건 제거해줘야 할 것입니다. 한번 과속한 걸로 벌금 두 번 내라고 하면 안 되겠죠.