전체 글 268

あいみょん - 君はロックを聴かない

https://youtu.be/ARwVe1MYAUA?si=NflXSIXUJNGWPEAR  少し寂しそうな君に스코시 사비시소-나 키미니조금 쓸쓸해 보이는 너에게こんな歌を聴かせよう코은나 우타오 키카세요-이런 노래를 들려줄게手を叩く合図테오 타타쿠 아이즈손뼉을 치는 신호雑なサプライズ자츠나 사프라이즈엉성한 서프라이즈僕なりの精一杯보쿠나리노 세이입파이내 나름의 최선埃まみれ ドーナツ盤には호코리마미레 도-나츠반니와먼지투성이 도너츠판[1]에선あの日の夢が踊る아노 히노 유메가 오도루그날의 꿈이 춤을 춰真面目に針を落とす마지메니 하리오 오토스진지하게 바늘[2]을 내려놔息を止めすぎたぜ이키오 토메스기타제숨을 너무 참았네さあ腰を下ろしてよ사- 코시오 오로시테요자, 앉아 봐フツフツと鳴り出す青春の音후츠후츠토 나리다스 세이슌노 오토마구마구 울..

취미/music 2024.05.02

프로그래머스 코딩테스트 연습 - 다리를 지나는 트럭

https://school.programmers.co.kr/learn/courses/30/lessons/42583 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 트럭 여러 대가 강을 가로지르는 일차선 다리를 정해진 순으로 건너려 합니다. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 알아내야 합니다. 다리에는 트럭이 최대 bridge_length대 올라갈 수 있으며, 다리는 weight 이하까지의 무게를 견딜 수 있습니다. 단, 다리에 완전히 오르지 않은 트럭의 무게는 무시합니다. 예를 들어, 트럭 2대가 올라갈 수 있고 무게를 10kg까..

프로그래머스 코딩테스트 연습 - 완주하지 못한 선수

https://school.programmers.co.kr/learn/courses/30/lessons/42576 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상..

[CSS] 반응형 웹 페이지 적용 기본설정

meta viewport 설정시 기본적으로 반응형 웹페이지로 설정된다! width=device-width : 화면의 넓이를 디바이스의 넓이로 지정 initial-scale=1: 기본 사이즈를 1로 지정 디바이스별 해상도 분기점 css에 미디어 쿼리 @media 규칙을 추가해 각 크기에 맞춰서 스타일을 지정할 수 있다. /* 기본 문법 */ @media only all and (조건문) {실행문} /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/} /* 테블릿 세로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) an..

코딩일지 2023.04.04

ChatGPT API를 활용한 웹 서비스 만들기 - 3일차(프론트, 백엔드 배포)

프론트엔드 배포 -> 클라우드플레어 심플하게 클라우드플레어 홈페이지에 가입후, 페이지 - create a project을 통해 프론트엔드 폴더를 올려 배포할 수 있었다. git 페이지와 연동하는 방법도 있지만 백엔드 연동시 api키 할당 등 번거로운 부분들이 있어 폴더를 올리는 방식으로 선택 백엔드 배포 - AWS Lambda 부트캠프에서 프로젝트를 진행할땐 AWS EC2를 사용해 컴퓨터를 빌려 서버를 돌리는 방식으로 백엔드 배포를 구현했었다. 하지만 개인적인 프로젝트로 EC2를 사용하기엔 비용적인 문제도 있고, 비교적 단순한 프로젝트기 때문에 AWS Lambda를 통한 서버리스 아키텍처를 활용해 백엔드를 배포하기로 했다. 람다의 경우 리눅스 설정 등이 필요없이 함수만 생성하면 되어 굉장히 편함! 코드소..

ChatGPT API를 활용한 웹 서비스 만들기 - 2일차

1. 스테이블-디퓨전을 사용하여 AI 그림 만들기 적당한 프롬프트를 활용하여 프로그래밍에 대해 조언해줄 분위기의 캐릭터를 뽑아내기 구글 코랩 사용. 2. ChatGPT에 프롬프트를 활용하여 개발자 역할 부여하기 index.js app.post('/devasi', async function (req, res) { let { userMessages, assistantMessages} = req.body let todayDateTime = new Date().toLocaleString('ko-KR', { timeZone: 'Asia/Seoul' }); let messages = [ {role: "system", content: "당신은 세계 최고의 개발자입니다. 당신에게 불가능한 것은 없으며 그 어떤 대답도 ..

Node.js에서 환경 변수 다루기

API key와 같이 공개할 수 없는 정보가 코드에 포함된 채로 프로젝트 배포를 하게 되면 이를 사용해 악의적인 일에 사용될 수 있다. 이런 일을 방지하기 위해 API key 등의 정보는 PC에 저장해두고 사용해야 한다. 파이썬 장고를 활용한 프로젝트중에는 .env 파일을 만들어 그 안에서 중요한 키들을 관리했는데 node.js에서 환경 변수에 접근할 때는 process.env라는 객체를 사용한다. process는 전역 개체라서 별도로 임포트해야하는 모듈이 없고 애플리케이션 어디에서든지 접근이 가능하다. 환경 변수 설정 윈도우의 경우: set 키=값 리눅스, Mac OS의 경우: export 키=값 이렇게 Node.js 프로세스 레벨에서 설정해준 환경 변수는 해당 프로세스가 살아있는 동안에만 유효하고, ..

ChatGPT API를 활용한 웹 서비스 만들기 - 1일차

모든 과정에 ChatGPT 활용 가능! 오늘의 배운 것 ChatGPT의 system 프롬프트를 활용하여 특정 역할을 부여하고 질문해 답변받는 웹 서비스 구상 (배우는 과정중에는 운세보기) node.js를 이용한 백엔드 구성 html, css, js를 활용한 프론트엔드 구성 fontawesome을 사용한 움직이는 아이콘 구현(챗GPT 응용가능) 실전 Deploy 프론트엔드 - cloudflare 사용 백엔드 -> AWS Lamda 사용 (serverless) 수익 창조 - 카카오 adfit, 토스 아이디를 활용한 링크 트러블슈팅: 프론트엔드에서 백엔드로 요청시 CORS 에러 cors npm 설정중 origin 주소설정시 주소의 뒷부분에 '/'까지 추가해서 발생한 문제였다! 다음으로 구상할 것 ChatGPT..