npm install 시 **gyp ERR!**로 시작하는 설치 에러가 발생할 경우 해결 방법을 정리하였습니다. 첫 번째 방법 Microsoft 의 windows-build-tools 설치합니다. 관리자 권한으로 PowerShell 또는 터미널을 열고 다음 명령어를 실행하여 설치합니다. npm 버전이 8 이상 설치가 되어 있어야 합니다. 1$ npm in
Framer Motion을 사용하여 애니메이션을 간편하고 쉽게 만드는 방법을 알아보겠습니다. Framer Motion Framer는 디자이너들을 위해 프로토타입 등을 만들어 주는 회사입니다. Framer Motion은 React 용 production-ready 모션 라이브러리입니다. 설치 1$ npm install framer-motion 사용 A
alias 란 alias는 별칭이라는 뜻으로 리눅스에서 alias는 사용자가 명령어를 다른 이름으로 바꿔서 사용할 수 있는 쉘 내부 명령어를 말합니다. 이 alias를 통해서 일일이 입력하기 번거로운. 길이가 긴 명령어를 간단한 이름으로 바꿔서 등록하여 업무 효율을 높일 수 있습니다. alias 확인 현재 등록된 alias 리스트를 확인할 수 있습니
리눅스 환경에서 Tomcat을 다중 설치하고 운영하는 방법에 대해 알아보겠습니다. 1. Tomcat 설치 이전 글 [CentOS] 아파치 톰캣(Tomcat) 설치 및 사용 방법 을 보면서 Tomcat 을 설치합니다. 설치된 Tomcat 폴더를 서로 다른 이름의 폴더로 복사합니다. 12- tomcat1 : /usr/local/tomcat_1- tomcat2
reference는 react 코드를 이용해 HTML 요소를 지정하고 가져올 수 있는 방법입니다. 다시 말해서 자바스크립트로부터 HTML 요소를 가져오고 수정할 수 있도록 해줍니다. 사용 useRef를 사용하여 HTML 요소를 가져옵니다. 다음 코드는 button 클릭 시 input을 포커싱하고 해제하는 예제입니다. 123456789101112131415
Spring에서 Swagger Header 설정 방법에 대해 알아보겠습니다. API 마다 설정 각 API 마다 @ApiImplicitParam을 통해 인증 정보(토큰)를 입력하도록 설정합니다. 1234567@ApiImplicitParams({@ApiImplicitParam(name = "Authorization", value = "JWT Toke
Angular 프레임워크로 특정 기능을 구현할 때 어떤 방식으로 사용하는지에 대해 알아보겠습니다. UI Component 구현 클래스에 @Component Annotation을 붙여서 생성합니다. HTML 템플릿 정의 인라인 HTML 코드를 사용할 때는 @Component 어노테이션 template 항목을 사용하고, 외부 파일에서 불러올 때는 templ
React에서 memo 사용 방법에 대해 알아보겠습니다. 컴포넌트가 동일한 props로 동일한 결과를 렌더링 해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑 하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링 된 결과를 재사용합니다. 1234567imp
react-beautiful-dnd을 사용하여 React에서 깔끔하고 사용하기 쉬운 드래그, 드롭, 애니메이션을 적용하는 방법에 대해 알아보겠습니다. 설치 1$ npm i react-beautiful-dnd TypeScript 사용 시 추가로 설치합니다. 1$ npm i --save-dev @types/react-beautiful-dnd 사용 임시 데이
React에서 React Hook Form 사용 방법에 대해 알아보겠습니다. 기본적으로 Form을 사용할 때 작성하는 코드입니다. 하나의 input 이지만 여러 개의 input 을 사용할 경우 useState 와 onChange 이벤트가 많이 생성됩니다. 그리고 Validation Check 하는 코드도 복잡해집니다. 123456789101112131415