reference는 react 코드를 이용해 HTML 요소를 지정하고 가져올 수 있는 방법입니다. 다시 말해서 자바스크립트로부터 HTML 요소를 가져오고 수정할 수 있도록 해줍니다. 사용 useRef를 사용하여 HTML 요소를 가져옵니다. 아래 코드는 button 클릭 시 input을 포커싱하고 해제하는 예제입니다. import { useRef } from 'react'; function RefEx() { const inputRef = useRef(null); const onClick = () => { inputRef.current?.focus(); // 5초 뒤에 focus 사라짐 setTimeout(() => { inputRef.current?.blur; }, 5000); }; return ( cli..

Spring에서 Swagger Header 설정 방법에 대해 알아보겠습니다. API 마다 설정 각 API 마다 @ApiImplicitParam을 통해 인증 정보(토큰)를 입력하도록 설정합니다. @ApiImplicitParams({@ApiImplicitParam(name = "Authorization", value = "JWT Token", required = true, dataType = "string", paramType = "header") }) @PostMapping("/auth/test") public ResponseEntity authTest() { System.err.println("authTest"); return ResponseEntity.ok("test ok"); } 이 방법은 API 개..

Angular 프레임워크로 특정 기능을 구현할 때 어떤 방식으로 사용하는지에 대해 알아보겠습니다. UI Component 구현 클래스에 @Component Annotation을 붙여서 생성합니다. HTML 템플릿 정의 인라인 HTML 코드를 사용할 때는 @Component 어노테이션 template 항목을 사용하고, 외부 파일에서 불러올 때는 templateUrl 항목을 사용합니다. 컴포넌트 Property 를 UI에 표시 템플릿의 이중 중괄호 안에 Property를 사용합니다. {{ customValue }}) 컴포넌트 Property 바인딩 대괄호를 사용해서 Property를 바인딩합니다. 이벤트 처리 이벤트 이름을 괄호로 감싸고 핸들러를 지정합니다. Click 양방향 바인딩 [()] 표기를 사용합니..

React에서 memo 사용 방법에 대해 알아보겠습니다. 컴포넌트가 동일한 props로 동일한 결과를 렌더링 해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑 하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링 된 결과를 재사용합니다. import React from 'react'; function MyComponent(props) { /* props를 사용하여 렌더링 */ } export default React.memo(MyComponent, areEqual); 사용 이전 포스트 [React] Drag and Drop에서 드래그, 드롭 시 바뀐 부분이 아닌 전체가 리랜더링이 되어 텍스트의 흔들림이 가끔..

react-beautiful-dnd을 사용하여 React에서 깔끔하고 사용하기 쉬운 드래그, 드롭, 애니메이션을 적용할 수 있는 방법에 대해 알아보겠습니다. 설치 $ npm i react-beautiful-dnd TypeScript 사용 시 추가로 설치합니다. $ npm i --save-dev @types/react-beautiful-dnd 사용 임시 데이터 ['a', 'b', 'c', 'd', 'e', 'f']를 사용하여 카드 형태의 드래그, 드롭을 구현해 봤습니다. // atoms.tsx import { atom } from 'recoil'; export const toDoState = atom({ key: 'toDo', default: ['a', 'b', 'c', 'd', 'e', 'f'], });..

React에서 React Hook Form 사용 방법에 대해 알아보겠습니다. 기본적으로 Form을 사용할 때 작성하는 코드입니다. 하나의 input이지만 여러 개의 input을 사용할 경우 useState와 onChange 이벤트가 많이 생성됩니다. 그리고 Validation Check 하는 코드도 복잡해집니다. // InputForm.tsx import React, { useState } from 'react'; function InputForm() { const [toDo, setTodo] = useState(''); const [toDoError, setTodoError] = useState(''); const onChange = (event: React.FormEvent) => { const { ..

Angular는 구글이 만든 단일 페이지 웹 애플리케이션 개발을 위한 자바스크립트 프레임워크입니다. 다양한 플랫폼에서 동작할 수 있게 하는 개발 툴과 기능들을 제공합니다. Module 컴포넌트, 파이프, 서비스 등과 같은 앵귤러 애플리케이션의 주요 부분을 기능단위로 그룹핑하게 해 줍니다. 모든 앵귤러 애플리케이션은 하나의 Root Module을 가집니다. 여러 Feature Module을 가질 수 있습니다. 재사용할 수 있는 기능을 외부에 배포하기 위해 사용되기도 합니다. Component 빌딩 블록 형식 HTML 요소들의 그룹 뷰와 로직으로 구성 $ ng g component todo/todos --module todo/todo.module.ts --export 컴포넌트 내부에서 html, css 코드..

나도코딩 님의 파이썬 코딩 무료 강의 (기본편)을 보면서 작성하였습니다. 기본 시작 함수 def open_account(): print("새로운 계좌가 생성되었습니다.") def deposit(balance, money): # 입금 print("입금이 완료되었습니다. 잔액은 {0} 원입니다.".format(balance + money)) return balance + money def withdraw(balance, money): # 출금 if balance >= money: # 잔액이 출금보다 많으면 print("출금이 완료되었습니다. 잔액은 {0} 원입니다.".format(balance - money)) return balance - money else: print("출금이 완료되지 않았습니다. 잔액..

나도코딩 님의 파이썬 코딩 무료 강의 (기본편)을 보면서 작성하였습니다. 환경설정 Python 설치 https://www.python.org/downloads/ 홈페이지 접속 후 다운로드 탭을 선택하고, 현재 버전(3.10.2) 다운로드를 합니다. 다운로드 완료 후 설치를 시작한다. Customize installation 클릭하고, install location 란에 c:\Python310 입력 후 설치 버튼을 클릭합니다. Visual Studio Code 설치 https://code.visualstudio.com/ 홈페이지 접속 후 다운로드 후 설치합니다. python 익스텐션 설치 기본 시작 주석 print("주석") #print("주석") ''' 여러문장 주석입니다. ''' 숫자처리함수 print..

Angular는 Angular CLI를 이용해 프로젝트 관리의 복잡도를 낮추고 Angular 개발에만 집중할 수 있게 합니다. 설치 Angular CLI를 설치하려면 다음과 같은 npm 명령어를 실행합니다. $ npm install -g @angular/cli 설치가 완료되면 ng 명령어를 사용할 수 있습니다. ng 명령어는 Angular CLI에서 제공하는 기능들을 실행하는 역할을 담당합니다. Angular CLI 도움말 옵션을 사용해 확인해 봅니다. $ ng --help ng Commands: ng add Adds support for an external library to your project. ng analytics Configures the gathering of Angular CLI usa..