글쓰는 개발자

거두절미하고, 회사 선배의 결혼 게시글을 쓰게되었는데... 이게 참, 사내 인트라넷에 올리는 거니까 흔히 말하는 회사스럽게 쓸 법도 한데, B급 갬성글을 좋아하는 나로써는 그런 딱딱하고 평범한 게시글은 지양하는 편이다. 실제로 3년전에 한땀한땀 정성스레 썼던 13년지기의 결혼게시글은... 게시판 글 용량초과로 10번이나 Reject 당하고 겨우 올렸던 기억이 있을 정도니까. 그래서 이번에도 노멀한 글은 결코 쓰고 싶지 않았고, 그러던 차에 예전부터 만들어보고 싶었던 결혼 기념 미니게임을 만들어서 올리면 어떨까, 라는 생각이 들었다(이 생각 들자마자 뭐부터 개발할 지 신나기 시작함) 그 와중에, 단 한가지 아쉬운 점이라면 결혼식이 토요일이라 통상적으로 수요일에는 결혼게시글을 올려야하는데...게시글을 올려달..

생활코딩! 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 공부시작. 금일 진도는 202P ~ 245P. 목차로는 02. 리액트 클래스 스타일 vs 함수 스타일 (챕터 02, 끝) 1. function & class React에는 컴포넌트 생성 방법이 2가지임. 하나는 funciton, 하나는 class. 기존에 function 방식보다 class 방식이 선호됐던 이유는, function에서는 state 값을 가질 수 없고 + 라이프 사이클 함수를 사용할 수 없었다. 하지만 2019년 2월 6일에 릴리즈한 React v16.8부터 function에서도 state와 라이프 사이클 함수를 활용할 수 있게 도와주는 훅(Hook)이 도입되면서, class보다 function 방식에 익숙한 이들에게 환영받..

생활코딩! 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 프로..

1. awesome-devblog 최근에 개발관련 기술 포스팅을 검색하다보면 유독 Velog에 포스팅된 것들이 많이 나오길래, 스마트폰 기변병마냥 블로그를 한 번 더 갈아타야할때인가 싶어서 이래저래 살펴보다가... 결국 내가 쓰는 글 스타일에는 티스토리가 적격인 것 같아서 스테이하게됐다. 그리고 그렇게 리서치하는 과정에서 awesome-devblog 라는 서비스를 알게됐는데... 위와 같은 형태로 구독받을 이메일만 입력하면 매일 오전 10시에 기술 블로거들이 전날 포스팅한 내용이 리스트 형식으로 메일로 도착하게 된다. 저렇게 메일로 받은 포스팅을 클릭해서 들어가면 해당 포스팅이 나오는 형식이다. 어릴때 등교하려고 집 문을 열면, 현관앞에 놓여진 조간신문같은 느낌인건데 기대해던 것보다 괜찮아서 점심식사후나..

그레이입니다, 오랜만이네요. 놀랍게도 마지막 기술 포스팅이 작년 11월이네요. 그러니까 대충 100일 정도는 아무런 글도 쓰지 않았다는거죠. 9월 중순경 투입된 프로젝트가 12월에 운영레벨로 최종이관이 되었고 그 과정에 있어서 11월부터 주말출근이 이어지는 빡센 일정과, 이관해야 할 메뉴얼정리를 비롯해서 운영자들 교육까지 호로록 달렸더니 어느새 2020년을 지나 2021년이더군요. 사실 1월은 제법 한가했습니다. 흔히 말하는 농한기라고하죠. 실은 프로젝트가 마무리되어가는 시점에 또 다음 프로젝트지가 정해져서 1월에 이미 투입되었어야합니다만 코로나로 인해 프로젝트 일정 전체가 딜레이되버리는 바람에 차일피일 투입이 미뤄지고, 그로인해 한가해져버린거죠. 그래서 이때다 싶은 생각에, 대기하면서 하고싶었던 일과 ..