공부하는 블로그

근황 리액트 학습 중이다. 패스트캠퍼스에서 김민태님 강의 인프런에서 이재승님 강의 김민준님 책 세가지를 병행해서 보고 있다. 상태 관리 쪽을 좀 자세히 살펴보고 있는데, 이제 좀 구조가 눈에 들어온다. Vue로 개발할 때는 Vuex만 있으면 되었는데 리액트에서는 선택지가 굉장히 많아서 처음에는 좀 당황스러웠다. Redux, Redux-thunk, Redux-saga... 요새는 swr, react-query까지. 생태계의 히스토리를 잘 파악하지 못해서 '리액트 동네는 복잡한 동네구나' 싶었다. 근데 이번 학습을 통해서는 상태 관리에 대해서 다시금 인사이트를 얻게 되는 시간이 된 것 같다. 이번 학습을 통해서 알게된 바는 상태 관리를 사용해서 캐시 레이어에 대한 통제권을 개발자가 갖게 한다는 점이다. 사실..

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

First look of Svelte App Environmental Settings on VS Code 일단 VS Code Extension에서 svelte로 검색해서 뜨는 상위 세개를 깔아주었다. 우선 내가 설치한 익스텐션은 Svelte, Svelte Intellisense, Svelte 3 Snippets 이렇게 세 개이다. Install the Svelte npx degit sveltejs/template my-svelte-project cd my-svelte-project npm i 위 명령어를 이용해서 svelte를 설치한다. 설치가 완료되는데는 그렇게 길게 걸리지 않는다. . ├── node_modules ├── README.md ├── package-lock.json ├── package...

인프런의 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 ..

해당 포스트는 여기 를 번역한 것입니다. 오타나 번역이 이상한 곳이 있으면 말씀해주세요 (_ _) Vue 2.3에서는 이전에 제거 된 .sync 수정자가 새로운 방식으로 다시 도입되었습니다. 이 포스트는 props를 하위 컴포넌트로 전달하고 업데이트를 전달하는 두 가지 방법을 알아봅니다. 첫 번째 버전은 익숙한 v-model이며 (Vue 2.2 에서 업데이트) 두 번째 버전은 .sync와 함께 제공됩니다. v-model 부모 컴포넌트는 v-model 지시자로 자식에게 speaks를 바인딩합니다. 그 사이에 자식은 speaks 값을 갖는 value prop을 선언합니다. 또한 실제 이 자신의 input 이벤트를 발생 시키면 input 이벤트를 발생시킵니다. 해당 이벤트에 전달 된 값은 부모의 speaks를..

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을 가지고 있는지, 또는 렌더링 페이지를 어떻게 읽는지와 같은 것은 아닙니다. 누군가가 내게 시간을 들여가며 코드를 설명해주면서 무슨 일이 일어나는지 알려주면 좋겠다 싶었습니..