글쓰는 개발자

특히나 요즘엔, 이상하리만큼 알고있던 지식들의 뿌리를 뒤흔드는 일이 종종 생기는 것 같다. 가령 예를들어 일전에 썼던 [CSS] opacity는 reflow가 발생 안 한다구요...? 포스팅과 같은 일 말이다. 이번 포스팅도 그와 비슷한 맥락에서 출발한다. Vue는 MVVM 패턴과 관련이 없다, 라는 명제에 대한 증명을 위해서. 0. 이 명제의 출발점 시작은 언제나 사소하다. Vue.js 공식 Doc에 나와있는 한 문장으로부터 출발한다. Vue.js와 MVVM패턴은 관련이 없고, 그저 부분적으로 영감을 받았을 뿐, 이라는 이 문장. 오피셜 사이트에 그렇다는데...뭐, 더 할 말이 있겠는가. 1. 그렇다면 왜 나는 Vue.js가 MVVM이라고 생각해왔는가. 자, 그럼 나는 왜 Vue.js는 MVVM 패턴이..

생활코딩! React 리액트 프로그래밍 도서를 바탕으로 React 공부시작. 이번 진도는 308P ~ 358P. 목차로는 05. React Redux (챕터 05, 끝) 1. 개요 react는 사용자 정의 태그, 즉 컴포넌트를 만들어서 체계적이고 잘 정리된 어플리케이션을 만들 수 있게 한다. redux는 컴포넌트에서 활용되는 상태(state)를 중앙에서 관리함으로써 데이터가 우리가 예측하지 않은 형태로 변할 가능성을 낮춰주는 기술이다. 일반적인 렌더링에서 한 컴포넌트가 사용중인 state 변경시, sibiling 컴포넌트에게 영향을 끼치려면 위로 올리고 올려서 다시 내려가는 절차를 거쳐야하지만, 해당 state를 store에서 중앙집중 관리할 경우 이와같은 걸치고 걸치는 단계가 필요없게된다. 이를 해결하..

생활코딩! React 리액트 프로그래밍 도서를 바탕으로 React 공부시작. 이번 진도는 280P ~ 305P. 목차로는 04. React & Ajax (챕터 04, 끝) 1. fetch API 그냥 json 파일 따로 만들어서 fetch API를 통해서 가져 온 거임. 컴포넌트에 대한 초기화가 필요하다면, componentDidMount 에 적용(Vue로 치면 mounted) 뭐, 대략 이런 식이랄까. render() { let NavTag = null; if(this.state.list.isLoading){ NavTag = ; } else{ NavTag = } return ( {NavTag} ) } NavTag 라는 변수로 return내부에 태그를 렌더링 하도록 정의하고, this.state.list..

생활코딩! React 리액트 프로그래밍 도서를 바탕으로 React 공부시작. 금일 진도는 248P ~ 277P. 목차로는 03. React Router DOM (챕터 03, 끝) 1. 설치와 기본 정의 vue-router와 같은 react-router-dom 의 사용법 설명 파트. npm install react-router-dom vue에서 URL의 변경에 따른 페이지의 변화를 위해 가장 외곽을 태그로 감싸듯이 react-router-dom도 혹은 로 감싸줘야 함. 둘의 차이는 이름을 보면 알겠지만 HashRouter가 Hash 태그(#) 붙는 형태의 URL이고 BrowserRouter는 해쉬없이 기존의 브라우져가 인식하던 그 형태임. 그래서 예제에선 아래와 같이 ReactDOM.render에서 감쌈 ..

생활코딩! React 리액트 프로그래밍 도서를 바탕으로 React 공부시작. 금일 진도는 126P ~ 199P. 목차로는 01. 리액트 기초내에 18) 베이스 캠프 ~ 22) 수업을 마치며 (챕터 01. 리액트 기초, 끝) 1. props vs state props props are read only props can not be modified state state changes can be asynchronous state can be modified using this.setState 상위 컴포넌트가 하위 컴포넌트에 명령할 땐 props를 이용. 하위 컴포넌트가 상위 컴포넌트에 명령할 땐 event를 이용. 2. CRUD 이벤트 발생시 실행하는 함수를 핸들러(handler)라고 함. App.js의 ..

생활코딩! React 리액트 프로그래밍 도서를 바탕으로 React 공부시작. 금일 진도는 65P ~ 125P. 목차로는 01. 리액트 기초내에 13) React Developer Tools ~ 17) 컴포넌트 이벤트 만들기 1. React 디버깅 툴 크롬 앱스토어에서 React Developer Tools 확장도구 설치(edge에 설치함) 그냥 Vue devtools랑 거의 같음. 리액트 기준으로 컴포넌트들 보여주고 state 변경가능하고. 2. state & 이벤트 드디어 나왔다, state. Vue로 따지면 data 영역에 정의되는 애들. state쓰려면 constructor가 필수이며, 거기서 선언 및 초기화. class App extends Component{ constructor(props) {..

생활코딩! React 리액트 프로그래밍 도서를 바탕으로 React 공부시작. 금일 진도는 0 ~ 64P. 목차로는 01. 리액트 기초내에 01) 수업소개 ~ 12) props 1. 세팅 및 개발서버 npm install -g create-react-app mkdir react-app cd react-app create-react-app . npm install -g create-react-app : create-react-app 명령어의 전역(-g)에서 사용할 수 있게 받음 mkdir react-app : react 프로젝트 만들 디렉토리(react-app)생성 cd react-app : 생성된 디렉토리(react-app)로 이동 create-react-app . : 현재 디렉토리(.)에 react 프로..

이 포스팅은 사실 [javascript] var가 let보다 빠르다...? 포스팅을 쓰던 중에, 부가설명이 필요해서 var과 let, const에 대한 내용을 별첨으로 정리하던 내용인데... 이게 또 쓰다보니 제법 길어져서 별도 포스팅으로 발행하게 되었습니다. 0. javascript에서 변수를 선언하기 아이들이 마음껏 뛰어놀 수 있는 놀이터처럼, 컴퓨터로 동작하는 모든 시스템은 메모리라는 놀이터에서 뛰어놀게 된다. 이 놀이터에서 뛰어놀기 위한 값들은 메모리의 한 켠에 적재되고, 적재된 값을 가리키는 변수 혹은 상수를 활용해서 개발자들은 시스템을 구축하게 된다. Javascript도 당연히 변수를 정의하는 키워드가 존재한다. ES6(2015)가 공시된 2015년 이전에는 var이라는 하나의 키워드만 존재..

0. var가 let보다 빠르다고들 한다. 모 프로젝트로부터 헬퍼 요청이 있어서 2주 정도 단기로 투입됐을 때, 코드를 분석하며 의아했던 점 중에 하나는 대부분의 변수가 var로 선언되어있다는 것이었다. 코드를 살펴봤을 때, let을 두고 var를 사용할 이유가 없어보였기에 해당 로직을 개발하신 분께 여쭤봤더니 아래와 같은 답변을 들을 수 있었다. "var가 let보다 빨라요" 사실 당시엔 그런가보다, 하고 넘겼다. 왜 var가 let보다 빠르다는건지에 대한 설명이 부족했지만, 오픈직전의 프로젝트에 헬퍼로 투입된 입장에서 이미 동작하고 있는 로직의 변수선언을 왜 var로 했는지 리뷰하며 수정을 요청드릴 정도로 정신머리가 있지는 았았다. ...물론, 급할수록 돌아가랬다고 변명이다. 개발자로써 직무유기랄까...

문제점 사실 이 부분은 에러라기보단, 아래와 같이 Warning의 레벨이라서, 고치지않아도 node.js 서버의 기동이나 개발시엔 이슈 될 일이 없긴한데... 매번 서버 기동시마다 보이니까, 늘 찝찝한 건 어쩔 수 없다. 해결법 보통 node.js에서 Module not found와 같은 키워드로 시작하는 이슈는 1. 그 npm 패키지 파일이 설치되지 않았거나 2. import하고 있는 대상 파일이 없거나. 이 둘 중에 하나로 수렴하는데, 해당 Warning 메시지 같은 경우에는 2번사항이었다. 해결법부터 설명하자면 ./node_modules/moment/src/lib/locale/locales.js 파일의 코드를 아래와 같이 수정해주면 된다. try { oldLocale = globalLocale._a..