개발소발닭발

1. 웹팩 설정에서 변수를 설정해준다. ..., { loader: 'sass-loader', options: { prependData: '$imagePath: "https://t1.daumcdn.net/liveboard/kidsnote/";', }, } 2. scss에서 사용한다. background: url(#{$imagePath}/예쁜내얼굴.png) no-repeat left bottom;

자바스크립트의 식과 문에 대해 알아봅시다.

프로젝트에서 지난 9개월 동안 Redux를 주력으로 사용하다 MobX로 바꾼 개인적 경험을 바탕으로 작성하였습니다. Redux를 사용하였으므로 체계는 매우 잘 잡혀 있었고 스토어를 바꾸는 과정은 대략 3주가 걸렸습니다. 아키텍처는 곧 인터페이스이고 Flux 인터페이스의 핵심을 알고 있다면 그것을 구현한 라이브러리들은 프로젝트 상황에 맞게 선택하면 된다고 생각합니다. 고구마 줄기들보다 더한 Redux와 친구들에 대해, MobX는 정말 훌륭한 대안입니다. 너무 장황하게 펼쳐지는 Redux Redux를 사용하다 보면, 너무 장황하게 펼쳐지는 느낌을 지울 수가 없습니다. 스토어의 개념이 익숙지 않은 사람들에게는 더욱 어렵고, 어지럽게 느껴집니다. Actions, Saga, Thunk 외에도 '기술을 위한 기술'..

추후 예정

UI 테스트는 효율이 중요하다고 생각합니다. 때문에 너무 부담 가지거나 어렵게 생각하지 않아도 됩니다. QA팀에 결과물을 넘기기 전에, 또 퇴근하기 전에 오늘 개발한 컴포넌트들의 UI 테스트를 자동으로 돌려놓으면 브라우저별 결과물들을 확인하기 편리합니다. 개인적으로 쓰려고 아주 간단(허접)하게 만든 모듈인데, npm에 배포해놨습니다. 지금부터 하나씩 따라 해 보시면 대략 20분이면 모든것이 준비됩니다. 1. 크롬 / 파이어 폭스의 익스텐션으로 셀레니움 IDE를 설치합니다. (1분) 2. 프로젝트를 만들고 프로젝트의 이름을 입력합니다. (1분) 3. test case를 작성합니다. 테스트 시나리오는 간단하고 짧을수록 관리하기 좋고 결과가 명확해집니다. (5분) 4. 테스트 케이스를 동작시켜 봅니다.(5분)..

이번에는 VScode 기준으로 Prettier, TypeScript, ESLint를 설정해 보겠습니다. 스타터 분들은 이 친구들이 생소하게 들릴지도 모릅니다. 간단하게 VScode - IDE Prettier - 자동 코드 정리 TypeScript - 자바스크립트의 슈퍼셋 ESLint - 자바스크립트 코딩 가이드 라고 생각하면 됩니다. 이해가 잘 안가더라도, 일단 세팅하고 사용해 보길 추천합니다. VScode에는 간단한 포맷터가 내장되어 있지만, Prettier를 이용하면 더 깔끔하게 코드를 정리하고 협업할 수 있습니다. 설치 방법은 간단합니다. Extensions 탭으로 가서 Prettier - Code formatter 를 설치합니다. .prettierrc 설정 파일을 만듭니다. 공식 문서를 보시면 쉽..

SPA를 개발하다 보면 데이터 관리가 정말 힘듭니다. 아주 오래전, Jquery만을 이용해서 Hash Router SPA를 만든 적이 있었습니다. 한 페이지를 만드는 일이야 간단했지만, 페이지간 데이터를 공유하고 이를 관리하는 일은 절대 만만한 일이 아니었습니다. 이를 해결하기 위해 글로벌 객체인 var DATA = {} 를 선언하고 여기에 SPA에서 사용하는 데이터들을 몽땅 넣었죠. 그리고 Get, Set 함수를 이용해 데이터를 관리했습니다. var DATA = (function() { var data = {}; return { set: function(k, v) { if (data[k]) { console.log('데이터를 덮어씁니다.'); } data[k] = v; }, get: function(k..

추후 예정

추후 예정

리액티브 프로그래밍은 비동기 데이터 스트림에 기반을 둔 프로그래밍입니다. 뭔가 대단해 보이는데 무슨 의미일까요. 개발을 하다 보면 동기 / 비동기 프로그래밍을 자연스럽게 경험하게 됩니다. 동기는 일반적인 프로그래밍 방식으로, 순차적으로 실행됩니다. 예를 들어 B함수에서 A 함수를 호출하면 A 함수가 실행되고, A 함수가 값을 반환하면 B함수 내에서 A함수를 호출한 위치에서 이어서 실행됩니다. 순차적이죠. 비동기 방식은 어떠한 이벤트가 일어나면 특정 행동을 취하는 방식입니다. AJAX 요청이 좋은 예입니다. 이벤트는 서버의 응답이 될 수도 있고, 유저의 특정 이벤트가 될 수도 있고 인터벌이 될 수도 있습니다. 그렇다면 프로그래밍을 대하는 관점을 바꿔봅시다. 개발자의 입장이 아닌 데이터의 입장에서 프로그램을..