스페이스 루미

토스 프론트엔드 가이드라인 기반으로 만든 Cursor rule 입니다코드블럭 내용은 권장패턴입니다 1. 매직넘버 대신 상수 사용설명이 없는 숫자(매직 넘버) 대신 명명된 상수를 사용하여 명확성을 높입니다.이해하기 어려운 값에 의미를 부여하여 가독성 향상유지보수성 향상const ANIMATION_DELAY_MS = 300;async function onLikeClick() { await postLike(url); await delay(ANIMATION_DELAY_MS); // 애니메이션 대기 시간임을 명확히 표시 await refetchPostLike();} 2. 구현 세부사항 추상화복잡한 로직이나 상호작용을 전용 컴포넌트/HOC로 추상화합니다.관심사를 분리하여 인지 부하 감소컴포넌트의 가독성, 테스..

오랜만에 블로그좀 써볼까 하고 들어왔는데내 블로그가 이렇게 형편없었나? ㅋㅋㅋ!? 싶어서 광고를 일부 제거했다.글 사이사이에 덕지덕지 붙어있으니 뭐가 콘텐츠고 뭐가 광곤지 분간이 안된다.근데 티스토리 광고 세팅에서 바로바로 적용이 안되는거 보니적용되는데 시간이 좀 걸리나보다.

필터 > 모든 이슈보기 > 검색창에 입력assignee = currentUser() AND status = Done AND resolved >= "2024-01-01" AND resolved 담당자가 나이면서, 상태가 Done이고 resolved 된 2024년 초부터 2024년 말까지의 티켓을 찾아 내림차순으로 정렬 내보내기 Excel > CSV 구글 스프레드시트에 불러온 다음, 하이퍼링크로 만드는 함수 생성엑셀의 시트넘버를 찾아 적절하게 추가해준다. 나는 QA가 없으면 PS를 넣고싶어서 IF문을 추가했다 =HYPERLINK("https://pnpt.atlassian.net/browse/"&IF(NOT(ISBLANK(AO2)), AO2, AP2), IF(NOT(ISBLANK(AO2)), AO2, AP2)..

개발공부를 해야겠다 싶어서, 이번에 핫하다는 ai 를 사용해 간단한 사이트 하나를 만들어보려고 했다.ai는 클로드가 괜찮은것 같아 선택했고, 커서 ai도 한번 사용해보기로 했다.1. 클로드야, 나 이런거 만들거야.일단 사이트의 컨셉을 설명한다.게임을 하고있는데, 사기꾼 아이디와 비매너 아이디를 등록하고 조회할 수 있는 사이트가 필요해. next.js 로 페이지를 만들고 싶어. 유저는 사기꾼을 등록 할 수 있고, 등록 시 본인의 아이디도 입력해야 해. 등록할때는 카테고리를 설정할 수 있어. 카테고리는 '사기', '비매너' 가 있어.사기꾼을 등록할때 모든 유저는 목록에서 아이디를 검색할 수 있어야해. 최신 등록한 아이디가 최 상단으로 노출되고, 넘버링을 해줘. 이 사이트는 구글아이디로 로그인을 할 수 있고,..

전제조건)- 시드 1000만원으로 초고배당주 주복리 투자- 매주 40만원 추가투자- 배당 재투자 1년차 계산:초기 조건초기 투자금: 10,000,000원초기 보유 주식: 400주 (10,000,000원 ÷ 25,000원)주별 변화매주 추가 투자: 16주 (400,000원 ÷ 25,000원)주당 배당금: 300원52주 동안의 복리 효과 계산:매주 배당금 재투자매주 400,000원 추가 투자1년차 말 결과보유 주식: 약 1,283주포트폴리오 가치: 32,075,000원월 배당금: 1,539,600원 (1,283주 × 300원 × 4주)연 배당금: 18,475,200원2년차 계산:시작 조건이전 년도 이월 주식: 1,283주주별 변화계속되는 매주 추가 투자: 16주증가된 배당금 (더 많은 주식에서 발생)104주..

1. 반감기 주기 기준다음 비트코인 반감기는 2024년 4월경 예정과거 반감기 이후 12-18개월 뒤에 큰 하락장이 왔던 패턴 존재이 패턴이 반복된다면 2025년 말~2026년 초에 하락장 가능성2. 매크로 경제 요인금리 정책글로벌 경제 상황규제 환경 변화3. 시장 성숙도기관투자자들의 참여 증가ETF 승인 등 새로운 변수들과거보다 변동성이 줄어들 가능성import React from 'react';import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';const..

다이나믹 파람스 가져오기예를들어 user/visitor/[key]/page.tsx 라는 경로일 때,key 값을 추출하려고 한다.const page = ({ params }: { params: { key: string } }) => { console.log(params.key); ...} useParams훅을 사용해도 된다import { useParams } from "next/navigation";const page = () => { const params = useParams(); console.log(params.key); ...} 쿼리스트링 가져오기url에서 쿼리스트링을 추출할 때.user/visitor/test?address="강남구"import { useSearchPa..

경로 이 괴랄한거 때문에 몇십분동안 빙빙돌았다. (근데 사실은 경로문제가 아니였던거지;;;)공식문서 보고 그대로 Array로 넣으려니까 컴파일이 자꾸 안되는거임?일단 폰트파일 경로는 app 하위에 위치 // app/layout.tsxconst AppleSDGothicNeo = localFont({ src: [ { path: "./fonts/AppleSDGothicNeoR.woff2", weight: "400", style: "normal", }, { path: "./fonts/AppleSDGothicNeoM.woff2", weight: "500", style: "medium", }, { path: "./fonts/..

// public/imagesimport Image from "next/image"; next.js는 빌드시점에 public파일을 빌드하기 때문에 파일이 바뀌었다면 yarn build 후에 실행해야 변경 내용이 반영된다.runtime 시점에 변경된 내역은 반영되지 않는다.

쿼리 스트링의 키-값 쌍을 추가하고, 제거하고, 문자열을 직접 생성할 수 있는 생성자.const params = new URLSearchParams(); append() 메서드와 set() 메서드의 차이append()는 키-값 쌍을 계속 추가하고const params = new URLSearchParams();params.append('qs', 'test1');params.append('qs', 'test2');console.log(params.toString());// qs=test1&qs=test2 set()은 교체한다.const params = new URLSearchParams();params.set('qs', 'test1');params.set('qs', 'test2');console.log(p..

네트워크에서 데이터를 가져오자마자 콘솔을 찍었는데, 내려주지않는 데이터를 가지고 있길래방황하던 중, 새로운 사실을 알게됐다.빨강이 콘솔로그 실행 시점의 값 파랑이 개발자 도구에서 삼각형 펼쳤을 때 변수에 담긴 값그렇기 때문에, console.log(a) 를 찍었을때 모두 할당된 값이 브라우저 콘솔창에는 표기되지만, 실제 콘솔을 출력하는 시점에는 값이 없으므로, 값을 꺼내려고 하면 undefiend가 발생한다.

key로 직접 접근할때 종종 만날수있는 타입에러 해결방법 1 : 애니추가 [key: string]: any; // 를 추가하거나, 해결방법 2 : key as key of let payload: TestDTO = {}; for (const key in data) { if (data[key]) { payload[key as keyof TestDTO] = data[key]; } } keyof는 객체의 속성 이름들 중 하나를 나타내는 문자열 유니온 타입을 생성한다.

stash 에 저장하기 git stash save or git stash save -m "message" 저장하면 stash에 변경된 코드가 담긴다. 커밋처럼 메시지를 추가할 수 있다. stash 에서 꺼내기 git stash pop stash pop 한거 취소 git reset --merge stash 목록보기 git stash list 가장 최근 저장한거 삭제 git stash drop 모든 stash 삭제 git stash clear

image url은 알고있는데, 이것을 다운로드 하고싶다면 어떻게 해야 할까? 일단 돔을 그린다. // 파일명과 파일 url을 파라미터로 넘긴다. handleImageDownload(file.filename, file.url)} 파일명을 보내주는 이유는, 파일명을 api response에서 꺼내려면 헤더에서 꺼내야 하기때문이다 (백엔드 설정이 제대로 되어있어야 한다)버튼을 클릭했을때 handleImageDownload가 동작하도록 작업을 하자. const handleImageDownload = async (filename: string, url: string) => { try { // 데이터를 blobType으로 받는다. const response = await axios.get(url, { respon..

코쿠피 설원의 동굴 위치 동굴안에 사당이 있다. 동굴 입구는 여기 들어가면 바로 정면에 사당이 보인다. 어떻게 가냐~~ 바로 우측에 굴로 들어가면, 얼음 뿜으면서 조아가 얼음 만들어준다. 물에 얼음을 뿌리면? 얼음~ 만들어진거 가져다 써도되고 냉기열매를 쏴도된다. 노우다의 사당!! 마요이는 입구에서 좌측굴에 숨어있다. 오늘도 1사당 했다.ㅎㅎ 젤다 꿀팁글 [젤다의 전설] 티어스 오브더킹덤 - 코로그 모든 종류 / 친구한테 가고싶어 / 코로그 도토리 / 코 코로그 모든 종류와 퍼즐 푸는 방법에 대해서 알아보자. 한번 알아두면 헤멜일이 없다. 친구가 있는 곳으로 가고싶어 초록색 연기나는 곳으로 친구가 있는 위치를 알려주는데, 어떻게든 데리고 space-rumi.tistory.com

번개의대지 위치 하이랄 성의 왼쪽과 리토마을에서 동남쪽 사이에 있다. 꿈꾸는용사의 가면은 번개의대지 동굴 안에 있는데, 동굴 문을 여는 방법은 12시 정오에 남쪽 석상의 그림자가 북쪽 석상에 닿으면 된다. 번개의 대지 중앙에보면 동굴 입구가있고, 사방에 4개의 석상이 있는데, 맵에서 남쪽에 있는 석상을 표시해주자. 주변에있는 버섯나무를 자른다. 통나무 5개 필요. 일자로 이어준다. 통나무를 세우려면 말뚝이 필요하다. 이런식으로, 말뚝을 스크래빌드한 통나무에붙이고, 남쪽기둥에 붙여서 긴 그림자를 만들어준다. 장작 태워서 시간때우기로 점심으로 가자. 참고로 비오거나 번개치거나 흐린날이면 그림자가 안생기기때문에... 햇빛이 쨍한 정오가 걸리기를 기도한다. 나는 계속 비오고 천둥쳐서 5트 했다.. 한번 비 걸리..

아키텍처는 계획을 정리한것을 말한다. 즉, 소프트웨어를 분석하고 계획을 세워 정리한 설계도 같은것을 아키텍처라고 한다. 계층형 아키텍처 (레이어드 아키텍처) 여러가지 층으로 만들어 분리하는 단순한 방식의 아키텍처. 각 계층마다 로직이 다르고, 의존성이 단방향이다. 서비스 규모가 커지면 계층도 커지면서 유지보수가 힘들어지고, 개발속도도 저하되며 배포도 어렵다. 이벤트 기반 아키텍처 이벤트라고하는 상태변화에 대응하는 아키텍처이다. 예를들어, 유저가 버튼을 클릭해 원하는 상품페이지에 접근하는 이벤트가 발생할 수 있다. 상태변화에 대응하는 알림 서비스 등을 설계할 때 적합하다. 모든 요청은 비동기 처리 하기 때문에, 확장성에 좋지만, 순서를 보장하기는 어렵다. 이벤트 기반 아키텍처는 프로듀서, 브로커, 컨슈머로..

백엔드 개발자가 알아야 할 것들 백엔드 공부를 시작해보려고 한다. 나는 디자인, 퍼블리싱, 프론트엔드 지식밖에 없기 때문에, 기본적으로 내가 공부 할 키워드를 훑어봤다. 프론트엔더라 자바스크립트에 익숙하다 보니, Node.js를 공부할 예정이다. 언어 : 자바스크립트 & 타입스크립트 웹 프레임워크 : express, NestJS 인증 : 인증, 인가, Oauth 데이터베이스 : RDB - SQLite / NoSQL - 몽고디비 / ORM HTTP : RESTful API + 서버와 운영체제에 대한 이해 (리눅스서버 및 리눅스 명령어들..) + vim 웹 서버와 WAS Web Server (웹서버) : 이미지나 pdf, xls 등등 정적파일을 서비스하는 서버. ex) 아파치, 엔진엑스 Web Applica..

최근 티스토리가 구글 애드센스 광고 일부를 가져감으로써, 워드프레스의 수요가 늘었다. 물론 나는 애드센스 때문에 티스토리를 시작했던건 아니지만, 어쩌다 보니 애드센스를 달게되었고, 이왕 블로그 하는거 워드프레스까지 운영해보면 좋겠다 싶어서 시도해봤다. 몇년전에 설치형을 써봤고, 이번에 가입형으로 개설을 해봤는데 역시 재미있다. 다양한 블로그를 동시에 하는것은 무리가 있을거라고 판단했지만, 나름 각각의 블로그 플랫폼으로서의 장점이 있다. 처음 블로그를 시작할 때 어떤 플랫폼을 사용하는게 좋을까? 일단 어떤 블로그 서비스들이 있는지 알아봐야 할 것이다. 플랫폼 종류를 찾아보자. 그리고 각각의 플랫폼들의 특징을 살펴보자. 워드프레스 (설치형, 가입형이 있고 자유도가 높다.) 티스토리 블로그 (다음, 카카오톡 ..

지원되어야 하는 브라우저를 확인하자. 크로미움 기반(크롬, 삼성인터넷, 웨일, 엣지, 브레이브 등), 그리고 사파리, 파이어폭스, IE 몇버전 까지를 지원할것인지를 정한다. (2022년 6월, IE서비스는 지원종료 되었으므로 제외). 브레이브 브라우저, Arc 등 다양한 브라우저는 많고, 이걸 쓰는 사람들도 꽤 많다. 디자이너와 개발자 모두 모든 브라우저에서 실제 테스팅을 해보기를 권한다. 의외로 크롬에서 잘 돌아가면 ‘잘 되네요’ 라고 생각할 수 있지만, 사파리에서 안보이는 케이스도 있고, 엉뚱한 위치에 가 있는 케이스가 있다. 특히 사파리는 default 속성값을 명시해 주지않으면 그리지 않는 현상이 종종 있으니 반드시 체크하자. 높이값을 명시하지 않았을 경우 이미지를 그리지 않는 현상도 간헐적으로 ..

일반적으로는 적응형/반응형 여부는 프로젝트 세팅 단계에서 정하고 시작한다. 관리자페이지 처럼 넓은 화면에서 봐야 유용한 웹 같은 경우에는 반응형보다는 적응형으로 가는 편이다. 모바일웹(웹앱)의 작업 여부는 어떻게 되는지도 확인하자. 적응형, 그리고 반응형 웹이란? 적응형이란 모든 디바이스에 균일하게 보이도록 최소 너비를 고정으로 가져가는 방법이고, 반응형이란 디바이스의 폭에 따라 화면이 상이하게 보이는 것이라고 이해하면 쉽다. 적응형 예시) 잡코리아 https://www.jobkorea.co.kr/ 잡다 https://www.jobda.im/ 모바일 화면을 디자인 할때, 스테이터스바와 툴바영역높이를 포함하여 디자인한다. 브라우저 마다 다르게 하단에 띄워주는 플로팅바도 고려하는것이 좋다. 특히 사파리에서는..

우토지시의 사당 위치 계곡의 동굴 입구는 토비오 계곡의 북서쪽 쯤에있다. 박쥐같은 키이스 잡으면서 동굴로 쭉쭉 들어가다보면, 넓은 공간에 조나니움 창 두자루와 낡은 노트가 있다. 처음에 못찾아서 한참 돌았다. 주위를 잘 살피자. 노트가 힌트주는데, 일반적으로 던지면 안된다. 동굴에 들어올때 잡았던, 키이스의 날개를 달면 된다. 2트는 해보라고 창 두개 놓여져있다. 실패하면 다시 주워오면되겠지. 창을먹고 왼쪽아래쯤 공간에 올라가면 발판 빛나면서 목표지점이 표시가 된다. 조나니움 창에 스크래빌드 시전!! 던질때는 목표지점보다 좀 위로 쏴야한다. 사당챌린지 창 던지기 전승 컴플릿 은근히 사당챌린지가 재미있다.

모듈(module) 모듈이란, 서로 연관있는 데이터나 함수를 하나로 묶은 단위이다. 모듈은 코드와 선언 둘 다 포함될 수 있으며, 재사용성, 고립성, 번들링을 위해 사용된다. 모듈을 사용하게되면 다른 파일에서 선언한 것들을 가져와 사용할 수 있다. ts 파일을 하나 만들고, 변수선언을 해주면 아래와 같은 에러가 발생한다 ex) test1.ts cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module. test1.ts 파일을 모듈로 만들려면 import, expor..

라나호 근처에 보면 동굴이 있는데 그 안쪽으로 들어가다보면 수정이 있다. 들고 가다보면 위에서 돌덩이들이 떨어진다. 잘 피해서 가자. 가다보면 빛이 가리키는 방향 말고, 왼쪽~앞쪽에 보물상자 하나 있다. 먹고가자. 좋은거좀 주지.. 빛이 가리키는 방향으로 가다보면 양갈래길이 나오는데, 빛이 우측 가리키는걸 보니 왼쪽엔 마요이가 있을것으로 예상. 잡아주자. 우측으로 가다보면 돌덩이 굴러온다. 리버레코 써주자. 토키요우의 사당 챌린지 끝

지도를 보면 펠리아산 바로 위쪽에 동굴 입구가 있다. 펠리아산을 끼고 위 아래로 동굴 출입구가 있는데, 클리어 방식은 비슷하다. 동굴에 물이 떨어지고 있어서 가시들을 태울 수 없다. 탈것을 만들자. 가시밭길을 뚫고 지나간다. 동굴이 굉장히 넓은데, 쭉쭉 계속 그냥 보코블린 잡으면서 가다 보면 이렇게 철망이 보인다. 여기까지 오면 다 돈거나 마찬가지... 미넬타고 넘어가는게 될까? 가시범위가 넓으면 안된다. 윤돌 날려서 가시 태우고 미넬로 어찌저찌 걸어갈수는 있다. 암튼 배터리 조합해서 깨다보면 반대편까지 도달한다.

젤다에는 유니크말 중 거대한 시리즈가 두 종류가 있는데, 거대한말이랑 거대한 백마 다. 거대한말 위치 하테르해 바로 위쪽 이렇게 생겨먹은 엄청나게 큰 말을 볼 수 있다. 스테미나 2줄이면 충분히 잡는듯. 발로 두번 채여서 은밀세트 대충 입고 잡았다.. 거대한말은 말을 너무 안들어서 진짜 몇걸음 뛰고 바로 쓰담쓰담 해줘야한다. 안그러면 길 이탈하고, 회전 시도하고 난리도 아니다. 거대한 백마 위치 거대한 백마는 필로네 지역의 이바라 고지 쪽에 있다. 말 원단 갖다준적이 없어서 원단표시 뜨네 ㅋㅋ; 거대한 백마는 이렇게 생겼다. 갈기가 아주 멋있다. 얘도 말 엄청 안듣는다. 계속 쓰담쓰담 해주고 걷자... 거대한말 두종류는 마구간에 등록할수는 있지만, 마용을 통해 업그레이드는 할 수 없다. 말 안듣는 녀석들..

HTML에 유튜브 영상 넣기 유튜브 영상을 넣으려면 퍼가기 코드로 넣어야 한다. 그렇지 않으면 유튭에서 연결을 거부했다는 문구가 뜰것이다.. 넣고싶은 유튜브 영상에서 공유 버튼을 누른다 퍼가기를 누른다. iframe 부분 코드를 가져와 넣어준다 나는 스타일로 width와 height를 줬기때문에 뺐다. 그리고 allow="autoplay"가 먹지 않아서, src 뒷부분에 ?autoplay=1을 붙여주었다. React에서 영상 임베드하기 useEffect(() => { if (videoRef) { videoRef.current.play(); } },[]); ... *git에서는 100mb 이상 푸시가 안되니.. 임베드 할거라면 용량을 잘 확인하고 압축해서 넣자. 한번 푸시했다가 에러 걸려서 reset하고 ..

젤다 마용 위치 마용은 말의 신이다. 인간의 요리를 좋아한다. 죽은 말을 살릴수있고, 말을 업그레이드 시킬 수 있다. 마용한테 처음 찾아가면 활력당근 1개를 강탈해간다. 활력당근은 벚꽃나무 근처에서 구할수있다. 요리를 만들어오면 말과 관련된 소원을 들어준다. 참고로 거대한말은 업그레이드가 안된다. 쳇.. 너무 아쉽다. 거대한 백마 엄청 멋있는데... 고상한 말이지만 스테미나도 없고.. 관상 수집용 될 가능성 99.9% 말의 각 능력마다 MAX(별5개) 까지 찍을수있다.

코모레 비치의 동굴 동굴 돌아다니는거야 어렵지 않은데.. 항상 마요이가 꽁꽁 숨어있어서 마요이 찾는게 일이다. 코모레 비치 동굴은 고원의 마구간의 우물과 연결되어있다. 우물로 들어오면 마요이 없겠네~ 생각하기 쉽겠지만 동굴과 연결돼있어서..마요이가 있다. 마요이 위치 동굴 돌아다니다보면 빨간폭탄통이 보이는데 맞은편 깰수있는 벽이 있다. 잘 보이지도 않는다. 깨고들어가면 큰 공간 나오는데, 막혀있으니까 마요이를 찾으면 된다. 너무 꽁꽁숨은거 아니여? 함께보면 좋은 글 [젤다의 전설] 티어스 오브더킹덤 - 코로그 모든 종류 / 친구한테 가고싶어 / 코로그 도토리 / 코 코로그 모든 종류와 퍼즐 푸는 방법에 대해서 알아보자. 한번 알아두면 헤멜일이 없다. 친구가 있는 곳으로 가고싶어 초록색 연기나는 곳으로 친..

코로그 모든 종류와 퍼즐 푸는 방법에 대해서 알아보자. 한번 알아두면 헤멜일이 없다. 친구가 있는 곳으로 가고싶어 초록색 연기나는 곳으로 친구가 있는 위치를 알려주는데, 어떻게든 데리고 가면 된다. 코로그 2개준다. 나무에 사슬 연결되있는 코로그 나무에 사슬이 연결돼 있는 코로그는, 보통 주위에 물이 있다. 물 깊은곳에서 놓는다. 부력으로 띄우는 원리다. 빨간 화살표 빨간화살표들이 마지막으로 가리키는곳에 가면 조사하기 라고 뜬다. 퍼즐맞추기 주위에 있는 퍼즐을 끼워 맞추면 된다. 코로그 나뭇가지 근처에 큰 돌이 있을 것.. 그것을 나뭇가지에 올리면 된다. 목표지점까지 가기 나무토막에 올라가면 목표지점이 표시가되는데, 시간내로 도착하면 된다. 비어있는 돌 채우기 돌이 비어있는곳에 돌을 내려놓으면 된다. 돌..