나의 FE피봇이야기 (182) 썸네일형 리스트형 [ CS / cache ] Browser cache 이해해 보기 Cache 란?캐싱은 주어진 리소스의 복사본을 저장하고 있다가 요청 시에 그것을 제공하는 기술 // MDN Cache의 존재 이유1. 모든 클라이언트를 서비스할 필요가 없어지므로 서버의 부하를 완화2. (캐시가 원래 서버에 비해서) 클라이언트에 더 가까이에 있으므로 성능이 향상됩니다. 즉, 리소스를 회신하는데 더 적은 시간이 들게 됩니다. 웹 사이트에서 캐싱은 높은 성능을 달성하는 데에 주요한 요소입니다. Cache의 사용과 전략1. 파일을 다운시 재사용할 것인지(Reusable)2. 로컬 데이터가 서버 데이터와 동일하냐 (Revalidate)3. 캐쉬 서버와 서버의 데이터가 동일하냐 (Cachable by intermediate cache) == 보완성 Browser 상세 보기 : 유효(Fresh.. [ CODE ] 토스, 가독성 좋은 코드란 가독성이란?1. 읽기 편안한 코드(심리성) => 세미 콘론이라던지, 띄어쓰기 라던지2. 머리가 편안한 코드(공학성, 구조적) => 작성된 코드를 읽었을 때 쉽게 이해할 수 있다는 것 코드 작성시 실천하려고 노력하는 방법(진우) : 코드 작성시 맥락이 적어도 한번에 이해할 수 있도록 코드를 작성해 보려고 하는 것(순수 함수)(유림) : 켄트 벡 개발자 책 'Tidy Frist' 인용 : '1) 설계를 오래 하고 짤 것인지 2) 먼저 짜고 나중에 리팩토링 할 것인지에 대한 답은 없다. 우리는 언제나 틈틈히 리팩토링에 대한 생각을 준비해야 한다.' 조금씩 짜고 고치고 짜고 고치고(서진) : 일정 산정시 리팩토링에 대한 생각을 포함시켜서 그래도 여유있게 코드를 작성 하기 가독성 좋은 코드를 작성하기 위한 방.. [ 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.. [ React/ 원리 ] Basic, DOM by declarative DOM(선언적 DOM) 목차1. 명령적 코드 vs 선언적 코드2. 어떻게 React는 버추얼 돔으로 HTML을 그리는가2-1. POJO code2-2. Component2-3. Props2-4. JSX2-5. FRAGMENT & HTML AUTHORING2-6. FIBER AND RECONCILIATION HTML TREEchildren that is one object knows where another object is located in memory we represent that visually some arrows. The Document Object Model(DOM)a collection of objects in the comuputer's memory that represent the HTML elements .. [Javascript/Json] Json 데이터를 만들기 위한 크롤링 최근에 누군가가 콘솔에 스크립트를 써, 정보를 추출하는 것을 보고 나도 따라해 봤다. json 데이터 만들려고 코드 작성(ai+코드 좀 수정)유용하다. 이렇게 간단한 데이터를 추출해 봤다. // Select all product tiles var productTiles = document.querySelectorAll('.product-tile'); // Iterate over each product tile productTiles.forEach(function(tile) { // Get the title var title = tile.querySelector('.tile-body .pdp-link').textContent; // Get the image URL var imageUrl = tile.que.. [Js/format ] 날짜, 통화 데이터 등의 정보를 변환해주는 함수 통화(ts)const CURRENCY_FORMATTER = new Intl.NumberFormat(undefined, { currency : "ko", style:"currency",})export const formatCurrency = (number : number) =>{ return CURRENCY_FORMATTER.format(number)} 출처 : 직접 날짜예를 들어, 현재 날짜를 한국 사용자들을 위한 형식으로 변환하고 싶다면 DateTimeFormat() 생성자로 포맷터를 생성한 객체의 format() 함수를 호출하면 됩니다.> const koDtf = new Intl.DateTimeFormat("ko", { dateStyle: "long" });undefined> koDtf.format(.. [npm/redux] redux 잘 못 깔아서 안된다고 징징 npm install을 잘못해서 list 확인 후 다시 설치 (전 / 후) 비교 npm list redux 최초 잘못 설치했을 때, 잘 설치했을 때, 차이가 발생한 지점 npm install redux npm install react-redux [grid/flexbox] justify-items and align-items 차이란? gird axis 축의 main 중심이냐 아니면 block 중심이냐 차이 justify-items: CSS 그리드의 justify-items 속성은 그리드 셀 내의 인라인(main) 축을 따라 그리드 항목을 정렬하는 데 사용됩니다. 이 속성은 행 축을 따라 그리드 컨테이너 내부의 모든 그리드 항목의 정렬에 영향을 줍니다. The justify-items property in CSS Grid is used to align grid items along the inline (main) axis within their grid cells. It affects the alignment of all the grid items inside the grid container along the row axis. ali.. 이전 1 2 3 4 5 ··· 10 다음
