분류 전체보기

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

자바스크립트 언어 하나만으로 서버, 웹 클라이언트, 데스크톱 앱, 그리고 배포까지 경험해 보고 싶다면 선택해 볼 만한 책을 소개하려고 합니다. 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..