분류 전체보기

[leetCode][javascript] 448번 문제 - Find All Numbers Disappeared in an Array

문제 [leetCode][javascript] 448번 문제 - Find All Numbers Disappeared in an Array 문제 설명 길이가 n인 배열은 1부터 n까지의 숫자가 존재할 수 있다. 여기서 존재하지 않는 숫자를 구하는 문제이다. 배열의 숫자가 1부터 n까지 있을 수 있다고 했으니 그만큼 for문을 돌면서 i가 있는지 찾는다. 있으면 넘어가고 없으면 result 배열에 추가한다. 알고리즘 문제를 되게 오랜만에 풀어 보았는데 Easy 문제여서 그런지 재미있다 ㅋㅋㅋ 일주일에 2문제 정도는 풀어 봐야겠다!! 성공 코드 /** * @param {number[]} nums * @return {number[]} */ const findDisappearedNumbers = (nums) =>..

Vue에서 'Leave Site?'를 구현하는 3가지 방법

Vue에서 'Leave Site?'를 구현하는 3가지 방법 웹사이트에서 내용을 입력하다가 창을 벗어나려고 하면 이 사이트에서 나가시겠습니까?와 같은 경고창을 본 적이 있을 것입니다. 이번 포스팅에서는 Vue를 사용하여 사이트를 벗어나지 못하도록 막는 방법 3가지를 간단한 예제 사이트를 만들면서 알아보겠습니다. 개요 예제 사이트 구성 다른 사이트로 나가는 것 감지하기 - beforeunload 이벤트 다른 라우터 주소로 이동하는 것 감지하기 - vue-router의 beforeRouteLeave 다른 쿼리스트링 주소로 이동하는 것 감지하기 - custom method 1. 예제 사이트 구성 다양한 상황에서 경고창을 띄우기 위해 라우터를 나누어 구성하였습니다. path: repository와 detail-i..

회원가입 기능 만들며 React와 Vue 비교하기

회원가입 기능 만들며 React와 Vue 비교하기 저는 기존에 React를 중심으로 페이지 개발을 해 왔습니다. 그리고 Vue는 React와 닮은 점이 많습니다. 가장 큰 것은 View를 중심으로 컴포넌트를 쪼개서 관리할 수 있다는 것이죠. 다른 점은 어떤 것이 있는지 간단한 회원가입 기능을 React와 Vue로 각각 만들어 비교해 보겠습니다. 참고 React: 16.13버전, Function component Vue: 2.6버전, Single File component 사용법 차이 위주로 설명하고 있습니다. 스타일은 동일하게 적용했습니다. 개요 전체 코드 기본 구성과 형태 라이프 사이클 props 이벤트 전달 1. 전체 코드 React Codesandbox 링크: https://codesandbox.i..

프로젝트 관리를 위한 Git Hooks 간단 정리

프로젝트 관리를 위한 Git Hooks 간단 정리 우리는 프로젝트 버전 관리를 하기 위해 주로 Git을 사용하죠. repository를 만들어 클론하거나 git init 명령을 통해 시작합니다. 그러면 프로젝트 내부에 .git 디렉토리가 생기게 되는 것을 알고 계셨나요? git에서 커스텀해서 사용할 수 있는 git hooks 중 몇가지를 알아보도록 하겠습니다. 개요 git hooks란? git hooks 종류 정리 1. git hooks란? git으로 관리하는 프로젝트에서 .git을 조회하면 아래와 같습니다. 아래 리스트 중 이번 포스팅에서는 hooks의 종류와 쓰이는 상황을 알아보겠습니다. git hooks는 특정 상황일 때 스크립트를 실행하게 하여 사용자가 규칙을 정해 사용할 수 있게끔 해 줍니다. ..

OpenAPI Generator 사용하기 - Typescript

OpenAPI Generator 사용하기 - Typescript 개요 Typescript에서의 api type 정의 반복 OpenAPI Generator 장단점 OpenAPI Generator 사용하기 정리 1. Typescript에서의 api type 정의 반복 백엔드에서 api가 개발되면 swagger와 같은 문서 툴로 받게 됩니다. 자바스크립트에서라면 바로 fetch 혹은 axios로 api에 요청하는 코드를 작성하면 됩니다. 타입스크립트의 경우는 어떤지 살펴 봅시다. Request와 Response 타입 정의하기 우리는 swagger에 명시된 타입을 바탕으로 타입을 정의해야 합니다. 아래와 같이 명세를 펼치면 알맞는 타입을 알 수 있습니다. 캡처 출처: https://petstore.swagger..

Typescript generic

Typescript generic(타입스크립트 제네릭) 타입스크립트의 필요성은 협업을 하는 프로젝트에서 거의 필수로 사용될 만큼 중요도도 높아졌습니다. 최근에 타입스크립트를 공부하게 되었는데 공부하다가 가장 이해하기 까다로웠던 generic에 대해 정리해 보고자 합니다. 제네릭의 형태 아래 코드는 타입스크립트 오픈소스에서 쉽게 볼 수 있는 코드입니다. 타입스크립트 입문자가 보게 되면 외계어를 보는 듯한 기분이 듭니다. 이 코드는 마지막에 다시 보고 해석해 보도록 하겠습니다. // https://github.com/reduxjs/redux/blob/master/src/compose.ts type Func = (...a: T) => R export default function compose( f1: (a:..