나디아 성장 일기

📌 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

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..

📌 모달(Modal): 모달 창이 열렸을 때 기존에 있던 창을 사용하지 못하는 방식제어권을 독점하게 되어 모달창이 종료하기 전까지는 기존창을 작업할 수 없는 방식- 경고창 등   ✨ 팝업기존에 열려있는 브라우저 페이지 위에 또 다른 브라우저 페이지를 띄우는 창원래 브라우저와 독립적인 관계브라우저의 옵션을 통해 열리지 않도록 강제할 수 있음 => 모달과의 차이점    📌 모달리스(Modaless) / 논모달(Non-modal): 창이 열리더라도 기존에 있던 창을 작업할 수 있는 방식사용자가 순서에 상관없이 접근이 가능하기 때문에 사용자의 동작에 관계 없이 응용 프로그램의 상태를 일관성 있게 유지해야 함- 도구창, 편집 메뉴창    📍 모달 / 비모달을 사용하는 상황   참고  [api]모달과 모달리스..

한국 okky OKKY - All That DeveloperOKKY는 국내 최대 개발자 지식공유 플랫폼입니다. 개발자에게 필요한 기술 Q&A, 아티클, 커리어, 네트워킹, 취업, IT행사를 지원합니다okky.kr   커리어리 커리어리 | 요즘 개발자 커뮤니티 커리어리개발 트렌드, Q&A, 탑 개발자들과의 네트워킹까지. 누구나 쉽고 간편하게 성장할 수 있도록. 요즘 개발자들의 필수 커뮤니티careerly.co.kr   요즘 IT 요즘 사람들의 IT 매거진, 요즘IT매일 업데이트되는 요즘 사람들의 IT 이야기! 개발, 디자인, 기획, 다양한 IT 콘텐츠와 함께 성장해보세요.yozm.wishket.com   로켓펀치 로켓펀치 - 비즈니스 네트워크국내 최대 비즈니스 네트워크 '로켓펀치'입니다. 프로필을 만들고 ..

📌 README : 해당 Repository에 대한 설명을 위해 작성하는 안내문 프로젝트의 목적, 설치 방법, 사용 방법 등을 설명  🔺 README의 특징 보통 Repository의 최상위 폴더에 위치한다.하위 폴더에도 별도의 README를 작성할 수 있다.MarkDown(마크다운) 문법으로 작성된다.✨ MarkDown: 일반 텍스트 텍스트 문서에 서식 요소를 추가하는 데 사용할 수 있는 경량 마크업 언어 - Markup 언어에서 파생됨 (태그는 사용 X) ✨ Markup : 텍스트를 정의하고 표현하기 위해 고안된 것 (ex. HTML)   🔺 README 작성 요건 최신 정보 제공 변경 사항이 생길 시 README도 함께 업데이트해야 함❗ 간결하고 깔끔하게 작성 목차 구성 제목에 링크 설정   ..

📌 코드 스니펫(Snippets) 사용하기* 코드 스니펫(Snippets): 재사용 가능한 코드 조각  1. command palette(ctrl+shift+p) 열기 2. snippets 검색 3. 'snippets Configure User  Snippetes' 선택 4. 'New Global Snippets file' 선택  5. 파일 이름 타이핑 하기 (=> 파일이 열림) 6. 아래 링크에서 저장할 내용 붙여넣기 snippet generatorSnippet generator for Visual Studio Code, Sublime Text and Atom. Enjoy :-)snippet-generator.app- Description: 텍스트 이름 - tab trigger: 사용할 단어 - yo..

📌 코드 한 번에 Wrap하기 wrap할 코드 블럭 잡기 command palette 열기* ctrl + shift + p : command palette 열기Emmet: Wrap with Abbreviation 치고 선택 블럭 잡은 코드를 wrap할 태그 치기 * 단축키로 저장하기command palette 열기 `emmet: Wrap with Abbreviation` 치고 오른쪽 톱니바퀴 누르기단축키 Ctrl + Shift + E로 저장해놓음   📌 연산 등록키 저장하기1. command pallete에 math 검색 2. Emmet: Evaluate Math Expression 톱니바퀴에서 단축키 저장 단축키 Ctrl + M으로 지정해놓음