(2022/6/30 사내 테크톡에서 발표한 내용을 블로그에도 작성)안녕하세요. 카카오 N TF에서 서버 개발을 담당하고 있는 Joo 입니다.저는 다음에서 한때 한메일 익스프레스였던 다음메일 개발을 시작으로 브런치, 티스토리, My구독을 거쳐 최근에는 N TF에서 새로운 서비스를 개발하고 있는데요. 서비스 개발을 10여년, 운영툴 개발도 10여년 한 것 같습니다.“서버 개발자를 위한 운영툴 개발”이라는 주제로 그동안 운영툴 개발을 하면서 고민했던 부분들에 대한 이야기를 나누어 보고자 합니다.운영툴 어떻게 만들고 계신가요?몇달을 고생해서 드디어 서비스를 오픈합니다. 서비스를 오픈했다는 기쁨도 잠시, 바로 운영이슈가 쏟아지기 시작합니다. “공지사항 수정해주세요.” “배너 다른 이미지로 교체해주세요.” “OOO..

react를 사용하는데 redux는 필수적인 요소라고 할 수 있다. 이제는 다른 방법들도 많은 것 같지만 결국 redux와 같이 app 전체에서 공유하는 공통 state를 사용하는 것은 비슷하다. import React, { Component } from 'react' import { connect } from 'react-redux' import { changeName } from './actions' @connect(state => ({ name: state.name }), dispatch => ({ handleChangeName: (name) => { dispatch(changeName(name)) } })) class MyComponent extends Component { constructor(..

이 발표를 보고나서 Dan Abramov에게 묘한 매력을 느꼈다. 영어도 잘 못하면서 팔로우를 시작했다. Reactjs에 대해서 이런저런 것을 많이 보게 되었다. 그리고 어느 덧 발표했던 기능이 정식출시했다. 이름은 React Hooks다. 기본 개념 Hooks소개의 Motivation에도 말하고 있지만 Hooks의 기본 목적인 간결함이다. 다음의 코드는 Hooks를 사용한 코드다. import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 이 코드가 얼마나 ..

그동안 React를 사용하다보니 새로운 프레임워크에 눈을 잘 못 돌렸는데 -아니 돌릴 필요가 없었는데- 요즘 Vue.js라는 것이 핫하다는 것을 들었다. 궁금해서 문서를 조금 보긴 했지만 구 angularjs와 비슷하다는 느낌만 받았을 뿐 특징같은 건 파악하지 못했다. 주말동안 혼자있는 시간이 많이 생겨서 이 기회에 Vue.js에 대해서 알아보기로 했다. comment-sample 이전에 angularjs와 handlebar로 댓글 sample code를 만들었는데 지금도 그런 방식으로 react와 vuejs를 비교해서 댓글 sample code를 만들기로 했다. (사실 react로도 이미 만들었지만 그 코드는 react를 잘 모를때 만들어서 너무 보기가 어려워 다시 만들기로 했다.) 만들려고 하는 샘플..

codemirror에 한참 빠져있을때 간단히 만든 markdown to html 에디터가 있다. 여기에 tistory api로 글 보내기도 붙이고 글 가져오기, 로컬에 임시 저장하기 등등을 붙여보고 싶었는데 솔직히 말해서 엄두가 나지 않았다. 아무래도 코드가 길어질테니 파일을 분리하는 것이 관리하기 편할텐데 분리한 모듈을 관리하고 merge해서 테스트하고 하는 과정이 굉장히 번거롭게 느껴졌다. 그러다가 react 공부하게 되었고, 부끄럽게도 아직 몰랐던 CommonJS도 알게 되었다. react에 webpack을 적용하면서는 눈이 번쩍 뜨이는 것 같았다. 이런 방법이 있는데 왜 그동안 그렇게 고생했던 것일까 싶다. (사실 CommonJS만 알았어도 더 속도가 붙었을 것 같다.) 지금부터 이전에 만들었던 ..