공부하는 블로그

Vue 하다가 React 하는 개발자 이야기 6 오늘은 GraphQL의 이야기를 먼저 해보고자 합니다. 앞서 출시한 프로젝트가 안정화 되어가고, 코로나 사태 등으로 인해 대외적으로 사용자들에게 집중하기보다는, 내실을 다지는 기간으로 보내고 있습니다. 사실 API 쪽도 Apollo Federation 같은 기술을 이용해서 점진적인 코드 변경을 해가고자 했으나, 오래된 버젼의 라이브러리를 사용해오고, 코드가 너무 스파게티처럼 얽히고 설켜있어서 더 이상 유지보수가 어렵다고 판단되어 리팩토링이 아닌 code-first 방식으로 Re-writing 작업을 하고 있습니다. 주변에 같은 고민을 했던 사람들이 있나 싶어 찾아보아도 다들 Schema-first 에서 Code-first로 점진적인 Migration이 쉬운..

Ramda.js를 이용한 함수형 프로그래밍 수련 예전에 면접보러 다니면서 했던 개발 테스트 중 함수형 프로그래밍으로 풀어낼 수 있는 과제가 있어 다시 풀어보고자 합니다. JSON 파일은 여기 를 참조하면 되겠습니다. 1. 각 유저별로 전체 이벤트 갯수를 구하기 - TotalEvent는 모든 이벤트 숫자를 더한 값 결과는 아래와 같이 나오면 됩니다. [ { login: "rafaelfranca", events: { TotalEvent: 19 } }, { login: "HeshamAbdalla", events: { TotalEvent: 10 } } ] 현재 json 배열 내의 값은 아래의 형태를 지닙니다. { "id": "8594176318", "type": "IssueCommentEvent", "actor..

인프런의 FP 강좌를 보다가 URL 쿼리문을 작성하는 내용을 보고 다른 함수형 라이브러리들은 어떤가 살펴보기 위해서 살짝 끄적여보았다. 아래 나온 obj1 변수를 파싱해서 a=1&c=CC&d=DD 로 결과를 내는 함수를 만드는 것이다. 단 b는 undefined 이니까 제외한다. 순수 JS, lodash, ramda 에서 쓰임새가 어떤지를 맛보고자 하는 것이기에 특별한 내용이나 설명이 있지는 않다. 순수 JS const obj1 = { a: 1, b: undefined, c: 'CC', d: 'DD' }; console.log( Object .entries(obj1) .filter(([_,v]) => v !== undefined) .map(([k, v]) => `${k}=${..

Vue composition API 리뷰 Vue 3가 출시를 앞두고 있다. Vue-next에서 공개한 주요 변경점으로는 Typescript 지원 강화, Composition API, 컴파일러 개선 등이 있겠다. 기존 Vue 2 버젼에서 업그레이드 시에 어떤 대격변이 일어날까 걱정을 많이 했는데, Vue composition API의 경우에는 2 버젼에서 사용할 수 있도록 배포가 되었다. 설치 npm install @vue/composition-api --save 로 설치를 한다. 그리고 main.js에 아래 코드를 추가한다. import Vue from 'vue'; import App from './App.vue'; import VueCompositionApi from ..

console.log에 대해 알아보자자바스크립트를 자주 사용하는 경우, console.log()를 사용하여 정보를 출력해야 할 때가 많습니다.아래는 보통 오랫동안 많이 써온 방식입니다.(() => { console.log('Success!') })()에러 로그에 console.error () 사용로그를 좀 더 시각적으로 낫고 재미있는 방식으로 만들 수 있는 몇 가지 방법이 있습니다.(() => { console.error('헉, 뭔가 잘못되었네요!') })()경고 로그는 console.warn() 사용(() => { console.warn('경고!, 뭔가 잘못된 것 같습니다!') })()iterable 오브젝트에 console.table() 사용function Person(firstName, lastNa..

JavaScript essentials: 엔진 동작을 알아야 하는 이유원본 글은 이곳에서 확인하실 수 있으며, 원작자의 동의를 얻고 쓴 글입니다.글을 읽기 전에 광고 배너를 한번씩 눌러주신다면 블로그 운영에 힘이 될 것 같습니다! :DPhoto by Moto “Club4AG” Miwa on Flickr이 글은 스페인어로도 제공됩니다.이 글에서는 자바스크립트 개발자들이 자신이 작성한 코드가 올바르게 실행되도록 엔진에 대해 알아야하는 것을 설명하고자합니다. 아래 코드에서는 전달 된 인수의 lastName 프로퍼티를 반환하는 한 줄짜리 함수를 볼 수 있습니다. 각 오브젝트에 하나의 프로퍼티를 추가하기만 해도 성능이 700% 이상 떨어집니다.자세히 설명하겠지만, 정적 타입이 없는 자바스크립트는 이러한 동작을 유..

리액트와 뷰로 같은 앱을 만들어 보았다.(Part 2: Angular)리액트와 뷰로 같은 앱을 만들었는데, Angular가 안 낄수 없죠!Part 1을 아직 읽지 않았습니까? 여기에서 확인하세요.저는 Angular를 매일 직장에서 사용하지만, 자바스크립트 세계에서는 다른 모든 프레임 워크에 대한 정보는 얻을 수 없었습니다. 나는 같은 사과라도 이것저것 비교하는 것을 좋아합니다! 그래서 React vs Vue에 대한 Sunil Sandhu의 글에 숟가락을 얹게 되었습니다. 자, 여기 React vs Vue vs Angular의 비교입니다!앱의 외형은 어떨까요?[Player 3 이 게임에 입장하였습니다]Part 1과 마찬가지로 css는 다른 두 프레임워크의 위치와 거의 비슷합니다.이 Angular 애플리케이..

리액트와 뷰로 같은 앱을 만들어 보았다.이 글의 원문은 여기이며 원작자가 번역을 허가하여 글을 번역했습니다.번역을 다 하고 나니 이미 다른 한국어 번역이 있더군요. (링크)그러나 번역한 것이 아까워서 포스팅을 합니다. (ㅠ_ㅠ)저는 직장에서 Vue를 잘 사용해오고 있었습니다. 그러다가 저는 이 울타리의 다른쪽 뜰은 어떤지 궁금해졌습니다. 그 뜰은 바로 리액트입니다. 리액트 문서를 읽고 튜토리얼 동영상을 몇 편 보았습니다. 좋은 동영상이었지만 실제로 알고 싶은 것은 Vue와 리액트가 얼마나 다른지였습니다. "다르다"는 말은 가상 DOM을 가지고 있는지, 또는 렌더링 페이지를 어떻게 읽는지와 같은 것은 아닙니다. 누군가가 내게 시간을 들여가며 코드를 설명해주면서 무슨 일이 일어나는지 알려주면 좋겠다 싶었습니..

Vue로 데스크탑 응용 프로그램 만들기 : Vuido해당 글의 출처는 여기이며 원 저자의 허락을 받고 글을 번역하였음을 밝힙니다.#vue #javascript나는 Vue를 아주 좋아합니다. 좋은 프레임 워크로 멋진 웹 응용 프로그램을 만들 수 있습니다. 그러나 진정한 마법은 웹에만 국한되지 않는다는 것입니다. Weex 또는 NativeScript-Vue를 사용하여 네이티브 모바일 응용 프로그램을 만들 수 있습니다. 데스크톱 앱을 만드는 방법도 있습니다. 이를 위해 Electron 또는 Vuido 라이브러리를 선택할 수 있습니다. 이 글에서는 Vuido 접근 방식에 대해 설명하고 다음 기사에서는 Electron과 함께 동일한 앱을 빌드하려고 시도합니다.Vuido는 Michał Męciński가 만든 Vue..

Evan You on Proxies이 글은 원작자의 허락을 받아 번역하였으며, 글의 출처는 https://www.vuemastery.com/courses/advanced-components/evan-you-on-proxies/ 입니다.기술이나 번역에 대해 의견이 있으시면 댓글을 남겨주시면 반영하도록 하겠습니다. 감사합니다.이전 강의에서 Vue.js의 반응형을 모방한 반응형 시스템을 구축했습니다. 프로퍼티를 getters / setters로 변환하기 위해 Object.defineProperty()를 사용하면 액세스 할 때 의존성을 추적하고 수정할 때 코드 (알림)를 재실행 할 수 있게 되었습니다.Vue 로드맵를 따르고 있다면 2.x-next 버전의 반응형 시스템은 보여드린 것과 다른 프록시로 다시 작성됩니..