풀소유

함수형 언어에서는 함수와 변수를 차별하지 않으므로 함수는 다른 함수의 입력 매개변수나 반환값으로도 사용될 수 있습니다.고차 함수는 다른 함수를 반환하는 함수를 의미한다.리액트 개발에서 고차 함수는 콜백 함수에 어떤 정보를 추가로 전달하려고 할 때 주로 사용한다.const onClick = useCallbakc((name: string) => () => alert(`${name} clicked`), []) 리액트에서 고차 함수를 구현하는 이유는 함수의 타입 불일치를 해결하기 위해서이다. onClick 이벤트 속성은 () => void 타입의 콜백 함수를 설정해야 하므로 다음 처럼 콜백 함수 내부에서 필요한 name 변수를 전달할 수 없다.() => alert(`${name} clicked`)그러나 콜백 함..

이중 NOT 연산자는 부울 값으로 변환하는 데 사용된다. 처음 ! 연산자는 값을 반전시키고, 두 번째 ! 연산자는 이를 다시 반전시켜 원래의 논리 상태로 돌려놓는다. 이 과정에서 해당 값이 무엇이든 명시적으로 부울 값으로 변환된다.const value = "Hello, World!";const booleanValue = !!value;const onClick = () => {}const booleanOnClick = !!onClick;console.log(booleanValue); // trueconsole.log(booleanOnClick); // true JavaScript에서는 값이 "truthy"하거나 "falsy"할 수 있다. "truthy"한 값은 조건문에서 참으로 평가되는 값이고, "fals..

PrettierPrettier는 코드 포매터로서, 코드의 스타일을 일관되게 유지하는 데 중점을 둔다. 코드의 가독성을 높이고 팀 간의 스타일 불일치를 줄여준다.자동 코드 포매팅: 저장 시 또는 명령 실행 시 코드를 자동으로 포맷팅 한다.스타일 설정: 코드 스타일 옵션을 설정할 수 있다.다양한 언어 지원: JavaScript, TypeScript, CSS, HTML 등을 포함한 여러 언어를 지원한다.설치npm install prettier --save-dev설정하기최상단 디렉토리에 .prettierrc.json 을 생성 한다.{ "printWidth": 120, // 코드 한 줄의 최대 길이를 120자로 설정 "tabWidth": 2, // 들여쓰기에서 사용할 공백 수를 2칸으로 설정 "useTabs..

HTML 요소는 웹 페이지의 구조를 정의하는 데 사용되며, 각 요소는 다양한 속성(attributes)을 가질 수 있다. 예를 들어 input 요소는 type, value, onChange 등의 속성을 가질 수 있다.React에서는 이러한 HTML 요소들을 컴포넌트로 사용한다. TypeScript와 함께 사용할 때, HTML 요소의 속성을 타입으로 정의하여 컴포넌트의 Props를 관리할 수 있도록 DetailedHTMLProps와 HTMLAttributes를 제공한다. HTMLAttributes모든 일반적인 HTML 속성들을 포함하는 타입이다. 이 타입은 특정 HTML 요소가 가질 수 있는 모든 속성들을 정의한다. 예를 들어, div 요소의 속성을 정의하려면 HTMLAttributes 타입을 사용할 수 ..

PropsWithChildrenPropsWithChildren은 타입스크립트로 작성된 React 컴포넌트에서 자식 요소를 포함하는 props를 정의하는 데 사용되는 타입이다.이를 사용하면 컴포넌트의 타입 안전성을 높이고, 코드 가독성을 향상시키며, 더 유연한 컴포넌트를 만들 수 있다.리액트 17 버전까지는 children 속성을 FC 타입에 포함했지만 18 버전부터는 FC 타입에서 children 속성을 제거했다. 그리고 PropsWithChildren이라는 제네릭 타입을 새롭게 제공하여 children?: ReactNode 부분을 PropsWithChildren 타입으로 대체했다.  왜 PropsWithChildren을 사용할까?React 컴포넌트는 일반적으로 props를 통해 데이터를 전달받는다. 하..

npm audit 명령어는 2018년에 발표된 npm v6에서 처음 도입되었다. 이 명령어는 프로젝트의 의존성 트리를 검사하여 보안 취약점을 찾고, 이를 보고하는 기능을 제공한다. 이는 npm 사용자들이 프로젝트에서 사용하고 있는 패키지들의 보안 상태를 쉽게 확인하고, 필요한 경우 취약점을 수정할 수 있도록 하기 위한 중요한 기능이다. npm audit이 명령어는 프로젝트의 의존성을 검사하여 알려진 보안 취약점을 찾고, 이를 보고한다.npm audit이 명령어를 실행하면 보안 취약점이 있는 패키지 목록과 이를 수정하기 위한 권장 조치가 표시된다. npm audit fixnpm audit 명령어가 발견한 보안 취약점을 자동으로 수정하려고 시도한다. 이 명령어는 가능한 경우 취약점을 수정할 수 있는 패키지 ..

경고isOpen이라는 값을 styled-component에 보내주는데 아래와 같은 경고 문구가 로그에 찍혔다.Warning: React does not recognize the isOpen prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isopen instead. If you accidentally passed it from a parent component, remove it from the DOM element. 발생 이유DOM 요소에 대한 사용자 정의 속성이 React에 의해 대문자로 시작할 수 없기 때문이다. 여기서 isOpen 값은 ..

모듈 시스템JS의 모듈 시스템은 코드를 여러 개의 파일로 나누어 관리하고, 각 파일 간의 의존성을 정의하여 필요한 기능을 불러오는 방식이다. 이를 통해 코드의 재사용성, 유지보수성, 가독성을 높일 수 있다. 자바에서도 패키지를 사용해 관련 클래스와 인터페이스를 그룹화하여 관리하는 것과 유사하게, JavaScript에서는 모듈 시스템을 통해 코드를 나눌 수 있습니다. CommonJSCommonJS는 JavaScript를 사용하는 서버 사이드 플랫폼에서 모듈을 정의하고 사용하기 위한 표준화된 방법 중 하나이다. Node.js에서 가장 널리 사용되는 모듈 시스템이며, 이전에는 브라우저 환경에서도 사용되었으며 ES6 모듈 시스템이 대안으로 사용되기도 한다. 브라우저 환경에서 사용하기에는 동기적인 특성과 캐싱 메..

리액트 16.8부터 훅(Hooks)이 도입되어 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 되었다.화면을 그릴 때마다 호출되는 훅의 숫자와 순서를 동일하게 하기 위하여 루프, 조건 분기, 콜백 함수 안에서는 훅을 호출할 수 없다. 이런 위치에서 훅을 호출하는 코드를 작성하면, 빌드 에러 또는 실행 시 에러가 발생한다. 따라서, 훅은 컴포넌트의 최상위 레벨에서만 호출되어야 한다. 또한, 리액트 훅은 반드시 함수 컴포넌트에서만 사용해야 한다.용도용도훅컴포넌트 데이터 관리useMemouseCallbackuseStateuseReducer컴포넌트 생명 주기 대응useEffectuseLayoutEffect컴포넌트 메서드 호출useRefuseImperativeHandle컴포넌트 간의 정보 공유useCo..

저번 시간에는 Google OAuth를 통해 사용자를 인증하는 방법에 대해 다뤘습니다. 오늘은 이어서 인증된 정보를 가지고 JWT를 발급하고 인증하는 방법에 대해서 다루겠습니다. 패키지 설치 npm i --save @nestjs/jwt passport-jwt bcryptjs npm i --save-dev @types/passport-jwt @types/bcryptjs @nestjs/jwt는 Nest.js 프레임워크에서 JWT(JSON Web Tokens) 인증을 구현할 때 사용되는 패키지입니다. passport-jwt는 Passport와 함께 JWT 인증을 사용할 때 사용되는 패키지입니다. bcryptjs는 refresh token을 해쉬하여 데이터베이스에 저장하기 위해서 설치합니다. JWT 발급 Jwt..