xtring.dev

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와 같은 라이브러리와 함께 가장 ..

styled-components를 사용하며 Ant Design를 사용해야하면 아래와 같이 사용해보세요. 기존의 기본 Tag들과 styled-components를 함께 사용하는 방식과 같습니다! 필요에 의해서 사용할 수도 있겠지만 이렇게 사용하는 경우는 크게 없을 것 같네요 🤓 Antd의 class에 일일히 접근해서 모든 스타일을 바꾸는 것 보다 root의 index.css에서 전역으로 Antd 클래스의 스타일을 Tune 해놓은 다음에 사용하는 것이 좋을 것 같습니다! 😎 (저만의 생각입니다..ㅎㅎ)

지난 시간동안 다수의 React 프로젝트를 진행하면서 프로젝트를 빌드해 갈때마다 디렉토리 구조에 대해서 고민했습니다. 어떤 방법으로 디렉토리 구조를 잡을지는 언제나 어려웠으면 최선, 최고의 선택을 위해 고민하게되었습니다. 이 아티클에서는 해당 문제에 대해서 고민하며 얻게된 제 경험과 알아온 것들을 정리해보았습니다. 먼저, React 공식 페이지에서는 어떻게 프로젝트 디렉토리 구조를 잡으라고 하는지 살펴볼까요? Ref. https://ko.reactjs.org/docs/faq-structure.html 파일 구조 – React A JavaScript library for building user interfaces ko.reactjs.org React 프로젝트를 구조화하는 권장 방법이 있습니까? React..