분류 전체보기 128

HTML body 태그안에 의미있는 영역을 설정하는 태그들

웹페이지에서 영역을 설정하는 혹은 layout을 구성하기 위해서 사용하는 태그들에 대해서 알아보겠습니다. 단순하게 div태그로 모두 해결을 할 수 있지만, 아래에 의미 있는(semantic) 태그들을 사용함으로써, 브라우저가 더 빨리 해석하고, SEO(Search Engine Optimization: 검색 최적화)에 적합한 태그를 구성함으로써, 검색에 좀 더 잘 노출될 수 있도록 할 수 있습니다. 기본 Layout HTML권고 사항에 따른 body태그 안의 기본 Layout 구성은 아래와 같습니다. header는 우리말로 머리말, footer는 꼬리말이라고 생각하시면 될 것 같습니다. main에는 이 페이지의 주요 내용이 들어갑니다. header에는 보통 로고와 이 페이지에 들어있는 핵심 콘텐츠를 나열한..

React Native 패키지 업데이트 후 제대로 동작하지 않을 때

React Native 혹은 Expo 패키지 업데이트 후 동작이 원활하게 동작하지 않을 때 적절히 사용하면 좋은 명령어들 입니다. 업데이트에 의해서 많은 파일이 급격하게 변하거나 하는 경우 watchman의 데이터나 npm cache데이터가 꼬이면서 빌드 혹은 실행이 제대로 되지 않는 경우에 사용하면 좋습니다. watchman 정리 watchman은 파일이 변경됨을 감시하고 기록하기 위해 만들어진 서비스입니다. react-native와 마찬가지로 facebook에서 만들어졌습니다. 아래의 명령어로 watchman에서 관리 감시하고 있는 기록을 모두 삭제할 수 있습니다. watchman watch-del-all cache clean npm에서 관리하고 있는 cache 데이터를 삭제하는 방법입니다. 패키지관..

import 문 정리 단축키

import 문에서 안 쓰는 정의 들을 깔끔하게 정리하는 단축키입니다. Windows: Alt + Shift + O Mac: Option + Shift + O 단축키를 사용하면 사용하지 않는 정의는 모두 지워지고, 가나다순으로 정렬됩니다. 단축키를 사용하기 전과 후의 결과 예시는 아래와 같습니다. 사용하기 전 import React, { useState, useEffect } from 'react' import { SafeAreaView, StyleSheet, View, Dimensions, Alert, Platform, Image } from 'react-native' import { Text, Icon, Button, colors } from 'react-native-elements' import {..

JavaScript 다크, 라이트모드 변경 이벤트 처리하기

사용자가 시스템의 화면모드를 라이트 혹은 다크 모드로 변경시 이에 따른 처리를 위해서 자바스크립트로 해당 이벤트를 받아서 처리하는 방법입니다. CSS 다크모드 처리 2가지 방식 다크모드를 처리하는 두 가지 방식에 대해서 설명드립니다. 일반적인 방법은 "@media"태크의 "prefers-color-schem"를 사용하는 방법이며, 또 다른 방법은 " "에 사용하는 파일로딩 방식입니다. 스크립트 ccusean.tistory.com Node.js Prefers-color-scheme 서버에서 처리하는 방법 서버사이드(Server side)에서 사용자의 Color scheme를 미리 알고, 처리할 수 있는 방법을 공유합니다. Mac, iPhone과 같은 경우 이미 오래전부터 "다크테마"라는 것을 제공하고 있습..

CSS 다크모드 처리 2가지 방식

다크모드를 처리하는 두 가지 방식에 대해서 설명드립니다. 일반적인 방법은 "@media"태크의 "prefers-color-schem"를 사용하는 방법이며, 또 다른 방법은 ""에 사용하는 파일로딩 방식입니다. 스크립트 방식 시스템에 설정된 light, dark 모드에 따라서 스타일시트가 적용됩니다. 파일로딩 방식 로딩한 파일중에서 시스템에 설정된 모드에 따라서 적용됩니다. JavaScript 다크, 라이트모드 변경 이벤트 처리하기 사용자가 시스템의 화면모드를 라이트 혹은 다크 모드로 변경시 이에 따른 처리를 위해서 자바스크립트로 해당 이벤트를 받아서 처리하는 방법입니다. CSS 다크모드 처리 2가지 방식 다크모드를 ccusean.tistory.com Node.js Prefers-color-scheme 서..

프로그래밍/CSS 2022.07.23

프로그래밍 언어 하나로 서버, PC 애플리케이션, Web, App 그리고 AI 모두 만들 수 있는 언어는?

프로그래밍 언어 하나로 서버, PC 애플리케이션, 웹페이지, 휴대폰 App 그리고 요즘 핫 한 AI까지 만들 수 있는 언어는 바로 "JavaScript" 입니다. JavaScript언어 문법을 안다면 아래와 같이 CPU, Memory, Display와 같은 환경이 구축된 환경에서 모든 애플리케이션 제작이 가능합니다. 더 큰 장점은 소스 코딩 한 번으로 Windows, Linux, Mac과 같은 여러 플랫폼에 적용이 된다는 것입니다. Web 개발 HTML, CSS와 함께 동적인 웹페이지를 개발할 수 있습니다. 서버 개발 한 소스로 Windows, Linux, Mac OS에서 구동 가능 Node.js: 서버뿐만 아니라 클라이언트 개발에 사용되며, 주요 라이브러리들이 Node.js에 있으며, 아래에 나열되는 ..

IT 일반 2022.07.22

Node.js Prefers-color-scheme 서버에서 처리하는 방법

서버사이드(Server side)에서 사용자의 Color scheme를 미리 알고, 처리할 수 있는 방법을 공유합니다. Mac, iPhone과 같은 경우 이미 오래전부터 "다크테마"라는 것을 제공하고 있습니다. 눈의 피로도를 줄이고, 전력소모를 줄일 수 있기 때문입니다. 이 방법은 이미 Windows, Linux, Android와 같은 많은 OS기반 기기에저 채택되어 널리 사용되고 있습니다. 이에 따라 웹페이지나 앱화면에서 다크테마를 제공하고 있습니다. 사용자가 시스템에서 설정한 테마에 따라서 웹, 앱 화면의 컬러색상이 자동으로 바뀌고, 혹은 버튼과 같은 사용자 액션에 따라서 선택할 수 있도록 제공하는 서비스가 많아지고 있습니다. 이와 같은 처리를 클라이언트 사이드 최종 웹 혹은 앱화면에서 처리하지 않고..

상, 하단에 뜨는 애드센스 광고 없애기

애드센스 광고가 상단 혹은 하단에 뜨면서, 화면을 가리면서, 보기에 불편하게 만드는 광고가 있습니다. 이 광고를 일명 "앵커"광고라고 합니다. 이 광고가 뜨는 것을 막고자 하시는 분들에게 설정하는 방법을 알려 드립니다. 우선, 이 광고는 티스토리와 같은 블로그 설정에서 할 수 있는 속성이 아니고 애드센스 계정내 설정에서 진행해야 합니다. 아래의 절차에 따라 진행 하시면 됩니다. 1. 애드센스 계정에 로그인합니다. 2. 왼쪽 메뉴에서 "광고 - 개요"에 진입해서 나온 사이트 목록에서 연필모양 편집 버튼을 눌러 "광고 설정 미리보기"화면에 진입합니다. 3. 오른쪽 메뉴 "광고 설정"에서 "앵커 광고"를 선택 해제 합니다.

IT 일반 2022.07.19

CSS 햄버거 메뉴에 애니매이션 효과 넣기

흔히 햄버거 메뉴라고 하는 접혔다 펼쳐졌다가 하는 메뉴 버튼입니다. 이 메뉴 버튼에 애니매이션 효과를 주는 방법 입니다. 메뉴가 접혀 있을 때는 햄버거 모양에서 펼쳐지면 X모양으로 자연스럽게 변하는 소스입니다. HTML 삽입 미리보기할 수 없는 소스 클릭해서 확인 해 보세요. CSS .container { display: inline-block; cursor: pointer; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); trans..

프로그래밍/CSS 2022.07.19

Linux crontab 시간설정 바로 확인할 수 있는 사이트

리눅스에서 crontab을 설정하려고 치면 늘 헷갈리는 바로 이 부분 "* * * * *"입니다. 저기서 별이 몇 개인지, "분 시 일 월 주"인지, "분 시 주 일 월"인지, "주 분 시 일 월"인지부터 시작해서, 매 분, 매 초, 10 ~ 20분까지 등등... 설정을 하려고 하면 어떻게 해야 하는지, 도무지 헷갈립니다. 그래도, 요즘 OS에서는 crontab 설정을 들어가면 주석이 잘 달려있어서 좀 낫습니다. 어찌어찌 설정을 하고 나면 내가 한 설정이 어떻게 실행되는지, 올바른지 헷갈릴 수 있다. 시간 텀이 짧다면 확인해 볼 수 있지만, 텀이 길면 이건 알람을 맞춰서 확인해야 할 판이다. 이런 어려움을 해결할 수 있는 사이트가 있어서 소개합니다. https://crontab.guru/ Crontab...

CSS 네온사인 효과내기

CSS 스타일 시트를 이용한 네온사인(Neon sign)효과를 내는 소스입니다. 핵심 소스 .neon { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080, 0 0 55px #ff0080, 0 0 75px #ff0080; } HTML 삽입 미리보기할 수 없는 소스 네온사인 효과 예제 예제 소스 css .neon { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080, 0 0 55px #ff0080, 0 0 75px #ff00..

프로그래밍/CSS 2022.07.18

Visual C++ 윈도우 키 막기

전체 화면으로 게임을 하거나, 작업 중에 "Win 키"가 눌리면서 화면이 아래로 내려가서 방해가 되는 경우가 있습니다. 이를 방지하기 위한 게임 및 애플리케이션 개발 시 사용할 수 있는 소스를 공개합니다. 아래의 소스는 Windows hook이라는 기술을 이용한 방법입니다. (Hook 이란 "가로채기"라는 뜻으로써, 시스템에 전달되는 이벤트를 먼저 가로채는 기술입니다. 보통은 가로챈 이벤트의 처리가 끝나면 반드시 CallNextHookEx함수를 호출하여 시스템에 전달 될 수 있도록 해야합니다.) 핵심 소스 부분 아래와 같이 "왼쪽 Windows 키"나 "오른쪽 Windows 키"가 눌린 경우 "CallNextHookEx(...)"함수를 호출하여 시스템으로 넘겨 해당 키에 대한 이벤트 처리를 하도록 넘기지..

Ubuntu nodejs LTS, Latest(Current) 설치

Ubuntu의 기본 패키지 관리자인 "apt"를 이용하여 nodejs를 설치하는 경우, 아주 오래된 버전이 설치가 됩니다. 현재 배포되고 있는 LTS 혹은 Latest(Current) 버전을 설치하기 위해서 nodejs에서 제시하고 있는 지침을 따라서 설치를 진행해 보겠습니다. 아래의 순서에 따라서 링크를 진입하여 최종 설치 지침서대로 설치하시면 됩니다. Node.js 홈페이지로 이동 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org "Node.js 홈페이지"로 이동합니다. "Other Downloads" 링크를 클릭하여 페이지 이동합니다. (둘 중 아무거나 클릭해도 동일한 페이지로 이동합니..

SSH 파일 다운로드, 업로드

Linux 서버에 SSH로 접속 후 파일을 업로드 또는 다운로드할 수 있게 해주는 명령어는 "scp"입니다. scp명령어 기본 골격은 아래와 같습니다. "scp source target" 다운로드 다운로드 명령어는 "scp 사용자명@서버주소:서버파일경로로컬 파일 경로" 입니다. 아래의 예제 가정 사용자명: username 서버 주소: remotehost.com 서버 파일 경로: /home/server/test.txt 로컬 파일 경로: /home/client/test.txt 키 파일: key.pem scp username@remotehost.com:/home/server/test.txt /home/client/test.txt 접속 포트를 지정하는 경우: -P (대문자) 옵션 사용 scp -P 2222 us..

티스토리 글 100개 애드센스 수익 & 꿀팁

티스토리에 작성한 글 수가 100개를 넘은 기념으로 애드센스의 수익이 얼마나 되는지 한 번 알아보겠습니다. 글 하단에 티스토리를 운영하면서 알게 된 꿀팁도 올리니 참고가 되셨으면 합니다. 작성된 글이 현재 100개 조금 넘는 상황에서 수익이 얼마나 나는지 방문자 수와 애드센스 수익의 관계를 살펴보겠습니다. 애드센스 수익 통계자료 기준 작성 글 수: 100개 방문자 수: 월 단위 애드센스 수익: 월 단위 ※ 아래의 자료는 블로그의 주제와 대중의 관심도에 따라 다를 수 있습니다. 위 자료를 토대로 2022년 6월을 기준을 잡고 방문자 수가 약 6,000명, 애드센스 수익은 약 12달러, 한화로 약 15,000원(환율 1,250원 적용)이라고 했을 때 아래와 같은 통계가 나옵니다. 글 한 개당 수익: 150원..

IT 일반 2022.07.14

Ubuntu 사용자 추가, 권한 부여하기

사용자를 추가하고, 추가된 사용자에게 "sudo"권한을 부여하는 방법입니다. 사용자 추가 sudo adduser 사용자명 위 명령어를 실행하면 사용자명으로 사용자, 그룹, 홈 디렉터리(/home/사용자명)가 생성됩니다. 그리고, 저장하기 위한 간단한 사용자 정보를 물어보는데, 그냥 'enter'키를 누르면 default로 저장이 됩니다. 아래는 실행한 예제 화면입니다. 사용자에게 "sudo"권한 부여 아래는 사용자에게 "sudo"명령어를 사용할 수 있게 권한을 부여하는 방법입니다. sudo편집 명령어 아래의 명령어를 실행하면 Ubuntu 기본 편집기인 nano로 실행이 되어 편집 화면이 보입니다. sudo visudo 편집 화면 "사용자명 ALL=(ALL:ALL) ALL"을 "root ALL=(ALL:A..

DBeaver Utility 'mysqldump' not found 오류 해결방법

DBeaver라는 DB툴을 사용해서 mysql 혹은 mariadb 백업을 실행했을 때 "Utility 'mysqldump' not found in clinet home..."과 같은 오류가 날 때 해결방법입니다. 오류 원인 원인은 mysql, mariadb 클라이언트 프로그램이 업그레이드되면서 버전이 변경된 것을 DBeaver가 자동으로 인식을 못 하기 때문입니다. 한마디로 file path 오류입니다. 저의 경우는 10.6.4에서 10.8.3으로 업그레이드되면서 파일 경로 오류가 났습니다. 해결방법 DBeaver에서 왼쪽에 "Database Navigator"에 있는 서버 목록 중 수정하고자 하는 서버에서 "Edit Connection"항목으로 들어갑니다. 팝업창이 열리면 "Connection sett..

프로그래밍/DB 2022.07.13