Birdspring (Page 4)

Birdspring

오라클 클라우드 프리티어 가입 실패

오라클 클라우드 프리티어 가입 실패

오라클이 서버가 평생 무료라고 하여 가입하려고 시도 하였으나 계속 실패… 한달전에 실패하고 오늘다시 다른카드로 시도 하였으나 실패.. 실패 경험담들을 살펴보니 같은 이유로 실패한 케이스가 많았다. 아까운 내 시간들… AWS 쫌만 써도 몇만원씩 나와서 무료로 옮겨볼까 했더니 무산되었다. 근데 될것 처럼 하다가 마지막에 무료 시작 버튼 누르면 실패가 떠버리니 너무 빡이

토이프로젝트

모임관리앱을 만들어보자2

회사일이 너무 바빠서 진행을 거의 못하다가 급하게 끄적거려본다. 일단 지금까지 대강 그린 화면설계되는 아래와 같다. 나만 알아볼수 있다. 상관없다 내가 다 만들꺼니까. 마지막으로 도메인설계까지 한다. 이제 준비가 다 끝난거 같다. 다음은 리액트로 개발을 시작하겠다.

토이프로젝트

모임관리앱을 만들어보자

이전 Next.js로 리액트를 시작해본다에서 마지막으로 모임관리앱을 만들어 보기로 했다. 그냥 아무생각없이 내가 포함된 모임들이 관리가 체계적으로 되고 있지 않다는 생각이 불현듯 들어서 막 정했다. 이렇게라도 시작을 해야 뭐라도 만들고 끝나지 안그러면 생각만 하다가 아무것도 안하게 된다. 이건 다들 ㅇㅈ할꺼다. 요구사항 토이프로젝트라도 뭔가 만들려면 뭘만들지에 대한 요구가 필요할 것이다. 우린

Next.js로 리액트를 시작해본다

Next.js로 리액트를 시작해본다

Vue로 회사 프로젝트를 끝내고, 여유있게 ‘넷플릭스에 어떤 신작이 나왔나~’하면서 살펴봤다. ‘셀러브리티’ 오, 뭔가 재미있어 보이는데? 일단 시작해봤다. 인스타그램의 셀럽들의 이야기로 나마저 인스타그램을 설치하게 만들었다. 설치할 때만 해도 셀럽이 될 것 같은 느낌이 들었는데, 설치하고 나니 할께 없었다. 외삼촌의 일상 피드가 약간 반가웠지만.. 뭐 결론은 할께 없더라. 차치하고, 인스타그램을 웹으로

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

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

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

Typescript 오버로드 문제해결

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;

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

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

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

RDB vs NoSQL 장단점

RDB vs NoSQL 장단점

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

vue3 vite ssr window is not defined

vue3 vite ssr window is not defined

그냥 경험담, 푸념, 누가 풀어주면 좋을텐데

vue3 프로젝트 회고

회사 프로젝트를 끝내고 오픈을 잘하고나서도 또 느끼는 점들이 있어서 남긴다.

Vue3에서 CSS파일 임포트

Vue3에서 CSS파일 임포트

vue 에서 css 파일을 임포트하기 위한 방법은 3가지가 있다. 첫번째는 script 영역에서 임포트하는 방법이 있는데, <script> import '@/<path>/test.css' ... </script> 위와 같은 방법으로 임포트를 하게 되면, 모든 화면에서 test.css를 포함하게 된다. 글로벌로 적용된다는 얘기. 두번째는 style 영역에서 임포트하는 방법이 있다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

각막찰과상-아들 눈동자에 프로펠러를 맞다

각막찰과상

각막찰과상-아들 눈동자에 프로펠러를 맞다

아들이 다쳐서 놀라 응급실에 가서 응급실 병원비에 놀랐던게 아깝지 않았던 것에 관련한 심오하지 않은 이야기

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

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

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

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

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

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

자바스크립트에서 여러 조건으로 정렬을 해보자

자바스크립트

자바스크립트에서 여러 조건으로 정렬을 해보자

여러 조건으로 정렬하는 경우가 많진 않은데? 많나? 아무튼 자바스크립트에서 한번 해보자

타입스크립트

타입스크립트 코드 리펙토링

처음부터 완벽한 코드를 작성하기는 어렵다. 머리 속에서 한번에 정리하지 못하면 가능한 코드를 잘동작하게 작성한 후에 최적화를 해보자.

타입스크립트에서 네임스페이스의 활용

타입스크립트

타입스크립트에서 네임스페이스의 활용

타입스크립트로 개발하면서 네임스페이스를 사용해보고 싶었다.

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

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

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

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

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

Vue 3에서 체크박스의 기본 동작을 변경하려면, v-model 디렉티브와 함께 사용하는 computed 속성을 사용하여 체크박스의 값(checked)을 수동으로 조작할 수 있다. <template> <div> <input type="checkbox" v-model="myCheckbox"> </div> </template> <script> import { computed } from

타입스크립트 제너릭 활용

프로젝트를 진행하다가 아래와 같은 함수를 만들었는데, T를 K의 타입으로 지정하고 싶었다. private updateValue = <K extends keyof SearchParam, T> (key : K, value : T) : void => { //... } 주로 자바로 코딩을 하는데 제너릭을 저렇게 복잡하게 짜본적도 없고, 지원이 되는지도 모르겠지만 타입스크립트에서는 가능하다. private updateValue = <K extends keyof SearchParam, T extends SearchParam[