본문 바로가기

개발

 (12)
EC2 서버 배포 자동화 해보자! (feat. Github Action + AWS Code deploy) 회사 프로젝트를 진행하면서 서버 코드가 업데이트될 때마다 EC2에 수동으로 배포해왔다. 유저 테스트 때문에 코드가 엄청 자주 바뀌었던 1월에는 진짜 하루에도 몇 번씩 수동 배포했다. 그때마다 현타가 왔다^^ 시간만 생기면 자동화하고 만다... 이를 갈았다..ㅋ 그렇게 벼루고 벼루다 배포 자동화를 완료했다. 서울사람 프로젝트를 했을때 웹 페이지&서버 배포 자동화를 해본적이 있었기 때문에 나름 자신이 있었다^0^ 그때는 토이 프로젝트다보니 프리티어 EC2를 썼다. 프리티어가 얼마나 구리냐면..;; npm install 만으로도 cpu 사용량이 100%로 치솟아 EC2가 뻗어버려 재시작을 해야 했다. 그래서 그 시절에는.... 1) github action으로 환경변수들을 셋업하고 Docker 이미지를 빌드하..
[Flutter] Image cache intro (0) 나는 클라이언트 개발을 하면서 온갖 플랫폼을 다 써본 것 같다. 안드로이드, 리액트, 리액트 네이티브... 스쳐지나가듯 이것저것 다루다보니 사실 내 전문이다! 싶은건 잘 모르겠다; 그래서 안드로이드로 좀 더 개발해보고 싶다는 욕심이 있어 왔는데... 어쩌다보니 1년간 Flutter로 개발을 하게 되었다ㅎ... Flutter... 이름만 들어도 솔직히 몸이 부들부들 떨린다...ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 최근 크로스 플랫폼 중에 가장 핫한건 사실이지만, 안드로이드에 비해서 레퍼런스도 부족하고.. 트러블 슈팅을 위해 스택오버플로우를 뒤져봐도 제대로된 정답을 찾기가 어렵다. 전문적으로 잘 정리된 블로그들도 찾기가 어렵다. 토이프로젝트를 위해서는 손색이 없어보이지만 상용앱을 만들고자하는 나는 개발하면서 당황스럽고 힘든 점..
Kotlin - internal 접근제어자 회사에서 코틀린 스터디를 시작했다! 클린 코드 스터디 이후 두 번째 스터디다. 개인적으로 코틀린을 써보려고 해봤지만 최근에는 손을 놓고 있어서 다시 보니까 감회가 새로웠다. 이번 스터디를 통해서 코틀린을 더 잘 쓸 수 있도록 많이 배우는 시간이 되었으면 좋겠다!_! internal은 처음 코틀린을 쓸 때는,, 이게 뭥미?? 어떤 경우에 쓰는 녀석인고... 잘 와닿지 않았다. 그런데 이번에 스터디 때문에 공부하다가 문득 한번 써봐야겠다+_+ 싶어서 사용해보고 그 내용을 정리해보게 되었다. internal visibility modifier Kotlin과 Java의 접근 제어자는 거의 유사(?)하다. public, protected, private... public과 private은 똑같다! protecte..
[SS회고] Node.js와 Express (ft. multipart/form-data) 워우! 벌써 5번째 회고다.. ㄷㄷ 예전에 프로젝트를 해볼까 한게 있었는데, 그때 친구가 node.js랑 express로 서버를 만드는걸 봤다. 그래서 이 둘을 사용해서 서버를 만들 수 있다는건 알고 있었다. 또한 웹서버로 많이 사용되는 조합이기 때문에 서버 프레임워크는 빛의 속도로! 채택했다. 학교 다닐때 채팅 만들기 이런거 말고는? 서버 구축은 처음으로 해보는(진짜??) 일이었다. 그래서 앞 길이 구만리처럼... 눈 앞이 깜깜했따... 사용한 서버 프레임워크 Node.js Node.js는 대체 무엇인고...?? 설명을 잘해준 멋찐 블로그가 많다! [Node.JS] 강좌 01편: 소개 | VELOPERT.LOG Node.js 가 뭐지? NodeJS 는 구글 크롬의 자바스크립트 엔진 (V8 Engine)..
[SS회고] Web 환경에서 음성데이터 처리, Web Audio API와 Web Worker 프로젝트를 하면서 어려웠던 점과 느낀 점을 정리하고 싶었던게 원래 목표였는데, 회고록이 점점 길어지고 있다... 이러다 10편까지 가는게 아닌지..?? 그냥 주제를 나누어서 따로 포스팅을 하는게 맞았나 싶지만... 그래도 주제에다가 프로젝트 이야기를 엮어서 할 수 있으니까, 포기하지 않겠다..ㄷㄷ - 3편에서는 음성 데이터가 어떻게 생겼는지에 대해서 알아보았다.. 이번 4편에서는 두구두구두구...; 1. 음성 데이터가 뭐지.. 어케 생겼지? 2. 아니 일단 브라우저에서 마이크 접근이 가능??? 3. 그래서 이제 음성을 어떻게 받아서 저장하지?.. 이 두 가지에 대해 다시 정리해보고 회고해보자^^ Web 환경에서 음성데이터 처리에 사용된 Web API MediaDevices.getUserMedia() 첫번..
[SS회고] 음성데이터 기본 서울사람의 꽃은 음성데이터 처리이다! 프로젝트 초반 일주일은 이 부분만 팠다. 간단한 것 같지만 막상 시작하려고 하니 이런 점들이 걱정되고 궁금했다. 1. 음성 데이터가 뭐지.. 어케 생겼지? < (급 결론) 다음편에서는 Web 환경에서 마이크 접근 & 오디오 데이터 처리에 대해서 회고해보쟈~~
[SS회고] React와 React Router 삘 받았을때 열심히 회고해야한다^_^ 사용한 웹 프레임워크 React 내가 1) 하이브리드 앱을 React Native로 만들려는 시도를 한 적이 있고, 2) 회사에서 자바스크립트도 다뤄보았고, 그래서 React를 웹 프레임워크로 선정했다. React를 쓰면서 어려웠던 점은 버튼에 ripple 효과를 넣어볼까 하고 덤볐던게 지금으로서는 젤 기억에 남는다. 버튼의 동작은 router를 이용해서 다른 라우터를 push을 하는 것이었다. 그런데 버튼을 누르면 component의 state를 바꿔서 새로 렌더링을 하면서 버튼에 동그라미가 쓔욱 커지는 애니메이션을 주는데, 그러니까 push 동작이.. 안먹는 것이었다. 부들부들거리면서 어떻게 해야하나 고민했는데. 어차피 push 동작이 매우 빠르게 일어나기 때문에..
[SS회고] I'm 서울사람 프로젝트 회고 시작 진짜 벼루고 벼룬 포스팅이다.. 후후.. 몇 주간 댕굴거리다가 깨작깨작 적어본드아. 확정 목차는 아니지만@_@ 다음 내용들로 회고록을 구성해보자 한다. 사용한 웹 프레임워크, React와 React Router 음성데이터 기본 웹 환경에서 음성데이터 처리, WebAudio API와 Web Worker 사용한 서버 프레임워크, Node.js와 Express 도메인 및 https 설정 배포 자동화, Docker와 Github action 사용한 카카오 API, STT API, 링크 API, 애드핏(광고) 프로젝트 시작 프로젝트 이름은 I'm 서울사람. 프로젝트 시작은 누가 하자고 했던 건지 기억이 가물가물하다. 아이디어는 내가 낸 건 확실하다! 서울사람 프로젝트를 시작하기 전부터 회사 동기 한 명과 여러 아..

티스토리툴바