전체 글 (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.. 이전 1 2 3 4 ··· 23 다음
