flat과 flatMap은 이름에서 알 수 있듯이, 평탄화된 새로운 배열을 만들어준다. 때때로, 이러한 메서드가 유용하게 쓰일 때가 있다. Flat const newArr = arr.flat([depth]) 아래 arr에는 배열안에 배열이있는 중첩배열형태이지만, flat을 사용하면, 중첩된 배열이 사라진 온전한 배열을 가질 수 있게 된다. const arr = [1,2,3,[4,5],[6,7]] const new_arr = arr.flat() console.log(new_arr)//[1,2,3,4,5,6,7] 하지만, 이전 배열보다 깊이가 더 깊다면, 온전한 배열로 만들 수 없게 된다. const arr = [1,2,3,[4,[5,6]],[7]] const new_arr = arr.flat() conso..
프로젝트의 폴더구조를 작성할 때 tree 패키지를 사용하면 편하다. https://formulae.brew.sh/formula/tree tree Homebrew’s package index formulae.brew.sh $ brew install tree 사용법 루트폴더로 가서 cmd를 입력한다. 폴더구조 txt만들기 $ tree 폴더명 > tree.txt 폴더 + 파일명 txt만들기 $ tree 폴더명 -f > tree.txt
기본적으로 타입스크립트는 자바스크립트의 특성에 따라 구조적 타입 시스템으로 이루어져있다. 하지만, 브랜딩타입을 이용하면 명목적 타입 시스템처럼 사용할 수 있다. (그 외 다른 방법들도 있다.) 명목적 타입 시스템이 필요한 이유가 뭘까? function euroToUsd(euro: EUR): USD { return (euro * 1.18 as USD) } 위의 코드는 EUR를 USD로 환전해주는 함수이다. 보기에는 멀쩡해보이지만, 헛점은 있다. 함수의 인자로 EUR가 아닌 다른 나라의 통화를 전달할 때에도 문제없이 동작된다. (모든 통화는 number 타입이므로) 이 때, 브랜딩 타입을 이용하면 잘못된 통화가 함수로 들어왔을 때 탐지해줄 수 있다! 브랜딩 타입은 아래와 같이 만들 수 있다. type Bra..
https://www.react-hook-form.com/ Home React hook for form validation without the hassle www.react-hook-form.com React에서 기존 사용자입력값을 관리하려면, useRef나 useState를 이용해야했지만, React Hook Form을 이용하면 간단하게 처리할 수 있다. 아래는 공식홈에 있는 예제코드이다. 예제코드 import React from "react"; import { useForm } from "react-hook-form"; const Example = () => { const { handleSubmit, register, formState: { errors } } = useForm(); const on..
1. 내비게이션 디자인하기 사람들은 사용법을 스스로 알아낼 수 없는 웹 사이트는 사용하지 않는다. 웹 내비게이션 첫걸음 웹 사이트에는 보통 무언가를 찾기 위해 들어간다. 검색할지 직접 찾아볼지 선택한다. 검색 중심 사용자 : 어떤 사이트에 들어가든지 검색 상자부터 찾는 사람들 링크 중심 사용자 : 훑어보기를 선호하는 사람들. 클릭할 만한 링크는 다 클릭했거나 심하게 답답하다고 느낄 때만 검색한다. 그 외 : 상황에 따라 탐색 방식을 결정한다. 훑어보기로 했다면 안내에 따라서 사이트의 계층구조(섹션)를 찾아보며 옳다고 생각되는 항목을 클릭하고, 또 세부 항목들을 클릭하며 정보의 냄새를 따라간다. 찾던 항목이 없다는 확신이 들거나 더 찾기 답답해졌을 때 그 사이트를 떠난다. 웹이 지닌 특이성 규모에 대한 감..
프론트엔드지만, ux에 대해 모르는 것 같아서 읽기 시작했다. 분량이 많지않고 딱 읽기 좋고, 주변 개발자들에게 추천해주고 싶다. 아래의 글귀는 서문 중 발췌하였다. 환경이 아무리 변했다고 해도 기본 원칙은 변하지 않았다. 사용성은 기술이 아니라 사람에 대한 것이고 사람이 사물을 이해하고 사용하는 방법에 대한 것이다. 기술은 빠르게 변하지만, 사람은 매우 느리게 변화한다. 나는 어쩌면 이 책을 통해, 사람이 사물을 어떻게 받아들이는가에 대해 유심히 들여다보고 고민하게될 것 같다. 사용성의 특성 유용성 : 사람들이 필요로 하는 일을 하는가 학습 용이성 : 제품을 보고 사용법을 알아볼 수있는가 기억 용이성 : 사용법을 다시 익혀야하는가 유효성 : 맡은 임무를 완수하는가 효율성 : 작업을 수행하는데 드는 시간..
form 테스트하는 도중 자동완성목록 중 하나를 클릭해보니 이렇게 파란색 배경이 뜨게되었다. 크롬이나 사파리처럼 webkit을 사용하는 브라우저에서 볼 수 있는데, 이것은 아래의 코드로 배경을 지워줄 수 있다. input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #000; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }
이번 프로젝트에서 웹 내에서 이미지를 다운받을 수 있도록 해야했어서 찾아보다가 blob을 알게되었다. blob은 이미지, 사운드나 비디오같이 멀티미디어 데이터를 다룰 수 있고, 데이터의 크기와 MIME 타입(image/png, image/jpg...)을 알 수 있고, 데이터를 재가공할 수 있다. 방법은 그냥 간단한데 new Blob() 이렇게 생성자를 통하여 만들 수 있다. const blob = new Blob(fileObj) blob의 기능은 아주 많지만, 그 중에서 후에 필요하겠다 생각드는 것들 몇가지를 정리해보았다. 필요하다면 아래의 mdn문서를 읽어보자! https://developer.mozilla.org/ko/docs/Web/API/Blob blob데이터는 읽을 수 없기 때문에 안에 들어있는..
String, Number, Object 들과 달리 Array는 typeof 를 이용하여 타입을 알아보면 Object라고 뜨게된다. 그 이유는 Javascript에서는 Array를 Object로 취급하기 때문이다. const arr = [1,2,3,4,5] console.log(typeof arr) //"object" const null = null console.log(typeof null) //"object" object라니? 그렇다면, Array를 판별할 수 있는 방법은 무엇이 있을까? instanceof Array instanceof는 앞에 있는 객체의 프로토타입 체인이 뒤에있는 constructor.prototype에 존재하는지 아닌지 판별하여 Boolean (true/false)으로 리턴한다...
싸이프러스는 테스팅 프레임워크이다. E2E 테스트 통합 테스트 단위 테스트 공식홈페이지 : https://www.cypress.io/ JavaScript End to End Testing Framework Fast, easy and reliable testing for anything that runs in a browser. Install Cypress in seconds and take the pain out of front-end testing. www.cypress.io 기능 시간 여행 디버깅가능성 자동대기 Spies, Stubs, Clocks 네트워크 트래픽 제어 일관된 결과 스크린샷 및 비디오 크로스브라우저 테스팅 장점 브라우저를 이용하여 테스트하기 때문에, 따로 서버, 드라이버를 포함한 기타..
기존 네이티브 앱을 만들 수 있는 Android와 Swift는 플랫폼 내의 환경을 100% 활용할 수 있다는 장점은 있지만, 그 플랫폼에서만 사용할 수 있다는 단점이 있다. 그러나 PWA를 이용하면, 브라우저 환경에서 동작하는 애플리케이션이므로, Mobile과 PC에서 모두 동작하게 만들 수 있다. 물론, 브라우저의 힘을 빌리므로 각 플랫폼에 맞는 API를 모두 활용하진 못한다. PWA로 제작하기 위한 준비물 반응형 디자인으로 만든 웹앱 HTTPs Manifest Service Workers Manifest란? 웹앱에 대한 정보가 담겨있는 json 파일이다. Service Workers란? JavaScript로 작성하며, 서버와 데이터를 주고받을 때, 중간에서 요청을 통제하고 관리하는 역할을 한다. 데이..
아래의 디자인처럼 모든 input의 스타일은 같으니 똑같은 컴포넌트로 재사용하되, 제목이나 소개처럼 Label 부분 옆에 필수로 입력해야할 데이터에는 * 표기를 하기로 했다. 디자인 예시 물론 의미없는 요소이니 before 가상선택자를 사용하기로 했고, props로 important라는 속성을 넘겨주면 *을 렌더링 하기로 했다. (생략) return ( {label} ); 근데, 여기서 css스타일링이 문제였다. 기존 props으로 넘겼을 때, 내가 알고있는 방법은 아래처럼 하나의 조건으로 JSX로 몽땅 넘겨버리는 방법이였다. 이렇게 되었을때, 코드의 가독성을 해치고, 오류가 생기기 쉽다고 생각했다. const Label = styled.span` display: inline-block; color: #..
