글쓰는 개발자

요즘 하던 일을 정리하느라, 너무 바쁜 나날을 보내고 있는데 그 덕에 포스팅 주기가 엿가락처럼 너무 늘어지게 됐네요. 될 수 있으면 1주 1포스팅 정도는 지키고 싶었는데...라는 안타까운 마음을 서두로, 이번 포스팅을 시작해보도록 하겠습니다. 이번 도서리뷰도 리액트 책의 리뷰다. 일전에 했던 리액트 관련 도서리뷰(생활코딩! 리액트 프로그래밍)가 입문자를 위한 도서였다면 이 책은 입문자보단 한 단계 더 나아간 사람들이 읽기 좋은 도서라는 느낌을 강하게 받았다. 여기서 왜 한 단계 더 나아간 사람들, 이라는 표현을 썼냐면 이 책에서 설명하고자 하는 리액트에는 함수형 프로그래밍에 대한 저변이 짙게 깔려있기 때문인데 실제로 책의 목차를 보면, 아래와 같이 초반부를 구성되어있다. 01. 리액트 소개 02. 리액트..

도서리뷰라고 글을 쓰기 시작했는데, 어째 서두가 더 길어져버린 이상한 포스팅 무언가를 배우고자 할 때, 보통 사람은 2가지로 나뉘게된다. 이론은 일단 겪으면서 깨달아가겠다는 실전파와 실천에 앞서 이론부터 탄탄해야한다는 이론파. 둘 중 어떤 방식이 더 뛰어나다, 라고는 누구도 말 할 수 없지만 적어도 나한테는 어떤 방식이 더 좋은가, 라고 묻는다면 대답은 쉽다. 나는 아래에서부터 쌓아올려가는 이론파기 때문이다. 어쩌면, 글 쓰는 걸 좋아하고 읽는 걸 좋아하는 성격탓인지 좀 더 실전보다는 먼저 읽고 쓰며 머릿속에 넣어둬야 마음이 편하다. 그런 입장에서, 어떤 이론 혹은 스킬들을 받아들이고 활용해야할때마다 부딪히는 하나의 벽은 무엇을 보고 공부할 것인가, 이다. 혹자는 공식 문서, 혹은 공식 사이트를 통해서 ..

생활코딩! 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의 불변성)에서 설레발치듯 '밑밥'이라는 표현을 써서 이렇게 빈 포스팅을 남겨두게 되었습니다(밑밥을 깔아뒀더니 순서상 다른 주제로 포스팅하기가 뭔가 애매해져서...이렇게 영역부터 차지해두려고 합니다) 그래도 미완이지만 포스팅을 하는김에 또 썰을 풀어보자면, 이번 포스팅에서 다루고싶었던 주제는 React.js와 Vue.js에서 데이터를 바라보는 관점, 혹은 다루는 차이에 대해서 작성을 하려고 했습니다. 저는 보통 기술 포스팅을 할 때면, 눈을 감고도 입에서 술술 나올만큼 완전히 체화된 지식을 바탕으로 포스팅하려하는 편입니다. 그러다보니, 아직 ..