xtring.dev

최근 서버 개발을 시작하면서 Eclipse를 사용하게 되었는데 VSCode를 오래 사용해서 Eclipse의 단축키를 사용하는 것이 정리가 되지 않았습니다. 😭 (잘 사용하던 단축키 패턴을 사용하지 못해 약간 바보가 된 느낌이였죠...) 조만간 IntelliJ로 넘어 갈 계획을 가지고 있지만 알아두면 나쁠건 없다고 생각해서 정리해봅니다. 수 많은 단축키 중 제가 사용할만한 것들만 모았습니다! 🐌 Text Editiing ⇧ + ↵ Insert line below current line ⇧ + ⌘ + ↵ Insert line above current line ⇧ + ⌘ + X To upper case ⇧ + ⌘ + Y To lower case ⌘ + D Delete line ⌥ + ⌘ + UP[or DOWN..

웹 프론트엔드라면 가장 많이 사용하는 VSCode의 단축키를 알아봅시다.(Mac 기반으로 알아볼게요!) 정리는 제가 주로 쓰는 단축키 위주로 정리했습니다. Command + D 반복되는 코드 한번에 수정하기. 단축키를 누를 때마다 해당 코드가 반복 선택됩니다. F2 변수명/함수명 한번에 바꾸기. 변경하고싶은 변수명/함수명에서 F2를 누르고 수정하면 동일한 명을 동시에 수정할 수 있습니다. Option + UP/DOWN 위치한 커서의 라인을 위/아래로 이동합니다. 코드 블럭으로 이동하면 선택된 코드를 통째로 옮길 수 있습니다. Shift + Option + UP/DOWN 위치한 커서의 라인을 위/아래로 복사합니다. 코드 블럭으로 통째로 복사도 할 수 있습니다. Command + / 해당 라인의 Commen..

요즘은 큰 문제가 없다면 React 프로젝트를 CRA 진행하곤 합니다. eject를 하게 되면 해당 프로젝트에 숨겨져 있는 모든 설정을 밖으로 추출할 수 있으며 이를 통해서 webpack과 babel의 자유로운 세팅이 가능합니다. 🍭 제 경우 외부 모듈을 추가하는데 있어 eject이 필수였기 때문에 사용하게 되었습니다. 사용방법 사용방법은 간단합니다. $ npm run eject 명령어 실행 후 ? Are you sure you want to eject? This action is permanent.(y/N) 라는 물음이 나오면 y를 누르고 Enter를 쳐줍니다. 만약, eject 실행 전 git을 통해 변경사항을 저장하지 않으면 This git repository has untracked files o..

PWA가 무엇인가요? 프로그레시브 웹앱(Progressive Web App)은 Google I/O 2016에서 소개된 웹기술이며, 줄여서 PWA라고 부릅니다. 구글은 PWA를 아래와 같이 소개합니다. PWA는 웹과 앱을 결합한 방식입니다. 브라우저를 통해 처음 방문한 사용자에게 설치를 필요로하지 않아 유용합니다. 사용자에게 PWA 형태의 서비스를 제공할수록 성능은 더욱 강력해질 것입니다. 느린 네트워크 혹은 네트워크가 끊어진 상태에서도 로드되며, 앱과 같이 푸시 알림을 전송합니다. 또 모바일 앱처럼 전체 화면으로 로드되며, 모바일 앱과 같이 아이콘이 있습니다. 구글의 소개와 같이 브라우저에서만 제공하던 웹기술을 모바일과 결합하여 사용자들의 유입을 높히고 앱의 장점을 살린 Push Notification과..

meta tag meta tag🔖는 description, keywords, author, 기타 메타데이터 정의에 사용됩니다. 메타 데이터는 브라우저와 검색엔진의 키워드(keyword) 등에 사용됩니다. meta tag에 다양한 정의를 통해 웹 사이트에 다양한 정의와 설명을 할 수 있습니다. HTML 문서의 사이에 위치할 수 있으며 semantic 태그이며 Empty element입니다. 🤓 대표적인 예들을 살펴봅시다. charset 속성은 브라우저가 사용할 문자셋을 정의합니다. keywords 속성을 사용하면 SEO(검색엔진 최적화)에 도움을 줄 수 있습니다. keywords를 정의함으로서 검색엔진의 필터에 우선으로 걸리게 해줄 수 있죠. rotbots은 검색로봇(검색엔진)에 대한 명령을 지정할 수 있..

이번 포스트에서는 시맨틱 웹에 대해서 설명드리겠습니다. 🤓 제가 갑자기 HTML을 다시 찾아보게 된 이유도 사실 이 때문입니다. Front end 개발자로 1년 넘게 일하면서 HTML을 잘 사용한다고 생각했지만 되돌아보니 막무가내로 바른 div와 none semantic하게 작성한 HTML 문서를 보고 현타가 왔기 때문입니다. 🥲그래서 다시 한번 알아보려고 해요. 부족하거나 틀린 부분에 대해서는 댓글을 달아주세요 .😁 🧐 시맨틱 웹(Semantic Web) 그게 뭘까요? 인터넷의 활성화를 시작으로 웹의 사용은 폭발적으로 늘어났습니다. 그에 따라 웹상에 축적된 정보의 지나친 비대로 인해 많은 문제에 봉착하게 되었습니다. 웹 기술은 축적된 방대한 데이터에 대하여 키워드(keyword)에 의한 정보접근만을 허..

HTML에는 HTML의 모든 요소들이 공통으로 사용할 수 있는 어트리뷰트가 있습니다. 🤓 이를 글로벌 어트리뷰트(Global Attribute)라고 합니다. 예외적으로 몇몇 요소에는 적용되지 않을 수 있지만, 글로벌 어트리뷰트는 대부분의 모든 요소에 사용될수 있습니다. 예시를 살펴볼까요? 녹색 글자들이 주로 사용되는 어트리뷰트입니다. 대표적인 글로벌 어트리뷰트는 아래와 같습니다. id 유일한 식별자를 요소에 지정합니다. id 명이 중복일 수 없습니다. class 스타일 시트에 정의된 class를 요소에 지정할 때 주로 사용합니다. 중복으로 지정이 가능합니다. hidden css의 hidden과 다르게 의미상으로도 브라우저에 노출하지 않게 됩니다. lang 지정된 요소의 언어를 지정합니다. 검색엔진의 크롤..

HTML 요소의 종류는 정말 많습니다. 그 중 content를 가질 수 없는 요소를 빈 요소(Empty element or Self-Closing element)라고 합니다. 말 그대로 요소 사이에 Content 없이 동작하는 요소라는 의미죠. 😃 따라서 빈 요소들은 어트리뷰트만을 가집니다. 아래 예시를 볼까요? React 프로젝트를 시작하면 자동으로 생성되어있는 meta 태그와 link 태그 입니다. 이 처럼 빈 요소가 사용될 때는 Content를 생략하기 때문에 의 형태를 보입니다. 빈 요소 중 대표적인 요소는 아래와 같습니다. 텍스트 안에 줄바꿈(*Carriage Return)을 생성합니다. 가로방향의 Division Line를 생성합니다. 이미지를 생성합니다. 사용자의 데이터를 받을 수 있는 대화..