FE (154) 썸네일형 리스트형 [ 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' 속성 유형은 호환되지 않습니다.'문자.. [ 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.. [ HTML ] 웹접근성 확인 tool at Chrome 쉽게 chrome에서 웹 전근성을 확인 할 수 있는 방법 1. 개발자 툴을 연다.2. Ctrl + Shift + P3. acc 검색한다.4. 체크, Enable full-page accessbility tree 5. 클릭, Roload DevTools6. 사람 버튼이 활성화 됨. [ git/clone ] git 클론 하기(특정 브런치 가져오기) git clonegit clone -b git clone: This is the main command for cloning a Git repository.: This is the URL of the remote repository you want to clone from.-b : This option specifies the branch you want to clone. (optional): This is the name of the local directory where you want to clone the repository. 예시git clone https://github.com/user/repository.git -b feature-branch my-local-repository 특정 .. [git] a new branch bash 에서 github branch 만들기 작업폴더에서 GitBash 오픈 (Windows경우 파란색 글씨의 master표시 확인) 1. git branch (생성할 브랜치이름) - 브랜치 생성 2. git checkout (생성한 브랜치이름) - 생성한 브랜치로 전환 - 2번의 브랜치이름과 동일해야 한다. 3. git push - 원격 저장소에 반영하기 - 2,3의 브랜치이름과 동일해야 한다. 4. git push --set-upstream origin hella-dev - 원격 저장소 동기화 시키기 참조 https://github.com/TheCopiens/algorithm-study/blob/mast.. [React] state mirroring(상태 동기화) 부모에서 자식으로 데이터를 넘겨줄 때, 우리는 prop을 사용한다. 다만 여기서 어떤 목적성을 가지고 데이터를 전달 할 것인지에 따라서 child component에서 데이터 처리 방식이 달라진다. 1. perfect sync(완전 동기화)- 무조건 prop으로 내려 받은 키워드를 그대로 쓸 것.function Message({ messageColor }) {const color = messageColor; 2. initial data(최초의 데이터 값)- 맨 처음 데이터를 값을 설정 할 때만 사용 할 것.function Message({ initialColor }) {// The `color` state variable holds the *first* value of `initialColor`.// F.. [React/ReactQuery] 사용목적 from 공문 React QueryOverviewTanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.탄스택 쿼리(FKA React 쿼리)는 흔히 웹 애플리케이션을 위한 데이터 가져오기 라이브러리로 설명되지만, 보다 기술적인 측면에서 보면 웹 애플리케이션에서 서버 상태(state)를 쉽게 가져오기, 캐싱, 동기화 및 업데이트할 수 있게 해줍니다... [REACT] a componenet를 나누는 방법 이 자료는 React 공식문서를 바탕으로 작성해 봤습니다.FilterableProductTableSearchBarProductTableProductCategoryRowProductRow 제품 테이블(라벤더색)을 보면 테이블 헤더('이름' 및 '가격' 레이블이 포함된)가 자체 구성 요소가 아닌 것을 알 수 있습니다. 이것은 선호도의 문제이며 어느 쪽이든 사용할 수 있습니다. 이 예제에서는 ProductTable의 목록 안에 표시되므로 ProductTable의 일부입니다. 그러나 이 헤더가 복잡해지면(예: 정렬을 추가하는 경우) 자체 ProductTableHeader 구성 요소로 이동할 수 있습니다.If you look at ProductTable (lavender), you’ll see that the .. [JS] JSON.stringify and JSON.parse 차이 둘을 먼저 구번 하기위해서 자바스크립트 JSON과 객체의 차이JSON 객체와 일반 JavaScript 객체(객체 리터럴이라고도 합니다)의 주요 차이점은 따옴표입니다 JSON(JavaScript Object Notation)은 문자열JSON 객체의 모든 키(key)와 문자열 유형 값은 큰따옴표(")로 감싸야 합니다.{ "name": "Jane Doe", "favorite-game": "Stardew Valley", "subscriber": false} JavaScript 객체객체 리터럴을 사용하면 키와 문자열을 큰따옴표로 묶을 필요가 없습니다. 단 객체 리터럴 문법에서는 대시(-)로 구분된 키는 따옴표로 감싸야 함. 따옴표를 사용하지 않으려면 키를 마켈표기법인 favoriteGames or fac.. [JS/Type] interface and type 타입스크립트 공식문서에 차이는 아래와 같다고 한다. the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.타입은 새로운 속성을 추가하기 위해 유형을 다시 열 수 없는 반면, 인터페이스는 항상 확장할 수 있다는 점이 가장 큰 차이점입니다.출처https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces interfacetypeproperty 추가 O O동일 명칭 사용 가능 OX interface Bear .. [JS] return new Response 본 글은 무료 Gemini를 통해서 작성된 자료입니다.보통 뒷단에서 쓰는 것으로 예상새 응답 개체를 생성하여 호출자에게 다시 보내기 전에 속성 및 본문 콘텐츠(data.status or header etc)를 사용자 지정할 수 있습니다.클라이언트에 보내기 전에 응답 데이터나 헤더를 조작해야 할 때 유용. fetch('/data') .then(response => { if (!response.ok) { return new Response('Error fetching data', { status: 500, statusText: 'Internal Server Error' }); } return response.clone(); // Create a copy of the origi.. [JS/Type] 더 명확한 작성법 함수 작성법 function createCourse(): { name: string; isPaid: boolean } { ... }function createCourse(): { name: string; isPaid: boolean } { ... }Return TypeInferred from the object parameterExplicitly defined after a colonType SafetyLess strict, potential for runtime errorsStricter, compiler checks for correct return typeReadabilityLess clear about the return typeClearer, self-documenting with explicit retur.. [JS/Type] void (update : 2024.04) void : 결과 값을 반환하지 않는 함수함수 : void, never, [ ]never : 반환값(return) 정의 가능.(다만, 일반적인 정의 아님) => ex) throw Error(message);- 확인 하기 어려운 값 + 함수가 예외 or 프로그램을 종료한다는 뜻The never type represents values which are never observed. In a return type, this means that the function throws an exception or terminates execution of the program.never also appears when TypeScript determines there’s nothing left in a union. .. [CSS] infinite scrolling X 포인트 : 전체 logos에서 자식 를 block에서 inline-block으로 만들어서 무제한 scrolling을 시키는 것==> No display FLEX animation from { transform : translateX( 0 ) } to { transform : translateX(-100%) }출처https://www.youtube.com/watch?v=nAjR0Oj0J8E [JS] How Promise works 이 자료는 아래의 블로그에서 가져온 정보입니다. https://lydiahallie.framer.website/blog/promise-execution Promise의 Process a new promis object is created in memory. the promis object contains some internal slots( [[PromiseState]], [[PrmiseResult]], [[PromiseFulfillReactions]], [[PromiseRejectReactions]], [[PromiseIsHandled]] [[PromiseFulfillReactions]], [[PromiseRejectReactions]] These fields contain something calle.. 이전 1 2 3 4 5 ··· 8 다음
