개발 공부 기록

이미지 레이지(lazy) 로딩Intersection Observer웹 애플리케이션에서 특정 요소가 뷰포트(Viewport)나 지정된 부모 컨테이너의 가시 영역과 교차할 때 이를 비동기적으로 관찰할 수 있게 해주는 API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Intersection Observer API - Web APIs | MDNThe Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-..

웹의 성능 개선은 크게 두 개1. 로딩 성능 개선2. 렌더링 성능 개선 로딩 성능 최적화- 이미지 사이즈 최적화- Code Split- 텍스트 압축- 컴포넌트 Lazy Loading- 컴포넌트 Preloading- 이미지 Preloading렌더링 성능 최적화- Bottleneck 코드 최적화- 애니메이션 최적화 (Reflow, Repaint) 분석툴- 크롬 Network 탭- 크롬 Performance 탭- 크롬 Light house 탭- webpack-bundle-analyzer 이미지 최적화CDN - Contents Delivery Networkㄴ 물리적 거리의 한계를 극복하기 위해 소비자(사용자)와 가까운 곳에 컨텐츠 서버를 두는 기술 Image CDN - image processing CDN 화면..

취득 이유스타트업으로 이직을 하고, 개발하면서 문제 상황이 정말 많았다. 일단 인력부족으로 인해 내가 많은 것을 해야했고, 많은 것을 알아야 했다. 프로젝트를 도와주시는 DevOps 개발자 분이 계셨지만,문제발생시 뭘 물어봐야할지 키워드조차 파악할 수가 없었다. 그런 내가 참 부족하게 느껴졌다. 현재 상황에 답답해하기보단, 해결책을 찾기로 했고개발자분의 조언에 따라 AWS SAA 자격증을 준비해보기로 했다.  준비 및 공부 방법나는 주 개발 분야가 FE 였다. 간단한 BE, DB 지식이 있긴 하나 매우 얕은 수준이었고다뤄본 AWS 서비스는 EC2, RDS, Route 53 뿐이었다.. 그래서 처음엔 추천해주신 Udemy 강의를 들었다.https://www.udemy.com/course/best-aws-c..

분석개념설명키워드 or 예제 상황Amazon Athena서버리스 대화형 쿼리 서비스. S3에 저장된 데이터를 SQL로 분석. 표준 SQL 사용. 데이터 소스는 주로 S3S3에 저장된 로그 데이터를 쿼리해 특정 기간 동안의 사용자 트래픽 분석AWS Data Exchange외부 데이터 제공자와 소비자를 연결해 데이터를 구매하거나 제공. 상업적 데이터 세트를 쉽게 검색하고 구독 가능데이터 마켓플레이스. 구독형 데이터 서비스. 금융 데이터를 구독해 주식 시장 분석 애플리케이션 개발AWS Data Pipeline데이터 처리 및 이동을 자동화하는 ETL 서비스. 데이터를 지정된 소스에서 대상으로 이동ETL 작업. 일괄 처리. 자동화 워크플로우. 매일 S3에서 RDS로 데이터를 이동하고 처리하는 배치 작업 설정Ama..

Class - 클래스 생성자에 add_action, add_filter를 넣음 - new 키워드로 클래스를 생성함 - action, filter는 내부적으로 call_user_func 함수를 사용함 call_user_func([$object, 'function_name']); Ajax - 관리자단에서 사용할 경우 add_action( 'wp_ajax_{my_action}', function () { // ... die(); } ); - 비관리자(클라이언트)단에서 사용할 경우 (php) add_action('wp_ajax_nopriv_{my_action}', 'my_action_callback'); (js) $.get(ajaxurl, { action: 'my_action', key: value });

기초 개념 - funtions.php : 워드프레스가 기본으로 include 하는 php 파일 - register_post_type : 새 포스트 타입을 등록하는 함수 - add_action : 특정 순간에 함수를 실행할 수 있도록 시점과 함수를 주입하는 함수 https://developer.wordpress.org/reference/functions/register_post_type/ WordPress Developer Resources | Official WordPress Developer Resources Official WordPress developer resources including a code reference, handbooks (for APIs, plugin and theme deve..

Chrome Animation Tool Chorme의 개발자 도구에서 애니메이션을 상세하게 볼 수 있는 기능이 있습니다. 해당 기능을 통해 코드 편집기에서 코드를 수정하지 않고, Chorme에서 쉽게 애니메이션 타이밍을 조절할 수 있습니다. 우선 크롬 개발자도구에서 애니메이션 탭을 열어줍니다. 애니메이션 탭을 활용하기 위해서는 탭이 열린 채로 페이지가 로드되어야 합니다. 중간에 열게 되면 비어있는 탭이 나타나는 경우가 있는데 이때 새로고침하여 애니메이션 정보를 불러올 수 있습니다. 생성된 애니메이션 썸네일 바를 클릭하여 애니메이션 상세 정보를 볼 수 있습니다. - 색상이 진한 부분 : 애니메이션 - 색상이 연한 부분 : 반복되는 애니메이션 - 색상이 채워진 원 : 애니메이션의 시작/끝 - 비어있는 원 :..

https://github.com/HazAT/badge GitHub - HazAT/badge: Add a badge to your app icon Add a badge to your app icon. Contribute to HazAT/badge development by creating an account on GitHub. github.com prod와 dev 환경을 구분하여 배포하고, 몇번째 dev 버전인지 헷갈릴때 쓰면 좋은 라이브러리