개요감사하게도 지인분께 키크론 k8 pro 키보드를 선물 받아 사용하던 중 키크론 키보드는 f1키를 입력하면 자동으로 fn + f1키가 입력 되고 fn + f1키를 입력해야 f1키가 입력되는 것을 알게 되었다.개발자로써 f1 ~ 12까지의 키를 쓸 일이 많아 그때마다 fn키까지 같이 눌러줘야하는게 굉장히 불편했는데 맥 자체의 설정으로도 키를 돌릴 수 없는 것을 알게 되었고 열심히 찾아보아도 기능키를 기본 맥 키보드처럼 쓸 수 있는 방법은 찾지 못했다... 하InteliJ에서 파일 리팩토링 단축키가 shift + f6인데 리팩토링을 하기위해 shift + f6 + fn 이렇게 세 키를 누를 때마다 참을 수 없는 분노가 올라와서 결국 키크론 키보드 런처에 접속해 직접 부딪혀서 설정하게 되었다.설정 방법유선으..

명령어# apt 리스트 업데이트sudo apt update# java 21 버전 다운로드sudo apt install openjdk-21-jdk-headless# 설치 가능한 java 버전 확인# sudo apt list openjdk*

에러 발생 nginx proxy manager에서 proxy host를 등록하고 ssl 설정을 하려고 할때 이 오류가 발생했다. 해결 방법 1. 다른 설정 없이 해당 host 주소로 접속이 가능한지 확인한다. 2. 주소로 접속이 안 된다면 도메인의 A레코드 설정을 확인한다. 3. 주소로 접속이 안 된다면 docker에서 해당 port를 열어주었는지 확인한다. 4. 알맞은 ip를 넣었는지 확인한다.

올림Math.ceil()double num = 123.4567891011;double test = Math.ceil(num); // 124// Math.cail()는 소수점 첫째자리를 기준으로 올림하는 메소드이다.반올림Math.round()double num = 123.4567891011;double test = Math.round(num); // 123// Math.round()는 소수점 첫째자리를 기준으로 반올림하는 메소드이다.double result1 = Math.round(num * 100) / 100.0; // 123.46// 둘째자리까지 나타내려면 100을 곱해주고 후에 100.0으로 나눠준다. 100으로 나누면 정수형으로 변환되기 때문에 100.0으로 나눠야 한다.버림String.fomat(..

개요프로젝트를 진행하던 중 흔히들 사용하는 랜덤 인증번호 생성 프로세스가 필요해 작성해보았다.생성되는 인증번호는 영어 소문자와 숫자의 조합이다. (인증번호에 대소문자 구분하는 것 만큼 짜증나는 것이 없기에...)코드import java.security.SecureRandom;/** * 랜덤 인증번호 생성 클래스 */public class RandomAuthCode { // 인증 코드에 사용될 문자들 private static final String CHARACTERS = "abcdefghijklmnopqrstuvwxyz0123456789"; // 인증 코드의 길이 (6자리) private static final int CODE_LENGTH = 6; // 보안 강화를 위한 Sec..

개요프로젝트를 진행하던 중 랜덤으로 닉네임을 생성해주는 프로세스가 필요해 작성해보았다.코드import lombok.AllArgsConstructor;import org.springframework.stereotype.Component;import java.text.MessageFormat;import java.util.Random;@Component@AllArgsConstructorpublic class RandomNickname { // 형용사 배열 private final String[] ADJECTIVES = { "행복한", "똑똑한", "즐거운", "강한", "빠른", "재치있는", "충성스러운", "멋진", "훌륭한", "즐거운", "아름다운", "기쁜", "사랑스..

개요임파님의 블로그를 보면 오늘의 명언이 나오는데 나도 이 기능을 적용시켜보고 싶어 찾아보니 마음에 드는 글이 없어 직접 만들어 포스팅을 하게 되었다.주의사항html, css, js에 대한 기초 지식이 없을 경우 진행이 어려울 수 있습니다.블로그 스킨에 따라 css가 깨질 수 있습니다.기능 적용 방법1. js 파일 업로드업로드 경로: 티스토리 블로그 관리 -> 스킨 편집 -> html 편집 -> 파일 업로드 -> 추가파일 내용/*** 랜덤 띵언을 제공하는 API URL* @constant {string}*/const DDING_API_URL = "https://korean-advice-open-api.vercel.app/api/advice";/*** API에서 랜덤 띵언을 가져와 HTML을 업데이트하는 ..

개요Docker가 설치된 환경에서 docker image를 사용하여 PostgreSQL을 설치하는 과정.이미지를 변경하여 다른 버전의 pg(postgresql 약어)도 설치가 가능합니다.과정1. 이미지 다운로드docker pull postgres:16docker images # 다운로드 완료 확인2. 컨테이너 실행# docker run --name 컨테이너명 -e 환경변수키=환경변수값 -d -p 포트바인딩 이미지명docker run --name postgres -e POSTGRES_PASSWORD=내비밀번호 -d -p 5432:5432 postgres:16docker ps # 실행중인 컨테이너 확인3. 컨테이너 접속docker exec -it postgres bash4. db 접속# psql -h 호스트..

개요linux를 사용하다 보면 자주 사용하게 되는 ls -al 명령어에서 각 항목이 무슨 의미인지 생각이 안 날 때가 있어 글로 정리 하려한다.각 항목별 설명항목예시설명권한-rw-r--r--파일 유형 및 접근 권한- 첫 글자는 파일 유형(-: 파일, d: 디렉토리 등), 다음 9글자는 소유자, 그룹, 기타 사용자의 권한링크 수1해당 파일이나 디렉토리에 연결된 하드 링크의 수소유자user파일이나 디렉토리의 소유자 이름그룹staff파일이나 디렉토리가 속한 그룹 이름크기1024파일의 크기(바이트 단위) 디렉토리의 경우 메타데이터 크기수정 날짜 및 시간Oct 5 12:34마지막으로 파일이나 디렉토리가 수정된 날짜와 시간파일명example.txt파일이나 디렉토리의 이름예시권한 | 링크 수 | 소유자 | 그룹 | ..

개요파이썬 토이 프로젝트 진행 중 무지성 chatGPT 따라하기를 시전한 결과 내 소중한 맥북에 이상한 패키지가 잔뜩 설치되었다.나는 2개 정도의 패키지만 설치하려 했는데 패키지가 패키지를 설치하고 그 패키지가 또 패키지를 설치하면서 약 20개 정도의 패키지가 추가되는 참사가 발생했다.하지만 homebrew는 기본적으로 설치된 패키지 노출 시 패키지명 오름차순으로 출력하고 설치 시간과 관련한 리스팅을 지원하지 않기 때문에 일일이 brew info 패키지명 명령어를 사용해야 설치 시간을 알 수 있다.내 맥북에 설치된 수많은 패키지의 정보를 일일이 조회할 순 없으니 약간의 꼼수를 부려보았고 이는 그 꼼수에 관한 포스팅이다.주의사항아래에서 설명할 방법은 패키지 설치 시간뿐만 아니라 수정 시간도 포함하여 삭제를..

🌟 한글명언 OPEN API 기술설명서본 문서는 한글명언 OPEN API 프로젝트의 전반적인 시스템 구성, 사용 기술(버전 포함), 모듈별 역할, 실행 방법, 배포 환경, 관련 링크 정보 및 CI/CD 파이프라인 설정에 관한 설명서입니다.1. 개요api key나 복잡한 인증 필요없이 한글로 번역한 명언을 받아볼 수 있는 OPEN API 서비스 구현2. 관련 링크 📑아래는 프로젝트와 관련된 다양한 링크 정보입니다.API 문서: https://quote.aleph.kr/api-docs/(API 문서 페이지)관리자 페이지: https://quote.aleph.kr/admin(관리자 전용 명언 관리 페이지)깃허브: https://github.com/Aleph-Kim/korean-quote(프로젝트 소스 코드..

개요PostgreSQL db로 프로젝트를 진행하던 중 한글 컬럼을 기준으로 정렬을 했더니 정렬이 이상하게 되는걸 발견했다. 이를 해결하는 방법을 정리해본다.방법 1 - pg_database 업데이트첫 번째 방법은 데이터베이스의 collate 값을 업데이트하는 방식으로 간단하게 데이터베이스 전체에 로케일 변경이 가능하다.이 방법은 시스템에 ko_KR.utf8 로케일이 미설치된 경우 실패하므로, 해당 로케일이 설치되어 있는지 확인(명령어: locale -a | grep ko_)해야한다.select datname, datdba, encoding, datcollate, datctype from pg_database; -- 현재 데이터베이스 로케일 확인UPDATE pg_database SET datcollate ..

개요정리하고 싶지 않았지만 자꾸 찾아보게 되고... 안 찾고 기억을 더듬어 마음대로 하다가 하루종일 작업한 내용을 날릴 뻔하여 부랴부랴 정리하게 된 커밋 메시지 수정 방법에 관한 글이다.방법현재 브랜치의 마지막 커밋 메시지를 수정하기git commit --amend위 명령을 입력하면 마지막 커밋 메시지를 수정할 수 있다.메시지를 원하는 대로 수정한 후 저장하고 종료(:wq!)하면 커밋 메시지가 변경된다.이전 커밋 메시지 수정하기 (예: 마지막 3개의 커밋)git rebase -i HEAD~3위 명령을 실행하면 아래와 같은 목록이 열린다.pick abcdef1 커밋 메시지 1pick bcdefg2 커밋 메시지 2pick cdefgh3 커밋 메시지 3여기서 수정하고 싶은 커밋 앞의 pick을 reword(또..

개요open api 프로젝트를 진행하던 중 api 문서를 만들 차례가 다가왔고, swagger의 끔찍한 ui를 피하기 위해 어떤 라이브러리를 사용할까 고민하다 apiDoc이라는 간단한 api 문서 생성 라이브러리를 찾아 사용하게 되었다.apiDoc 공식 Live Demo프로젝트 구조project/├── doc/│ ├── assets/│ └── index.html├── src/│ ├── controllers/│ │ └── userController.js│ └── routes/│ └── userRoutes.js├── app.js├── .gitignore├── apidoc.json└── package.jsonapiDoc 사용법1. 라이브러리 설치npm install --save..

필요한 선행 작업php 설치composer 설치npm 설치1. 프로젝트 생성composer create-project --prefer-dist laravel/laravel:^8 my-laravel-project # laravel 프로젝트 생성cd my-laravel-project # 프로젝트로 이동composer require laravel/ui # ui 설정 패키지 설치php artisan ui vue # vue를 기본 프론트엔드 설정2. laravel 서버 실행php artisan serve3. 정상 작동 확인http://127.0.0.1:8000/4. vue 실행npm install && npm run dev # npm 설치 및 최초 webpack 컴파일npm run watch # vue 변경사항 ..

개요mac os에서 homebrew를 사용해 특정 php 버전을 설치하는 방법설치 가능한 php 버전 목록명령어brew install php@8.3 # Ex) 8.3버전 설치php -v # php 설치 확인트러블 슈팅위 명령어로 간단히 php를 설치했는데 php -v 명령어를 사용하면 php가 설치되지 않았다고 나왔다.해결방법내가 설치한 버전의 php를 기본으로 링크해주는 과정이 필요했다.brew link php@8.3 # Ex) php 8.3버전 기본으로 사용 설정

개요vue로 포트폴리오 프로젝트 진행 중 특정 클래스들을 추가하는 코드를 별도의 데이터 파일로 관리했더니 해당 클래스의 빌드가 정상적으로 이루어지지 않는 오류가 발생했다.해결방법// tailwind.config.jsmodule.exports = { ... safelist: [ 'text-gray-500', // 미리 빌드하고 싶은 클래스 { pattern: /bg-(red|blue|green)-(100|200|500)/, // 정규식을 사용하여 여러 클래스 포함 variants: ['hover', 'focus'], // 변형 클래스 포함 (예: hover:bg-red-500) }, ], ...}

설명하기에 앞서🎉 본 글에서 제공하는 모든 내용은 저작권법에 의하여 보호받는 저작물이지만 이에 대한 무단 복제 및 배포를 환영합니다. 🎉  Aleph Kim's Portfolio Website🖥️ 프로젝트 소개Aleph Kim의 포트폴리오 웹사이트는 개발자의 역량과 프로젝트를 효과적으로 소개하기 위해 제작된 개인 웹사이트입니다.이 프로젝트는 데이터와 UI를 철저히 분리하여 사용자에게 커스터마이징과 확장성을 극대화할 수 있도록 제작하였습니다.🚀 주요 강점: 데이터 분리 구조이 웹사이트는 데이터를 독립적으로 관리하는 구조를 채택하여 개발, 유지보수, 확장성에서 많은 이점을 제공합니다.🛠️ 사용 기술Frontend: Vue.js (컴포넌트 기반 설계)Styling: Tailwind CSS (유틸리티 ..

개요프로젝트 진행 중 스크롤 애니메이션을 추가해보려 관련 라이브러리를 찾아보았다.이 글은 vue.js 3버전에서 AOS라는 라이브러리를 사용법하는 방법에 대한 글이다.설치npm install aos@2.3.4 # 마지막 정식 배포 버전이 2.3.4버전이다main.js 수정import { createApp } from 'vue';import App from './App.vue';import AOS from 'aos';import 'aos/dist/aos.css';// Vue 앱 생성const app = createApp(App);// AOS 초기화app.mount('#app');AOS.init();사용 예시 나타날때 올라오는 요소참고aos 다양한 효과 demoaos 공식 github

개요처음으로 컴포넌트 라이브러리를 사용하지 않고 다크모드를 구현하려니 수많은 난관을 만나게 되었다. 다음에는 이번처럼 헤매지 않기 위해 기록해두려 한다.코드tailwind.config.jsclass="dark:text-white"와 같이 다크모드일 경우 스타일 요소를 지정하기 위한 설정module.exports = { purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], darkMode: 'selector', // 3.4.1 버전 이후일 경우 darkMode: 'class'..

개요프로젝트 진행 중 다크모드 전환 간 tailwindcss로 transition 값을 설정한 요소의 transition이 매끄럽지 않음을 발견하게 되어 이를 해결할 방법을 찾아보았다.원인tailwindcss로 transition을 설정할때 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);라는 값이 포함되는데, 이로 인해 기본 css로 transtion을 설정했을 때와 차이가 발생함을 확인했다.해결 방법transition-timing-function 값을 기본값으로 설정해주면 된다.찾아보니 transition-timing-function의 기본값은 ease값이라고 한다. tailwindcss에서는 ease-[ease]이게무슨이상한코드야로 설정할 수 있..

코드 See the Pen Untitled by 김채민 (@aleph-kim) on CodePen.출처https://cloud-library.tistory.com/entry/CSS%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B0%84%EB%8B%A8%ED%95%9C-%ED%83%80%EC%9D%B4%ED%95%91-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98

개요이전 시간에는 homebrew 패키지를 정리(하다가 기껏 정리 다 해놓고 마지막에 실수로 모든 패키지를 삭제해버림)해보았다.이번 시간에는 무분별하게 설치된 pip 패키지를 정리하려 한다.pip 패키지도 오늘 설치한 패키지만 삭제하려 했는데 생각해보니 homebrew와는 다르게 pip은 다양한 관리 도구가 있는데 내가 사용하지 않은 것이고, 다른 사람들은 다들 관리 도구를 사용할 것이기 때문에 굳이 오늘 설치한 pip 패키지 정렬 방법을 찾는다거나, 특정 기간에 설치된 pip 패키지 삭제 방법등은 필요하지 않을 것 같았다.그리하여 그냥 모든 pip 패키지를 깡그리 삭제하려고 한다ㅎㅎ삭제 명령어pip freeze | xargs pip uninstall -y설명pip freeze: 모든 패키지 목록 출력|..

개요파이썬 토이 프로젝트 진행 중 무지성 chatGPT 따라하기를 시전한 결과 내 소중한 맥북에 이상한 패키지가 잔뜩 설치되었다.나는 2개 정도의 패키지만 설치하려 했는데 패키지가 패키지를 설치하고 그 패키지가 또 패키지를 설치하면서 약 20개 정도의 패키지가 추가되는 참사가 발생했다.하지만 homebrew는 기본적으로 설치된 패키지 노출 시 패키지명 오름차순으로 출력하고 설치 시간과 관련한 리스팅을 지원하지 않기 때문에 일일이 brew info 패키지명 명령어를 사용해야 설치 시간을 알 수 있다.내 맥북에 설치된 수많은 패키지의 정보를 일일이 조회할 순 없으니 약간의 꼼수를 부려보았고 이는 그 꼼수에 관한 포스팅이다.주의사항아래에서 설명할 방법은 패키지 설치 시간뿐만 아니라 수정 시간도 포함하여 삭제를..

개요linux를 사용하다 보면 자주 사용하게 되는 ls -al 명령어에서 각 항목이 무슨 의미인지 생각이 안 날 때가 있어 글로 정리 하려한다.각 항목별 설명항목예시설명권한-rw-r--r--파일 유형 및 접근 권한- 첫 글자는 파일 유형(-: 파일, d: 디렉토리 등), 다음 9글자는 소유자, 그룹, 기타 사용자의 권한링크 수1해당 파일이나 디렉토리에 연결된 하드 링크의 수소유자user파일이나 디렉토리의 소유자 이름그룹staff파일이나 디렉토리가 속한 그룹 이름크기1024파일의 크기(바이트 단위) 디렉토리의 경우 메타데이터 크기수정 날짜 및 시간Oct 5 12:34마지막으로 파일이나 디렉토리가 수정된 날짜와 시간파일명example.txt파일이나 디렉토리의 이름예시권한 | 링크 수 | 소유자 | 그룹 | ..

cors 라이브러리 설치npm install corscors 라이브러리 사용// index.jsconst express = require('express')const app = express()const port = 3000const cors = require('cors')app.use(cors());app.get('/', (req, res) => { res.send('Hello World!')})app.listen(port, () => { console.log(`Example app listening on port ${port}`)})

개요express.js 프로젝트 진행 중 모델 인스턴스 validation을 일일히 작성해주는게 귀찮아 공통으로 처리하는 작업을 진행했다.프로젝트 디렉토리 구조project├── app.js├── middlewares│ └── beforeValidateHandler.js└── config └── db.jsmiddlewares/beforeValidateHandler.jsconst { ValidationError } = require('sequelize');/** * 모델 인스턴스 validation * * @param {Object} entity - 검증할 모델 인스턴스 * @throws {ValidationError} 속성 규칙에 따라 필드 값이 유효하지 않은 경우 예외 발생 */functi..

docker-compose.ymlversion: '3.8' # Docker Compose 파일 버전services: postgres: image: postgres:16 # PostgreSQL 최신 이미지 사용 container_name: postgresql-container # 컨테이너 이름을 'postgresql-container'로 지정 environment: POSTGRES_USER: postgres # 슈퍼유저 계정으로 'postgres' 사용 권장 POSTGRES_PASSWORD: 비밀번호 # DB 접속 비밀번호 설정 POSTGRES_DB: 데이터베이스 # 생성할 기본 데이터베이스 이름 설정 ports: - "5432:5432" # 호스..

docker-compose.ymlversion: '3.8'services: redis: image: redis:latest # 최신 Redis 이미지를 사용 container_name: redis-container # 컨테이너 이름을 'redis-container'로 지정 ports: - "6379:6379" # 로컬의 6379 포트를 Redis 컨테이너의 6379 포트에 매핑 volumes: - redis_data:/data # 로컬의 'redis_data' 볼륨을 컨테이너의 /data 디렉토리에 매핑하여 데이터 영속성 유지 environment: REDIS_PASSWORD: 비밀번호 # Redis 서버에 접근할 때 사용할 비밀번호 환경 ..

개요아....... 글 80% 작성 완료했는데 날아가서 새로 써야하네요.... 정말 속상합니다....한 서버에서 여러 프로젝트를 돌려야 하는데 각 서브 도메인마다 ssl 인증 관리를 해주어야 해서 열심히 삽질을 한 결과Nginx Proxy Manager(이하 npm, js 패키지 매니저 아님)를 사용하는게 가장 쉽고 편하다는 것을 깨닫게 되었다.그리하여 docker compose를 사용하여 npm을 컨테이너로 실행하고 서브도메인별로 ssl 인증을 받는 과정을 정리해본다.서버 디렉토리 구조.ssh├── nginx│ └── docker-compose.yml├── project1│ └── docker-compose.yml└── project2 └── index.jsnginx/docker-co..