딱히 프론트나 리액트를 자세히 알지도 좋아하지도 않는 사람의 글 입니다 S3에서 static하게 웹을 서비스하기로 했을 때 한가지 문제점이 있었다. 홈 화면과 각 항목을 눌렀을 때의 페이지를 구현하고 싶은데 static한 웹에서는 이것을 어떻게 redirect해야하나 라는 고민을 하게되었습니다. 물론 이 것을 s3안에 object 이름으로 url을 맞춰서 관리하는 방법도 있지만 뭔가 평범하게 url로 redirect하는 것 처럼 하나의 웹페이지가 가상url을 가지는 것과 같이 구현하고 싶다고 생각했습니다. 그렇게해서 찾게된 것이 "react-router-dom" 라이브러리입니다. 사용 예시 코드부터 보면 다음과 같습니다 ...
원래는 server side rendering을 공부할 겸 lambda를 활용하여 server side rendering을 구현하려 했으나 다음과 같은 이유에서 s3 static web hosting으로 방법을 변경하였다. 1. node의 무식하게 많은 module들 관리가 번거롭다. 일반적으로 labmda에 deploy하게 되면 그 많은 module들이 다 올라가게되고 이는 lambda가 trigger 될 때 무거워지는 요인이 되며 개발한 내용을 갱신할 때 마다 많은 부담이 된다. 그렇다고 이 모듈들을 s3로 해서 연동한다던지 하기에는 모듈을 불러오는 시간이 길어질 것 같아서 비효율적이라고 판단했다. 사람들의 다양한 방법들도 보았는데 솔직히 그 구성에 비해 메리트가 알기 어려웠다. client side rendring보다 반응이 느린 SSR이 될 것 같은 예감! ...
앞선 글에서는 AWS의 EC2인스턴스를 생성하여 cloud9을 연결하였다. /?p=97 하지만 t2 micro는 아주 최소한의 컴퓨팅 성능을 갖춘 인스턴스로 오라클 클라우드에서 사용중인 A1인스턴스를 사용하고 싶었기에 이번에는 cloud9의 외부서버 연결 기능을 이용하여 오라클 클라우드의 쿼드코어 인스턴스에 연결시키기로 했다. 이러면 ec2비용도 안든다! 이번에는 Existing compute 를 사용한 후 로그인에 필요한 user와 Host정보를 입력한다. 그 다음 위의 ! 마크에 나오는 SSH public key를 복사한 후 사용 할 인스턴스에 ssh 로그인을 하여 ~/.ssh로 이동하여 authorized_keys파일에 추가하고 없으면 해당 파일을 생성하여 추가한다 ...
Mixcloud는 개인이 만든 DJ믹스셋 또는 음원을 업로드 할 수 있는 플랫폼인데 10개의 업로드 제한이 있고 또 불편한 부분이 많아서 직접 만들어보려고 합니다. 현재 환경의 특성상 불가피하게 개인용 컴퓨터에서는 작업이 불가능하여 고민하던 중 AWS의 Cloud9이라는 서비스를 이용하면 웹 브라우저만 가지고 필요한 개발환경을 구축할 수 있을 것 같다고 생각하게 되었습니다. 또 여기서 아무것도 안하는 동안 IPv6를 지원 안해서 올라가버린 Lightsail인스턴스 값을 생각하니 뭐라도 써야할 것 같아서 이렇게 또 글을쓰게 되었습니다. AWS cloud9은 AWS에서 지원하는 웹 IDE서비스로 EC2 인스턴스와 해당 EC2인스턴스 내부의 코드를 편집하기위한 IDE로 구성됩니다. EC2관련비용 ( 인스턴스, 스토리지, 네트워크 등 )만 지불하면 IDE자체에대한 비용은 없습니다. 홈페이지에 적혀있는 가격 예시는 다음과 같습니다 ...
군대에 있는 사이에 블로그에 여러가지 말썽이 있어서 이번에 휴가 나와서 고쳤습니다 먼저 누군가가 워드프레스의 mysql 데이터베이스를 직접적으로 조작한 사건이 있었습니다. 이로 인해 특정 조건에서 (ex. 트위터에서의 링크 사용) 스팸사이트로 redirect하게 되기도 하고 제 계정이 admin권한이 뺏겨서 로그인 못하게 되기도 했습니다 수동으로 관리하고 가짜 admin계정등을 전부 방지하고 아예 유저 데이터베이스 테이블을 write를 못하게 해버렸습니다 다행히 instance에 직접적으로 침입한 흔적은 없어서 wordpress의 플러그인 등을 정리했습니다 최근에는 또 블로그 서버가 오랜시간동안 다운되어있던 것 같습니다. 아마 저 사건을 해결하면서 돌린 백신이나 워드프레스 자동업데이트 중 하나가 말썽이였던 것 같은데 백업은 가지고 있기도 했어서 해결했습니다! ...
결과물 https://twitter.com/EB36_Be_B3b/status/1576431492720259072?s=20&t=Apa3Q7Qp1-s73raR_15Ttg 맥북에는 CPU사용량에 맞춰서 뛰어다니는 고양이가 있다고하는데 Windows에는 없는가 또 이걸 고양이가 아니라 원하는대로는 불가능한가? 에서 시작하게 되었습니다. Windows 앱 개발 용 언어는 써본 적도 없고 대부분 이런 취미용 코드는 Python으로 작업하기 때문에 이번에도 Python으로 간단하게 만들 방법은 없나? 하고 고민하다가tkinter 모듈을 이용하여 화면을 띄우는 방식으로 제작하였습니다. 이후 다양한 움짤 등을 확보하면 좀 더 자연스럽게 화면에서 걸어다니거나 상호작용하는 모니터 안에 흔한 오타쿠게임들 마이룸(ex. 프리코네 길드하우스) 같은 기능을 만들고 싶다고 생각합니다. ...
트위터에서 어플리케이션을 사용할 때 다음과 같은 인증창을 보신 적이 있으실 겁니다. 어플리케이션에 계정을 인증하며 이 어플리케이션이 무슨 권한을 가지는지를 설명하는 창이죠. 이 것을 요청하고 여기서 연계앱인증을 누르면 무슨 일이 일어나는지 또 그 것들을 어떻게 관리하는지에 대해 설명하려고 합니다. 1. 무엇이 필요한가? API KEY and SECRET 먼저 어플리케이션과 어플리케이션의 API KEY 와 SECRET이 필요합니다. T witter Developer Dashboard 에서 원하는 어플리케이션의 API와 SECRET을 기록해 둡니다. 또는 어플리케이션을 만듭니다. ...
약 2월초부터 Spotify의 현재 재생중인 노래를 Twitter의 닉네임에 표시 해 주는 어플리케이션을 제작하여서 쓰고 있었는데 이번 기회에 이걸 공개적으로 서비스가 가능하게 호스팅 하는 작업을 진행하였습니다. 소규모 프로젝트다보니 제 단일 인스턴스의 공개IP만 가지고 이것저것 서비스 앱을 띄워서 운용하는 것도 가능했지만 관리의 편리함과 확장성 그리고 체험을 위해 AWS위에서 설계하였습니다. 시간이 날 때 마다 제작 과정을 하나하나 적어가려고 합니다.. 기분파대로 했더니 사실 작업 자체는 불타올라서 2일만에 끝냈지만요 ㅋㅋㅋ 똑같은 앱이 아니더라도 Spotify의 API나 Twitter의 API를 Python3을 활용한 개발에 흥미가 있으신 분들에게 도움이 되면 좋겠습니다. ...
3/31오후에 마지막 task를 진행하고 제 8월초부터 진행하던 인턴 생활이 끝났습니다. 제 개인 repository가 모든 Pull Request를 해결하고 main branch만 남겨지니 시원섭섭하더라구요 프론트엔드부터 백엔드와 데이터베이스까지 폭넓은 체험이 가능했고 정말 다양한 기술들을 익힐 수 있었습니다. 특히 스타트업의 법인인가부터 있으면서 정말 스타트업을 위해서 얼마나 많은 일과 노력이 필요한지 또 그런 과정을 회의를 통해 어떻게 해결하는지를 보고 배울 수 있는 정말 귀중한 시간이였습니다. 어떤회사였는가? 데이터 매니지먼트 솔루션을 SAAS로 제공하는 회사였습니다. 기업들의 다양한 데이터베이스들을 단 하나의 서비스로 묶어서 회사의 관련 직원들이 모든 데이터베이스로부터 데이터테이블을 검색/조회가가능하며 ( 실제 내부 데이터는 접근하지 않음) 태그나 별칭을 부여하여 관리하고 또 해당 데이터의 추가적인 정보를 제공하는 서비스를 개발하는 회사입니다. ...
인턴으로 일하면서 다같이 git을 쓰다 보니 학교 과제나 혼자서 쓰는 git과는 다른 일이 자주 일어나고 그에 따른 새로운 깃 활용 법을 익혀가는 느낌이네요 늦은 감이 있지만 여기에 하나하나 적어두려 합니다. 기초적인 코드 수정사항 반영-커밋-푸쉬 보다는 여러가지 깨알 같은 팁들을 적어두려 합니다 깃헙에다가 사고를 안 치는게 가장 좋지만 맨날 사고를 치니 이런 것들만 찾아보게 되네요 이렇게 3개의 파일이있는 레포지토리를 예시로 작성하겠습니다. Commit메시지수정 또는 파일 추가 (Push 전/후 주의점) Commit의 Push는 생각보다 아주 신중해야 한다는 점을 많이 느끼게 되었습니다. Push라는 명령을 하는 순간부터 git은 여러가지로 머리가 아파지더라구요 git status로 파일을 보고 필요한 파일만을 add 한 다음에 반드시 diff 명령 등으로 수정사항을 확인하고 누락사항이 없나 꼼꼼하게 확인 후 push하는게 가장 중요합니다. force push로 수정할 수 있으나 force push했다는 기록이 남기 때문에 선호하지 않는 경우도 있으며 force로 덮어 씌울 때 진짜 본인이 정확히 무엇을 수정하고 강제로 덮어쓰는지 정확히 파악하지 못하면 정말 골치아픕니다… ...