일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- GitLab
- DevOps
- React Native
- ReactNative
- xtring.log
- JavaScript
- js
- commit
- npm install
- styled-components
- react-native
- HTML
- REACT
- nextJS
- npm
- ios
- shortcut
- ES6
- currying
- Android
- Docker
- Xcode
- git
- Swift
- styling
- vscode
- rn
- github
- Branch
- viewcontroller
- Today
- Total
목록Front-End (45)
xtring.dev
Ref. 📗 Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 최근 React 와 함께 사용하는 스타일 라이브러리/프레임워크가 정말 다양해졌습니다. 대표적으로 styled-components, emotion, Tailwind css 등이 있는데 오늘은 Tailwind 에 대해서 알아보려고 합니다! 먼저, Tailwind 의 장점은 tailwind 홈페이지에서 볼 수 있듯이 Rapidly build modern websites without ever leaving your HTML. "HTML을 떠나지 않고도 ..
Styled Components 1. 스타일? Styled Components를 왜 배우는가! SASS 코드를 설치 없이 사용하고 CSS 파일 없이 CSS 코드를 짜고 게다가 이 코드를 React Native 앱으로 공유할수 있습니다. 가장 큰 장점은 기존의 className을 사용하지 않는 것과 컴포넌트에 스타일을 적용하여 스타일 코드를 몰아 넣을 수 있으며 공통 코드를 줄이고 React의 컴포넌트 형태로 사용할 수 있다는 점입니다! 2. 셋업 npx create-react-app 을 통해 환경을 설치합니다. 그리고 /src 디렉토리에 App.js와 index.js을 제외한 모든 파일을 제거합니다. 가장 먼저 버튼을 만드는데 hover, active state, 배경색을 바꿔보겠습니다.(js와 css를..
웹 개발자라면 크롬 개발자 콘솔을 많이 사용합니다. 누가 알려주지 않으면 몰랐을 기능을 소개합니다! * 그렇게~~~ 중요하진 않지만 알고 있으면 꿀팁인 기능들입니다! 스크린샷 크롬에서도 페이지에 대한 스크린샷을 할 수 있습니다. '그냥 시스템 스크린샷을 사용하면되는가?'라는 의문을 가질 수 있지만 크롬에서 제공하는 스크린샷은 웹 사이트의 전체를 캡쳐하거나 선택한 요소에 대해서만 스크린샷을 사용하는 것이 가능합니다! 또한 매우 고화질의 이미지를 얻을 수 있습니다. 먼저, 개발자 도구(F12)를 열어줍니다. 우측 상단의 더보기 아이콘을 클릭하면 Run command 항목을 찾을 수 있습니다. 단축키로는 간단하게 Mac 기준 command + shift + P를 사용하면 됩니다. 그럼 크롬 개발자 도구가 가지..
요즘은 큰 문제가 없다면 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 지정된 요소의 언어를 지정합니다. 검색엔진의 크롤..