감귤밭 호지차 농장

용어 정리 - CSS Prreprocessors - SCSS - SASS 둘 다 CSS 전처리기 SCSS는 SASS에서 파생된 언어 - 거의 동일한 기능을 보유 (문법적으로 살작 다를 뿐 ) - 미관상 문제 sass는 중괄호와 세미콜론 생략, scss는 기존의 css와 비슷하게 중괄호와 세미콜론으로 구분 SASS & SCSS 링크 : sass 받아들이기, 당신이 그냥 CSS로 그만 코딩해야 하는 이유 2019. 링크 : Emotion vs SCSS vs Styled-Components _ 2023 링크 : css-in-js 라이브러리 선택 비교 (styled-component vs emotion) 링크 : React - emotion 과 styled-component의 차이 링크 : (번역) 우리가 CS..

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 캐싱과 생명주기 설정을 ..

어쩌다가 로딩 페이지 적용 하는 방법 찾다가 발견해버린 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..

가끔 하위 컴포넌트로 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 브라우저가 웹 페이지 리소스 요청의 응답에 대해 첫 번째 바이트를 수신하기까지 소요된 시간 사용자가 페이지에..

JWT JWT -> accessToken, refreshTokenac처럼 이증 방식 , OAuth, 쿠키 Header : 암호화 알고리즘 방식 기술 Payload : 시제 전달하고자 하는 JSON 데이터 Payload 와 시크릿 키로 Verify signature 부분이 결정 - payload 부분이 바뀌면 signature 부분이 바뀌게 되고 이걸 통해서 JWT 토큰이 유효한 값인지 변조된 값인지 확인 가능합니다. base64 인코딩 되어 있어서 누구든 다시 디코딩하여 Payload 에 어떤 정보가 들어있는지 확인 하는 것이 가능. 민감한 정보는 ㄴㄴ / JWT 를 사용하는 이유는 토큰이 유효한지 만 검사하기 위해 사용하는 것 입니다. 설명이 너무 잘 되어있는 블로그 1 : https://time-m..

> Toggle 1차 에러 발생 in Wrapper TS2769 : No overload matches this call, import styled from 'styled-components'; interface ThemeToggle { themeMode: string; toggleTheme: () => void; } const Wrapper = styled.button` background: ${({ theme }) => theme.mode.mainBackground}; border: 1px solid ${({ theme }) => theme.mode.border}; box-shadow: 0 1px 3px ${({ theme }) => theme.mode.divider}; border-radius: 3..

main{ border: 1px dotted red; display: flex; min-width: 500px; /* height: 600px; flex-direction:row; justify-content: space-between; flex-wrap: wrap; align-items: baseline; */ } div{ border: 1px solid green; font-weight: bold; } #box2{ word-break:break-all; flex-basis: 3; } * { margin: 10px; padding: 10px; }

✅ 오늘의 줍줍 지식 ❗❗ 유튜버 닥코님의 프론트 엔드 개발자 취업/면접 을 위해서는 어디까지 공부해야 할까? 입니다! 🔻5: 29 주니어 신입으로써 취업을 위해서는 어디까지의 수준을 갖추어야 할까? 주니어와 시니어의 차이는 실무의 경험이 있느냐 없느냐의 차이 .. 나게끔 그만큼 지식을 탄탄히 준비해야 한다는 말씀이신듯 우리는 보통 취업을 위해 프로그래밍에 집중하는 경우가 많은데 전체적인 웹의 개념을 아는 것이 가장 중요합니다. 웹의 개념을 잘 잡고 있어야 내가 작성하는 프로그래밍이 어떤 식으로 돌아가는지 개념이 잡힙니다. 기초가 가장 중요 : HTML / CSS / JS 최대한 내 모든 것을 다해서 완벽하게 섭렵하는 것이 굉장히 중요합니다. 현재 구직 시장에서 프레임워크에 집중이 된 상태이다 보니 다들..

▣ JavaScript 1. 모던 자바스크립트 : PoiemWeb 2. 3. 4. ▷▶DOM (Document Object Model) 1. PoiemWeb : DOM Part 2. 3. ▣ jQuery 1. [ 공식 ] jQuery API Documentation (라이브러리) 2. PoiemWeb : jQuery Part 3. jQuery 추가 한국어 설명 Page : Khan Academy 4. jQuery- animation [naverD2] 5. jQuery-easing Plugin 6. jQuery-easing Plugin 효과들 [GSGD] 7. 8.