네이버 장소검색 api를 사용하던 도중, 브라우저 요청에서 cors 에러가 발생하는 문제를 겪었다. 요청 헤더에 id, secret이 고스란히 노출되기 때문에 브라우저 요청이 막혀있다. 개발 환경에서야 proxy 등을 사용해서 이슈 우회가 가능하지만, 실제 배포 후에는 적용되지 않기 때문에 해당 api를 대신 호출해줄 서버가 필요하다. 간단하게 쓰고 싶은데 언제 또 서버 구축하고... 배포하고.... 이럴 때 람다를 통해 서버리스로 간단하게 구축하면 된다. 완전 간단하게 알아보자. 1. AWS계정으로 람다 콘솔에 통해 로그인한다. 2. 함수 탭으로 이동 후 함수 생성을 누른다. 3. 함수 이름을 적고 생성을 누른다. 4. 생성에 시간이 살짝 걸리니 냉장고에서 물을 떠온다. 5. 생성된 함수 왼쪽 아래에 ..

몸이 근질근질 거리는 여름. 남는 시간에 미리미리 생산성을 올려줄 수 있는 툴을 만들 생각으로 옆자리 동료분께 여쭤봤다. "혹시 지금 프로젝트에서 제일 반복, 단순 노동인 부분이 어디일까요?" "음... 이미지 에셋 import 후 상수 관리하는 부분이요!" 나 역시 기존 프로젝트에서 이미지 에셋을 관리하는데에 적잖은 노력을 들였던 부분이 생각났다. 좋아. 오늘은 이 반복노동을 줄일 수 있는 툴을 만드는데 시간을 보내보자고 마음을 먹었다. 먼저 목표를 정했다. import -> 네이밍 -> export의 번거로운 과정 없이 에셋 폴더 기준 자동 상수 정의가 되게 하자. 에셋의 이름은 파일명 및 폴더명의 조합으로 만들어준다. 폴더구조와 파일명에 신경쓰면 그게 곧 해당 에셋의 이름이 된다! (ex. asse..

ryan-custom-hooks react custom hook made by Ryan www.npmjs.com GitHub - Jonghakseo/ryan-custom-hooks: ryan's custom hook ryan's custom hook. Contribute to Jonghakseo/ryan-custom-hooks development by creating an account on GitHub. github.com 축) 커스텀 훅 드디어 배포 자주 사용하는 나만의 커스텀 훅을 만들어서 배포하고 싶은 생각이 있었는데, 문서화 작업이나 컴파일 작업 등의 환경을 만들기 귀찮다는 핑계로 미루고 있었다. 그러다가 이러한 귀찮은 작업들을 다 해놓은 템플릿을 깃헙에서 발견하고 바로 만들게 되었다. Git..

Ryan's ZZaplin Layout visualizer like a Zeplin chrome.google.com 오랜만에 짭플린이 업데이트 되었습니다... 기존 짭플린에서 사용하던 css class명이 fixed라서, 몇몇 웹 사이트에 있는 fixed요소랑 출동이 있었습니다. 그리고 로직상 clear키인 C버튼 연타시 정상적으로 작동하지 않던 부분, 페이지 레이아웃 요소를 보는 B키가 텍스트 입력시에도 토글되는 부분, 전역으로 짭플린 ON/OFF하는 기능 추가, 마지막으로 팝업창 내 가독성 확보를 위한 레이아웃 수정이 있었습니다. (조언을 주신 회사 인턴 스타크님에게 감사의 말씀을...)

오랜만에 올리는 취미 개발이다. 사실 그 사이에 만든 다른 게 있긴 한데.... 그 포스팅은 좀 나중에 올리기로 하고 가장 최근에 일렉트론으로 만든 녹취록 작성기 얘기를 해보려고 한다. 처음 일렉트론 이야기를 듣게된 계기는 지인 개발자분의 언급이었다. 얼마 전, 한창 리액트를 공부하며 재미를 느끼고 나름 나름 스터디도 진행하던 도중이었다. "나중에 관심있으면 리액트로 윈도우 프로그램도 만들어보세요." "네?? 그런것도 가능해요?" "일렉트론이라고 node.js로 만들어진 프레임워크 있어요" "오오....!" 최근 크롬 확장프로그램을 리액트로 만들어 보면서 리액트 생태계의 확장성에 감탄을 마지않던 차였기 때문에 '조만간 일렉트론으로 뭐라도 한 번 만들어보고 만다'라고 단단히 벼르고 있었다. 그러던 중, 사..

요즘 일을 본격적으로 시작하면서, 하루하루 그동안 해왔던 공부에 비해 굉장히 밀도 높은 학습을 하게 되었다. 변명처럼 들리겠지만 그간 포스팅을 하지 못했던 이유도 과거의 내 미숙함이 덕지덕지 묻어있는 블로그를 마주할 용기가 없었기 때문이다. 하지만 반대로 생각해보면 내가 그만큼 성장하고 있다는 뜻이니 철면피를 깔고 오랜만에 새 포스팅을 쓴다. 웹 클라이언트 개발자로 일을 하면서 당연하지만 디자이너분들과 협업할 일이 참 많다. 특히 디자이너 분들이 제플린을 통해 제공해주는 가이드라인은, 나에게 많은 고민거리(컴포넌트 구조를 어떻게 짤 것인지)와 편함(사이즈 가이드라인이 되어있어 고민 할 필요가 없다)을 동시에 선사해주고 있다. 다만 아쉬운 점은 제플린에서는 요소 간 간격을 마우스 오버를 통해 쉽게 잴 수 ..