xtring.dev

요즘은 큰 문제가 없다면 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를 생성합니다. 이미지를 생성합니다. 사용자의 데이터를 받을 수 있는 대화..

React에서 Redux를 통해 전역적인 state 관리를 하는 것은 특히 대형 어플리케이션에서는 필수요소로 사용됩니다. 최근 Context API의 많은 사용으로 hooks를 통해 Redux의 사용이 급격히 줄어들고 있다고 하지만 아직도 많이 도입되고 아직도 많이 사용중인 Redux의 궁금점 15가지를 정리해봅니다.   * 이글은 devinterview.hashnode.dev/redux-coding-interview-questions-for-react-developers-in-2021 를 참고하여 작성했습니다.    먼저 Redux는 어플리케이션 state 관리를 위한 open-source JavaScript 라이브러리입니다. 최근 Redux는 React와 Angular와 같은 라이브러리와 함께 가장 ..