인기 글
최신 글
Tuborepo로 monorepo 프로젝트 설정하기
WEB2024.09.29 00:34Tuborepo로 monorepo 프로젝트 설정하기

Monorepo모노레포(monorepo)는 여러 개의 프로젝트를 하나의 저장소에서 관리하는 방식입니다. 일반적으로는 프로젝트마다 저장소를 따로 가져가는 식으로, 멀티레포(multirepo) 방식으로 개발을 했습니다. 모노레포는 하나의 저장소에서 여러개의 프로젝트를 관리하기 때문에, 코드 재사용성이 높아져서 코드 중복을 줄일 수 있습니다. 무조건 모노레포가 좋은것은 아니지만, 중복된 코드가 많다면 고려해보는 것이 좋습니다. 단점으로는 규모가 커져 복잡해보일 수 있고, 프로젝트마다 다른 의존성 버전을 사용하는 경우, 충돌 가능성도 발생할 수 있습니다. TuborepoTurborepo는 vercel에서 개발했으며, 모노레포를 관리하기 위해 사용합니다. 모노레포 프로젝트를 구성할 때 Lerna, Turborep..

easy_localization으로 Flutter 앱 다국어 처리하기
Flutter2024.09.26 20:39easy_localization으로 Flutter 앱 다국어 처리하기

다국어 처리flutter에서는 다국어 처리를 할때, easy_localization을 많이 사용합니다. easy_localizationflutter cli를 이용하여 easy_localization 의존성을 추가합니다.flutter pub add easy_localization 추가한 뒤에, 다국어 번역이된 json 파일을 관리할 디렉토리를 생성합니다. 위치는 크게 중요하지 않습니다. 보통 assets 하위에 리소스를 많이 보관합니다. 본 글에서는 번역 json 파일도 assets/translations 하위에 생성했습니다. 그리고, 영어와 인도네시아 번역 처리가 필요하여 id-ID.json 과 en-US.json 을 생성했습니다.assets└── translations ├── id-ID.json ..

Styled Components에서 Reset CSS 적용하기
React2024.09.25 20:20Styled Components에서 Reset CSS 적용하기

Reset CSS를 사용하는 이유Reset CSS를 사용하는 이유는 브라우저마다 기본적으로 제공하는 스타일이 다르기 때문에 스타일을 초기화하여, 다양한 브라우저에서 일관성 있는 UI를 제공하기 위해 사용합니다. 최근에는 완전히 스타일을 초기화하기보다는 각 브라우저의 기본 스타일을 보완해 주는 방식으로 Normalize CSS도 많이 사용됩니다. Reset CSS 코드 예시아래 사이트와 같이 브라우저의 기본 스타일을 제거하는 reset css를 공유하는 사이트가 있습니다. CSS Tools: Reset CSSCSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default ..

Frontend
Tuborepo로 monorepo 프로젝트 설정하기
Tuborepo로 monorepo 프로젝트 설정하기
WEB
2024.09.29 00:34
Monorepo모노레포(monorepo)는 여러 개의 프로젝트를 하나의 저장소에서 관리하는 방식입니다. 일반적으로는 프로젝트마다 저장소를 따로 가져가는 식으로, 멀티레포(multirepo) 방식으로 개발을 했습니다. 모노레포는 하나의 저장소에서 여러개의 프로젝트를 관리하기 때문에, 코드 재사용성이 높아져서 코드 중복을 줄일 수 있습니다. 무조건 모노레포가 좋은것은 아니지만, 중복된 코드가 많다면 고려해보는 것이 좋습니다. 단점으로는 규모가 커져 복잡해보일 수 있고, 프로젝트마다 다른 의존성 버전을 사용하는 경우, 충돌 가능성도 발생할 수 있습니다. TuborepoTurborepo는 vercel에서 개발했으며, 모노레포를 관리하기 위해 사용합니다. 모노레포 프로젝트를 구성할 때 Lerna, Turborep..
easy_localization으로 Flutter 앱 다국어 처리하기
easy_localization으로 Flutter 앱 다국어 처리하기
Flutter
2024.09.26 20:39
다국어 처리flutter에서는 다국어 처리를 할때, easy_localization을 많이 사용합니다. easy_localizationflutter cli를 이용하여 easy_localization 의존성을 추가합니다.flutter pub add easy_localization 추가한 뒤에, 다국어 번역이된 json 파일을 관리할 디렉토리를 생성합니다. 위치는 크게 중요하지 않습니다. 보통 assets 하위에 리소스를 많이 보관합니다. 본 글에서는 번역 json 파일도 assets/translations 하위에 생성했습니다. 그리고, 영어와 인도네시아 번역 처리가 필요하여 id-ID.json 과 en-US.json 을 생성했습니다.assets└── translations ├── id-ID.json ..
Styled Components에서 Reset CSS 적용하기
Styled Components에서 Reset CSS 적용하기
React
2024.09.25 20:20
Reset CSS를 사용하는 이유Reset CSS를 사용하는 이유는 브라우저마다 기본적으로 제공하는 스타일이 다르기 때문에 스타일을 초기화하여, 다양한 브라우저에서 일관성 있는 UI를 제공하기 위해 사용합니다. 최근에는 완전히 스타일을 초기화하기보다는 각 브라우저의 기본 스타일을 보완해 주는 방식으로 Normalize CSS도 많이 사용됩니다. Reset CSS 코드 예시아래 사이트와 같이 브라우저의 기본 스타일을 제거하는 reset css를 공유하는 사이트가 있습니다. CSS Tools: Reset CSSCSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default ..
CSS object-fit으로 이미지 채우기
CSS object-fit으로 이미지 채우기
WEB
2024.09.16 09:46
object-fit이미지를 특정 영역에 채우려고 할때 사용할 수 있는 속성 중 object-fit이 있습니다. object-fit에는 3가지 값을 넣을 수 있는데, fill, cover, contain이 있습니다. fill, cover, containfill: 세로 길이를 늘려서 특정 영역을 채움. 특정 영역에 맞게 채우다보니 이미지 비율이 달라짐cover: 이미지가 잘리더라도, 이미지가 늘어나지 않고 영역을 채움cotain: 이미지 비율을 유지하고, 이미지도 잘리지 않고 영역을 채움 See the Pen Untitled by taehong.kim (@taehongdev) on CodePen.
Programming
Python에서 gTTS 라이브러리로 TTS 음성 파일 생성하기
Python에서 gTTS 라이브러리로 TTS 음성 파일 생성하기
Python
2024.09.05 20:58
TTS 란?TTS(Text-to-Speech)는 텍스트를 음성으로 변환하는 기술입니다. TTS로 만들어주는 서비스들이 많지만, 대부분 유료라는 단점이 있습니다. 유료로 사용할 수 있는 서비스보다 퀄리티가 떨어질 수는 있지만, Python의 gTTS 라이브러리를 사용하면, 쉽게 TTS 파일을 생성할 수 있습니다. gTTS 란?gTTS(Google Text-to-Speech)는 위에서도 말한 것과 같이, Python을 사용하여 텍스트를 음성으로 변환할 수 있게 해주는 라이브러리입니다. Google의 TTS API를 활용하여 생성해며, 무료로 사용할 수 있다는 장점이 있습니다. Python으로 TTS 음성 파일 생성하기gTTS 의존성 설치아래 명령어를 통해 gTTS 의존성을 추가합니다.pip install g..
파이썬으로 특정 사이트의 모든 이미지 다운로드 받기
파이썬으로 특정 사이트의 모든 이미지 다운로드 받기
Python
2024.09.04 22:14
본 글에서는 파이썬으로 특정 사이트의 이미지를 모두 다운로드 받는 코드에 대해 설명합니다. 의존성 설치selenium 설치requests로 웹 파일을 가져올 수도 있지만, React와 같이 javascript에 의해 만들어지는 사이트의 경우는 아무것도 없는 html 파일을 가지고 올 수 있습니다. 따라서, 실제 브라우저 엔진을 사용하여 웹 파일을 읽어올 수 있도록 해주는 selenium을 설치해야 합니다.pip install selenium webdriver-manager 설치그리고, 웹 브라우저 엔진을 다운로드 받아야 합니다. 다운로드  |  ChromeDriver  |  Chrome for Developers이 페이지는 Cloud Translation API를 통해 번역되었습니다. 다운로드 컬렉션을 ..
PyInstaller로 파이썬 코드를 exe 파일로 빌드하기
PyInstaller로 파이썬 코드를 exe 파일로 빌드하기
Python
2024.08.23 22:44
파이썬 코드(.py 파일)를 실행하려면 파이썬 인터프리터가 필요합니다. 만약 파이썬이 설치되지 않은 시스템에서 파이썬 프로그램을 실행하려면 어떻게 해야 할까요? 이럴 때 PyInstaller를 사용하여 파이썬 코드를 독립 실행 파일(.exe)로 만들어 배포할 수 있습니다. 본 글에서는 PyInstaller를 사용해 파이썬 코드를 윈도우 환경에서 실행 가능한 exe 파일로 만드는 방법에 대해 설명합니다. PyInstaller 설치파이썬 코드를 윈도우 실행파일로 빌드하기 전에, PyInstaller라는 파이썬 패키지를 설치합니다. 설치는 pip를 이용해 쉽게 설치할 수 있습니다. 명령어는 다음과 같습니다.pip install --upgrade pippip install pyinstaller 윈도우 실행파일 ..
파이썬의 모듈(module)과 패키지(package)
파이썬의 모듈(module)과 패키지(package)
Python
2024.08.23 12:13
파이썬에서 모듈(module)과 패키지(package)는 코드를 구조화하고 재사용성을 높이기 위해 사용하는 중요한 개념입니다. 본 글에서는 모듈과 패키지에 대해 설명합니다. 모듈(module)모듈(module)은 특정 기능과 관련된 함수, 변수, 클래스 등을 하나의 파일에 모아둔 코드의 집합체입니다. 쉽게 말하면, 하나의 .py 파일이 하나의 모듈이 될 수 있습니다. 모듈을 생성하여 코드를 관리하면, 코드의 재사용성이 높아지고 유지보수가 쉬워집니다.# calculator.py: 간단한 계산기 모듈def add(x, y): return x + ydef subtract(x, y): return x - y 이 calculator.py 파일은 하나의 모듈이며, 이를 다른 파일에서 불러와 사용할 수 있..
IT
github actions로 PR 랜덤 리뷰어 지정하기
github actions로 PR 랜덤 리뷰어 지정하기
IT
2024.09.06 17:24
gibhut actions 스크립트아래 yaml 파일은 리뷰어를 설정하는 github actions 스크립트입니다.name: "Random reviwer"on: pull_request: types: - opened branches: - devjobs: random-reviwer: runs-on: ubuntu-latest steps: - id: random_reviwer uses: actions/github-script@v3 with: github-token: ${{ secrets.GITHUB_TOKEN }} script: | const me = '${{ github.event...
Stable Diffusion에 VAE 개념 및 WEB UI에 설정하기
Stable Diffusion에 VAE 개념 및 WEB UI에 설정하기
IT
2024.06.08 19:12
VAE(Variational Autoencoder)란?VAE는 딥러닝에서 자주 사용되는 생성 모델 중 하나로, 데이터의 잠재 공간(latent space)을 학습하여 새로운 데이터를 생성하는데 사용됩니다. VAE는 인코더(encoder)와 디코더(decoder)로 구성되어 있으며, 인코더는 입력 데이터를 잠재 공간으로 변환하고, 디코더는 이 잠재 공간의 값을 다시 원래 데이터 공간으로 변환합니다.인코더(Encoder): 입력 데이터를 잠재 변수(latent variable)의 분포로 변환합니다.잠재 공간(Latent Space): 잠재 변수는 정규 분포로 가정되며, 이는 새로운 데이터를 생성하는 데 사용됩니다.디코더(Decoder): 잠재 변수를 다시 원래 데이터 공간으로 변환합니다.Stable Diff..
Stable Diffusion WEB UI에 User Interface 설정하기
Stable Diffusion WEB UI에 User Interface 설정하기
IT
2024.06.08 18:59
Stable Diffusion을 처음 설치하면 아래 사진과 같이, 자주 사용하는 기능의 interface가 없습니다. 이 글에서는 User Interface를 설정하여, 자주 사용하는 기능들을 화면에 설정하는 방법에 대해 설명합니다. User Interface 설정하기우선, Settings 메뉴로 들어갑니다. 사이드 메뉴에 User Interface > User interface를 클릭합니다. 그럼 메인 컨텐츠 화면에  아래 사진과 같이 나오고, 2번째 필드로 Quicksettings list가 있습니다. 처음에는 sd_model_checkpoint만 있습니다. 추가적으로 아래 2개 interface를 추가합니다.CLIP_stop_at_last_layers: Clip skip을 설정할 수 있습니다.sd_..
"Unable to boot simulator" iOS 시뮬레이터 실행 오류 조치
IT
2024.05.14 18:01
iOS 시뮬레이터 실행 오류flutter 개발하면서 iOS 시뮬레이터를 실행했으나, "Unable to boot simulator" 오류와 함께 실행이 되지 않았습니다.flutter emulators --launch ios  조치xcode를 재설치하거나, iOS 시뮬레이터를 지우고 새로 설치해도 동일한 증상이 발생합니다. 조치방법은 아래와 같습니다. 좌측 상단 애플 로고 클릭하여 "이 Mac에 관하여"를 누릅니다. "추가 정보.." 버튼을 클릭합니다. "저장 공간 설정..." 버튼을 클릭합니다.  "개발자" 옆에 info 아이콘을 클릭합니다. "Xcode 캐시"를 선택 > "삭제..." 버튼 클릭 > "완료" 버튼 클릭이후 다시 flutter emulators --launch ios를 실행하면 정상적으로..
리뷰
블로그
Berry Skin v4 적용 방법 가이드
Berry Skin v4 적용 방법 가이드
스킨 구입 및 스킨 다운로드 스킨 구입 해당 스킨은 유료로 판매합니다. 스킨을 개발하기 위해 노력한 대가로 금액은 커피 한잔 가격인 5000원 이상부터 사용자님이 지불하고 싶은 만큼 보내주시면 됩니다. 자세한 구입 및 스킨 다운로드 방법은 아래 "카카오톡 채널"을 이용해주세요! (평일 낮에는 연락이 늦어질 수 있습니다) Tistory Berry Skin 티스토리 Berry Skin의 업데이트 정보를 받거나 결제하여 자신의 티스토리 블로그에 적용해보세요 pf.kakao.com 스킨 다운로드 스킨 구입 후 아래 다운로드 사이트에서 이메일로 전달받은 비밀번호를 입력합니다. Berry Skin v4 다운로드 bluemiv.tistory.com 스킨 적용하기 스킨 등록하기 티스토리 관리자 페이지로 들어갑니다. "..
티스토리 커스텀 스킨 Berry Skin v4 배포
티스토리 커스텀 스킨 Berry Skin v4 배포
회사 다니면서 신경을 못쓰다가, 다시 블로그 열심히 해볼겸 오랜만에 업데이트합니다. 블로그도 신설했습니다. (이전에는 개발 관련된건만 작성했는데, 이번엔 여러가지 쓰고 싶은거 다 기록 남기려고 합니다) Berry Skin v4 처음 berry skin을 만들기 시작한건 제가 사용하려고 만든거였는데, 생각보다 사람들이 많이 사용해주셔서 뿌듯하기도 하고 재밌다보니 v4까지 만들게 된거 같네요. 감사의 인사를 드립니다. 스킨 특징 반응형 디자인 웹 / 테블릿 / 모바일 등 다양한 디바이스에도 최적화된 UI/UX를 제공해줍니다. 테마 Light 테마와 Dark 테마를 지원합니다. 헤더에 해/달 모양의 아이콘을 누르면 변경할 수 있습니다. cover 제공 berry skin v3 까지는 cover 기능을 제공하지..
카카오 에드핏, 광고를 설치한 이후 심사 진행 가능 (광고 설치 방법)
카카오 에드핏, 광고를 설치한 이후 심사 진행 가능 (광고 설치 방법)
블로그 운영
2023.10.24 09:32
카카오 에드핏 광고 설치 카카오 에드핏을 티스토리 블로그에 추가하려고 했는데, 심사를 받으니 아래와 같은 문구와 함께 보류되었습니다. "광고를 설치한 이후 심사 진행이 가능합니다. 광고 설치 후 재심사를 요청하여 주십시오." 아무래도 다른 설정이 필요한 듯하여, 구글 검색을 통해 찾아봤는데 adfit 사이트에서 광고를 하나 달아줘야 한다고 하더군요 Adfit 광고 설치 우선 아래 사이트로 들어갑니다. 그리고 카카오 로그인을 합니다. https://adfit.kakao.com/dashboard 이후 "광고 관리" > "광고 단위"로 들어갑니다. "광고단위" 생성 버튼을 클릭합니다. 티스토리 관리자 페이지 > 플러그인 > 배너출력을 사용으로 변경합니다 그 다음 티스토리 관리자 페이지 > 꾸미기 > 사이드바..
구글 서치 콘솔 티스토리 sitemap.xml을 가져올 수 없음
구글 서치 콘솔 티스토리 sitemap.xml을 가져올 수 없음
블로그 운영
2023.10.20 11:28
sitemap.xml을 "가져올수 없음" 문제 제가 작성한 글이 구글 검색에 제대로 노출이 되도록 하려면, 티스토리 블로그의 sitemap을 구글 서치콘솔에 등록을 해야합니다. 잘 수집되던 sitemap.xml이 며칠전부터 아래와 같이 "가져올 수 없음"으로 표시되고 수집이 원활하게 안되고 있습니다. 조치방법 1. /sitemap.xml 등록 해결하기위한 방법으로 sitemap.xml이 아닌 앞에 슬래시(/)를 한번더 써서 /sitemap.xml으로 다시 등록해보는 방법입니다. 이렇게 하면 되는 경우도 있다고 하는데 모두 예전 글이라 현재는 안되는것으로 보입니다. (그래도 혹시 모르니 시도 해봐도 좋을거 같습니다) 조치방법 2. sitemap.xml 파일의 오류 사실 티스토리 블로그의 경우는 sitema..
반응형
image