1. Hello Flutter! 곧 Flutter을 활용한 프로젝트를 맡게될 예정이라, 공부에 몰입하고 있다. Flutter는 Dart라는 객체지향언어를 사용하는데, 이녀석 때문에 객체지향이 뭔지 자연스레 공부하게 되고있다. Java랑 비슷한 점이 많다고 하는데, 배우지 않은 내가봐도 비슷해 보인다. 처음에는 타입을 적어주어야한대서 Typescript이랑 비슷하길 빌었지만 내 바램일 뿐... 클래스가 나오길래 반가웠는데 제발 내가 아는 클래스이길 바랬는데, Javascript는 프로토타입기반인 걸..... 택도 없지 ^^.... 연결점 찾아가며 공부하기는 포기했다. 그래서 나는 프로그래밍 언어를 처음보는 사람이라고 최면걸며 공부하고 있다. Flutter가 앱에서 구동되는 원리에 꽂혀서, 레퍼런스를 주워서..
1. macOS 업데이트 1. OS를 최신상태로 업데이트 2. 안드로이드 스튜디오 설치 https://developer.android.com/studio Download Android Studio & App Tools - Android Developers Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today. developer.android.com 1. 안드로이드 스튜디오 홈페이지에서 Download Android Studio 클릭 2. 약관 동의 - 칩에 따라 설치 3. Flutter, Dart 설치 ..
벌써 8월달이라니, 믿기지가 않는다. 바들바들 떨던 햇병아리가 이제 프론트엔드 엔지니어로 일한지 1년이 다 되어간다. 개발을 시작하고 참 진취적으로 살았다. 취업하고 직 후에는 아직도 내가 알아야할 것들이 태산이라, 눈 앞에 보이는 공부할 것들이 내게는 부담으로 다가오기도 했고, 하루라도 뭔가 하지 않으면 괴로웠었다. 물론 지금도 배워야할 것들이 많지만, 지금은 부담보단 즐기는 것이 맞는 것 같다. 1. 그간의 행적들 5월달 이후로 WIL을 적지 않았는데, 약 3개월 동안 참 많은 일들이 있었다. 항해99 기술매니저는 아직도 계속 하고 있고, 컨퍼런스는 시간이 조금이라도 난다싶으면 무조건 참가했고, 해커톤도 준비해보고, 챌린지도 해보고, 개발관련된 일들은 닥치는대로 캘린더에 쑤셔넣었다. 덕분에 내 캘린더..
모바일용과 PC용 디자인 시 사용성은 어떻게 달라질까? 별다른 차이는 없으며 기본 원칙은 여전하다. 다만 모바일 환경에서는 사람들이 더 빨리 움직이고 더 적게 읽으며, 모바일이 주는 환경의 특수성이 존재한다. 1. 트레이드오프를 고려하라 제약이란 해야만 하는 일과 할수 없는 일을 가르키며, 트레이드 오프는 제약 때문에 이상을 버리고 선택하는 현실적인 대안을 가르킨다. 제약이 전혀 없다는 말은 언뜻 듣기에는 자유로은 느낌이 들지만, 막상 무언가 지켜야 할 제약이 있다면 초점을 맞출 곳이 생긴다. 훌륭한 모바일 사용성을 구현하는 문제의 본질은 대체로 트레이드오프를 훌륭하게 해내느냐에 있다. 2. 공간이 좁아서 생기는 문제들 화면 공간 부족 때문에 사용성이 희생되면 안 된다. 모바일 화면이 갖는 가장 눈에 띄..
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에 대해 모르는 것 같아서 읽기 시작했다. 분량이 많지않고 딱 읽기 좋고, 주변 개발자들에게 추천해주고 싶다. 아래의 글귀는 서문 중 발췌하였다. 환경이 아무리 변했다고 해도 기본 원칙은 변하지 않았다. 사용성은 기술이 아니라 사람에 대한 것이고 사람이 사물을 이해하고 사용하는 방법에 대한 것이다. 기술은 빠르게 변하지만, 사람은 매우 느리게 변화한다. 나는 어쩌면 이 책을 통해, 사람이 사물을 어떻게 받아들이는가에 대해 유심히 들여다보고 고민하게될 것 같다. 사용성의 특성 유용성 : 사람들이 필요로 하는 일을 하는가 학습 용이성 : 제품을 보고 사용법을 알아볼 수있는가 기억 용이성 : 사용법을 다시 익혀야하는가 유효성 : 맡은 임무를 완수하는가 효율성 : 작업을 수행하는데 드는 시간..
1. 다시 만난 CK Editor, 안녕 SunEditor 예전 프로젝트 때 CK Editor을 이용한 적이 있었는데, 이번 프로젝트에 다시 만나게 되었다. 예전에는 클래스형 컴포넌트로 에디터를 구성했다면 이번에는 함수형 컴포넌트로 구사했다. 함수형으로 바꾸면서 모듈에 대한 의존도가 떨어져서, package.json 파일이 굉장히 깔끔해졌다. 예전에는 eject나 eject를 대신할 craco로 설정을 해줘야됐었는데, 이번에는 craco 또한 설치하지 않았다. 문제는 craco와 tailwind랑 충돌이 생겨서 build 자체가 안되더라.... 이리저리 굴려보았지만, 결국 CK를 내려놓았다. 두번째는 SunEditor 이라는 녀석을 만나봤다. http://suneditor.com/sample/index...
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; }
