분류 전체보기 (266) 썸네일형 리스트형 [ Project4 / React ] 다른 페이지 특정 위치로 이동하기 같은 페이지에서 를 이용하면 id가 페이지를 이동할 수 있다. 그런데 다른 페이지로 이동은 어떻게 될까? 같은 페이지의 경우 페이지가 로딩되면서 페이지만 이동하고 이동하는 기능이 사라진다. scrollIntoView()우리는 보통 페이지 이동을 위해서 다양한 scorll- method를 사용한다.window.scrollIntoView({ behavior : 'smooth', block:'center'}) Catch the Hash맨 처음 말했듯이, 와 id를 활용해서 페이지를 이동한다.에 정보가 id 정보가 있으면 id='callMe' 이렇게 적으면 이쪽의 위치로 이동합니다.#callMe' /> // a tag를 클릭하면, 하단에 있는 id 값으로 이동(...)id='callMe' > ..... [ JS ] !! // ??문법 삼항 함수같은거 좀 보는데, !! ?? 이런 문법은 거의 못봐서. 검색해 봤어요. ?? - Nullish Coalescing Operator (널 병합 연산자)??는 왼쪽의 값이 null이나 undefined일 경우에만 오른쪽 값을 반환합니다. let name = null;let defaultName = "Anonymous";console.log(name ?? defaultName); // "Anonymous" 차이점:|| 연산자와 유사하지만, null이나 undefined인 경우에만 오른쪽 값을 반환합니다.||는 0, false, ""(빈 문자열)과 같은 falsy 값도 오른쪽 값을 반환할 수 있습니다. !! - Double Negation (이중 부정)여기서 "hello"는 truthy 값이므로 !!.. [ React / TossPayment-1 ] <div id='payment-method'/> 어떻게 보여줄 것인가? 이번에 프로젝트를 하면서 Toss Payment를 설치해 봤다.현재 토스 2가지 버전이 있다. 1과 2버전 있으며 API를 활용하거나 SDK를 활용한다.여기서는 Toss ver2 + SDK를 활용했다 토스를 붙이면서 고민해야 할 부분은 총 3개자 있었던 거 같다. 고민했던 지점 3가지1. Toss 위젯을 어떻게 사용자에게 보여줄 것인가?2. 결제 취소시 어떻게 작성 상태 및 데이터를 정리해 나갈 것인가?3. 결제 완료 후 어떻게 플로우를 설정할 것인가? 1. Toss 위젯을 어떻게 사용자에게 보여줄 것인가?Toss에서는 를 통해서 UI를 그린다.토스로 위젯을 부를 준비가 되면useEffect(() => { async function renderPaymentWidgets() { if (wi.. [ CSS / background-image] check box or radio에 SVG이미지 넣기 CSS에 svg background image 넣기 input[type="checkbox"]:checked { background-color: rgba(255, 255, 255, 1); /* Background color when checked */ border-color: rgba(0, 0, 0, 1); /* Change border color when checked */ background-image: url('data:image/svg+xml;charset=UTF-8,http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejo.. [ React / useState ] 부모에서 자식으로 useState Hook 넘기기 때론 지식 component에게 useState hook을 넘겨서 부모에서 정보를 처리해야 할 때가 있다.(React은 근히 정보 구조를 잘 짜야 한다.) 여튼 여기서 이야기 할 부분 아닌데, 넘기게 된다면 타입을 자알~ 써줘야 한다.타입 선언interface CustomSelect { selectedPosition : string, setSelectedPosition : React.Dispatch>} 자식 콘포넌트에 넣기const ChildCompo : React.FC =>{ return( )} 작성하는 방법을 자꾸 까먹어서 여기에 기록 [ React / Generic ] argument (Feat. unkown) Type Generic의 작성 const makeFetch = (url : string) : Promise =>{ return new Promise(( res, rej ) => { fetch(url).then(res => { if(!res.ok) throw new Error('Network response was not ok'); return res.json(); }) .then(data => res(data as TData)) })} Type arugment : unknow1. JSX와의 모호성 해결React와 TypeScript를 함께 사용할 때, JSX 문법과 제너릭 문법 사이에 모호성이 발생할 수 있다. 따라서 extend unkown을 .. [ React / vite ] .env가 vite.config.tx에서 적용되지 않을때 vite .env 보통은 아래 처럼 적용 가능하다. env를 선언이 필요하다. default defineConfig(({ mode }) =>{...}를 통해서 const env = loadEnv(mode, process.cwd(), '');설정 vite.config.tximport { defineConfig, loadEnv } from 'vite'import react from '@vitejs/plugin-react';import { sentryVitePlugin } from '@sentry/vite-plugin';// https://vitejs.dev/config/export default defineConfig(({ mode }) =>{ const env = loadEnv(mode, proc.. [ CORS / React ] CORS 원리 보다는 해결 방식<local 환경> (Feat. vite) 현재 컨퍼런스 페이지를 만들고 있다. 토이 프로젝트로.결제를 위해서 데이터를 받아와야하는데, 데이터가 들어오지 않고 있다. 이유는 CORS. 환경은 물론 Local이다.이걸 해결하기 위해서 첫번째로 ngrok을 사용했다.이렇게 해서 얻은 URL을 넘겨서 server에서 내 주소를 허용하게 해놨는데도 문제가 생겼다.로컬 환경이 아니고 서버에서 도메인을 허용해줘도 안 될때, React with Typescriptconst submitData = { method: "POST", cache: "no-cache" as RequestCache, credentials: "same-origin" as RequestCredentials, headers: { "Content-Type":"applic.. [ React / Error ] Invalid DOM property `clip-path`. Did you mean `clipPath`? (Feat. 카멜케이스) Figma에서 만든 svg를 그대로 썼는데, 아마도 React에서는 약간의 경고를 내는 거 같다. 따라서 아래처럼 바꿔주길 원한다. clip-path => clipPathstroke-width => strokeWidth [ Project3 / deploy ] Next js 14 배포 (Feat. Cloudflare + KV) Cloudflare의 KV를 통해서 배포를 했다. 이틀은 배포하는 데 시간을 보낸거 같다. 그래도 일단 배포를 완료해서 기분이 좋다. 수정해야할 사항이 많긴 하다. 전체적인 프로세는 아래의 블로그를 통해서 진행했다.https://dev.to/devarshishimpi/how-to-create-a-new-nextjs-project-with-cloudflare-pages-and-workers-43d9 How to create a new Next.js project with Cloudflare Pages and WorkersIntroduction In this guide, we'll walk through creating a new Next.js 14 project using...dev.to 나의 프로젝트는.. [ Article / AI ] 인공지능에서 지능의 진실(Feat. synthetic intelligence) AI는 무서운 도구이다. 우리 삶의 많이 변화시킬 것이다. 특히, 우리의 직업 그래서 나는 AI에 대한 글을 모아서 최대한 읽을 수 있으면 읽으려고 한다. 두려움에 마주치고 준비하기 위해서이다.여기서 말하고 싶은 핵심 내용은 아마도 현재 AI라고 불리는 LLM기반 Chapt GPT는 '모방 게임' synthetic intelligence일 뿐이라고 말하고 있다. 즉 대량의 데이터로 모방해서 확률로 근사치에 대답하는 것이지 스스로 사유하고 사색하여 대답을 하는 것이 아니다. 라고 표현한다.사실 AI는 모방 모델이지 지능이 아니다.the cognitive sciences, philosophy, neuroscience, and so on. Other disciplines could act as vehicles.. [ Project3 / actionBtn ] Server Side에서 액션을 취하려고 할 때(Feat. onClick) Server Side를 열심히 고수하고 있다. 이유는 속도가 빠르다. 가장 일순이. Situation -서버에서 supabase를 가져와 delete 수행하기 Task- Server Side로, supabase delete function를 시행할 것. Action주의 onClickonClick =>. 'use client' // 클라이언트에서 오직 사용할 수 있음. 최초 방법 1. drop down으로 넘기기 => 안됨Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call thi.. [ Project3 / 로그인 ]Supabase 이용한 로그인 (Feat. Auth) import { login, signup } from './actions'export default function LoginPage() { return ( Email: Password: // button에 actions.ts의 login 연결 Log in // button에 actions.ts의 singup 연결 Sign up )}로그인 기능을 붙이려고 생각 중이였다. 어떤 걸 사용할까 생각하다. 현재 DB로 Supabase를 이용하니, 여기 auth 를 써보자고 생각했다.아래의 문서는 SSR기준이다.Supabase auth DOC Setting up Server-Side Auth for Next.js | Su.. [ React / useState ] 다중 팝업 제어하기 열기(Feat.) 보통은 CSS클레스로도 display none 처리하여 popup을 처리하기곤 한다.이번엔 useState를 사용하여 처리를 해보려고 했다. situtation : 한 페이지에서 일자와 사람이 같이 팝업으로 열림. Task : 한 페이지에서 1개 이상의 팝업이 열리는 것 방지 action1) CSS => display : none2) useState => boolean or number 2)을 선택하여 진행 => 이유 1) 속도 측면에서 큰 차이가 없다. 누가 먼저 동일 페이지에서 로드 했냐가 차이를 .1 만들뿐 2) 1)보다는 코스 수가 간결하다 특히 CSS Result1. 한개만 띄게 완료2. 바탕화면(?) 클릭 시 팝업 닫기 완료 [ Next / Component ] child component의 리셋(feat.parent Hook toggle) button component를 사용할 꺼 같아서 만들었다. Prop으로 정보 값을 전달했다. 그런데... 상황이 이렇다. 숙박을 위해서 추가 인원 설정 팝업이 필요했다.그래서 버튼이 성인 1개, 어린이 1개 이렇게 있어서 component로 만들어봐야겠다 했다. 간단한 정보는 Prop으로 전달했다. 성공했다! 그런데 팝업이 꺼지면 데이터가 날아갔다. 다시 말해 데이터가 리셋됐다. 데이터 정보값은 2개 있다. 총 인원 useState, the child button comonent.-총 인원 : parents component Hook-성인 + 어린이 : child component Hook 팝업은 parent component에서 useState으로 처리하기 때문에 false가 되는 순간 the c.. [ JS ] 컴퓨터가 생각하는 방식과 내가 생각하는 방식 차이(feat. 몇박 주무시나요?) 숙박 사이트를 만들어 보고 있다. '숙박은 당연히 몇박을 잘꺼니' 가 전제로 필요하다. 컴퓨터와 나의 사고방식의 차이를 느꼈다. 나 : 어떻게 계산할까? 해서 년도, 월, 일 을 직접 빼줘야 한다고 생각했다.컴퓨터 : AI에게 물어보니 그건 ms 으로 바꾼다음에 계산한다. [ React / popup ] popup 열고/닫고 (Feat.stopPropagation) 팝업을 만들고 position : absolute로 띄우면 현재 창에서 레이어의 높이로 팝업을 띄울 수 있다. 그렇다면 닫기는 어떻게 하면 좋을까? 방법은 여러가지가 있겠지만 띄운 레이어 밖을 누르면 가능으로 야기 해보겠다.e.stopPropagation()stopPropagation() : 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다.출처 : https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation popup을 클릭했을 때, 버블링 현상으로 띄워진 popup을 방지 할 것1. 팝업 전체onClick={(e)=>e.stopPropagation()} 2. popup button 클릭 시여기서는 handle.. [ Next / react-calendar] hydration errors (Feat. SSR) react-calendar을 사용하는데 Next에서는 SSR이 진행되기 때문에 hydration errors가 발생할 수 있다. 현재 나도 발생했고 따라서 이부분에 대해서 언급해보려고 한다. Situation- Text content did not match. Server:"July 2024" Client: "2024년 7월" Error: Text content does not match server-rendered HTML. See more info here: https://nextjs.org/docs/messages/react-hydration-error solution-prop으로 locale을 추가공문서 언급Note: When using SSR, setting this prop may help r.. [ Type / useRef ] 선언과 prop전달 error messageType 'MutableRefObject' is not assignable to type 'LegacyRef | undefined'. Type 'MutableRefObject' is not assignable to type 'RefObject'. Types of property 'current' are incompatible. Type 'string' is not assignable to type 'HTMLInputElement'.'MutableRefObject' 유형은 'LegacyRef | undefined' 유형에 할당할 수 없습니다.'MutableRefObject' 유형은 'RefObject' 유형에 할당할 수 없습니다.'current' 속성 유형은 호환되지 않습니다.'문자.. [ DB / supabase ] 일치하는 column 중복(?) 선택 하기(feat.eq or ilikes) supabase를 사용하다보니까, 아직은 이쪽에 대한 정보가 많지는 않은거 같다. 도움이 될까 정리해 본다.물론 나도 배워나가는 중이다.현재 나는 메인페에서 검색결과를 높이기 위해서 DB 에서 더 많은 데이터 가져올 목적을 가지고 있다. insensitive pattern ' ilikes'을 사용할 예정이다. 결론부터 말하면,내 키워드가 일치하는 컬럼의 개수를 늘리는 것.그러러면 'name(colume)'과 같은 table column의 개수를 늘려야 한다. or다른 방법이 있을 수 있다. 일단 내가 찾아 본 결과 물로는 or를 사용한다.여기서 city, accom_name, description에서 키워드가 들어간 모든 자료를 받아올 예정이다.작성문const { data,error } = await s.. 이전 1 2 3 4 ··· 14 다음
