본문 바로가기

전체 글53

karabiner로 맥 방향키 변경하기 - capslock + i,j,k,l 안녕하세요. 오늘은 Mac에서 Karabiner로 키 배열을 바꾸는 방법에 대해 정리하려고 합니다. 개발을 하다보면 잘못 타이핑한 것을 지우기 위해 backspace 를 누르거나 방향키를 누르기 위해 오른손을 움직이게 되는 경우가 많은데, 이 경우에 저는 오타가 많이 발생하더라고요. 그래서 방향키를 I,J,K,L로 변경하고 N을 backspace로 변경해서 오른손의 움직임을 최소화하도록 할 수 있는 셋팅을 하려고 합니다. I,J,K,L은 기본적으로 영어가 타이핑되기 때문에 capslock을 누르고 IJKL를 누르면 방향키가 동작하도록 설정할 수 있는 karabiner를 사용해보려고 합니다. Karabiner 키 배열을 변경할 수 있는 다른 앱들이 많이 존재하겠지만 저는 Karabiner를 사용해서 변경하.. 2020. 6. 20.
티스토리 커버 랜덤 이미지로 변경하기 안녕하세요. 오늘은 티스토리에서 html 편집을 통해서 아래처럼 게시글 제목 부분의 배경 이미지를 변경하는 방법을 알아보겠습니다. 이걸 변경을 안해주면 대표 이미지로 항상 보이던데, 대표 이미지는 비율이 300x300으로 해놔서 저렇게 넓은 커버 이미지 영역에 들어갈 경우 보기 좋지 않게 깨지는 이슈가 있었습니다. 비율이 깨지고 보기 좋지 않을바에 관련은 없지만 깔끔한 사진을 보여주는 게 좋을 것 같아서 변경했는데요. 랜덤 이미지 API 저는 고정된 이미지보다는 매번 다른 이미지를 보여주는 게 좋을 것 같아서 랜덤 하게 이미지를 보여주는 unsplash api를 이용하기로 했습니다. 이것을 이용하면 이미지의 키워드와 사이즈를 정해서 받을 수 있습니다. source.unsplash.com/1920x680/.. 2020. 6. 16.
록퍼드 심플레트로 블루라이트 차단 안경 후기 ※제가 작성하는 모든 후기는 제 돈을 주고 직접 구매하고 사용해보며 느낀 점을 작성하는 후기입니다.※ 안녕하세요. 오늘은 제 눈을 보호하기 위해 샀던 블루라이트 차단 안경 후기를 써보려고 합니다. 친구네 집에 놀러갔다가 블루라이트 차단 안경의 존재를 알게 되고, 코딩하며 망가지는 눈을 이제서라도 보호하기 위해 바로 샀었는데요. 외관 뭐 우선 외관은 이렇습니다. 저는 눈이 안경을 쓸 정도로 나쁜 편은 아니어서 지금까지 안경을 사본적이 없지만 3만원 후반으로 샀던 것 같은데 가격에 비해서 비주얼은 괜찮아보였습니다. 안경만 봐도 꽤 고급지게 생긴 것 같더라구요. 저 왼쪽 다리가 휘어있는것 같죠? 제 머리 크기때문에 벌써 휘어버렸네요ㅎㅎㅎ 내구성이 좋지 않나봐요ㅎㅎㅎ 아 그리고 안경이 비싸지 않아서 그런지 안경.. 2020. 6. 16.
애플 매직키보드 2 세달 실사용 후기 (feat. 애플 매직트랙패드2) 안녕하세요. 오늘은 제가 애플 매직키보드2와 매직트랙패드2를 3달간 사용해보고 느낀 점을 말씀드리려고 합니다. 매직키보드2와 매직트랙패드2가 나온 지 어느 정도 되 긴 했지만 현재 애플 제품의 키보드와 트랙패드는 대체가 불가능하기 때문에 고려하시는 분들이 보신다면 도움이 될 것이라 생각합니다. 제가 집에 셋팅해놓은 책상이에요! 맥북을 쓰는 만큼 키보드와 트랙패드 깔맞춤까지 해서 큰 맘먹고 사용했었는데요. 매직 트랙패드2 Apple 정품 매직 트랙패드 2 MJ2R2KHA 142,310원상품평 458개 우선 트랙패드에 대해서 말씀드리면 대대대대대대만족입니다. 여담이지만 저는 맥북을 사용하기 전에 LG그램을 사용했었는데 그때는 도저히 마우스 없이는 사용할 수가 없더라고요... (마우스가 없어서 집을 다시 갔다.. 2020. 6. 16.
슬랙(Slack) API 사용 가이드 (2) - 메세지 보내기 슬랙(Slack) API 사용 가이드 (1) - SlackApp 만들기에 이어서 이번에는 직접 리액트 프로젝트를 만들어서 메세지를 작성해서 Slack Workspace에 보내는 실습을 진행해보도록 하겠습니다. documentation 메뉴로 가준 후에 좌측의 APIs를 클릭하고 methods를 눌러줍니다. 그 중에서도 PostMessage 를 사용해서 메세지를 보내보도록 하겠습니다. Method URL : 요청을 보낼 기본 주소라고 생각하시면 됩니다. Preferred HTTP method : HTTP method 방식을 알려줍니다. post 방식을 사용하면 됩니다. Accepted content types : 적용될 content types라고 하는데 문서의 아래에 어떻게 적용해야 하는지 나와 있기 때.. 2020. 6. 14.
슬랙(Slack) API 사용 가이드 (1) - Slack App 만들기 제가 진행하고 있는 프로젝트에서 슬랙API를 활용해서 문의를 받는 기능을 추가하기 위해 slack api 사용 가이드를 정리해보려고 합니다. 1. App 만들기 slack api 에서 앱을 만들어줍니다. 아래의 내용을 채워주면 됩니다. App Name에는 원하는 이름을 넣어주시고 추가할 Slack workspace를 추가해주시면 됩니다. 앱을 만들게 되면 원하는 기능을 Slack App에 추가해야합니다. 저는 Bots 기능을 구현해야하니 Bots를 추가하도록 하겠습니다. 클릭했더니 App 설치를 하라고 하고 App 설치를 하기 위해서는 앱에 접근할 수 있는 범위를 설정해줘야 한다고 하네요. 저는 메세지를 보내는 기능을 해야하기 때문에 위와 같은 scope를 지정해줬습니다. 이부분은 원하시는 기능에 따라서.. 2020. 6. 14.
티스토리 블로그에 구글 애널리틱스 연동하기 (1) 티스토리에서도 방문 통계를 제공해주지만 구글 애널리틱스만큼 강력하게 제공해주지는 않는데요. 오늘은 티스토리에 구글 애널리틱스를 등록해서 내 사이트에 방문하는 분들의 데이터를 분석할 수 있도록 해보려고해요. 티스토리 블로그 관리에서 플러그인 탭으로 가줍니다. 구글 애널리틱스를 클릭해주면 아래와 같은 화면이 나오는데요. 저는 이미 추적ID를 입력한 상황이라 적혀 있지만, 처음 오신 분들은 추적ID(?)를 받으신 적이 없잖아요? 이 추적ID를 사이트에 적어놓으면 구글 애널리틱스에서 분석을 해주는 방식이기 때문에 추적ID를 발급 받아야합니다. 그럼 어디서 구글 애널리틱스 추적ID를 발급 받느냐? 당연히 구글 애널리틱스 홈페이지로 가야겠죠? 구글 애널리틱스의 메인에서 좌측 하단에 관리 버튼을 클릭해주면 위와 같은.. 2020. 6. 13.
React 에서 innerHTML 사용하기 리액트에서 HTML코드를 동적으로 추가하기 위해서는 기존에 자바스크립트에서 사용하던 방식과 약간 다릅니다. 기존의 자바스크립트에서는 innerHTML를 사용해서 넣어준다면 정상적으로 동작했지만, 리액트에서 아래와 같이 추가를할 경우 원하는 결과가 나오지 않습니다. import React from "react"; export default () => { const htmlCode = "버튼 "; return {htmlCode}; }; React에서 텍스트로 된 HTML코드를 추가하고 싶은 경우에는 React에서 정해진 규칙을 사용해야합니다. React에는 dangerouslySetInnerHTML={{ __html: htmlCode }} 과 같은 형태로 주가해주어야 합니다. import React, { u.. 2020. 6. 13.
페이지 스크롤 다운 애니메이션 (feat. Animation of scroll) 오늘은 페이지 스크롤 다운 애니메이션을 어떻게 만드는지에 대해서 알아보려고 합니다. 페이지 스크롤 다운 애니메이션이 뭘까? 이것처럼 스크롤을 내릴 때 효과를 줘서 fadein, slidein, slideup 과 같은 동작을 할 수 있게 하는 애니메이션 입니다. 직접 자바스크립트를 사용해서 개발할 수 도 있지만 똑똑하신 분들이 만들어 놓은 라이브러리가 굉장히 많기 때문에 오늘은 그 라이브러리를 사용하는 방법에 대해서 정리해보려고 합니다. 페이지 스크롤 다운 애니메이션 라이브러리 WOW.js Animate.css * AOS kissui scrolltrigger 여기서 AOS를 사용하는 방법을 정리해보겠습니다. 사이트를 가보면 아래와 같이 다양한 페이지 스크롤 다운 애니메이션 종류들을 확인하실 수 있습니다. .. 2020. 6. 13.
React 프로젝트에 Scss(Sass) 사용하기 (feat. Webpack) 리액트 프로젝트에서 컴포넌트를 스타일 하는 방법은 Styled-components, Scss, AntDesign 등등 여러가지가 있습니다. 오늘은 그 중에서 Scss를 이용해서 리액트 프로젝트를 스타일 하는 방법에 대해서 정리해보도록 하겠습니다. 리액트 프로젝트를 만들기 위해서는 Create-react-app을 통해서 쉽게 만들 수 있죠? 하지만 오늘은 Webpack 설정을 해보며 직접 프로젝트 셋팅하는 부분부터 해보겠습니다. 1. 설치 우선 npm을 통해서 설치를 해줍니다. yarn을 통해서 설치를 해도 상관 없습니다. 원하시는 패키지 프로그램을 사용해주시면 됩니다! npm i --save--dev node-sass style-loader css-loader sass-loader node-scss : .. 2020. 6. 13.
CSS Grid 이해하고 사용하기 이 글은 CSS Grid에 대한 이해를 돕는 글입니다. 자세한 속성과 사용법에 대해서는 참고 사이트 확인해주세요. Grid 가 나오는 이유는 무엇일까? Grid를 도대체 왜 사용해야하는지 알아야 어떤 상황에 어떻게 사용할지 정해지기 때문에 알아보겠습니다. 결론부터 말씀드리면 기존에 float를 이용해서 레이아웃을 만들 때는 수직 즉, 세로 방향에 대해서 만들기 어려움이 있었습니다. 이런 어려움을 해소시키기 위해서 나온 것이 *flex *입니다. Flexbox를 이용해서 레이아웃을 작성하게 되면 수평 혹은 수직 구조를 작성할 때 보다 쉽게 작성할 수 있었습니다. 하지만 수평과 수직 구조를 동시에 작성하기에는 Flexbox를 이용하는데에도 한계가 있었습니다. .flex_container { width: 50.. 2020. 6. 13.
블로그 게시물 대표이미지 생성 사이트(feat. 섬네일) 오늘은 제가 블로그 게시물 대표이미지를 만들때 통일성 있고 가독성 좋은 대표이미지 및 섬네일을 만들기 위해 직접 개발한 사이트를 소개하려고 합니다. 제가 티스토리 블로그의 "북클럽 스킨"을 사용하면서 느꼈던 부분이 게시물마다 대표이미지가 존재하는데 해당 이미지가 통일성이 떨어지고 글씨를 잘 넣지 않으면 가독성이 떨어지는 느낌을 받았습니다. 그래서 블로그 섬네일 및 대표 이미지를 쉽고 편하게 제작할 수 있는 사이트를 만들어보려고 했습니다. 사이트 주소는 https://thumbnail-maker.netlify.app/ React App thumbnail-maker.netlify.app 사이트로 들어가면 위와 같은 화면이 있는데요. "섬네일 텍스트" 라고 적힌 곳에 섬네일 텍스트를 적게되면 아래와 같이 변경.. 2020. 6. 7.

티스토리툴바