Birdspring

Birdspring

캠핑, 일상, 개발

Vue3 로 빠르게 프론트 웹 개발을 시작한다
Vue3

Vue3 로 빠르게 프론트 웹 개발을 시작한다

챕터1. Node를 설치한다. Node.js 의 공식 홈페이지는 https://nodejs.org/ 다. 그냥 최신 버전을 설치하면 된다. 프로덕션용이라면 마지막 LTS버전을 사용하면 될 것. 간단히 Node가 뭐냐면, 비동기 이벤트 기반 JavaScript 런타임인 Node.js는 확장 가능한 네트워크 애플리케이션을 구축하도록 설계되었고, 더 쉽게 말하면 서버에 Node.js가 설치되어있고 우리는 Node.js를 이용하여
4 min read
Typescript 오버로드 문제해결
Vue3

Typescript 오버로드 문제해결

타입스크립트로 코드를 만들다가 문제가 발생했다. const serviceCodes = computed(() => { if(!props.rentcar) return []; if(!props.rentcar.srvcCodes) return []; const result = props.rentcar.srvcCodes.reduce((acc, currentValue) => { const values = currentValue.split(',').filter(Boolean); // 콤마로 분리하고 빈 문자열 제거 return acc.concat(values); // 결과 배열에 값 추가 }, []); return result; }) 위 코드에서
1 min read
TCP 패킷에서 사용되는 주요 플래그들의 의미를 설명해 드리겠습니다
네트워크

TCP 패킷에서 사용되는 주요 플래그들의 의미를 설명해 드리겠습니다

SYN (Synchronize): 연결 설정을 시작하는 플래그입니다. 송신자가 연결 요청을 보내고, 수신자가 이를 수락하여 연결을 설정합니다. ACK (Acknowledgment): 확인 응답을 나타내는 플래그입니다. 송신자가 수신자로부터 받은 데이터를 확인하고, 다음으로 예상되는 데이터의 순서 번호를 알려줍니다. PSH (Push): 데이터 전송을 즉시 수행하도록 요청하는 플래그입니다. 버퍼링된 데이터를 즉시 송신자에서 수신자로 전송하도록 알려줍니다. FIN (Finish): 연결
2 min read
RDB vs NoSQL 장단점
dbms

RDB vs NoSQL 장단점

RDB와 NoSQL은 데이터 저장 및 관리 방식에서 매우 다르다. 각각의 장단점을 비교해 본다. 장단점 RDB 장점 * 정형화된 데이터 처리에 최적화되어 있음 * 데이터의 무결성 유지 및 일관성 보장 용이 * JOIN을 사용하여 여러 테이블에서 데이터 쉽게 가져올 수 있음 * 안정적이며 대규모 시스템에서도 확장 가능 RDB 단점 * 대용량 데이터 처리에 한계 * 스키마 변경이
2 min read
Vue3에서 CSS파일 임포트
Vue

Vue3에서 CSS파일 임포트

vue 에서 css 파일을 임포트하기 위한 방법은 3가지가 있다. 첫번째는 script 영역에서 임포트하는 방법이 있는데, 위와 같은 방법으로 임포트를 하게 되면, 모든 화면에서 test.css를 포함하게 된다. 글로벌로 적용된다는 얘기. 두번째는 style 영역에서 임포트하는 방법이 있다. 이렇게 임포트하면 첫번째와 마찬가지로 글로벌로 적용된다.
1 min read
AutoGPT 에서 Stable Diffusion 을 연동해서 사용하려면?
autogpt

AutoGPT 에서 Stable Diffusion 을 연동해서 사용하려면?

AUtoGPT 는 기본적으로 openai 의 dalle 를 사용하도록 구성이 되어있다. .env 파일의 내용중에 아래 부분을 수정한다. IMAGE_PROVIDER=sdwebui 위 처럼 수정한후 가동하면 로컬의 스테이블 디퓨전을 바라보게 되는데 기본 설정인 http://127.0.0.1:7860 주소로 연동되게 된다. 주소를 바꾸고 싶으면 아래 설정을 더 추가해야한다. SD_WEBUI_URL=http:
2 min read
CentOS 7에서 모든 외부접근을 막고 특정 아이피의 ssh접근을 허용
firewalld

CentOS 7에서 모든 외부접근을 막고 특정 아이피의 ssh접근을 허용

CentOS 7에서 방화벽 설정을 위해서는 firewalld 서비스를 사용한다. 모든 외부 접근을 막고, 특정 아이피에 대해서는 SSH로 접속이 가능하게 하려면 다음과 같은 방법을 사용할 수 있다. 1. firewalld 서비스가 실행 중인지 확인한다. sudo systemctl status firewalld 1. firewalld 서비스가 실행 중이지 않다면, 다음 명령어를 사용하여 시작한다. sudo systemctl start firewalld 1.
1 min read
리눅스 서버에서 ssh로 접근할때 root로 접근을 제한하려면?
리눅스

리눅스 서버에서 ssh로 접근할때 root로 접근을 제한하려면?

비밀번호를 변경 root 계정의 비밀번호를 복잡한 비밀번호로 변경한다. 이렇게 하면 무차별 대입 공격에 대해 안전해집니다. passwd 명령어를 사용하여 비밀번호를 변경할 수 있다. $ sudo passwd root root 로그인 비활성화 root 계정으로 직접 로그인하는 것을 비활성화한다. 대신 sudo 권한을 이용하여 명령어를 실행한다. 이렇게 하면 일반 사용자 계정으로 로그인한 후 sudo를 사용하여 필요한
2 min read
nohup 은 백그라운드로 프로그램을 실행할 수 있게 해준다
리눅스

nohup 은 백그라운드로 프로그램을 실행할 수 있게 해준다

nohup은 리눅스나 유닉스 시스템에서 백그라운드로 실행하면서 로그아웃하더라도 프로세스가 종료되지 않도록 하는 명령어다. 실행 nohup 명령어를 사용하여 프로세스를 실행하는 방법은 다음과 같다. nohup [command] & 예를 들어, node server.js를 백그라운드에서 실행하고 싶다면 다음과 같이 nohup 명령어를 사용할 수 있다. nohup node server.js & 이렇게 실행하면 server.js 파일이 백그라운드에서 실행되고, 터미널을
1 min read
express 에서 stream 으로 결과를 주는 예제
Node

express 에서 stream 으로 결과를 주는 예제

익스프레스에서 스트림을 사용하여 결과를 반환하는 예제 const express = require('express'); const fs = require('fs'); const app = express(); app.get('/file', (req, res) => { const stream = fs.createReadStream('example.txt'); res.setHeader('Content-Type', 'text/plain'); stream.pipe(res); }); app.listen(3000, () => { console.log('Server listening on port 3000'); }); 위 예제에서는 Express의
1 min read
아들 눈탱이에 프로펠러를 맞다

아들 눈탱이에 프로펠러를 맞다

23년 4월 15일 헬스장에서 운동중에 둘째아들에게 전화가 왔다. 케이블을 당기는 중에 멈추고 전화를 받았다. 형아가 프로펠러에 눈을 맞고 울고 있다고 했다. 그래서 눈은 잘 보이냐고 물어봤더니 끊고 물어본다고 하고 끊었다. 별일 아닌듯 싶어서 다시 운동을 재개했는데 또 전화가 왔다. 눈은 잘 보인다고 했다. 피가 나는지 물었더니 안난다고 했다. 별일 아니겠거니
4 min read
홍대버스 승강장, 나만 열받냐?
일상

홍대버스 승강장, 나만 열받냐?

출퇴근시 버스를 많이 이용하는데 홍대에서 버스탈때 미쳐버릴 것 같다. 똥개 훈련은 저리 가라다. 승강장에 서서 버스를 기다리면 p1,2,3 세 위치에 정차할 꺼라고 친절히 표시를 해주는데 나한텐 무쓸모로만 느껴진다. 버스도착 직전까지 계속 바뀌는 것은 둘째치고 마지막에 변경된 위치에 서는 것도 아니다. 동네 축구에서 공만 따라다니는 아이들 처럼 우르르 승강장
1 min read
Vue.js 3 에서 모듈간의 데이터 통신

Vue.js 3 에서 모듈간의 데이터 통신

Vue.js 에서 모듈간의 데이터 통신 방법은 세가지가 있다. 이벤트 버스 사용하기 이벤트 버스는 어플리케이션 전역에서 이벤트를 발생하고 수신할 수 있도록 하는 기능으로 이벤트 버스를 이용하여 모듈간의 데이터 통신을 할 수 있다. // 이벤트 버스 객체 생성 const eventBus = new Vue() // 모듈 A에서 이벤트를 발행하는 코드 eventBus.$emit('event-name', data) // 모듈
2 min read
vue3 로 코드를 작성할 때, 체크박스를 원래의 기능과 다르게 작성하는 법
Vue3

vue3 로 코드를 작성할 때, 체크박스를 원래의 기능과 다르게 작성하는 법

Vue 3에서 체크박스의 기본 동작을 변경하려면, v-model 디렉티브와 함께 사용하는 computed 속성을 사용하여 체크박스의 값(checked)을 수동으로 조작할 수 있다.
1 min read
CDN 사용시 크로스도메인 문제 해결
크로스도메인

CDN 사용시 크로스도메인 문제 해결

CDN 업체를 이용시 우리 사이트와는 다른 도메인으로 서비스를 제공해줍니다. 물론 우리 도메인을 사용할 수도 있습니다. 하지만 인증서 관리를 비롯하여 귀찮은 문제들이 발생할 수가 있어서 CDN업체가 제공하는 도메인을 사용할 수 있습니다. 이럴때 크로스도메인이 문제가 될 수 있는데요. 이는 보안상의 이유로 발생하는 문제이며, 서로 다른 도메인 간의 리소스를 공유하는 것을 제한하기 때문입니다.
2 min read