Jake의 블로그

# DayJS를 사용해서 날짜, 시간 표시하기 - 웹, 또는 앱을 개발하는 과정에서 날짜, 시간을 표시하는 기능은 대부분의 경우에 필요합니다. 그리고 가장 많이 사용되는 라이브러리는 momentjs입니다. 그런데 momentjs는 고도화된 기능들을 많이 제공하기 때문에, 무거운 편입니다. momentjs에서만 제공하는 기능이 필요한 경우에는 당연히 momentjs를 사용하여야 하나, 더 일반적인, 간단한 시간, 날짜를 표현할 때는 가벼운 dayjs 또한 좋은 선택이라고 생각합니다. 본 포스팅에서는 dayjs를 사용한 날짜, 시간 표시 방법을 소개합니다 # 사용방법 - 설치해 줍니다 yarn add dayjs - 기본적인 사용법은 아래와 같습니다 import dayjs from 'dayjs' dayjs()..

# 에픽 무료게임 소개 - In Sound Mind # 게임사 게임 소개 In Sound Mind는 상상의 1인칭 심리 호러로 복잡한 퍼즐, 독특한 보스 전투, The Living Tombstone이 작곡한 오리지널 음악을 포함합니다. 도저히 탈출할 수 없는 곳, 바로 내 마음 내부의 세계를 여행하세요 # 무료 다운로드 기간(100% 할인 기간): 2022.03.25까지 ※ 할인 기간은 한국 시간으로 차이가 있을 수 있음 게임 받으러 가기 # 공식트레일러

# textarea 맞춤법 표시 끄는 방법 - 사용 시, 맞춤법이 틀렸을 경우, 빨간 색 밑 줄이 생기는데 spellCheck 옵션으로 끌 수 있습니다

# react-color 사용방법 - 본 포스팅에서는 사용자에게 깔끔하고 다양한 Color Picker를 제공할 수 있는 React Color 라이브러리를 소개하려고 합니다 # 사용방법 - 라이브러리를 설치해 줍니다 yarn add react-color - 그리고 아래와 같이 원하는 Picker를 추가해주시면 됩니다. import React from 'react'; import { SketchPicker } from 'react-color'; class Component extends React.Component { state = { background: '#fff', }; handleChangeComplete = (color) => { this.setState({ background: color.hex..

# react-textarea-autosize 사용법 - textarea를 사용해서 문자 입력을 받는 기능을 구현하다보면, 줄이 바뀌었을 때 textarea의 높이가 문자에 따라 자동으로 따라서 변했으면, 할 때가 있습니다. 안타깝게도 기본 textarea에서는 해당 기능을 제공하지 않습니다. 본 포스팅에서는 이를 해결할 수 있는 라이브러리를 소개하려고 합니다 # 사용방법 - 라이브러리를 설치합니다 yarn add react-textarea-autosize - 다음과 같이 추가해서 간단하게 사용하실 수 있습니다 import TextareaAutosize from 'react-textarea-autosize'; React.renderComponent( , document.getElementById('ele..

# React Flow - react-flow-renderer 사용법 소개 # 사용방법 - 우선 설치를 진행합니다 yarn add react-flow-renderer - 그래프에 포함될 Elements들을 정의합니다. 그리고 애니메이션과 같은 추가 요소들을 정의합니다. data에는 React Component도 포함될 수 있습니다 import React from 'react'; import ReactFlow from 'react-flow-renderer'; const elements = [ { id: '1', type: 'input', data: { label: 'Jake 1' }, position: { x: 250, y: 5 } }, // you can also pass a React Node as a..

# Powershell / Windows Terminal / CMD 명령프롬프트에서 Port를 강제 종료하는 방법 - 다음과 같이 포트가 이미 사용중이어서 강제 종료를 해야 하는 경우가 종종 있습니다 Port 8888 is already in use. - 포트를 강제 종료하기 위해서는 우선 아래의 명령어를 사용해서 포트 정보를 출력합니다 netstat -a -o - 호출된 포트들의 현재 상태 목록이 보이게 됩니다. - 목록에서 종료하고자 하는 포트의 PID를 찾습니다. 그리고 아래의 명령으로 포트 사용을 강제 종료할 수 있습니다 taskkill /f -pid XXXXXXX

# 에픽 무료게임 소개 - Cities: Skylines - 와! 이 게임을 무료로 풀어주다니, 오늘 당장 플레이 하지 않더라도 이 게임은 꼭 받아두시길 추천 드립니다. 언젠가 도시 건설 시뮬레이션이 땡기는 날이면 오늘의 선택을 후회 하지 않을 것입니다 # 무료 다운로드 기간(100% 할인 기간): 2022.03.18까지 ※ 할인 기간은 한국 시간으로 차이가 있을 수 있음 # 공식트레일러 https://www.youtube.com/watch?v=G4BYaBnbRVA&list=PL6kotTknxXVTtnofi3ioOjJ1YCTTXgwr4

# Create React App 에러 해결 - React를 사용해서 개발 할 때 npx create-react-app을 사용해서 프로젝트를 생성한다. 그런데 아래와 같은 메세지와 함께 생성이 실패하는 경우가 있다 # You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). # We no longer support global installation of Create React App. - 문제는 위의 문제가 발생한 후에 보여주는 도움말이 아래와 같은데, 아래의 방법으로 create-react-app을 삭제해도 문제가 해결 되지 않는다 npm uninstall -g create-react-app # OR ya..

# NextAuth.js를 활용한 초간단 소셜 로그인 구현 방법 소개 - Next Auth는 NextJS를 위한 오픈소스 authentication 솔루션이라고 문서에서는 소개하고 있습니다. NextJS를 사용해서 개발할 계획을 가지고 있으신 분들은 한 번 쯤 고려해보길 추천드립니다. 고도화된 서비스에서의 Authentication을 제공하기 위해서는 추가적인 학습 및 개발이 필요할 수 있겠지만, MVP나 사이드 프로젝트 등과 같이 최소한의 로그인과 이를 데이터 베이스에 연동하는 정도의 기능으로 충분하다면, 정말 빠른 시간안에 개발이 가능합니다. 본 포스팅에서는 설치 및 간단한 소셜 로그인 구현 과정을 포스팅하려고 합니다 ※ NextJS를 전제로 구현된 솔루션이기 때문에 NextJS에 대한 사전 지식이 ..