나디아 성장 일기

GSAP (The GreenSock Animation Platform): 애니메이션 자바스크립트 라이브러리  Homepage | GSAPGSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.gsap.com    📌 라이브러리 가져오기CDN 방식  Installation | GSAP | Docs & LearningGSAP is "framework agnostic", this means it can be used in React, Webflow, Wordpress, or any other..

변수명 변환 ctrl + shift + t translator - Visual Studio MarketplaceExtension for Visual Studio Code - translate for Koreanmarketplace.visualstudio.com 주석  단을 나누는 주석 ctrl + y Comment Divider - Visual Studio MarketplaceExtension for Visual Studio Code - Divide your code by sections with styled separators.marketplace.visualstudio.com    중첩 주석 ctrl + alt + / Nested Comments - Visual Studio MarketplaceExt..

Font Awesome : 웹에서 아이콘이 필요할 때 사용하는 라이브러리 Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com    1. html 파일의 태그 안에 태그로 CDN 서비스의 URL 지정버전마다 다름    2. Font Awesome에서 사용할 아이콘의 코드 복사, 붙여넣기오른쪽 상단 코드 모양 => 코드 복사 오른쪽 상단 다운로드 모양 => SVG 파일로 다운로드 태그 변경 가능 (ex. 등)   * 아이콘 제어하기 아이콘 코드에 class ..

스크린 리더가 읽는 순서 확인하기taba11y taba11yVisualise tab order with easechromewebstore.google.com     기본 마크업 보기Web DeveloperCSS ➡ Disable All Styles Web DeveloperDownload the Web Developer extension for Chrome and Firefox.chrispederick.com     페이지의 제목(heading) 구조 확인하기HeadingsMap HeadingsMapTo show, browse and audit (for accessibility and SEO) the headings structurechromewebstore.google.com

📌 CDN (Content Delivery Network): 전 세계에 분산된 서버 네트워크로 구성되어 사용자에게 빠르고 효율적으로 콘텐츠를 전달하는 시스템 최종 사용자와 가까운 곳에 콘텐츠를 캐시하는 지리적으로 분산된 서버 그룹 서버들은 데이터의 중복 복사본들을 저장하여, 서버가 최종 사용자와 가장 가까운 서버를 기준으로 데이터 요청을 처리한다.  CDN을 사용하면 HTML 페이지, JavaScript 파일, CSS 파일, 이미지, 동영상 등 인터넷 콘텐츠를 로드하는 데 필요한 자산을 빠르게 전송할 수 있다. 장점 👍 웹사이트 로드 시간 개선 대부분의 CDN들은 전 세계에 서버를 가지고 있다. 사용자에게 가까운 CDN 서버를 사용하여 웹사이트 방문자에 가까운 콘텐츠를 제공하므로 페이지 로드 시간이 ..

📌 Naming Convention (네이밍 컨벤션)  Pascal Case / Title Case : 단어 첫 글자를 대문자 MainContent Kebap Case : 하이픈으로 단어 연결 main-content Snake Case (Underscore) : 언더바(_)로 단어 연결 main_content Camel Case : 첫 글자는 소문자, 다음 단어의 첫 글자는 대문자 mainContent

📌 localhost (로컬 호스트) : 인터넷이나 다른 네트워크에 연결되지 않은 자신의 컴퓨터로컬 호스트를 사용하면 인터넷 연결 여부와 상관없이 항상 자신의 컴퓨터에 접근할 수 있다.  ✨ 127.0.0.1: 로컬 호스트를 가리키는 IP 주소 네트워크 테스트 및 개발 목적으로 사용인터넷 연결의 영향을 받지 않고 개발 환경을 설정하고 테스트할 수 있기 때문에 유용하다.  IP 확인하는 사이트 localhostYour HTTP Request Header GET / HTTP/1.1 Host: locallhost.com User-Agent: facebookexternalhit/1.1; kakaotalk-scrap/1.0; +https://devtalk.kakao.com/t/scrap/33984 Accept..

fiveserver 설치 순서# 1.npm install --global degit# 2.npm install --global add-gitignore# 3.mkdir 파일명# 4.cd 만든 파일# 5.git init# 6. add-gitignore node, windows, osx, visualstudiocode# 7. 확인ls -a# 8. 확인git status# 9.git add .# 10.git commit -m ".gitignore 파일 생성"# 11.npm install --save-dev five-server# 12.touch fiveserver.config.js  실행실행키를 dev로 설정해놨을 때npm run dev  서버 중단 (터미널) Ctrl + C

Portrait 모드: 세로 모드[포트레이트] Landscape 모드: 가로 모드[랜드스케이프]   [특수부호] @: at-sign rule `: backtic ^: caret  ~: tilde

📌 피그마(Figma) 훑어보기  🔺 디자인 시스템  : 체계적인 방법으로 디자인 자산(assets)을 통일성 있게 관리하는 시스템 팀 또는 그룹에서 서비스를 디자인, 실현 및 개발할 수 있도록 하는 모든 요소의 그룹화 단일 소스 기본 목적: 팀 작업을 보다 쉽고 빠르게 하기 위한 프로세스  🔺 피그마(Figma) : 웹 기반 UI/UX 디자인 및 프로토타이핑, 협업 디자인 툴 UIUX 디자인, 디자인 시스템, 기획, PPT, 애니메이션, 짤&이모지 등의 제작에 활용하는 툴 웹 링크로 쉽게 공유 가능 API, 플러그인 제공 웹에 자동저장되기 때문에 시스템 충돌(Crash)이 매우 적음 자바스크립트 기반  🔺 단축키 하나의 frame 보기: N  뒤로 돌아가기: shift + N도구창 없애기: c..