나의 FE피봇이야기 (179) 썸네일형 리스트형 [ 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 [ 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.. [ CSS / focus-visible ] focus vs focus-visible and focus-within focus-visible을 찾아보다가 셋다 한번에 알아 봤다.요약 :focus:focus-visible:focus-within선택 범주선택받는 주체(자신:myself)선택받는 주체(자신:myself)선택받는 주체의 부모(부모 :parents)활성화될 때모든 도구(마우스, 키보드 등등)키보드모든 도구(마우스, 키보드 등등 :focus-visible정의Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.w3.org에서 퍼온 내용"키보드 조작이 가능한 모든 사용자 인터페이스에는 키보드 초점 표시기가 표시되는 작동 모드가 있습니다." 이점This Success Criter.. [ Next / SCSS ] 시행착오 (feat. Next.config) Next로 refactor을 하면서 겪는 시행착오, 그중 scss를 react 시절에 쓰던 것 처럼 쓸 수 있다는 착각.각각을 individual 하게 폴더를 만들어서 제작. 그런데!인식을 못함 => 세팅이 필요 하다는 것을 인식 좋은 글들이 있었는데, 상세 설정이 아쉬워서 직접 정리한 글입니다. Next.config.mjs필요 이유는 환경설정을 해서 scsc의 파일 정보를 정확하게 읽어보게 하는 방법.처음 path를 봤을 때, 왜 require가 있지라는 생각을 했다. require는 node 용어인데?ㅎㅎnode를 쬐금 공부한게 도움이 됨 const path = require('path'); // node를 통해서 서버에서 파일 읽기const nextConfig = { reactStrictMod.. [Next / generateStaticParams() ] 다이나믹 페이지를 pre-Made하기 Next 공식 문서The generateStaticParams function can be used in combination with dynamic route segments to statically generate routes at build time instead of on-demand at request time.솔직히 무슨 말인지 모르겠음. 개인적인 결론으론1) 서버에서 함수 돌려서 dynamic pages를 다 파악한다. 2) 파악했기 때문에 만들어져 있고 더 빠르게 sever에서 클라이언트로 전송. 이처럼 작성하라고 함. Chapt 한테 물어봤음.Understanding generateStaticParams()In Next.js, generateStaticParams() is used fo.. [ Front-End] 프론트 엔드는 어디로 향해가는가? (feat. Next.js) 이글은 Youtber 가장 쉬운 웹개발 with Boaz님의 영상을 저 생각대로 정리한 글입니다.원본 영상 보기 대표되는 언어 혹은 라이브러리 흐름도를 제 마음대로 그려봄Java + JSP ->> AJAX ->> React ->> Next.js 결론 부터 말씀드리면,React의 한계(CSR) 예를 들어, 1) 성능 저하 2) SEO로 인하여 이런 것을 간편하게 해결줄 방법을 찾게 됨.프론트 엔드의 영역이 넓어지면서(UI, 비지니스, 서버 등) 추상화와 환경설정을 좀 더 쉽게 접근할 수 있는 Framework의 등장. Next js.Under the hood, Next.js also abstracts and automatically configures tooling needed for React, li.. [ CS / cache ] Browser cache 이해해 보기 Cache 란?캐싱은 주어진 리소스의 복사본을 저장하고 있다가 요청 시에 그것을 제공하는 기술 // MDN Cache의 존재 이유1. 모든 클라이언트를 서비스할 필요가 없어지므로 서버의 부하를 완화2. (캐시가 원래 서버에 비해서) 클라이언트에 더 가까이에 있으므로 성능이 향상됩니다. 즉, 리소스를 회신하는데 더 적은 시간이 들게 됩니다. 웹 사이트에서 캐싱은 높은 성능을 달성하는 데에 주요한 요소입니다. Cache의 사용과 전략1. 파일을 다운시 재사용할 것인지(Reusable)2. 로컬 데이터가 서버 데이터와 동일하냐 (Revalidate)3. 캐쉬 서버와 서버의 데이터가 동일하냐 (Cachable by intermediate cache) == 보완성 Browser 상세 보기 : 유효(Fresh.. 이전 1 2 3 4 ··· 9 다음
