감귤밭 호지차 농장

https://velog.io/@skyu_dev/Cache-API-%EC%84%9C%EB%B2%84-%EC%9D%91%EB%8B%B5response%EC%9D%98-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EC%BA%90%EC%8B%B1%ED%95%98%EC%97%AC-%EB%B6%88%ED%95%84%EC%9A%94%ED%95%9C-%EC%9A%94%EC%B2%AD%EC%9D%84-%EC%A4%84%EC%97%AC%EB%B3%B4%EC%9E%90 [Cache API] 프론트엔드의 자체적인 HTTP caching 구현 및 만료 일자 지정하기 (feat. 서버의 response headers 브라우저의 Cache Storage를 사용하여 프론트엔드에서 자체적으로 HTTP 캐싱과 생명주기 설정을 ..

* * 작성 중인 글입니다. * * 🍀 오늘의 날짜 : 23년 05월 02일 ~ 4일. + 0923 업데이트>< 🍀 오늘의 주제 : Cookie / Session / Token Chapter 01 : Cookie 쿠키는 서버에서 " 클라이언트 " 에 영속성 있는 데이터를 저장( 방문자 컴퓨터의 메모리에 저장 )하는 방법입니다. 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있고, 클라이언트에서 서버로 쿠키를 다시 전송할 수 있습니다. 일반적으로 쿠키는 우리의 인터넷 활동을 식별하는데 사용되는 작은 데이터 파일로 우리가 온라인에서 활동한 행동들을 모니터링할 수 있도록 우리들의 기기에 생성이 됩니다. 우리들의 온라인 활동을 추적하고 개인화하고 저장하기 위해 특별히 생성되는 친구들입니다. 개발자 입장..

https://pagespeed.web.dev/analysis/https-portfolly013-netlify-app/jsys44hxgw?form_factor=desktop PageSpeed Insights 올바른 URL을 입력하세요. pagespeed.web.dev Page Speed Insight 를 사용해서 내 메인 프로젝트 성능을 측정해보았다. 아 - 찔 근데 이건 그 초반에 애니메이션 페이지의 성능이었고... 메인 페이지로 들어가면ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그렇다면 커뮤니티 페이지로 가보면 ㅋㅋㅋㅋ 아니 데이터는 왜 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 아 깜짝이야 url 잘못 찍었었네 .. 하지만 그래도... ㅋㅋㅋㅋㅋㅋㅋㅋ아 - 찔 두근두근 신나는 상세 페이지까지 들어가볼까나... ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ..

어쩌다가 로딩 페이지 적용 하는 방법 찾다가 발견해버린 FE Lazy Loading https://tech.trenbe.com/2022/07/20/FE-Lazy-Loading-%EC%A0%81%EC%9A%A9%EA%B8%B0.html FE Lazy Loading 적용기 - 트렌비 기술블로그 FE Lazy Loading 적용기 tech.trenbe.com https://medium.com/@juhyoung.jung1992/react-%EC%B4%88%EA%B8%B0-%EB%A1%9C%EB%94%A9-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0-9ecc22a2bb56 React 초기 로딩 최적화하기 SPA 페이지의 로딩 시간을 최적화하는 법 medium.com https..

보통 [ :focus / :active ] 설정을 했는데도 적용이 안되거나 다른 작업을 하면(스크롤을 내리거나 다른 빈 페이지를 누르면) 효과가 사라지는 경우를 경험해 보신 분이 있을 거다. ... 저 처럼... ㅎ 일단 원인은 크게 두 가지 1. HTML 폼 요소가 , , 가 아니다. 2. 그냥 기본 웹 브라우저의 동작으로 다른 작업을 수행했을 때 사라지는 것이 정상이다. 1번의 경우는 강제로 상태가 적용 될 수 있도록 [ tabindex = 0 ] 할당하면 처리가 된다. 하지만 2번의 경우 그냥 정상적으로 웹 브라우저가 동작하는 거라 어떻게 처리해야할지 고민이라면.. onClick 이벤트를 이용해서 class를 활성화/비활성화 하는 방법이 있다. > onClick 이벤트를 이용해서 클래스 할당하기 기..

가끔 하위 컴포넌트로 props 내려줄 때 어떤 경우는 아래처럼, import React from 'react'; export default function Dropwdown(props: { isOpen: boolean }) { const isOpen = props.isOpen; return ( {/* Dropdown 내용 */} ); } 어떤 경우는 요 아래처럼 내려받는 경우가 있었습니다요... import React from 'react'; export default function Dropwdown( isOpen: boolean) { return ( {/* Dropdown 내용 */} ); } 저 isOpen은 상위 컴포넌트에서 토글이나 모달창 On/OFF 역할을 하는 useState 의 상태 변수..

사이트 방문자를 늘리기 위해서는 빠른 웹사이트 로드가 필수인 세상이다. 최적화된 웹 사이트를 통해 더 나은 사용자 경험을 제공하기 위해 내가 만든 웹 사이트의 성능이 어느 정도인지 판단하고 성능 최적화 작업 후 비교하고 확인할 데이터가 필요할 것이다. Google의 Web Vitals 메트릭을 가이드라인으로 웹 사이트의 성능을 어느정도 정량적으로 측정할 수 있다. Web Vitals는 사용자가 체감할 수 있는 성능을 수치화 한것이다. 성능 측정 부분을 크게 3가지로 나누어 보자면 1. 로딩 2. 상호작용/반응성 3. 시각적 안정성 이다. # 로딩 1. TTFB : Time To First Byte 브라우저가 웹 페이지 리소스 요청의 응답에 대해 첫 번째 바이트를 수신하기까지 소요된 시간 사용자가 페이지에..

이력서 넣다가 생각보다 Vue를 사용하는 회사가 생각 이상으로 많아서 화가나서 작성해보는 React와 Vue의 차이점 정리 간다. 사실 난 비교점 부터 처리해보고 각각 정리하는게 좋아서... 그런 의미로 ..!! 1. React와 Vue의 장단점 비교 https://80000coding.oopy.io/f27f6183-0523-43e1-ab90-8f8175bd4a88 2. 네이버/라인 ... 왜 Vue를 쓰는 거지?? https://codingapple.com/unit/why-use-vue-over-react/ https://velog.io/@leehyunho2001/React%EB%A7%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8B%A4-Vue%EB%A5%BC-%EC%93%B0%EA%..

* Redux 정리 글 Redux 정의 * Redux-Toolkit 정리 글 [Redux x Redux-toolkit] 간단 사용법 * 기타 상태 관리 도구 정리 글 (useState / useContext / Recoil / Mobix ) 참고 : React 상태관리 최강자는? React 에서 사용하고 있는 상태관리 도구들의 각각의 차이점과 장단점 정리 글 React는 여러 상태 관리 도구들을 사용할 수 있는데 각기 장단점을 가지고 있어서 이들의 차이점에 대해서 정리해보는 시간을 가지도록 하겠습니다. 참고로 저는 Redux-Toolkit을 사랑하지만 많은 회사에서는 Redux , Redux-Saga를 많이 사용하더라구용.. Recoil 도 꽤 쓰고 말이죵... 우선 프로젝트를 진행할 때 왜? 상태관리 ..