본문 바로가기

Frontend88

[Javascript] 배열을 다루는 Javascript 메소드 (map, filter, reduce) 배열을 다루는 Javascript 메소드 (map, filter, reduce) 1. map map() 메소드는 새로운 배열을 리턴하는 메소드입니다. 어떻게? 순서대로 주어진 함수를 실행한 return 값을 모아서 새로운 배열을 만들어 반환합니다. 그렇기 때문에 원본 배열을 변경하지 않고 새로 가공한 배열을 얻을 수 있습니다. const arr = [1, 2, 3, 4 ,5]; const mapArr = arr.map(v => v); map() 메소드에 들어가는 인자는 총 세가지인데요. 1)현재값, 2) index값, 3) 현재요소가 속한 배열 하지만 인자 세개 모두 꼭 입력해야하는 것은 아닙니다. map() 메소드를 사용하면 작성해줘야할 조건이 많은 for문을 사용하지 않아도 되기 때문에 코드가 간결해.. 2021. 4. 22.
[quasar] quasar config에서 경로 alias 설정하기 quasar 프로젝트, 아니 굳이 quasar가 아니더라도 프론트엔드 프로젝트를 진행하다보면 만들어놓은 컴포넌트와 애셋들을 불러올때 저렇게 지저분하게 ../../ 이런 경로를 써야할 때가 있는데요. 저런 길다란 경로들은 보기에 좋지 않을 뿐더러 개발할 때 헷갈리기 쉽습니다. 그래서 보통 그럴 때 경로 alias를 사용해서 import할 시 축약되어 간결한 방법으로 컴포넌트를 불러올 수 있는데요. quasar에서 프로젝트 전반적인 설정은 quasar.conf.js에서 할수 있는데 이 alias도 마찬가지입니다. quasar.conf.js에서는 전역으로 주입할 js파일 설정하기 css 파일 설정 quasar에서 지원하는 roboto 폰트, material icon, fontawesome icon을 추가하기 .. 2021. 4. 21.
[quasar] quasar의 input 컴포넌트 Quasar는 Vue기반 프레임워크입니다. 쉽고 빠른 프론트엔드 개발을 위해 미리 갖추어진게 많은 프레임워크인데 저는 회사에서 프론트엔드 개발을 Quasar를 이용해 진행하고 있습니다. 프론트엔드 개발을 하면 form 양식을 만들어야할 때가 굉장히 많은데요. form요소들은 만들 때 고려해야할 몇가지 까다로운 것들이 있습니다. 사용자에게 받아와야할 데이터의 종류에 따라 form의 형태, 플레이스홀더, 유효성 검증등을 그때마다 다르게 해야하는데 Quasar의 input 요소를 이용하면 매우 쉽고 빠르게 form요소 작성이 가능합니다. 1. Input의 스타일 Outline, filled 등 다양한 스타일을 적용할 수 있고 icon옵션을 사용하면 구글 material icon에 있는 icon을 적용할 수 있.. 2021. 4. 20.
[Vue] Vue에 대해 자주 묻는 질문들 (feat.stackoverflow) 저는 무언가 학습을 할때 늘 지식공유 커뮤니티에 키워드 검색을 하고 가장 자주 묻는 질문들 부터 항상 나열해서 정리하곤 하는데요. 왜냐하면 사람들이 어려워하고 헷갈려하는 지점은 누구나 비슷하기 때문입니다. 회사에서 Vue를 쓰기 때문에 늘 막히고 헷갈리는 부분 역시 늘 비슷한 부분이었는데요 1. props가 변경하려고 할때 vue에서 경고알림 띄우는경우 props를 지역적으로 변경하려고 하는 것은 Vue의 안티패턴이므로 하지 않는게 좋습니다. 만약 그렇게 해야하는 경우라면 data에 필드 하나를 선언해서 props를 받아서 초기값을 세팅해주는편이 낫습니다. 아니라면 computed 속성을 사용하는 것도 방법입니다. props: ['members'], // 1) data에 초기값으로 세팅 data: () .. 2021. 4. 18.
Javascript 디자인패턴 - 1. Callback 패턴 Callback 패턴 콜백은 나중에 실행할 부차 함수에 인자로 넣어지는 함수입니다. 자바스크립트에서 함수는 일급 객체로 여겨지기 때문에 함수도 다른 함수에 인자로 전달할 수 있습니다. 여기서 콜백이 실행될 나중 시점이 부차 함수의 실행 완료 이전이면 전부 동기 콜백이지만, 비동기 콜백도 적용기법은 같습니다. 프로미스는 비동기 콜백에서만 사용됩니다. 콜백 패턴은 자바스크립트에서 정말 중요한 패턴입니다. function getResult(callback) { console.log("result"); callback(); //인자로 넘겨받은 add() 함수가 실행된다. } //인자로 넣어지는 콜백함수 function add(a, b) { return a + b; } 콜백 패턴을 테스트할 때 확인해야 할 점으로.. 2021. 4. 14.
Lighthouse로 웹사이트 최적화 하기 Lighthouse로 웹사이트 최적화 하기 개발자도구를 열어보면 여러가지 탭이 있는데 그 중에 lighthouse라는 웹사이트 진단 도구가 있다. 최근, 기존 회사의 서비스 홍보용 웹사이트를 페북으로 공유하여 열었을때 사이트 로딩이 너무 느려서 유저 이탈율이 높으니 해결해달라는 사업팀 요청을 받아 웹사이트 최적화 하는 법에 대해 찾아보게 되었다. Lighthouse로 이렇게 진단을 돌려보면 1. Performance 2. Accessibillity 3. Best Practice 4. SEO 이렇게 네 가지 기준을 나누어서 각각의 항목을 진단하고 점수를 내준다. 기존의 웹사이트의 로딩이 심각하게 느려서 Lighthouse를 돌려보았는데 나머지 항목들의 점수는 준수했으나 Performance 항목의 점수가 .. 2020. 6. 26.