Web Front End

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

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

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

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

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

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