전체 글

[Leetcode][Javascript] Max Consecutive Ones

문제 Max Consecutive Ones 문제 설명 배열에서 1이 연속해서 등장하는 최대 횟수를 구하는 문제 숫자는 0, 1만 등장한다고 했으므로 배열을 문자열로 변환해 0으로 split하면 1만 뭉쳐서 결과로 남게 된다. [1,0,1,1]이면 [1,11]이 되는 것이다. 연속하는 개수를 세어야 하므로 map 을 통해 개수를 세어 주고, 배열에서 max 값을 계산해서 출력하도록 한다. 간단한 문제였다. 성공 코드 /** * @param {number[]} nums * @return {number} */ const findMaxConsecutiveOnes = function(nums) { const ones = nums.join('').split('0').map(value => value.length);..

[리뷰] 디노 첫걸음

최신 자바스크립트 런타임인 디노(Deno)를 소개하는 '디노 첫걸음'을 읽어 보았습니다. 책에서 설명하는 내용이 무엇인지 보고 직접 실행해 보며 디노를 살펴보려고 합니다. 개요 디노의 배경 타입스크립트 npm 없이 외부 모듈 사용하기 1. 디노의 배경 자바스크립트를 백엔드로 구현한다고 하면 Node.js를 보통 생각하곤 했습니다. 그런데 노드가 해결하지 못하는 문제점이 몇 가지 있었습니다. 첫 번째는 보안이 취약한 부분을 해결하지 못했다는 것입니다. 그리고 npm으로 외부 모듈 사용 시 node_modules에 저장하는 방식이기 때문에 무거워지는 문제가 있었습니다. 아래와 같은 유머 사진이 있을 정도로 말이죠 요즘 프레임워크들의 추세인지, 온라인에서 간단히 테스트 가능한 플레이그라운드가 디..

[D&D 동아리 4기] 프론트엔드 개발자 회고

[D&D 4기 회고] 기획부터 디자이너와 협업까지 경험하는 사이드 프로젝트 DND: https://dnd.ac/ 2021년 1월부터 2월까지 8주간 DND 동아리에서 프론트엔드 개발자로 사이드 프로젝트를 진행했습니다. 회사 일이 끝나고 병행해야 하는 어려움도 있었고 배운 점들도 많습니다. 그래서 (좀 많이)늦었지만 개인적으로 회고를 적어 보겠습니다. 개요 프로젝트 소개 디자이너와 협업 백엔드 개발자와 협업 개인 회고 1. 프로젝트 소개 프로젝트 주제부터 팀원들의 의견에서 투표를 진행해 선정했습니다. 웹 서비스를 기반하고 있기 때문에 가볍게 즐기고 정보를 얻을 수 있는 세 가지 키워드를 선택했습니다. 회원 등록 기능을 통해 월간 추천 식물 서비스 메일링 등 비즈니스 모델도 생각해 보았지만, 짧은 시간에 완..

[리뷰]자바스크립트는 모든 곳에 존재한다

자바스크립트 언어 하나만으로 서버, 웹 클라이언트, 데스크톱 앱, 그리고 배포까지 경험해 보고 싶다면 선택해 볼 만한 책을 소개하려고 합니다. Javascript Everywhere 자바스크립트는 모든 곳에 존재한다 리뷰 한빛미디어 2021년 2월 이벤트를 통해 이 책을 받게 되었습니다. 저는 프론트엔드 개발자이기 때문에 자바스크립트를 많이 쓰고 관심도 가지고 있습니다. Vue와 React를 사용하여 주로 개발하고 있습니다. 혼자서 간단한 사이드 프로젝트를 진행하려고 할 때 백엔드 지식이 부족해 시도하다가 정보의 벽을 느껴 실패했던 경험도 있습니다. 그러다가 이 책을 만나게 되었는데요. 일단 첫 인상이 좋았던 것이 펼치자 마자 바로 따라해 볼 수 있는 개발 환경 구성부터 나왔던 것입니다. 당장 Graph..

한글이 자소분리될 때 해결 방법(ㅎㅏㄴㄱㅡㄹ -> 한글)

운영체제마다 다른 '유니코드 정규화 방식' 대응하는 방법 업무를 진행하다가 파일 다운로드 시 'Windows' 환경에서 한글이 자음과 모음으로 분리되는 자음모음 분리 현상, 자소 분리 현상이 발생했습니다. 인코드, 디코드 방식으로는 해결이 되지 않았지만 원인을 찾기가 힘들어 삽질을 했었는데요. 이를 해결하기 위해 새롭게 알게 된 내용과 해결 방법을 적어 보도록 하겠습니다. 개요 유니코드 정규화 방식이란? Mac과 Window의 정규화 방식 normalize()로 대응하기 1. 유니코드 정규화 방식이란? 한글을 표현하기 위해 텍스트(문자)에 대한 규칙을 정했습니다. 이것이 유니코드 정규화 방식인데 의미를 더 알아보기 앞서 기본 단어 개념을 알아보겠습니다. Character set: 여러 언어를 사용할 수 ..

[LeetCode][Javascript] Number of 1 Bits

문제 Number of 1 Bits 문제 설명 binary 숫자에서 1비트의 개수를 반환하는 문제 일단 숫자를 2진수로 받는(변환하는) 작업이 필요하다. 그냥 받으면 앞에 0이 포함된 부분은 날라가고 마지막의 1만 남게 되어 정상적인 계산이 불가능하다. 자바스크립트의 내장 객체인 toString의 인자에는 2진수부터 36진수까지 표현 가능하도록 넣을 수 있게 되었다. 그래서 2진수로 변환 후, 1의 개수가 있으면 세어서 반환하고 없으면 0을 반환하도록 처리했다. toString을 정말 많이 쓰지만 인자로 N진수를 나타낼 수 있다는 것은 처음 알게 되었다. 앞으로 종종 사용해야겠다. 성공 코드 const hammingWeight = function(n) { return n.toString(2).match(..

[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:..

신입 프론트엔드 개발자 한달 회고

8월 말부터 시작한 프론트엔드 개발 직군으로 구직활동을 하다가 9월 말에 입사를 했다. 정신없이 지나간 한달을 기록하고 앞으로 발전에 대해 적어 보려고 한다. 개요 새롭게 배우는 Vue 내가 개선할 부분 앞으로 할일과 고민들 1. 새롭게 배우는 Vue 나는 코드스쿼드를 통해 React를 주된 프레임워크로 사용했었다. 하지만 회사에서는 Vue + Typescript의 기술 스택을 가지고 있었기 때문에 새로운 공부가 필요했다. Vue와 React는 View를 가장 포인트로 잡고 컴포넌트를 만들어 조립하듯 쓴다는 점에서 컨셉이 비슷하기는 하다. 그런 관점에서 봤을 때에는 리액트를 처음 시작했을 때보다 빨리 배워서 적용하고 볼 수도 있었다. 하지만 나에게는 1~2주의 시간 안에 실무에 도입할 수 있는 것들을 알..

Vuex로 상태관리하기

Vuex로 상태관리하기 컴포넌트 계층이 늘어나게 되면 props만으로 전달하거나 이벤트 버스만으로 해결되지 않는 상태 관리의 어려움이 생기게 됩니다. 이번 글에서는 이런 어려움을 해결한 Vuex 라이브러리의 패턴과 메소드를 알아 보도록 하겠습니다. 개요 Vuex 아키텍처 Store 영역 Vue Component 영역 1. Vuex 아키텍처 Vuex는 데이터가 단방향 흐름으로 되어 있습니다. 이 흐름은 Flux 아키텍처와 비슷한 양상을 보입니다. Vuex 아키텍처 Flux 아키텍처 Vue 아키텍처의 흐름에 대해 설명하겠습니다. 먼저, Vuex의 Store에서 관리하는 부분은 Actions, Mutations, State입니다. 컴포넌트에서 Action이 일어나면 통신을 통해 값을 Mutation시킵니다. ..

[Vue 기초] Directive와 인스턴스 옵션

[Vue 기초] Directive와 인스턴스 옵션 개요 Directive Vue 인스턴스 옵션 1. Directive란? HTML 태그에 들어가는 속성이다. v- 라는 접두사가 붙는다. 대표적인 디렉티브: v-bind, v-model, v-once, v-for, v-if, v-else, v-else-if, v-text, v-on v-bind 뷰 인스턴스, 데이터, 이벤트를 바인딩할 때 하위 컴포넌트에 데이터를 전달할 때 사용 예시 // 전체 표기 // 생략 표기 v-model 사용자에게 입력을 받을 때 뷰 데이터 속성에 자동으로 연결할 때 여기서 입력을 받는 종류는 폼의 input 태그로 받을 수 있는 text, textarea, radio, checkbox 등과 select 태그 등을 말한다. 사용 예..