스페이스 루미

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

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

다이나믹 파람스 가져오기예를들어 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는 객체의 속성 이름들 중 하나를 나타내는 문자열 유니온 타입을 생성한다.

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,..

다운그레이드 install 해준다 yarn add swiper@6.0.2 다운그레이드 안하면 별짓을해도 안되니까 다운그레이드하자. index.tsx에 스타일을 박아준다 import "swiper/components/navigation/navigation.scss"; import "swiper/components/pagination/pagination.scss"; import "swiper/swiper.scss"; // core Swiper 나는 navigation이랑 pagination을 쓸거기때문에 이렇게 적었다 import 컴포넌트에 사용할 것들을 임포트 해주고 import SwiperCore, { Navigation, Pagination, Parallax } from "swiper"; import ..

메모이제이션 useMemo 맨 처음 계산한 값을 메모리에 저장(캐싱)해서, 필요할때 꺼내서 쓴다. 함수로써의 기능도 충분히 가능하지만, useMemo의 의도된 설계가 아니며 지연된 연산을 통해 "값"을 기억하는 게 주된 목적이다. useMemo는 인자를 전달할수없다. (함수의 응답값을 메모할 필요가 없는것이고, 리액트의 useMemo 설계 의도와 어긋난다) 매개변수로 하여금 값을 뽑아내고 싶다면, useCallback 훅을 사용한다. 하지만 이 함수의 응답은 memoize될 수 없다. * 함수는 렌더링이되면 모든 내부변수가 초기화되고, 재할당 과정을 거친다. * 함수형 컴포넌트또한 함수이므로 재렌더링 시 컴포넌트 내 선언된 변수가 초기화되는 과정을 거친다. * state가 변경되면, 함수는 재랜더링 되고..

나는 분명 자식 컴포넌트에서 type정의를 제대로 한것같은데 왜 부모에서 에러가 뜨는걸까??? Type '{ images: MediaFile[] | undefined; }' is not assignable to type 'IntrinsicAttributes & MediaFile[]'. type Props를 따로 정의를 해줬다. type Props = { images?: Array; } const GoodsImagesList = ({images}:Props) => { ... } images:MediaFile[] 로 바로 정의할때는 안되었는데.. 따로 Props 타입들을 정의 해주니 해결되었다. 잘 생각해보니, Props는 디스트럭쳐링 형태로 뽑아써야한다는걸 이해했다. (props.images 이렇게..) ..

프로그래머스 LV0 > 코딩테스트 연습 > 문자열 밀기 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/120921 [문제해결] 1. 민 문자열이 같으면 0을 리턴 2. 기본 문자열 끝에꺼 제거후 앞에 끝에것을 붙여준 후 비교한다. 3. for문 다 돌아도 없으면 -1리턴 * 더 신박한 풀이법이 있더라.. function solution(A, B) { if (A == B) return 0 for(let i=1; i(b+b).indexOf(a) // 민 문자열을 더한값에서 몇번째에 A가 있는지를 찾는다.. 없으면 당연히 -1이 리턴됨 와 신박하다.

프로그래머스 LV0 > 코딩테스트 입문 > 종이 자르기 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/120922 function solution(M, N) { return M*N-1 } EZ

프로그래머스 LV0 > 코딩테스트 입문 > 다음에 올 숫자 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/120924 function solution(common) { let cha = [] let be = [] for(let i =0; i

프로그래머스 LV1 > 연습문제 > 소수 찾기 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/12921 [문제해결] 1. 매개변수 n의 제곱근을 이용해 접근 (시간복잡도 O(N)이라 가장 빠름) 2. 반복문 돌려서 소수 판단하여 갯수를 리턴한다. function solution(n) { let primeList = [] const isPrime = (num) => { // 제곱근을 이용해 소수인지 판단하는 if(num < 2) return false; if(num == 2) return true; for(let i=2; i

프로그래머스 LV1 > 연습문제 > 숫자 짝꿍 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/131128 [문제해결] 1. 들어올수있는 X, Y의 자연수값이 매우 크니까 이중포문 돌려서 비교하면 시간초과 뜬다. 2. X와 Y의 들어있는 값이 몇개고 몇개 중복인지 x와 y 배열에 담는다. 3. x와 y의 값을 비교하면서 최소값을 추출한다. (만들수있는 짝꿍수 = 작은값) 4. 상황에 따라 리턴값 예외처리 해준다. 이중포문 돌리다가 시간초과 떠서 다른방법을 생각했다. function solution(X, Y) { let answer = '' let double = [] let x = Array(10).fill(0) // 0~9까지니까 let ..

프로그래머스 LV0 > 코딩테스트 입문 > 숨어있는 숫자의 덧셈(2) 문제: https://school.programmers.co.kr/learn/courses/30/lessons/120864#qna [문제해결] 1. 빈 array에 자연수만 넣어주면 되겠구나. 2. 인덱스 하나씩 비교했을떄, 다음에 오는 값이 숫자라면 묶어서 push한다. slice(start, end) 3. 빈 array일때 0을 리턴한다. (문제를 잘읽자) 4. array의 합을 구한다. function solution(my_string) { let array = [] for(let x=0; x acc += res) } array가 빈값이면 0을 리턴한다. 원본이 string임에 주의하여 숫자처리를 잘해준다. 코테를 풀면서 느끼는건..

프로그래머스 LV1 > 탐욕법(Greedy) > 체육복 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/42862# [문제해결] 1. 여벌의 체육복을 가져온사람꺼를 훔쳐갔을수도 있다. 두 배열을 비교해 중복을 제거해준다. splice()를 써주되, 원본이 바뀐다는 사실에 유념한다. 2. 두 배열을 정렬해준다. 3. 체육복을 빌려주면 각 array에서 제거한다(filter) 4. 최종적으로 총 인원에서 잃어버린 체육복의 갯수 lost.length를 빼준다. 실패한코드 function solution(n, lost, reserve) { reserve.forEach((el,i) => { if(lost.indexOf(el)!==-1){ lost.s..

프로그래머스 LV1 > 연습문제 > 문자열 내 마음대로 정렬하기 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/12915 [문제해결] 1. sort() 메서드로 정렬하면 되겠구나. 2. 비교할 대상이 같을때는 따로 반복돌아서 확인하면 되겠구나. ** 비교할 대상이 같을때는 반복 돌 필요 없이, 그냥 단어 통째로 비교하는게 좋다. 의식의 흐름대로 작성한 코드 function solution(strings, n) { strings.sort((a,b) =>{ if(a[n] b[n]){ return 1 }else{ for(let i=0; i b[i]){ // console.log(a[..

아웃룩이 string으로 통 html을 넘겨줘서 이걸 잘 그려야 했는데, 어떻게 파싱해야되지?? iframe으로 해야하나 고민하고 있었다. 그러던 와중 멘토님이 html-react-parser 라는게 있으니 참고하라고 알려주셨다. How to render HTML string in react? how to pick body contents html-react-parser? 등 어떻게 html 안에 또 html을 뿌려주냐 고민하다가 아 어차피 string인데.. 안쪽만 추출해서 파싱해주면 되겠다 싶어서 string을 자르는방법을 선택했다. 좋은방법인지는 모르겠으나 react의 dangerouslySetInnerHTML 보다는 낫다는 판단이다. import parse from 'html-react-parse..

프로그래머스 LV1 > 연습문제 > 기사단원의 무기 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/136798 [문제해결] 1. 약수는 n으로 나눈 나머지가 0인것으로 판단한다. 2. 약수의 갯수는 약수들을 배열에 넣고 배열의 길이로 계산했다. 3. 리밋에 걸리면 power을 더해주고, 안걸리면 그대로 더해준다. ** 타임아웃에 주의하며 약수구하는 시간을 어떻게든 줄여본다. 일단 의식의 흐름대로 작성했고. function solution(number, limit, power) { const divisors = []; // 약수의 갯수 순서 for(let i=1; i limit ? acc+=power : acc+=res return acc ..

프로그래머스 LV1 > 연습문제 > 옹알이2 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/133499 [문제해결] 1. 말할수있는것의 반복이 존재하면 제외시킨다. 2. 말할수있는것을 다른값으로 치환하면서 반복수행한다. (검증하기 편하게 빈값(' ')으로 치환했다) 3. 루프를 빠져나온 최종값이 빈값이면 카운트. ** 중간값부터 제거되어 말할수있는 단어가 만들어지는 상황을 주의한다. while(여기에 들어가는값을 자꾸 false로 넣어서) 무한루프에 빠졌는데, true이면 수행이다. while에서 참조하는값은 계속 바뀌는 값이여야한다. 단순 인덱스를 참조하는것이 아니라면, while문 내에서 원본(참조값)을 수정하는 작업이 필요하다. 다시..

프로그래머스 LV1 > 연습문제 > 콜라 문제 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/132267 [문제해결] 1. 루프 돌아 나오는 n의 합을 구하는 문제다. n의 값을 찾자. n = Math.floor(n/a)*b; 2. 나머지값을 찾아서 n에 추가해주는 작업을 반복. remain = n % a 처음에 몫이되는값을 일차방정식으로 풀다가 x값이 필요가 없겠네를 뒤늦게 깨달았다.....(n이 곧 x니까..) 항상 문제해결을 천천히 생각하고 풀자. 무작정 let부터 적지말자.. function solution(a, b, n) { // a 갖다주면,b병 줌, n개를 가져다줄때 몇병? // a가 n보다 크면 루프 중단. let answe..

프로그래머스 LV1 > 연습문제 > 삼총사 [문제해결] 1. 3중으로 순회돌면서합이 0이 되면 카운트를 올려준다. 연습문제 다운 문제였다. function solution(number) { let count = 0; for(let i =0; i

프로그래머스 LV1 > 연습문제 > 햄버거 만들기 [문제해결] 1. 순회하며 n, n+1, n+2, n+3 값이 1,2,3,4 가 되는지 확인한다. 2. 조건을 만족하면 splice(i, i+4) 해주면서 원본배열에서 1,2,3,4 를 날린다. 3. 햄버거 count를 1 추가한다. ** 메모리 낭비를 주의하며, 배열의 처음부터 다시 카운팅하지 않도록 한다. 루프 혹은 포문 돌려서 체크하면 되겠구나. 별로 안어렵네.... 라고 생각했으나... ingredients의 최대 갯수가 1,000,000개다. 일단 문제 흐름을 파악하고 코드를 짰다. function solution(ingredient) { const hamburger = '1231' let ingredientStr = ingredient.join..

프로그래머스 LV1 > 연습문제 > 푸드 파이트 대회 [문제 해결 흐름] 1. array + 0 + array.reverse() 형태로 만들고, 문자열로 바꾼다. 2. 첫번째 배열은 무조건 물 1개이므로 순회를 돌때 1번째 인덱스부터 돈다. 0번째 인덱스가 무조건 1인것을 가장 나중에 인지해서, 문제를 여러번 읽었다.. 문제를 잘 읽자. function solution(food) { let halfArray = [] for(let i=1; i

react-query 리액트 쿼리의 useQuery를 공부해보자. what is query? 쿼리란 무엇이냐.. 쿼리는 데이터베이스 테이블 or 테이블 조합의 데이터 or 정보에 대한 요청이다. 설치 및 세팅 리액트쿼리와 devtools를 설치해준다 yarn add @tanstack/react-query yarn add @tanstack/react-query-devtools QueryClientProvider로 라우터를 감싸주고, 안에 ReactQueryDevtools를 넣어준다. import { BrowserRouter } from "react-router-dom"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; im..

리액트 라우터 설정법을 알아보자 일단 react-router-dom v6를 설치해준다 yarn add react-router-dom v6 App.tsx의 BrowserRouter에 basename을 정해준다.(optional) basename은 url의 prefix를 설정한다. (/rumi-space로 지정하면 모든 router list의 url 앞에 /rumi-space가 붙는다.) import { BrowserRouter } from 'react-router-dom'; import Layout from 'pages/Layout'; import './App.css'; function App() { return ( ); } export default App; 네비게이션이나 header, footer를 고..

concatenates 는 연결하다라는 뜻이다. 사슬처럼 잇는 것을 의미한다. concat 메서드는, 호출한 배열뒤에 배열을 이어붙여 만들어진 새로운 배열을 리턴한다. (원본 배열을 수정하지 않는다) 인자를 생략하면 얕은 복사본을 반환한다. array.concat([arr1],[arr2],...[,arrN]); const array1 = ['a']; const array2 = ['b']; const array3 = [1, true] const obj = {key1:'123', key2:'test obj'} const result = array1.concat(array2,array3,'test string', obj); console.log(result); // Array ["a", "b", 1, true..