전체 글 20

수익형 블로그 가독성 개선 - 티스토리 글자크기 변경하기 : Whatever, Poster 스킨

수익형 블로그 운영시 가독성은 매우 중요한 요소이다. 또한 수익형이 아닌 개인의 기록형 블로그라 할지라도, 본인이 과거에 쓴 글을 다시 볼 때 글씨가 작으면 눈에 잘 들어오지 않아 끝까지 다시 보지 않고 넘어가게 되는 때도 있다. 하지만 티스토리 블로그 스킨을 사용하다보면 스킨에서 정해준 크기 이상으로 글씨를 키우는 것이 어렵게 되어 있어 난관에 빠지게 된다. 본인은 티스토리 기본 스킨 중 반응형 스킨인 Whatever 와 Poster 를 자주 사용한다. 이 둘은 티스토리에서 제공하는 미니멀하고 기능적인 훌륭한 스킨이지만, 블로그 글을 쓰고 보면 항상 본문의 글자 크기가 작게 느껴져 본문 글의 서식을 모두 '본문1' 서식으로 수동으로 바꾸는 불편함이 있었다. 이에 결국 스킨의 HTML과 CSS를 직..

티스토리 신고버튼 없애기

가끔 블로그를 작성하다 보면 글이 아무 이유 없이 신고가 되어 있는 경우가 있다. 퍼가기나 인쇄같은 다른 버튼을 찾으려다가 잘못 누르는 경우도 있고, '신고'의 의미를 혼동하여 누르는 경우도 있고, 저작권에 상관없이 경쟁상대(?)라서 다른 사람의 글에 신고를 누르는 악성 신고러(?)들도 있는 듯하다. 그리고 이런 일은 글의 조회수가 올라갈 수록 더욱 빈번히 생기는 편이다. 이를 방지하기 위해 초반부터 신고버튼은 숨겨두는 편이 좋을 수도 있으며, 그 방법을 여기에 기록해두고자 한다. 혹시 스팸 댓글 등으로 골치아파하고 있다면 댓글창 없애기 방법도 참고해보기를 바란다. 티스토리 댓글 비허용 | 티스토리 댓글창 없애기블로그를 운영하다보면 매크로 댓글 공격 등으로 골치아픈 경험을 하게 된다. 댓글을 통해서 이..

티스토리 댓글 비허용 | 티스토리 댓글창 없애기

블로그를 운영하다보면 매크로 댓글 공격 등으로 골치아픈 경험을 하게 된다. 댓글을 통해서 이웃들과 공감을 나누고 네트워크를 형성하고자 하는 블로거가 아니라면, 댓글기능을 비활성화하는 것을 적극절으로 고려해볼 수 있다. 댓글 기능을 비활성화 하는 방법에는 다음과 같이 2가지가 있다1. 글마다 일일이 수정하여 [댓글 비허용]을 설정하는 방법2. 일괄적으로 없애기 위해 블로그 스킨 HTML을 수정하여 댓글창을 없애는 방법 해당 내용을 다음에서 순차적으로 알아보도록 하자. 티스토리 댓글 비허용 설정 방법아직 작성한 글이 많지 않은 초기이거나, HTML 코드를 보는 것만으로도 진땀이 나는 블로거라면, 글마다 일일이 수정 버튼을 눌러 [댓글 비허용] 설정을 걸어 줄 수 있다. 개별 글의 댓글 비허용 설정 방법 ..

React 리액트 컴포넌트 사용방법

컴포넌트 기본형함수형 컴포넌트[1] 함수형 컴포넌트 기본형function 함수이름() {}- return 구문이 렌더링되는 부분- 예제코드import React from ‘react’;import ‘./App.css’;function App() {  const order = “americano”;  return {order};}export default App;[2] 함수형 컴포넌트 화살표형 (ES6 이후 버전)const 함수이름 = () => {}- function 키워드 대신 () => {} 를 사용- 예제코드const doubling = (num) => num * 2; [3] 화살표형과 기본형의 차이점- 컴포넌트 선언시 둘은 차이가 없으나, 가리키는 this 가 다름- function 일반함수 내에..

React 2025.04.02

React Redux 리액트 리덕스, 기본 사용법

시작하기 React Redux 구글검색이 혼란스러운 이유 리액트 사용을 위한 리덕스 학습시 혼란스러운 점은 사용하는 라이브러리가 다음과 같이 두 개라는 것이다. 그 사용법도 다르다. redux 라이브러리 react-redux 라이브러리 혼란을 가중시키는 것은 구글의 예제 검색 결과인데, 리덕스 예제를 검색해보면 세 종류 샘플코드가 혼재되어 나온다…. JavaScript에 접목한 redux 샘플 코드 리액트에 redux 라이브러리를 사용한 샘플 코드 리액트에 react-redux 라이브러리를 사용한 샘플 코드 이렇게. 하지만 일단 이 사실만 알고 나면 혼란은 잠잠해지고, 내용을 걸러낼 수 있게 된다.(아마도) Redux 개념 빠르게 깨닫는 방법 전반적인 학습을 원한다면 코드의 바다에서 몸부림치는 중생들에게..

React 2023.04.21

Redux 리덕스 개념과 예제(JavaScript)

리덕스(Redux)의 개념 리덕스(Redux)란? 리덕스(Redux) 공식홈페이지에서는 리덕스를 자바스크립트 앱을 위한 예측 가능한 state 보관함("A predictable state container for JS App")으로 정의하고 있다. 여기서 state는 1개의 객체 변수(ex. {name: "홍길동", age: 26})를 의미한다. 다시 말해 리덕스는 {} 이렇게 생긴 한 개의 객체 안에 앱에서 다루는 모든 데이터를 우겨넣어 관리하는 역할을 하며, 그 객체를 state라고 부른다. 리덕스는 리액트(React)를 효율적으로 사용하기 위해 발전되어 왔으나, 현재는 독립된 훌륭한 기능들을 갖추었으며 JavaScript 로 작성한 모든 앱에 적용 가능하다. 리덕스(Redux)의 작동 방식 생활코딩..

React 2023.04.19

React 리액트 웹디자인 | 리액트 아이콘 react-icon

1. cmd창에서 설치하기 // npm으로 설치시 npm install react-icons --save // yarn으로 설치시 yarn add react-icons 2. 아이콘 고르기 아래 웹사이트에서 첫화면 말고 왼쪽 메뉴창을 차례로 클릭하면서 확인. 고른 아이콘은 이름 복사 https://react-icons.github.io/react-icons/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Instal..

React 2023.04.08

React 리액트 반응형 디자인 | SCSS 미디어 쿼리 @media

CSS 미디어쿼리를 SCSS 문법에 적용한 반응형 레이아웃 예제 기본틀 App.js import "./App.scss"; function App() { return ( DIV A DIV B DIV C ); } export default App; App.SCSS 작성 * 참고로 scss를 사용하려면 커맨드창에서 "sass"를 다음과 같이 설치 해주어야 함 npm install sass 1. scss만의 문법( @mixin 과 변수$ )을 사용하여 브레이크포인트 선언 /* Responsive layout, breakpoint */ $mobile-max: 360px; $tablet-max: 1023px; $desktop-min: 1024px; @mixin mobile{ @media (max-width: $mo..

React 2023.04.01

React 리액트 반응형 디자인 | useMediaQuery

리액트에서는 브라우저의 화면 폭에 따라 반응하는 CSS의 미디어 쿼리( @media )도 사용 가능하지만 "디바이스" 자체의 화면폭을 확인해서 true/false를 반환해주는 useMediaQuery 라는 리액트 전용 훅(Hook)도 사용할 수 있다. 단, 디바이스 폭 기준이라, 창을 늘리거나 줄여도 반응하진 않는다. 다만, 모바일이냐 아니냐와 같은 디바이스 자체를 가늠하려는 경우 사용하는 것이 바람직해보인다. useMediaQuery를 사용하려면 react-responsive 부터 설치해야 한다. 1. cmd 창에서 react-responsive 설치 npm install react-responsive 2. 리액트에서 import import { useMediaQuery } from 'react-res..

React 2023.04.01
반응형