Gyejoong's Information

React Hook Form 시리즈 포스팅 가장 첫 번째, React Hook Form 시작하기입니다. 이번 포스팅은 아래 순서로 진행이 됩니다. 설치 기본 사용법 설명 DevTool 사용하기 UI 라이브러리와 함께 사용하기 에러 처리 설치 현재 진행 중인 프로젝트에 아래와 같은 명령어를 입력합니다. npm install react-hook-form yarn을 사용한다면 아래와 같이 입력합니다. yarn add react-hook-form 기본 사용법 설명 기본 예제 import React from 'react'; import { useForm, SubmitHandler } from 'react-hook-form'; type Inputs = { example: string; exampleRequired:..

React Hook Form은 Hooks 기능을 활용하여 쉽고 빠르고 간단하게 Form Validation을 처리하는데 최적화된 라이브러리입니다. 다른 많은 라이브러리도 있지만 성능, 업데이트 빈도수, 프로젝트 생성일자 등을 고려해봤을 때 가장 신뢰성 있는 프로젝트라고 생각됩니다. Formik vs React Hook Form vs Redux Form 트렌드 비교 Stars만 보면 formik이 조금 우세하긴 하지만, 이슈 개수와 마지막 Updated 날짜를 보면 react-hook-form이 관리를 더 잘한다고 보입니다. 번들 사이즈도 보게 되면 formik이 react-hook-form보다 60% 이상 높습니다. 이러한 기준으로 react-hook-form을 선정하게 되었으며, 시리즈물 포스팅을 작성..

안녕하세요. 최근에 Gatsby를 공부할겸 포트폴리오 사이트를 만들어보기 위해 해당 포스팅을 작성하게 되었습니다. Gatsby란? Gatsby는 React 기반의 오픈소스 프레임워크 이며, 정적 웹사이트를 만들때 빠르게 만들 수 있습니다. Gatsby를 사용하기 좋은 케이스 Gatsby는 React기반인데, 왜 별도의 툴이 존재할까 라는 생각이 들기도 합니다. 하지만, Gatsby는 다음과 같은 상황에서 확실하게 장점으로 작용됩니다. 별도의 서버 없이 운영하고 싶은 경우 React를 사용하여 정적 사이트를 만들고 싶지만, SEO (검색엔진 최적화)가 문제가 되는경우 아무래도 React 기반이기 때문에 React의 사전지식이 필요하며, GraphQL를 사용하므로 해당 관련 지식이 필요 할 수 있습니다. 해..

요즘 취미로 앱개발을 하고 싶어서, 어떤 것을 공부해서 해볼까 하던참에, 마침 React를 공부하고 있던 터라, React Native를 이용하여 개발 하면 어떨까 싶어서 React Native에 대해서 공부하게 되었습니다. React Native를 간단하게 설명하면, 기존 프론트엔드 라이브러리인, React의 기술을 활용할 수 있고, Android/IOS 크로스플랫폼을 지원하는 프레임워크입니다. 이 포스팅에서는 React Native를 사용하기 위한 개발환경 셋업에 대해서 소개합니다. (MacOS 기준) 개발환경 셋업은 크게 3가지 챕터로 이루어져 있습니다. 기본 개발 환경 셋업 Android & IOS 환경 셋업 react-native CLI 기본 개발 환경 셋업 Home brew install (H..

개요 기본적으로 AWS EC2 Instance를 생성하면, 최초 접속시에는 KeyPair를 이용하여 접속하게 됩니다. 이 포스팅에서는 최초 KeyPair 접속 이후 Username과 Password를 이용하여 로그인 하는 방법에 대해서 소개합니다. 계정 생성하기 sudo useradd test sudo passwd testsshd_config 수정하기 sudo vi /etc/ssh/sshd_config PasswordAuthentication no -> yessshd 재시작 sudo service sshd restartsudo 권한 추가 vi /etc/sudoers # User privilege specification root ALL=(ALL:ALL) ALL (유저명) ALL=(ALL:ALL) ALLs..

안녕하세요 Spring Intializer를 이용하여 프로젝트를 세팅하는 방법에 대해서 포스팅 하겠습니다. 우선, Spring Initializer 사이트에 접속합니다. https://start.spring.io/ * 세팅해야 하는 순서입니다. 1. Group 2. Artifact3. Depedencies 위와 같이 세팅하고 Generate Project를 누르면 zip 파일이 다운로드 됩니다. 이 다운로드된 zip 파일을 압축해제 하여 원하는 디렉토리에 위치합니다. IntelliJ를 실행하고 File -> Open를 클릭합니다. 압축해제한 프로젝트를 클릭하고 OK를 선택합니다. * 유의할 점은 디렉터리 아이콘에 IntelliJ가 마크가 표시 되어있는 디렉터리를 클릭해야합니다. 위와 같이 상당히 빠르게 ..

sudo lsof - i : "포트번호"sudo kill -9 "프로세스번호"

Git을 사용하던 중 마스터 브랜치에 문제가 생겼을 경우 대처법을 소개한다. # 마스터 브랜치를 이전 마스터로, 현재 브랜치를 마스터로 변경 $ (staging) git checkout master $ (master) git branch -m old-master $ (old-master) git checkout staging $ (staging) git branch -m master # 현재 브랜치에(마스터) 강제로 푸시한다. $ (master) git push origin master -f # 브랜치의 이름을 다시 원상태로 복구한다. $ (master) git branch -m staging $ (staging) git checkout old-master $ (old-master) git branch ..

문제 - 1부터 10000까지 8의 총 개수를 구하시오. - 8이 있는 수만 구하는게 아닌, 8을 모두 카운팅 할것. - ex : 8882 -> 3 - ex : 8888 -> 4 // 1부터 10000까지 8의 개수를 구하시오. // 8이 있는 수를 구하는게 아닌, 8을 모두 카운팅 할것. // ex : 8882 -> 3 // ex : 8888 -> 4 public class Google { public static int Solution(int i){ int count=0; while(true){ if(i == 0) break; if(i%10 == 8) count++; i/=10; } return count; } public static void main(String[] args){ int sum=0;..

문제셀프 넘버는 1949년 인도 수학자 D.R. Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75+7+5 = 87이다.양의 정수 n이 주어졌을 때, 이 수를 시작해서 n, d(n), d(d(n)), d(d(d(n))), ...과 같은 무한 수열을 만들 수 있다. 예를 들어, 33으로 시작한다면 다음 수는 33 + 3 + 3 = 39이고, 그 다음 수는 39 + 3 + 9 = 51, 다음 수는 51 + 5 + 1 = 57이다. 이런식으로 다음과 같은 수열을 만들 수 있다.33, 39, 51, 57, 69, 84, 96, 111, 114, 120, 123, 129, 141, ...n을 d(n)의 생성자라고 한다..