티스토리

LEVEL UP
검색하기

블로그 홈

LEVEL UP

pinokio0702.tistory.com/m

블로그로 정리하면 공부가 된다.

구독자
9
방명록 방문하기
공지 다음에 대비하는 자세 모두보기

주요 글 목록

  • Nextjs 14 server component build 과정 yarn build를 로컬에서 실행했습니다.빌드 중에 server-component에서 에러가 발생했습니다.해당 server-component에서는 async로 API를 호출합니다.API응답에서 값이 없으면, throw new Error 던지게 되어 있습니다.  빌드 중에 API가 실제로 호출되지는 않은 것 같습니다. throw new Error 때문에 발생한 현상인 것 같습니다.const [sbTokenVO] = await getSendbirdToken() if (!sbTokenVO?.key || !sbTokenVO?.token) { // 발생하는 경우: throw new Error('채팅 서버 접속 정보를 가져오는데 실패했습니다.') // error.tsx로 이동될거임 // retu.. 공감수 0 댓글수 0 2025. 1. 21.
  • [React+Formik] 배열 데이터 Form에서 list item 컴포넌트에 index, propsDrilling 이슈 지금 당장으로서는 propsDrilling이 가장 안전하고 직관적인 방법으로 판단되었습니다.bypass하는 컴포넌트가 있게되지만, 복잡도 증가보다는 낫다고 판단했습니다. 공감수 1 댓글수 0 2024. 10. 16.
  • [CSS] flex-grow, flex-shrink, flex-basis 알아보기 flex-grow(기본값: 0) 부모 영역에서 자식 요소들이 부모 영역에 여백이 있으면, 채우기 정도를 요소마다 설정할 수 있게 해주는 옵션이다. 기본값이 0이니까, 아무런 설정을 안 하면, flex로 한 부모 요소의 자식요소들은 빈 영역이 있어도 채우지 않는다. flex-grow: 1로 설정한 자식요소는 flex의 부모 요소의 빈공간을 채운다. flex-shrink(기본값: 1) 자식 요소들의 크기들이, 부모 요소보다 클 경우, 자식요소들의 크기를 부모 요소의 크기에 맞춰서 줄어드는 정도를 설정할 수 있게 해주는 옵션이다. 기본값이 1이므로, 자식요소들이 부모 요소의 크기를 넘어도, 자식요소들이 부모 요소 밖으로 튀어나오지 않는다. 만약, flex-shrink: 0으로 전부, 자식요소를 설정하고, 부모.. 공감수 0 댓글수 1 2023. 3. 20.
  • [Vue] 조건부 렌더링 에러 consoleObservable.js?3605:26 TypeError: Cannot read properties of undefined (reading '_transitionClasses') at Array.updateClass (vue.runtime.esm.js?2b0e:7377:1) at patchVnode (vue.runtime.esm.js?2b0e:6887:1) at updateChildren (vue.runtime.esm.js?2b0e:6768:1) at patchVnode (vue.runtime.esm.js?2b0e:6894:1) at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:7062:1) at Vue._update (vue.ru.. 공감수 0 댓글수 0 2023. 3. 14.
  • [라이브러리] cookie-parser npm 라이브러리는 뭘까? 정의 https://www.npmjs.com/package/cookie-parser Parse Cookie header and populate 'req.cookies' with an object keyed by the cookie names. 쿠키 헤더를 구문 분석하고 쿠키 이름으로 키가 지정된 개체로 'req.cookies'를 채웁니다. 왜 쓸까? Node.js 서버를 개발할 때 쓴다. 클라이언트(브라우저)로부터 http 요청 header에 cookie를 받았을 때, 쉽게 cookie를 사용하기 위해서 쓴다. export default async (req: Request, res: Response, next: NextFunction) => { try { console.log("!!!!!!!!!!!!!!.. 공감수 0 댓글수 0 2023. 3. 2.
  • [CSS] 색깔있는 이미지 회색으로 처리하기 img { filter: grayscale(100%); } 결과 공감수 0 댓글수 0 2023. 2. 25.
  • [웹 브라우저 & 모바일] 모바일 기기에서 브라우저의 인풋이 focus 되었을 때, 가상키보드 안 생기게 하는 방법 두가지 방법이 있겠다. 공감수 0 댓글수 0 2023. 2. 23.
  • [github] 원격지에 dev 브랜치를 커밋 이전 버전으로 반영하기(덮어씌우기) push -f는 desktop이나, vscode의 github plugin 그리고 github 웹 페이지에서 불가능하다. 오로지 명령어로만 가능하다. 로컬에 커밋 이전 브랜치가 있어서, 이 브랜치를 다음 명령어로 dev에 push -f했으나 잘 되지 않았다. 해결 방법 로컬에 dev 브랜치를 삭제했다. 원격 dev에 반영할 코드를 'dev'라는 브랜치명으로 로컬에 똑같이 만든다. 명령어 입력 : git push -f origin dev 공감수 0 댓글수 0 2023. 2. 21.
  • [Javascript] 텍스트 클립보드 복사하기 코드 // Get the text to be copied const textToCopy = "Hello, world!"; // Create a temporary input element const tempInput = document.createElement("input"); tempInput.setAttribute("type", "text"); tempInput.setAttribute("value", textToCopy); document.body.appendChild(tempInput); // Select the text tempInput.select(); // Copy the text to the clipboard document.execCommand("copy"); // Remove the tempor.. 공감수 0 댓글수 0 2023. 2. 19.
  • [Vue] textarea에 개행마다, 높이 늘어나고, shift+enter 개행이고, enter하면 서브밋하는 코드 공감수 0 댓글수 0 2023. 2. 19.
  • [Javascript] 두 배열 간에 교집합 구하기 1. filter 방법 이용 const array1 = [1, 2, 3, 4, 5]; const array2 = [3, 4, 5, 6, 7]; const intersection = array1.filter(x => array2.includes(x)); console.log(intersection); // [3, 4, 5] 2. set 객체 사용 const array1 = [1, 2, 3, 4, 5]; const array2 = [3, 4, 5, 6, 7]; const set1 = new Set(array1); const set2 = new Set(array2); const intersection = Array.from(new Set([...set1].filter(x => set2.has(x)))); co.. 공감수 0 댓글수 0 2023. 2. 19.
  • [Nuxtjs] Plugins의 inject를 쓰는 이유(feat. chatGPT에 물어봤어요.) Nuxt.js에서 "inject" 플러그인은 애플리케이션 컨텍스트에 변수를 주입하여 애플리케이션 전체에서 변수를 전역적으로 사용할 수 있도록 하는 데 사용됩니다. 컨텍스트는 애플리케이션의 모든 구성 요소에 전달되는 개체이며 수명 주기 후크, 구성 요소 및 애플리케이션의 다른 부분에서 context 매개 변수를 사용하여 액세스할 수 있습니다. 이것은 다음과 같은 다양한 목적에 유용할 수 있습니다. 그래서 사용하면 좋은 점은? 공통 데이터 공유: "inject" 플러그인을 사용하여 애플리케이션 전체에서 API의 기본 URL과 같은 공통 데이터를 저장하고 공유할 수 있습니다. 서비스 주입: "inject" 플러그인을 사용하여 로깅 서비스와 같은 서비스를 애플리케이션에 주입하여 구성 요소에서 쉽게 액세스하고 재.. 공감수 0 댓글수 0 2023. 2. 4.
  • [인프런 강의][Cookie] 사용자 인증이 필요한 api를 호출할 때, client와 server에 해줘야 하는 작업 개요 강의에서 커뮤니티(그룹)을 생성하는 기능을 구현하고 있다. 사용자 인증을 거쳐야 서버에서 클라이언트에서의 요청작업을 수행해줘야 한다. 클라이언트에서 서버로 요청할 때, Request Header에 Cookie를 넣어서 보내야 하는데, 서버랑 도메인이 다르다보니, cookie가 전송되지 않았다. 뿐만 아니라, 클라이언트에서 서버로 쿠키를 넘겨도, 서버에서는 받지 못하고 있었다. 이제 이 문제를 강의를 들으면서 해결한 방법을 소개한다. Client에서 cookie를 헤더에 넣어서 쏘는 방법은. axios 인스턴스에 withCrediential: true 옵션을 설정해주는 것이다. // src/api/core/index.ts import axios from "axios"; const request = a.. 공감수 0 댓글수 0 2023. 1. 24.
  • [React] useReducer를 사용하면, dispatch 후, 로직 순서 보장이 안 된다. useReducer를 사용하면, dispatch 후, 로직 순서 보장이 안 된다. 그 이유. useReducer는 기본적으로 '비동기 로직'을 포함하는 '비동기 액션'을 dispatch 하지 않아요. 개요 context를 사용해서, app.tsx에 authContext를 추가했다. auth.tsx에 context관련 코드는 넣었다. auth.tsx에서 export로 useStateContext와 useDispatchContext란 이름으로 UI컴포넌트에서 import할 수 있게끔했다. 로그인을 요청 후, 서버로부터 유저 정보를 응답받고, 유저 정보를 context에 저장시키려고 했다. context에서는 useRouter를 사용했다. 하지만, 코드가 실행되는 타임라인은 다음과 같았다. 1. '로그인' 버.. 공감수 0 댓글수 0 2023. 1. 15.
  • [Javascript] 쿠키란? 쿠키 이름과 값은 항상 인코딩해야 합니다. 쿠키 하나의 최대 용량은 4KB이다. 사이트 하나당 20개 허용한다.(브라우저에 따라 다르다) 쿠키 옵션 설명 httpOnly 자바스크립트같은 클라이언트 측 스크립트가 쿠키를 사용할 수 없게 한다. document.cookie를 통해 쿠키를 볼 수도 없고 조작 못한다. secure HTTPS연결에만 쿠키 사용할 수 있다 samesite 요청이 외부사이트에서 일어나면, 브라우저가 쿠키를 보내지 못하게 막는다. XSRF 공격을 막는데 유용하다 관련 Javascript 라이브러리 https://www.npmjs.com/package/cookie cookie HTTP server cookie parsing and serialization. Latest version: .. 공감수 0 댓글수 0 2023. 1. 14.
  • [Web] withCredentials는? withCredentials 로그인 할 때, 아이디와 비밀번호가 서버로 넘어오면 유저의 정보가 맞는지 확인하고 cookie에 token을 발급한다. 그 후에도 다른 페이지에서 인증 할 때도 이 token으로 인증한다. 백엔드와 프론트 도메인이 다르면, 로그인 성공해도 별다른 에러 없이 인증되지 않는다. 그 이유는 도메인 주소가 서로 다르면, 쿠키가 전송되지 않기 때문이다. 프론트엔드와 백엔드에 withCredentials를 설정하지 않는다면, 어떻게 될까? 결론부터 말하면, 백엔드에서 Response Header에 set-cookie로 토큰이 넘어오긴하지만, 브라우저에 쿠키에는 저장되지 않는다. 로그인을 위해서 백엔드에서 jwt 토큰을 만들어서 클라이언트로 토큰을 전송했다. Response Header에.. 공감수 0 댓글수 0 2023. 1. 14.
  • [Javascript] map 자료구조 변수를 깊은 복사하는 법 개요 새로운 메모리에 새로운 변수와 값을 저장하는 게 깊은 복사다. 원시 타입이 아닌, 참조 타입들(배열 또는 객체 타입)이 이콜 연산자로 변수에 대입하면, 얕은 복사*가 된다. *얕은 복사: 메모리 주소가 변수에 할당된다. 회사에서 돈 주고 솔루션을 제품에 붙이는 중에, 요구사항 중에 데이터를 생성한 날짜별로 묶어서 데이터를 묶음으로 UI 노출을 해야 하는 요구사항이 있었다. 솔루션 서버 응답이 리스트여서, 이 데이터를 Map 자료구조 형태로 변환하였다. 그런데, 데이터를 수정할 수도 있어야 했는데, 이 때, map 자료구조로 만들어 둔 상태를 수정해야만 했다. 그래서, map 자료구조 상태를 깊은 복사한 새로운 변수를 수정하고, 이 새로운 변수를 상태에 반영하도록 했다. map 자료구조 상태 깊은 복.. 공감수 1 댓글수 0 2023. 1. 14.
  • [Javascript] Object.entries가 뭐니? Object.entries? 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. Object.entries()에 의해 반환된 배열(array)의 순서는 객체가 정의된 방법과 관련이 없습니다. 배열 순서가 쓸 곳이 있다면, 다음과 같이 정렬을 먼저 하시는 것이 좋습니다 Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0])); const object1 = { a: 'somestring', b: 42 }; console.log(Object.entries(object1));// [['a', 'somestring'], ['b', 42]] 공감수 0 댓글수 0 2023. 1. 14.
  • [CSS] transition과 transform을 함께 사용할 때, transition이 작동 안 하는 경우 display:none이 되어 있으면, transition 애니메이션 효과가 작동하지 않는다. 공감수 0 댓글수 0 2023. 1. 11.
  • [Javascript] 문자 날짜 정렬하기 예시 다음 객체가 api로 넘어왔다. 가장 최신순으로 정렬하려고 한다. 방법 attendanceScheduleList.sort(function (comp1, comp2) { if (comp1.start comp2.start) { return -1; } return 0; }); 공감수 0 댓글수 0 2023. 1. 9.
  • [vscode] snippet 사용방법 자동완성 코드 템플릿 만들기 import React from "react"; const InputGroup = () => {}; export default InputGroup; 1. COde > Preperance > Users Snippet > 설정파일에 추가 공감수 0 댓글수 0 2023. 1. 7.
  • [typeorm] Entity 작성 에러 에러 해결 에러 메시지 TypeError: Class constructor BaseEntity cannot be invoked without 'new' 해결방법 ES5 -> ES6로 수정 { "compilerOptions": { "target": "ES6" /* ECMAScript 목표 버전 설정: 'ES3'(기본), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */, // ... } } 원인 공감수 0 댓글수 0 2023. 1. 7.
  • [typeorm]에러 해결 에러 (node:53648) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use `node --trace-warnings ...` to show where the warning was created) /Users/lt04/Project/clone-raddit/server/src/server.ts:37 import exrpess from "express"; ^^^^^^ SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:352:18) at wrapSafe (no.. 공감수 0 댓글수 0 2022. 12. 26.
  • [Vue advance Cropper] 올린 이미지에 따라서 크로퍼 크기가 맞춰짐 문제 긴 이미지를 크로퍼에 넣으면, 크로퍼가 이미지 크기만큼 되버림.. 길면, 아래 버튼들이 잘림. 수정한 코드 // ... 결과 공감수 0 댓글수 2 2022. 12. 19.
  • [Javascript] canvas 개요 업로드한 이미지가 너무 큼. 3024*3000 사이즈임. 그러면, 브라우저에 아래처럼 보임. 사용자가 이걸 보면, 분노할 듯 업로드한 파일 원본 사이즈를 수정하는 방법 const image = new Image(); image.src = dataURL; // 결과 // dataURL에는 뭐가 들어가야 하나? - img태그에 src에 들어갈 수 있는 url임. 브라우저 url or aws s3 url URL.createObjectURL()에 파라미터로 blob도 된다. URL.createObjectURL(blob도 되고, event.target.file) HTMLCanvasElement.toDataURL() - 이미지 표현을 포함하는 data URL을 반환한다 HTMLCanvasElement.get.. 공감수 0 댓글수 0 2022. 12. 19.
  • 정규식 예시 모음 한국 가격 표기법 검증 정규식 숫자와 ,만 들어가 있는지 검증 ex) 100 (o) ex) 1,000 (o) /^[0-9,]*$/g.test(this.value) 초성(자음)이 포함되어 있는지 확인 // 초성이 있는지 검사 getConsonantRegex() { return /[ㄱ-ㅎ]/g; }, 키보드에서 입력가능한 특수문자 포함 및 한글 영어 숫자이 외의 문자와 매칭되는 정규식 // 기타 사유 입력할 때, 허용 특수문자 ` ~ ! @ # $ % ^ & * ( ) - _ = + [ { ] } \ | ; : ' " , / ? function getTextRegex() { return /[^가-힣a-zA-Z0-9~!@#$%^&*()-_=+[\].?,;:"\\/'{}|\s]+$/; } 이모지 매칭.. 공감수 0 댓글수 2 2022. 12. 15.
  • [Vuejs] Vuex store 메서드 스타일 액세스 getters에 메서드에 파라미터를 주는 방법 getters: { // ... getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } } 컴포넌트에서의 사용 store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false } 다만, 메서드를 통해 액세스되는 게터는 호출할 때마다 실행되며 결과는 캐시되지 않는다고 한다. 참고: https://vuex.vuejs.org/guide/getters.html#property-style-access 공감수 0 댓글수 0 2022. 12. 13.
  • [Javascript] 정규식 []와 () 차이점 다음 코드가 있다. 이건, 업로드한 파일 이름에서 확장자를 확인 | or a|b [] 검색 기준 필터 괄호 안에 문자들 중 하나 [다-바] : 다 or 라 or 마 or 바 return /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z|A-Z|0-9|(|)|!||?|,|:|+|"|'|\s]+$/; () 정규식 그룹 패턴 그룹화 및 캡쳐 const reg = /\.(doc|docx|xls|xlsx|ppt|pptx|pdf|txt|hwp|jpeg|png|jpg)$/; if (!reg.test(name)) return false; 공감수 0 댓글수 0 2022. 12. 13.
  • [Nuxt] 정리 디렉토리 구조 assets 이미지, 글꼴 같은 컴파일되지 않는 자산들 static 서버 루트에 직접 매핑되며 이름을 유지해야 하거나 변경되지 않는 파일들 예) robots.txt, favicon 등.. nuxt.config.js nuxt의 단일 구성 지점. 모듈 적용 및 기본 설정 재정의 프로젝트 구조에 대한 추가 정보 layout nuxt 앱의 모양과 느낌을 변경할 때 좋다. 사이드바를 포함하고 싶거나 모바일과 데스크톱에 대한 고유한 레이아웃을 갖고 싶은지 여부. content Markdown, csv, yaml, json 파일을 두는 곳 콘텐츠 모듈은 마크다운 파일을 변경할 때 웹팩을 거치지 않아도 되므로 개발 시 핫 리로딩이 매우 빠르다. 공감수 0 댓글수 0 2022. 12. 11.
  • [Vue]tiptap에서 마크다운 문법 금지시키는 법 공감수 0 댓글수 0 2022. 12. 7.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.