Dart에서 자주 쓴 Optional 간만에 글을 남긴다. 최근 마와셀 앱 업데이트 후 와인 정보를 위해 웹쪽을 다시 개발하고 있다. 코로나 걸려서 잠시 쉬다가, 침대에서 빈둥거리기도 시간이 아까워서 누워있다가, 옵시디언에 정리해둔 내용을 올려둔다. 웹(Typescript)을 개발하다가 앱(Dart)로 넘어갔을 때 Typescript와 매우 흡사해서 바로 사용하는데 큰 문제는 없었다. 그 중 Dart의 유용한 기능 중 하나가 옵셔널(Optional)이었다. Dart의 경우 버전이 올라가면서 Null-Safe한 특성이 추가되었는데, 아래와 같이 사용된다. 그렇다. 이 기능은 Typescript에도 존재하는 기능이다. Javascript를 사용할 때는 뭐 그냥 null이던 undefined던 타입 체킹을 안하고, 무식하게(?) 그냥 쓰기에 볼 일이 없지만, Typescript를 사용한다면 타입 명시가 중요하다. 근데 사용하다 보면 특정 값의 속성이 있어도, 없어도 무관한 값이 있다. …

이미지를 다루다가… 전에 마와셀 1.0 버전대 개발을 하다 겪은 일이다. 마와셀에는 와인 사진 및 셀러, 시음 노트에 이미지를 첨부하는 기능이 있다. 안드로이드에서는 잘 되어서 문제없이 넘어갔다가, iOS도 실제 디바이스에서 테스트를 진행하면서 문제가 없음을 확인했었다. 하지만 iPad용 스크린샷이 필요해서 시뮬레이터에서 구동하다가 문제가 생겼다. 이미지를 못 가져옴 시뮬레이터를 끈 다음 빌드 후 다시 접근하는데 이미지가 없어서 앱 크래시가 발생했다. 물론 2.0에서는 이미지가 없을 때 기본 이미지 표시로 바꾸긴 했다. 마와셀의 이미지는 파일명만 가져와서 저장을 하게 된다. 경로의 경우 조립해서 사용하는 방식을 사용했다. 로직에는 문제가 없었고, 뭔가 이상함을 느낀 나는 몇 가지 로그를 남기며 테스트를 했다. 그 결과 시뮬레이터의 이미지 경로가 계속 변경함을 찾을 수 있었다. 첫 번째 테스트 빌드 하였을 때 경로 /Users/testMan/Library/Developer/Core…

예전에는 잘 사용하던 WillPopScope 플러터(Flutter)를 개발하다 보면, 보통 iOS, Android 두 플랫폼을 대상으로 개발을 한다. iOS는 뒤로가기 라는게 없고, 바로 홈으로 돌아가지만, 안드로이드의 경우 물리(또는 소프트 버튼)을 통해서 뒤로 가기를 할 수 있다. 이런 조작을 보통 네비게이션 조작으로 보는데 WillPopScope의 경우 네비게이션 조작을 돕는 기능이라 할 수 있다. 보통 맨 최 상위 위젯에 아래와 같이 보통 작성한다. 근데 저 코드를 사용하면 아래와 같은 경고가 뜬다. ‘WillPopScope.new’ is deprecated and shouldn’t be used. Use PopScope instead. This feature was deprecated after v3.12.0-1.0.pre. 3.12.0-1 부터 Deprecated 되니 대안으로 PopScope를 사용하라고 한다. 왜 사라짐? 이건 안드로이드가 올라가면서 안드로이드 14 …

간만에 글 작성과 리뉴얼… 정말 오랜만에 개발 블로그에 글을 남겨보는 것 같다. 여기가 흑우집합소에서 글이 멈춰 있는걸 보면 정말 많이 방치한 듯 싶다. 흑집소 개발 이후 네이버 블로그만 열심히 글을 남겼다. 주로 와인 시음과 내 로또 서비스인 흑우집합소 관련 글을 남겼다. 흑집소를 개발하면서 와인 앱이 필요하다는 생각이 들었고, 아이디어를 대충 정리해서 앱으로 올렸다. 뭐 이건 개인 서비스 후기로 따로 글을 남겨 보기로 하고… 원래 개발 블로그를 옮겨가려 했다. 개발 블로그 이사? 현재 대다수 사람들이 그러겠지만, 나도 시간이 없다. 아주 먼 옛날 내가 너무나도 순수한 개발자 시절… 정말 개발자로 열심히(?) 살던 때 나도 블로그는 직접 만들어서 써야겠다! 라는 생각이 있었다. 당시 React나 Vue가 있었지만, 이렇게 까지 많이 쓰진 않았고, 보통 개발자 블로그는 지킬(Jekyll)이나 헥소(Hexo)를 많이 사용하였다. 그리고 나도 초반엔 지킬 쓰다가 헥소로 넘어왔다. 그래…

배포를 하려고 하는데 문제가… 개발을 끝내고 XCode에서 빌드를 돌려서 앱컨넥트에 업로드 후 제출하려 했다. 근데 아래와 같이 에러가 뜨면서 문제 발생했다. 새 앱 및 앱 업데이트는 공개(GM) 버전의 Xcode 11 이상, iOS, macOS, watchOS 및 tvOS SDK로 빌드해야 합니다. 베타 버전으로 빌드된 앱은 허용되지 않습니다. 저 에러를 보고 내가 개발용으로 빌드해서 올렸나 싶어서, 다시 클린으로 날리고, 운영용으로 빌드 후 재배포 하였다. 그런데도 똑같이 에러가 발생했다. 그래서 난 찾아보니 앱컨넥트 문제라고 했다. 내가 사용한 XCode 버전은 15.0.1인데 이게 문제였다. 스택오버플로우인가 다른 외국 포럼인가 글을 읽어보니 XCode를 15.0.0 버전으로 다운그레이드하면 가능하다고 했다. 시간이 지나면 해결을 해줄 문제지만 바로 등록을 해야 했기에… 일단 XCode 버전을 낮춰서 해결하기로 했다. 애플 개발자 계정으로 로그인 후 애플 다운로드사이트로 …

갑자기 빌드가 안되었다. 번들 ID 쉽게 바꿔서 개발용 배포용 앱 나누기라는 포스팅에서 소개한 것 처럼 배포용으로 바꾸고 Xcode에서 빌드를 돌렸다. 근데 에러가 발생했고 에러의 문구는 다음과 같다. 이게 왜 이런지 한참을 찾다가… StackOverFlow에서 답을 찾을 수 있었다. 이게 왜 문제? 전에 포스팅한 번들 ID 쉽게 바꿔서 개발용 배포용 앱 나누기내용에는 아래의 코드가 있다. 그렇다. 내가 쓰는 AppId에는 안드로이드에서 사용한 값을 그대로 써서 -이 들어가 있다. 근데 Apple은 하이픈(-)을 허용하지 않는다. 그래서 이걸 언더바(_)로 변경해줬더니 아주 잘 되었다. 현재 쓰는 코드는 아래와 같이 iOS / Android 를 구분시켰다. 뭔가 에러를 많이 겪는데 하나씩 배워가면서 채워가는게 재미있다. 이게 왜 문제?

두 번째 리젝에서… 두 번째 받은 리젝에 다음과 같은 메세지가 있었다. 내가 만든 기능 중 로또 QR조회 라는 기능에서 해당 기능을 테스트할 수 있는 샘플 QR을 달라 했다. 이런거 가지고도 리젝을 때리는구나 싶었다. -_-;; 그래서 앱 심사정보의 메모란에 설명을 적고, 첨부파일을 달아뒀다. 이렇게 제출했더니 해당 이슈에 대한 건은 사라졌다. 다만 AppTrackingTransparency 관련 이슈만 계속 남아있었다…

또 문제가 발생… 이전 Flutter - 애플 앱스토어 리젝 사유 Guideline 2.3.3 Performance 포스팅에서 아이폰 시뮬레이터는 잘 되었는데, 아이패드 시뮬레이터를 키고 VScode에서 구동하려 하니 에러가 발생했다. 내가 콘솔을 복사하지 못해서 스택오버플로에 있는 것을 샘플로 가져왔다. 진짜 어떤 것을 해도 안되어서 검색하다가 알게 되었다. 해결법도 매우 간단하다. How To? 위 이미지를 참고해서 설명하면… Xcode를 열고 좌측 상단의 Runner를 클릭하고, Build Settings항목을 클릭하면 설정이 나온다. 이 값들 중 Architectures항목 하단의 Supported Platforms 항목을 iOS로 맞춰주면 끝이다. 참고사항 StackOverFlow How To? 참고사항

허구한날 에러 발생 이전 Flutter - 애플 앱스토어 리젝 사유 Guideline 2.3.3 Performance 포스팅에서 아이폰 시뮬레이터는 잘 되었는데, 아이패드 시뮬레이터를 키고 VScode에서 구동하려 하니 에러가 발생했다. 맨 처음엔 Xcode에서 해야 하나 싶었는데 찾아보니 매우 간단한 문제였다. How to? 맥에서 환경설정으로 이동하고 벤츄라(Ventura) 기준 좌측 사이드 메뉴를 보면 개인정보 보호 및 보안이라는 항목이 있다. 선택하고 항목을 좀 내리다보면 아래와 같은 이미지가 뜬다. 저기서 확인 없이 허용 버튼을 클릭해주면 끝이다. 자매품으로 idevicesyslog라는 것도 뜨는데 위와 동일하게 해결해주면 된다. 만약 확인 없이 허용이 안뜨면? 내가 경험을 했는데 개인정보 보호 및 보안에 가서도 확인된 개발자가… 라는 항목이 안떴다. 이럴 때는 시뮬레이터를 완전 종료하고, VSCode 및 열린 Xcode를 모두 닫은 후 다시 VSCode만 키고,…

앱스토어 총 세 번째 리젝… 지금 글을 쓰는 27일 오후 시간 기준으로 막 심사에 들어갔다. 무엇이 날 이렇게 괴롭혔는가? 바로 AppTrackingTransparency framework 라는 앱 추적 투명성 관련 문제다. 나는 플러터로 개발을 했고, 해당 이슈를 처음엔 몰랐었다. 처음 리젝을 받고 해당 문제를 알게 되었다. 사실 웹 개발(Nest.Js + Next.Js)만 하다 와서 모바일 쪽 감을 잡지 못했었다. 무튼 처음 앱 개발을 해본 분이라면 이런 전문을 많이 받았을 것이다. 리뷰어마다 친절도가 다른데 처음 리뷰해준 사람은 위와 같이 상세하게 적어줬지만, 두 번째 리뷰어는 그냥 양식만 대충 해서 줬다. 물론 해결되지 않은 이슈 및 새로운 이슈 때문에 간략하게 적은 것일 수 도 있다. 무튼 이 문제는 현재 마지막 리뷰를 기다리는 중인데 어떻게 처리해야 하는지에 대해 포스팅을 해본다. app_tracking_transparency 사실 Swift랑 아이폰 개발 관련 …

앱스토어 두 번째 리젝 내가 처음에 올렸을 때는 10월 24일인가 그랬다. 뭐 당연히 한번은 리젝 당하는게 당연하게 생각하여 얼른 리젝 메세지를 달라는 기원(?)을 했다. 아니나 다를까 처음에는 리젝을 던졌다. Guideline 2.3.3 - Performance - Accurate Metadata 메타데이터라는 키워드만 봐도 딱 느낌이 왔다. 요새는 리젝 메세지가 상세히 주는 것 같다. 내가 개발할 때는 진짜 몇 마디 대충 가이드라인만 주고 끝낸거 같은데… 참고로 Guideline 2.1 - Information Needed이건 이곳 블로글 포스팅을 참고하자. 무튼 이번에 받은 리젝은 Performance - Accurate Metadata 관련 이었다. 참고로 23년 10월 24일 기준 스토어 등록할 때 스크린샷에 iPad용 사이즈가 필수로 변경되었다. 과거 다른 자료들을 보면 iPad는 선택이었는데 이젠 필수로 변경되었다. 이렇게 폰이랑 패드가 나뉘어 있는데, 저기서 iP…

드디어 애플 앱스토어에 입성하다. 흑우집합소의 모바일 버전을 개발한지는 조금? 1~2달 사이 된거 같다. 그리고 안드로이드용 흑우집합소용을 등록하였다. 이와 관련하여 포스팅은 따로 진행할 예정이고… 1.0.0 패치에 맞춰 애플 앱스토어에도 배포를 하려 했다. 사실 1.0.0 버전에 맞춰서 같이 배포하려 했는데 약간 욕심이었던 듯 싶다 ㅎㅎ 무튼 앱스토어는 연마다 프로그램 맴버십을 갱신해줘야 한다. 내 네이버 블로그에서 따온 사진… 큰돈이라면 큰돈, 와인으로는 데일리 2~3병 사면 사라지는 돈… 무튼 결제를 하였다. 아주 먼 옛날 학교 앱 만들고 처음 앱스토어 등록하고 했던 기억이 새록새록했다. 무튼 스토어 등록을 하고, 앱을 빌드하면서 이런 저런 삽질을 하고… 그리고 스토어에 앱을 올렸다. 그런데 잠시 후 어떤 메일이 도착했다. App Store Connect - Dear Developer, 그렇다. 뭔가 이상한 느낌의 메일 제목과 멘트다. 메일을 열어보니 아래와 같은 메일이 …

스토어에 등록 후… 안드로이드 마켓에 정상 등록을 한 이후 스토어용과 개발용 (웹에서는 개발과 운영섭 나누는 느낌)으로 나눠서 해야 할 필요가 생겼다. 당연한 이야기겠지만 공기계가 있다면 이런 짓을 안해도 된다. 하지만 기기 해상도 체크 및 현실적인 부분으로 인해 보통은 개발/운영을 나눠서 작업한다. (공폰을 4개 이상 들고 있는 사람이 있을까?) 일단 안드로이드 기준으로는 몇 가지 내용을 바꿔야 한다. AndroidManifest.xml bundle.gradle MainActivity & Path 기타 서비스 패키지 (Firebase, etc..) 이런 항목을 일일이 하나씩 다 바꾸는 방법은 무식했다. 그리고 스토어 배포하고 개발용 돌리다가 실수를 할 수도 있다. 그래서 몇 가지 좀 찾아보던 중 괜찮은 패치키를 찾게 되었다. change_app_package_name (함정카드였던것) change_app_package_name는 Likes도 많고, 괜찮은 것 같아서 한번 받아서…

신규 프로젝트를 셋업하면서… 오늘 스토어에 등록도 하고 바로 패치도 하고… 다이나믹한 하루였는데, 바로 신규 프로젝트를 준비했다. 흑우집합소를 이렇게 허접하게 만들고 땡이냐? 라는 마인드는 아니다. 개발은 쭉 하면서 하나 더 해야 한다. 1인 개발쪽으로 들어오면 아무래도 시간적으로는 좀 널널하지만, 회사 다닐때 보다 더 빠듯하게 해야 한다. 왜냐하면 열심히 한 만큼 성과를 보기 때문이다.(당연한 이야기겠지만…) 무튼 그래서 새로운 프로젝트 셋팅을 하는데 아래와 같은 에러가 반겨줬다. ㅎㅎ… 흑우집합소에서 잘 되다가 갑자기 쌩뚱맞게 안되니까 어색하네… 무튼 원인을 찾아보니 환경변수를 내가 안해줬었다. -_-;; 그래서 미래의 내가 또 잃어버릴 수 있으니 포스팅으로 남겨둔다. 환경 변수를 설정 일단 난 Mac OS를 사용하는데 zsh를 사용한다. 다른 OS나 shell도 동작 원리는 비슷하다. 먼저 자신의 Flutter SDK가 설치된 위치를 알아야 한다. 그리고 나서 자신의 Hom…

흑우집합소 안드로이드 버전을 등록하고… 흑우집합소 안드로이드 버전을 등록하고 승인이 났다. 근데 안드로이드 앱은 너무 오랜만에 올려봐서 그런가… 새로 바뀐 플레이 스토어가 어색했다. 무튼 그렇게 이것저것 보다가 이상한 경고를 보게 되었다. 뭔가 글귀는 무시무시해보이는데 경고라서 크게 신경쓰지는 않으려 했지만, 처리하지 않으면 뭔가 문제가 생길거 같고 그래서 처리해보기로 했다. How To? 먼저 자신의 프로젝트의 디렉토리로 가서 아래의 경로를 따라가본다. 물론 이건 스토어 등록용 Release로 빌드를 했을 때 나오는 산출물이다. 여기에 들어와서 경로 안을 보면 아래와 같은 디렉토리가 보일 것이다. 그럼 이걸 압축해준다. 맥에서는 그냥 전부 선택하고, 압축 이란 메뉴를 쓰면 된다. 그리고 본인의 구글 플레이 콘솔에 접근하여 출시탭의 App Bundle 탐색기로 이동한다. 그리고 아래의 사진처럼 앱 버전에 **->**화살표를 클릭한다. 물론 나는 진행을 해서 버전 상태가 활성으…

역시나 한번에 되는건 없다. 오전에 플레이 스토어에 등록 알림이 와서 확인해봤다. 거부됨이란 단어를 보자마자 든 생각은 역시 한번에 되는건 없구나 였다. 메일로 자세한 정보를 보냈다고 해서 메일을 확인해봤다. 뭔가 엄청 장황하게 써뒀는데 유독 광고ID라는 키워드만 보였다. 그래서 한번 찾아보니, 역시 정책 관련 업데이트 보완이었다. 뭔가 안도감이… 해결하는 법은 생각보다 간단하다. 물론 나처럼 광고쪽 문제만 이라면 더 간단하고, 뭔가 서버로 민감 정보를 보내거나 하면 몇 가지 정책을 또 업데이트 해줘야 한다. 해결을 위해선… 먼저 구글 플레이 콘솔에 접근한다. 그리고 정책에서 앱 콘텐츠를 선택해서 들어간다. 나는 선언을 했는데 안하면 저기에서 정책을 등록하기인가 로 들어가야 한다. 지금 화면은 정책 업데이트가 필요하여 저렇게 뜨는데, 각 화면은 여기 예시와 차이가 있을 수 있다. 그럼 데이터 보안이라는 항목에 들어오고, 읽어본 후 하단 오른쪽에 다음버튼을 클릭한다. 데이터…

간만에 올리는 개발 포스팅 (글 시작에 앞서 장문의 내용이며, 개발의 관점과 더불어 다른 관점에서도 작성됨을 미리 고지합니다.) 정말 오랜만인것 같다. 마지막이 7월달 포스팅이었는데 거진 두달 정도 뒤에 포스팅을 올린다. 개발 블로그를 꾸준히 하려 해도 개발할 것도 많고, 다른 일도 많아서 우선순위가 많이 밀렸다. 사실 흑우집합소 웹 버전을 개발하고 나서 얻은 지식들도 많고, 정리할 포스팅 거리도 노션에 잔뜩 쌓아뒀는데, 이걸 다시 정리해서 포스팅하려니 시간이 많이 걸릴 거 같았다. 그래서 결국 몇 부분만 포스팅하고 대부분은 노션에 묻혀있는 상태이다. 거기다가 한 8월 중순 넘어 말? 중말쯔음부터 플러터를 공부하며 프로젝트를 시작했다. 흑우집합소가 오픈한지 좀 되었는데 사용자가 사실 많이 모이진 않았다. 뭐 컨텐츠가 부족한 부분도 있고, 원래 만드려 했던게 로또 커뮤니티인데 그 시스템을 전부 혼자서 빠른 시간안에 개발하는건 무리라고 판단했다. 그래서 난 모바일 앱을 먼저 출시하고,…

레디스를 쓰다가… 최근 아마존에 있던 1세대 흑우집합소를 더 이상 쓰지 않게 되어 로컬로 옮기기로 했다. 근데 내가 쓰는 도커 레디스랑 아마존 도커 레디스랑 버전이 맞지 않아서 문제가 생겼다. 버전을 확인해보려 했는데 잘 몰라서 찾다가 자주 보게 될거 같아서 포스팅으로 남겨둔다. 먼저 도커 내부로 접근해서 레디스 쉘로 가야 한다. 들어가서 다음과 같이 명령어를 쓴다. 이렇게 하고, 스크롤을 좀 올리면 redis_version에서 버전 확인이 가능하다.

전에 안드로이드에 이어… iOS도 한번 실제 기기에 올려보려고 했다. 근데 내가 iOS를 개발한지 6년? 잠깐 스위프트 써본 뒤에 안한지 오래되서… iOS에 개발자 모드가 있다는 것은 처음 알았다. -_-;; 무튼 이 개발자 모드를 활성화 해줘야 플러터 앱을 올릴 수 있다. 라떼는… 애플 개발자 계정을 매년 100$인가 내고 등록을 해야 실제 기기에서 테스트 가능했는데… 정말 시대가 많이 변했다. 무튼 기존 애플 개발자 계정을 XCode에 연동하고, 실제 기기를 연결한 다음, Xcode에서 플러터 앱을 열고 실행을 시켰다. 근데 아래와 같은 에러가 발생했다. 스크린샷은 못찍었는데 대충 위와 같은 에러가 발생했다. 원인은 업데이트? 난 OS가 벤츄라 이전꺼를 쓰고 있었다.(몬터레이) 그래서 일단 OS 업데이트를 하고 Xcode도 업데이트 했다. 하지만 동일한 에러가 발생했다. 그래서 찾아보니 Xcode의 iOS호환성 체크가 필요하다고 했다. 자세한 것은 애플 개발자 사이트에서 확…

플러터로 개발하다가… 책을 따라해보면서 하나식 복습 및 익숙해짐을 하고 있었다. 근데 이게 실제 내 기기에서 안돌려보면 제대로 되는건지 알 수가 없었다. 에뮬레이터는 한계가 있고… 그래서 iOS랑 안드로이드에 올려보려 했다. 안드로이드는 사실 다른 문제는 없었다. 그냥 비쥬얼 스튜디오에서 돌리면 되는데, 이상한 문제에 봉착했다. android:usesCleartextTraffic not found 처음 구글링 했을 때는 아 이거 그냥 쉽네~ 라면서 AndroidManifest.xml만 수정하면 끝나는 줄 알았다… 계속 에러가 발생했다. 추가해도 문제고… 그러다가 어떤 블로그에서 원인을 찾게 되었다… 에러 내용에는 분명 userCleartextTraffic이라 되어 있었다. 근데 이 속성은 usesCleartextTraffic이거다. 위 코드와 같이 말이다… -_-;; user가 아니라 uses임을 잘 보라. 위와 같이 수정을 하면 에러가 없어지고 잘 실행된다. 이거 개발자도 에러…

최근 플러터를 개발하면서… 나는 따로 강의를 수강한 적은 없고, 노마드코더쪽 무료 강의만 들었다. 먼저 따라하면서 어떤지 맛보기에는 좋았다. 하지만 실제 프로덕트(라고 하지만 개인 서비스)를 올리려 했는데 막히는 부분이 좀 있었다. 위젯을 다른 위젯으로 래핑한다거나, 공간이 벗어났을 때 처리 등등… 더 나아가선 상태관리까지… 그래서 도서관에서 책을 빌려 공부하면서 자주 쓰는 위젯에 대해 정리를 해볼까 한다. 여기 포스팅에 소개한 위젯 말고도 더 많겠지만, 나름 자주 쓰는 것에 대해 정리를 해본다. Container 이름과 같이 뭔가를 적재하는 위젯이다. 그래서 나 같은 경우 Scaffold위젯에서 child속성에 이 컨테이너 위젯을 넣는다. Scaffold가 뼈대 역할을 하는데 그 시작점을 Container로 잡고 한다. 가로(Width)와 세로(Height)의 길이를 정할 수 있고, 컨테이너 위젯의 배경색 등을 넣을 수 있다. 예를들어 가로는 화면에 꽉 채우고 세로는 300에 배…

무료 계정으로 연명하다가… 예전에 만들고 언젠간(?) 유지보수를 하려 했던 MyMeLink의 Aws 무료 플랜이 끝났다. 정확히 이야기하면 6월에 끝난다. 근데 서비스가 잘 큰것도 아니고, 거의 나만 쓰며, 유지보수를 현재 못하고 있는 상황에… 여기에 돈내고 서비스 연명하기엔 투자비가 아까웠다. (그래봤자 얼마 안되겠지만…) 뭐 사용자가 있다면 계속 서비스를 살리겠지만… 최근 흑우집합소랑 모바일에 유지보수 리팩토링까지 하니 시간이 없다 -_-;; 무튼 그래서 Aws에서 도메인을 바꾸던가 다시 사서 해보려 했는데, 이미 6월달 중순쯔음 도메인 연장 결제가 되었다 -_-;;; 그래서 몇 가지 찾아보니 Aws에서 도메인 이동이 된다하여 진행해보기로 했다. 먼저 내가 진행하는 조건은 다음과 같다. Aws Route53에서 구입한 도메인이다. 전달받을 Aws 신규 계정이 있다. 도메인 구입을 한 AWS 계정에 접근이 가능하다. 2번이랑 3번은 당연한 이야기고… 1번의 경우 타 회사(가비아,…

이번 포스팅은… 저번 프리온보딩은 제대로 참여를 못했다. 주말이 껴 있는 부분도 있었고, 개인적인 사유로 좀 많이 바빴다. 이번 7월 챌린지는 예전에 1월인가 프리온보딩을 진행했던 강사님이 다시 진행하신다고 하셨다. 디스코드를 안나가고 있었는데 다행이었다(?) 사전과제가 있었는데 이를 정리해서 개인 블로그에 포스팅하고 링크 제출이 있었다. 매번 이론은 잘 안보고 기능 구현만 했는데… 이번에 사전 과제를 하면서 한번 정리를 해봐야겠다. 근데 어렵게 설명하는건 좋아하지 않아서 나름 쉽게 풀고 예시를 들어 설명할 예정이다. 1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. CSR(Client-side Rendering)이란 무엇인가? 영어에서 표현한바와 같이 랜더링 작업을 클라이언트(브라우저단)에서 해주는 것을 의미한다. 다른 블로그나 문서를 보면 뭔가 어렵고 복잡하게 설명을 하는데 난 이 부분을 쉽게 설명해보겠다. 웹 브라우저에서…

개발을 하고 iOS 시뮬에서는 잘 되었는데… iOS에서는 AppBar의 title이 중앙에 잘 배치되었다. 근데 직접 APK를 만들어서 내 폰에 올려봤더니 왼쪽으로 정렬되어 있었다. 폰이 문제인가 싶어서 시뮬레이터를 돌렸더니 역시 똑같이 나왔다. 왜 이런가 싶었는데 아주 쉽게 해결할 수 있는 문제였다. 그렇다. 저 속성을 true로 주면 깔끔하게 해결된다. 플러터를 이제 막 하는 사람으로써.. 이런 부분은 좀 신기했다. 둘다 똑같이 표현이 되어야 하는데 속성이 있고 없음으로 인해, 안드랑 아이폰 표현이 틀리다니.. 앞으로 고생좀 할것 같은 예감이 든다.. 개발을 하고 iOS 시뮬에서는 잘 되었는데…

앱을 만들기 전 폰에서 돌려보고 싶었다. 흑우집합소의 모바일 버전을 슬슬 준비하면서, 플러터를 공부했다. 뭐 일일히 다 본건 아니고, 유튜브랑 노마드코더에서 학습을 했다. 일단 빠르게 결과물을 내는게 중요해서 먼저 예제를 몇 가지 만들어보고 바로 개발해보려 했다. 그래서 노마드코더의 예제를 다 만들고 나서 이걸 폰으로 올려보고 싶었다. 난 아이폰과 안드로이드폰 둘 다 있어서 둘다 올려보려 했지만, 아이폰의 경우 몇 가지 설정하고 하는게 있어서 다음 포스팅에 정리해서 올려보기로 하고… 이번 포스팅에서는 안드로이드 폰에 올려보는걸 목표로 해본다. 일단 flutter doctoc에서 모든 이슈가 없는 상태에서 시작한다. 그리고 결과물은 **abb(Android App Bundle)**라는 앱 번들과 APK로 만들 수 있는데, 이번에는 둘 다 만들어볼 예정이다. 사실 abb는 처음봤는데… 예전 안드로이드 개발할 때는 APK만 있었는데 이상한게 나왔다… 일단 먼저 서명키를 만드는 것부터 시…

간만에 깃허브를 꾸며 보려고… 최근 직장도 다시 구해볼까 해서 포트폴리오랑 이력서를 아주 조금씩 손보고 있다. 이게 사람이 혼자 일하다보면 뭐랄까… 진전이 없다고 해야하나? 무튼 그래서 돈보다 워라벨 좋은 곳을 찾아보려고 준비중이다. 솔까 우리나라 탑티어 IT회사는 가면 좋은데 개인 시간 내기가 정말 어렵다. 퇴근하고(일단 퇴근이 되나?) 뭐 좀 하려 하면 새벽이 된다. 게다가 기술에 대한 무한 학습도 해야 하고… 또한 급여도 연 79천 그 이상을 줘도 그만큼 일을 키시고, 세금으로 엄청 가져간다. (With 4대보험 : 퍼가요) 그럴바에야 차라리 퇴근하고 부동산이나 주식 공부를 해서 급여 외 소득을 키우는게 나은 것 같다. 특히 지금 글을 쓰는 23년 6월 기준 지방 제외 일부 서울 지역과 경기도 지역은 부동산이 다시 꿈틀하고 있다. 급여소득으로는 내가 살 주택이나 미래를 보장할 수 없다고 생각하는 1인이다. 그래서 난 차라리 급여는 좀 낮아도 워라벨이 좋은 곳을 찾아서, 개발 …

개발하려고 창을 보니… 이상한 선이 하나 떠 있었다. 예전에 인텔리J에서도 이런게 떠서 곤란했던 기억이 있는데… 처리하는건 간단하다. 하단의 톱니바퀴를 클릭하고 명령 팔레트를 선택한다. 그리고 **사용자 설정 열기(JSON)**을 선택한다. 안뜨면 Open User Settings 라고 치면 나온다. Json 파일이 열리면 아래의 설정파일을 찾아서 제거한다. 이렇게하면 선이 사라진다.

모바일 영역을 개발하려고… 최근 흑우집합소의 모바일 버전을 개발해야겠다고 마음 먹었다. 아직 메인 기능도 개발이 덜 되었지만… 유저를 늘리고, 사용자들이 보통 모바일을 많이 사용해서 모바일 앱이 필요해졌다. 원래 안드는 코틀린, iOS는 스위프트로 개발하려 했는데, 1인 개발이라 둘다 하기엔 너무 사이즈가 컸다. 그냥 앱만 개발하면 네이티브로 내려가서 개발해도 되지만… 현재 웹이 메인이라서 모바일까지 네이티브로 내려가면 1인으로써 감당이 안되었다. 그래서 크로스 플랫폼으로 개발하기로 했다. react native vs flutter 리엑트 네이티브와 플러터 두 가지를 고려했는데…(사실 선택할게 저거 밖에…) 원래 리엑트를 쓰니까 리엑트 네이티브 쓸까 했는데, 플러터도 뭔가 좋아보였다. 그리고 새로운 것을 한번 써보고 싶었다. 뭐 속도나 기능 지원 등등은 내 생각엔 비슷한 것 같았다. 그래서 나는 새로운 것을 배워볼겸 플러터를 선택했다. 근데 이거 개발 끝나고 다른 모바일 개발에는 …

개인 프로젝트 관리에 관하여… 예전에 개인 프로젝트를 할 때는 그냥 깃허브 하나 뚫고 대충 올리면서 했었다. 근데 그렇게 하면 추후 프로젝트 관리 시 문제가 생겼다. 그리고 프로젝트의 목적이나 버전 스토리 등도 뭉게지고 이력도 확인하기 어렵다. 그래서 이런 것을 막기 위해서는 프로젝트 문서화 및 체계를 잡고 하는게 중요하다고 생각한다. 좋은 코드를 작성하고, 빠르게 결과물을 내는 것도 중요하지만 이런 체계를 어느정도 잡고 가는 것도 중요하다 생각하는 1인이다. 그래서 내가 개인적으로 개발했던 MyMeLink나 흑우집합소는 어느정도 관리를 하면서 진행했다. 이번 TIL에는 내가 개인 프로젝트를 어떻게 관리하고 개발하는지를 포스팅으로 남겨보려 한다. PS : 이건 정답은 아니며, 각자 처한 환경, 프로젝트에 따라 알맞게 하면 된다. 노션 (Notion) 이거 안쓰는 사람도 있지만… 난 초창기부터 아주 잘 쓰고 있다. 무튼 이 노션으로 어떻게 쓰냐? 메인 페이지는 위와 같다. 로드맵,…

반복문에서 비동기를… 최근 개발 일정 및 개인 사정으로 인해 포스팅을 전혀 하지 못했다. 네이버 블로그는 일상이나 가벼운 소재라서 막 쓸수 있지만 개발 블로그는… 아무렇게나 막 싸지르는 공간도 아니고, 다른 예제 복붙하는거는 정말 싫어해서… 그래서 더 미루지 않았나 싶다. ㅎㅎ 흑우집합소 패치 내역이나 개발한 걸 TIL 쪽에 올리려다가 이제는 따로 카테고리를 빼야 할 듯 싶다. 이것도 많이 밀렸는데 언제 적는지… 무튼… 평화롭게(?) 개발을 하다가 반복문을 사용하면서 비동기 처리하다가 조금 막힌 부분이 있었다. 이번 포스팅에서는 그 문제, 그리고 조사, 해결방법을 공유하고자 포스팅을 남겨본다. 반복문에서 비동기를 쓸 때 일반적으로 반복문 내에서 비동기 처리를 하는 경우는 드물게 있다. 예를 들어 특정 파라메터를 가지는 url의 데이터를 크롤링하거나, 데이터베이스에서 순차적으로 뽑아오는등… 몇 가지 케이스가 있다. 근데 while이나 for 등과 같은 고전파 방식인 반복 순회에서는 …

Next.Js에서 Title 태그를 처리하기 이번에 흑우집합소를 네이버 서치 어드바이저에 등록했다. 그리고 데이터를 등록하다가 사이트 간단 체크에 돌렸는데 사이트 제목이 미설정이라 떴다. 그래서 확인해보니 정말 설정이 안되어 있었다. 그래서 이것을 수정하려고 자료를 찾아서 적용했다. 방법은 간단한데 각 페이지마다 Title 태그를 적용하는 법과 전역으로 설정하는 법이 있다. 1. 각 페이지마다 title 처리 각 페이지마다 Title을 변경해야 할 때가 있다. 나의 경우 메인과 각 페이지가 다르게 설정해야 했다. 메인은 아래처럼 진행해야 했고… 번호 생성쪽은 그에 맞춰서 다른 것으로 해줘야 했다. 처리하는 방법은 간단하다. pages 디렉토리 안에 라우팅 되는 곳에 아래의 코드로 설정이 가능하다. 이렇게 하면 된다. 전역 설정하기 여기는 더 쉽다. _app.js 파일에 위 처럼 작성해서 넣어주면 된다. 정리 생각보다 어렵지 않다. 단지 페이지가 많으면 약간 귀찮을 뿐이다. 자…

Chat GPT에게 코드를 맡기다가… MongoDB쪽에서 데이터를 가져오는 부분에 대해서 GPT에게 명령을 줬다. 근데 가져올 때 코드를 보니 신기한 게 있었다. 근데 GPT가 제공한 코드를 보면 끝에 **.exec()**를 사용한다. 그래서 이 부분에 대해 궁금했다. 쓰면서 딱히 문제는 안되었는데 이런 부분은 모르고 넘어가면 더 큰 문제가 발생할 수 있으니까? exec()는? 사실 exec()를 쓰고 안쓰고는 큰 차이는 없다. 왜냐하면 기능적으로는 완전히 동일하다. Mongoose에서 대부분의 쿼리 메서드는 exec()를 호출하지 않아도 잘 동작한다. 하지만 save() 같은 쿼리 메서드에는 붙이지 않는다. 근데 이게 Mogoose 3 버전대에서는 쿼리 메서드에서 사용하는 쿼리를 프로미스로 만들기 위해서는 exec()를 필수로 붙여줘야 했다. 하지만 4버전 이후부터는 자체적으로 처리를 하기 때문에 exec()를 붙이지 않아도 되게 되었다. 하지만 가독성과 다른 코드와의 일관성을 …

이중 로그인(중복 로그인) 문제를 해결하는 과정 흑우집합소는 정책 상 이중 로그인을 허용하지 않기로 정했다. 예를 들어 A라는 사용자가 크롬에서 로그인하고, 다시 사파리에서 로그인을 했을 때 이를 이중 로그인이라 칭한다. (때에 따라선 중복 로그인이라 표현하기도 한다.) 뭐 개발좀 해본 사람이라면 다들 알것이다. 근데 계정 로그인 이후 단순하게 정보를 열람하거나, Read성향에 촛점이 맞춰진 서비스라면 이중 로그인은 문제가 되지 않는다. 하지만 내가 개발하는 흑우집합소는 추후 게시글 작성 기능 등 Create와 Update 그리고 Delete기능을 가진다. 이 경우 이중 로그인 문제는 고려해야 할 문제다. 어떤 부분을 고려해야 할까? 먼저 개발하는 서비스의 로그인 방식부터 확인해봐야 할 것이다. 로그인 방식에는 다양한 방법이 존재한다. 그리고 그 로그인 방식에 따라 이중 로그인 처리 방법이 약간 다르고, 처리하는 방식이 쉬울수도, 까다로울 수도 있다. 여기 아래서 부터는 Next.…

배포를 하고 나서… 새벽 2시쯔음 흑우집합소 1.0.2 버전 배포를 했다. 백엔드쪽과 프론트엔드쪽 배포를 끝내고 나서 잘 되나 확인을 해봤다. 근데… 이상한 문제가 발생했다. 프론트엔드 쪽은 TailWindCSS를 사용하고, 거기에 Daisy ui를 사용하고 있다. 근데 이 Daisy UI쪽에서 발생한 문제인 것 같았다. 문제는 아래와 같다. Github의 Issue 부분을 확인해봤으나, 나와 같은 문제를 일으키는 사람은 없었다. 이는 라이브러리 문제가 아닌 내가 뭔가 잘못 코드를 작성한 문제라는 방향으로 귀결된다. 분명 개발버전에서는 잘 되었던거 같은데… 근데 생객해보니… 개발은 크롬에서 진행했고, 운영 테스트는 사파리에서 진행했다. 혹시나 하는 마음에 크롬에서 직접 봐보니 역시 크롬은 문제가 없었다. 도데체 무슨 문제일까? 뭐 뻔한 이야기겠지만 브라우저 엔진 문제일 것으로 추측했다. 브라우저마다 자바스크립트를 해석하는 방법이 약간 차이가 있기 때문에 저런 버그가 생기는게 아닐…

React에서 상태 관련 처리를 하다가… 신규 기능 생성번호 당첨내역을 개발하고 있었다. 백엔드 로직 개발을 하고, 프론트쪽 개발로 넘어왔다. 각 로또 등위별 당첨 내역 처리를 위해 아래와 같은 상태 값을 사용했다. 위 상태 값은 아래의 등위별 당첨 내역의 카운트에 쓰인다. 저 등위별 당첨 내역은 컴포넌트로 따서 구현되어 있다. 컴포넌트에서는 useEffect hook을 이용해서 초기 값을 설정해준다. 근데 이렇게 했더니 계속 값이 증분했다. 앞에 초기화 로직을 줬지만 적용되지는 않았다. 왜 그런걸까? 이 부분을 찾아보니… 아래와 같이 정리할 수 있었다. useState hook은 비동기로 동작하기 때문에 setRankInfo가 호출되어도 rankInfo는 즉각적으로 업데이트 되지 않는다. 그래서 이를 해결하려면 이전상태를 복사한 값을 적용함으로써 해결할 수 있다. 말이 좀 어려운데 아래 솔루션 코드를 보면 알 수 있다. 위와 같이 새로운 객체를 주고 해당 값으로 증가를 해준 다…

React-Quill을 사용하다가… 공지사항과 게시판 기능 때문에 React Quill을 사용하게 되었다. 그리고 게시글을 등록하면 잘 되었다. 근데 입력을 한 뒤에 열람을 하려 했더니 다음과 같이 출력되었다. 내가 분명 h1이랑 h2 등을 적절하게 섞어서 사용했음에도 저렇게 뜨게 되었다. 그래서 뭐가 문제일까 고민을 좀 했었다. 답은 간단했다. React Quill을 사용해서 글을 작성하면, Html로 코드가 뿌려진다. 그리고 이것을 열람 페이지에서 올릴 때 아래와 같이 코드를 작성해준다. 근데 저렇게 적용이 안되는 것은 html 내의 태그가 씹힌다고 유추했다. 그래서 이것저것 찾다가 내가 사용하는 TailWindCss가 문제일 것 같단 생각이 들었다. 대표적인게 Html 태그 중 h1이라는 태그가 있다. 근데 TailWindCss를 쓰면서 저 태그를 쓰면 태그가 동작하지 않는다. 보통은 다음과 같이 클래스 값을 준다. 그럼 저것 때문 아닐까? 역시 예상대로였다. globals…

NextJs에서 포트를 변경하기 Next.Js의 기본 포트는 3000으로 되어 있다. 개발용으로 쓸 때는 상관 없지만, 실무 레벨에서 쓸 때는 포트를 변경해야 한다. 이유야 뭐 알려진 포트를 사용하는 것은 좋지 않기 때문이다. 또는 3000번이 이미 다른 서비스를 사용하는데 쓰고 있을 수 있기 때문이다. 바꾸는 방법은 매우 간단하고, 두 가지 방법이 있다. 1. package.json에서 바꿔주기 package.json 파일을 열어준다. 거기서 scripts 항목을 간다. 위 처럼 -p 인자를 통해 변경할 수 있다. 2. npm, yarn 등 커맨드에서 변경하기 여기서 주의해야 할 부분은 터미널에서 사용할 때 npm을 사용하는 부분인데 - - 표시를 빼고 사용할 경우 에러가 발생한다. 왜냐하면 -p만 사용할 때는 port를 의미하는 것이 아닌 prefix로 받아들이기 때문이다. 그래서 npm을 터미널에서 사용할 때는 저 하이픈 2개를 붙여주는 것을 잊지 말자. 1. package.…

내 취미는 매일 나는 nginx log를 보는 것 요새 새로운 취미 생활이다. 흑우집합소 배포 이후 이상한 놈들이 불법으로 접근하는지 체크한다. 그래서 아침에 일어나서 컴퓨터 키고 nginx 로그를 본다. 로그를 보면 가관이다. 1. 불법 침입 흔적 아래는 접근한 불법 침입자 로그다. 44.202.140.249 악의적 사용자는 계속 특정 키워드 url로 찔러본다. 그리고 헤더 값을 잘 보면 알겠지만 referer값이 google로 되어 있다. 이는 구글을 통해 왔다고 흉내내는데 그냥 차단을 방지하기 위해 달아둔 의미없는 값을 넣은 것 같다. 저런 키워드는 Nginx에서 특정 IP 접근 금지 시키기 포스팅에 잘 정리해뒀다. 그리고 user-agent도 예사롭지 않다… ㅋㅋㅋ 8.36.86.60 악의적 사용자는 대놓고 user-agent에 python-requests를 줬다. 그리고는 바로 우디르급 태세전환해서 파폭으로 바꿔줬다. 다 보면 알겠지만 악의적 해킹을 목적으로 가진 사용자는…

오랜만에 쓰는 포스팅 포스팅이 많이 늦었다. 4월 초에 많은 일이 있었다. 가족 중 한분이 먼 여행을 떠나시고, 그 뒷정리 및 처리할 게 있어서 잠시 모든 일정을 내려놨다. 짐을 정리하면서 보니 인생이 참 덧없게 느껴지기도 했다. 사설은 네이버 블로그에서 하고… 산 사람은 인생의 일이 남아 있기 때문에 다시 내 일정으로 복귀했다. 흑우집합소 내에 게시판 기능을 개발하고 있었다. 코드 리팩토링도 해야 하지만, 공지사항이나 패치노트 같은 것을 사이트 내부에서 올리는 것이 아닌, 외부에서 올리는게 좀 그랬다. 그리고 커뮤니티로 승격하기 위해서는 에디터 기능도 필요했기에… 이 부분은 향후 포스팅으로 남길 예정이다. 크롬에서 파일 인풋 클릭이 안되는 문제 React-Quill에서 에디터 내 이미지 파일 첨부 기능을 개발하고 있었다. 사실 그냥 하는건 몹시 쉬운데, 이걸 실제 서비스에 적용하는 부분은 약간 까다로웠다. 이거로 에디터 기능을 구현한 분은 알겠지만, 이미지 핸들러를 만들고 그 안…

리다이렉션? 흑우집합소를 개발하던 도중 Next.js에서 프론트 쪽 개발을 하고 있었다. 근데 API Router에서 특정 데이터를 처리하다가 다른 페이지로 리다이렉션(Redirect)을 처리했다. 근데 Header에 값을 넣어서 보냈는데 헤더가 제대로 오지 않았다. 뭐가 문제일까 찾아봤다. 원래 안된다. StackOverflow에서 답변을 찾을 수 있었다. 그렇다… 원래 안되는 것이었다. Http 1.0 표준 문제라고 한다. 그래서 저 오버플로우에선 몇 가지 방법을 제시한다. Session 사용하기 쿠키 사용 Url query parameter 사용하기 보통 많이 사용하는게 3번 방법이라 나도 3번을 사용했다. 어짜피 Next.Js에서 페이지 로딩할 때 쿼리를 지울 수 있어서 큰 문제는 없이 해결할 수 있었다. 원래 안된다.

계정 탈퇴 기능을 개발하다가… 흑우집합소 내 계정 탈퇴 기능을 개발하고 있었다. 다른 사이트 보면 계정 탈퇴를 아주 꼭꼭 숨겨두는데, 개인적으로 좀 이해 안되는 행동이다. 사이트에 들어오는건 쉬운데 나가는건 어렵게 한다? 자기네 사이트에 회원을 묶으려는 수작질이다. 한때 유행했던 무슨 UX 패턴이었는데… 나갈 사용자는 어떻게 해서든 찾아서 나간다. 그렇다면 그냥 탈퇴도 쉽게 해주는게 좋지 않을까? 정말 사용작에게 필요한 서비스고 유용하다면 탈퇴해도 다시 돌아올 것이다. 그만큼 서비스에 자신이 없는걸까? 무튼 개인적으로 너무 악질이었던 패턴 같다. 특히 대기업 서비스에서도 이런걸 하는게 이해하기 어려웠다. 대기업이면 나름 서비스에도 자신이 있을텐데 말이다. 서론이 길었다. 무튼 탈퇴 로직을 개발하면서 몇 가지 이슈를 찾게 되었다. 어떤 이슈인가? 내가 흑우집합소에서 계정의 경우 닉네임은 고유값(Unique)이다. 초기에 이걸 고려 안해서 탈퇴 후 신규 회원이 해당 닉네임을 사용하려…

네이버 로그인 포스팅 3부작 Part01 네이버 로그인 구현하기 (Nest.js 코드 구현) Part02 네이버 로그인 구현하기 (네이버 개발자 센터) (현재 글) Part03 네이버 로그인 구현하기 (검수 요청 및 거절 그리고 기타 경험) 검수 요청을 했다. 개발이 다 끝난 뒤 검수 요청을 어떻게 해야 할지 고민이 앞섰다. 먼저 선 배포를 하고 검수를 해야 하는 것인지… 아니면 배포 전 검수를 해야 하는 것인지… 만약 배포 전이면 접근 권한을 어떻게 해야 하는지… 그렇다. 이 글을 읽으며 네아로를 적용하는 독자가 어떤 서비스를 개발하는지 모르겠지만… 보통이라면 사실 일반 사용자는 여러분의 서비스에 관심이 없다. 아니 존재 자체를 잘 모른다. 슬픈 현실이지만 그렇다. 당사자야 서비스를 만든 사람이니 잘 알고 기능도 알며, 이제 출시했다 라는 정보를 알지. 일반인은 알 수가 없다. 내가 만든 로또 서비스 흑우집합소도 이렇게 언급 안하면 아무도 모를 것이다. 다시 돌아와서… 즉 보안…

네이버 로그인 포스팅 3부작 Part01 네이버 로그인 구현하기 (Nest.js 코드 구현) (현재 글) Part02 네이버 로그인 구현하기 (네이버 개발자 센터) Part03 네이버 로그인 구현하기 (검수 요청 및 거절 그리고 기타 경험) 저번에 이어… 저번 포스팅인 Nest.Js에서 네이버 로그인 구현하기 Part.01에 이어서 작성한다. 혹시 코드쪽을 안하신 분은 저 포스팅을 참고하도록 하자. 네이버 개발자 페이지에서… 어플리케이션 등록 페이지로 이동한다. 이동하면 일단 로그인 API 신청을 위한 몇 가지 정보를 입력해야 한다. 위 사진에서 나온 정보는 따로 설명이 불 필요한 만큼 알아서 작성하자. 정보를 다 입력하면 이제 내 어플리케이션에 항목이 등록이 된다. 1. 개요 페이지 저기서 ClientID와 Client Secret 항목은 매우 중요하기에 외부로 노출이 안되게, 잘 관리해주자. 그리고 저 값은 Nest.JS 프로젝트 내에서 심어서 사용할 건데 env파일을 사용…

네이버 로그인 포스팅 3부작 (현재 글) Part01 네이버 로그인 구현하기 (Nest.js 코드 구현) Part02 네이버 로그인 구현하기 (네이버 개발자 센터) Part03 네이버 로그인 구현하기 (검수 요청 및 거절 그리고 기타 경험) 서비스에 SNS 로그인을 구현하려 했다. (SNS Naver OAuth Login) 흑우집합소를 개발하다가 사용자 계정 관련해서 사용자 계정과 관련하여 고민을 했다. 직접 계정 가입을 받을 것인지… 아니면 SNS를 활용한 계정을 처리할 것인지… 마음은 SNS 로그인쪽으로 기울긴 했다. 왜냐하면 직접 받는다면, 계정의 신원을 E-Mail로 잡을텐데 여기서 검증 이메일을 보내는 로직과 더불어, 일일히 계정 정보를 다 입력받는 창을 만들고 하면 시간이 너무 많이 먹을 듯 싶었다. 그래서 구글 네이버 카카오를 사용하기로 결정했다. 카카오 사태때 SNS 로그인 문제가 있던걸 봐서 고민을 좀 했지만… 이 부분은 내가 따로 구현처리해서 피할 수 있는 것 같…

간만에 구글 애널리틱스에 가보니… 티스토리나 알려진 블로그 플랫폼은 Google Analytics의 연결이 매우 편리하게 되어있다. 하지만 그외 플랫폼은 직접 연결을 해줘야 한다. 사실 붙여놓고 잘 안들어갔다. 내 개인 블로그를 많이 와주면 고맙겠지만, 이런거 일일히 신경쓰면 피곤하다. 그래서 오면 오고 안오면 안오나보다 하고 하는게 맘 편하다. 그리고 내가 무슨 네임드 개발자도 아니고, 그냥 삽질하고, 경험한거 쓰는 블로그인데 뭐… 그래도 궁금한거 댓글 남기거나 하면 바로바로 답은 해주려고 노력하는 편이다. 서두가 길었다. 어느날부터인가… 애널리틱스 사이트에 들어갔더니 아래처럼 뭔가 떴다. 지금이 벌써 23년 4월이니 이제 준비를 안하면 이 집계도 못사용하겠다 싶어서 바꿔봤다. 근데 내가 쓰는건 만든이가 더 이상 관리하지 않는 오픈소스 테마였기에… 문제가 있으면 스스로 고쳐서 써야하는 상황이다. 그래서 그냥 애널리틱스 ID만 바꾸면 쉽게 해결될 것 같아서 gatsby-meta-…

흑우집합소에 애드센스를 준비하던 도중… 혹시 Next.Js에서 애드센스를 다는 것이 궁금하면 Next.Js에 구글 애드센스(Adsense) 등록하기포스팅을 참고하자. 뭐 아직 이르긴 하지만 구글 광고를 달려고 Adsense를 신청했었다. 근데 신청 후 몇일 뒤 아래와 같은 메일이 왔다. 뭐가 문젠지 봤더니 승인 상태 옆에 저렇게 찾을 수 없음이 뜬다. 문제는 쉽게 찾을 수 있었다. 먼저 ads.txt에 접근이 되어야 하는데 이상하게 접근이 되지 않았다. 일전에 Nginx에서 특정 IP 접근 금지 시키기 포스팅을 하면서 뭔가 본거 같기도… 그래서 포스팅을 확인해본 결과… Url Keyword방식을 적은 부분에서 ads단어가 있었다… 이래서 ads.txt 파일에 접근이 불가능했던 것이다. 그래서 접근 확인을 한 후 재검토를 신청했다. 응 거절이야~ 또 저 해맑은 아저씨 메일이 왔다 -_-;; 그래서 몇개 생각을 하다가 Nginx에서 막은게 문제겠지 싶었다. 그러다가 하나 생각이 난…

구글 애드센스를 달아보려… 흑우집합소에 애드센스를 달려고 했다. 근데 ads.txt 파일만 넣었는데 뭔가 안되는거 같아서 찾아보니 대부분 Script 추가 방식을 사용했다.. 그래서 나도 이 방식도 같이 추가했고, 이를 포스팅으로 남긴다. How To? 먼저 Google adsense에 가입이 다 되어 있고 준비가 된 것을 가정한다. 메뉴에서 사이트를 선택한다. 그리고 새 사이트 추가를 해준다. 추가할 사이트 주소를 작성해준다. 그럼 두 가지 방식으로 검증을 받을 수 있다. 여기서 원하는 방식을 선택하거나, 나처럼 하나가 안되서 다른 방식으로 인증을 해도 된다. 1. Script 인증 방식 스크립트 인증 방식은 별도의 script 태그를 추가해서 인증을 받는 방식이다. 여기서 나온 스크립트는 바닐라js용이고, 비슷하지만 Next.Js에서는 다음과 같이 해준다. 아래의 코드를 Head 태그 내에 넣어야 하는데 보통 _app.tsx에 넣을 것이다. 근데 나는 Head태그 위치가…

서비스를 열어두면… 오픈을 하고나면 정말 많은 일들이 생긴다. 도메인 주소를 어떻게 알고 이상한 메일들도 오고, 다양한 방법으로 연락이 온다. -_-;; 그래봤자 넷상이니까? 근데 이제 서비스 접근 로그 또는 nginx에 접근 로그를 보면 대환장 파티다. 이건 내 Nginx 접근 기록에서 따온 로그 중 일부다. 저기 109.237.98.53IP 접근을 보라. 파이썬이나 기타 언어로 봇 만들어서 취약점을 열심히 찾는… 참 부지런하다… 난 게을러서 저런 노력도 못할 듯 싶다 -_-;; 무튼 서비스가 오픈되면 어떻게들 귀신같이 알고 저렇게 온다. 무튼 예전부터 나는 이걸 보호할 방법을 찾았고 적용했었다. 그리고 포스팅 해야지 하다가..(아마 흑우집합소 1세대쯤이었…) 그래서 이걸 이제야 포스팅 해본다. How To? 일단 nginx가 설치되어 있다는 것을 가정한다. nginx의 기본 설정 파일을 vim이던 원하는 편집기로 연다. 보통은 경로가 /etc/nginx/nginx.conf 일…

배포를 하기 전에… 흑우집합소 테섭에 배포를 하고나서 몇 가지 테스트를 진행하던 도중 pm2 로그를 잠시 확인했다. 저기 보면 clientIp라고 되어 있는 곳에 IP가 뜨는데 뭔가 좀 이상했다… IpV4가 나와야 하는데 IpV6 형식으로 나왔다. 사실 큰 상관은 없을 것 같은데 그래도 서버 내에서 로깅이나 확인할 때 IpV6 형식으로 되어 있다면 불편할 것 같았다. 그래서 이걸 V4 형식으로 바꿨다. 방법은 여러가지가 있지만, 제일 쉽고 아무것도 설치하지 않아도 되는 방식으로 했다. 저렇게 app.listen함수 뒤에 전달인자로 hostname을 전달해주면 된다. 저 함수를 타보면 아래와 같은 형태이다. 저 hostname에 ipv4 형식을 문자열로 전달하면 이제 Nest.Js 내에서 ip 주소 표현은 IpV4로 바뀌게 된다.

파일 업로드를 했는데… 흑우집합소를 개발하고, 로컬에서 잘 되던 파일 업로드 기능이 이상하게 배포만 하면 에러가 났다. -_-;; Nest.Js의 서버측에서는 파일 사이즈를 분명 설정하고 잘 맞춰뒀는데 왜 그런 에러가 발생하는지 이유가 궁금했다… 에러는 복잡했는데 Status코드가 413이 돌아왔다. 이 에러 코드는 클라이언트에서 보낸 요청의 크기가 서버에서 설정한 최대 한도를 초과해서 발생하는 문제다. 근데 서버는 분명 설정을 해뒀으니 누가 문제일까? 역시 범인은 Nginx였다. 처리방법은? 몹시 간단하다. Nginx의 설정 값 중 client_max_body_size 값을 지정해주면 된다. (마크다운 문법 에러 때문에 _ 조심) client_max_body_size 설정하기 nginx의 설치된 경로에 별도로 바꾸지 않았다면, nginx.conf파일을 열고 아래와 같이 값을 입력해준다. 이렇게 처리하면 잘 될 것이다. 만약 위에 client_max_body_size 옵션 만으로…

개발하며 얻은 TIL 흑우집합소 개발하며 얻은 내용 및 노션에 작성한 내용을 정리한 포스팅이다. 오늘 개발하면서 배운 내용은 아래와 같다. 예외처리의 미흡함 (예외처리 부분) 문자열 상수(String Literal) - Typescript Object 키 문제 반복적 코드를 줄이는 리팩토링 각 항목은 아래의 내용을 참고하자. 1. 예외처리 부분 오늘도 개발을 하던 도중 코드가 이상한 부분을 찾게 되었다. 백엔드 측의 에러 핸들링 부분이었다. Error Handler 부분의 일부다. 여기서 저기 const decodeData 부분의 로직을 보면 request의 헤더로부터 jwt를 가져오는 부분이 있다. 만약 헤더에 jwt를 안가지고 올 경우 어떻게 될까? 또 버그를 양산하는 모양새가 된다. 물론 jwtStrategy에서 검증을 하겠지만, 혹시 AuthExceptionHandler를 strategy 없이 사용하는 곳에서 발생했다면? 그래서 이 부분은 검사를 한번 더 하는 방향으로 로직…

분명 로컬에서는 잘 되었는데… 흑우집합소 개발이 다 되서 프로덕션 환경에서 배포 후 처리를 하는데 로그인 부분이 제대로 되지 않았다. 왜 그런가 콘솔 로그까지 찍어가며 확인해본 결과 헤더의 특정 값이 전달되지 않았다. 그래서 찾아보니… Nginx는 기본 헤더나 잘 알려진 기본 헤더 값만 전송한다고 한다. 기본 Http 헤더는 모질라 개발 문서를 참고하자. 무튼 어떻게 해야 하나 방법을 찾아보니 의외로 간단했다. How to? 참고로 난 Http로 오면 https로 포워딩하고, 내부 프론트엔드를 바라보게 되어있다. 그리고 설정은 다 못까지만 일부는 오픈한다. 또한 Ubuntu 환경에서 진행한다. 먼저 정답을 이야기 하면 두 가지 옵션을 넣으면 된다. underscores_in_headers 와 proxy_pass_request_headers 옵션이다. 설명을 이어나가면… nginx.conf 또는 자신의 별도 설정 파일에서 포워딩하는 부분을 찾는다. 아래는 80에서 443으로 포워딩하…

흑우집합소 개발을 하며… PS : 아래 예제에서 호출되는 url은 참고용입니다 개발이 거의 끝나가는 무렵이었다. 사실 막 짠 코드가 좀 있었고… 로직이 좀 엉상한 부분도 있었다. 그래서 미래에 또 헤매거나 복잡함을 피하기 위해 찌금 작업을 좀 해두자 라는 마인드로… 일부 리팩토링을 진행했다. 1. 똥이 되어가는 코드를 코드 리팩토링 프론트엔드 영역에서 Axios를 호출하는 부분에 대한 고민이 깊어졌다. 이렇게 되어 있다. 물론 전체 코드는 아니고 호출되는 영역만 가져왔다. 근데 이걸 매번 호출할 때마다 반복적으로 작성해야 하는 부분이 마음에 안들었다. 지금 호출 로직은 아래의 세 가지 문제점이 발생한다. 저 호출 부분에서 성공 시 또는 실패 시 처리해야 할 공통 로직이 추가된다면 일일히 바꿔야 하는 문제가 생긴다. setLoading과 같은 상태 관리(Zustant)의 로직을 호출 컴포넌트마다 작성해야 한다. 매번 인바운드(내부 api 주소로 호출하는 영역) 부분의 주소를 적거나 …

개발 기간은 길었지만… 드디어 오픈한 흑우집합소 전에 MyMeLink 서비스를 개발한 뒤에 구상한 서비스다. 사실 흑우집합소는 이전에 한번 Spring Boot + Thymeleaf로 만들었던 서비스인데 모바일 환경 미지원에 버그가 정말 많았다… 버그라기 보다는 코드가 정말 똥 그 자체였다. 그래서 이걸 차라리 새로 만들자 라고 해서 만들게 되었다. 위 화면이 옜날 흑우집합소 버전이다. PC에서는 잘 보이지만 화면이 줄어들면 정말 사용 못할 정도다. 마치 iOS로 말하면 Auto-Layout이 적용 안되어 있는 느낌? 무튼… 기술은 Spring을 쓰려다가 이제는 새로운 기술로 해보고 싶었다. 사실 취업 준비할 때는 Java + Spring이 거의 정석 빌드 테크였지만, 당시 취업 목표보다는 기술 스택 바꾸고 새로운 걸 배워서 만들어보자 라는 마인드였고, 그래서 MyMeLink개발 때 사용한 Typescript를 사용하여 Nest.Js + Next.JS 로 만들게 되었다. 인프라는…

23년 2월 13일 TIL 금일 흑우집합소를 개발하며 배운 내용 및 겪은 과정을 정리하여 올려본다. 오늘은 깔끔한 코드 작성에 대해 고민한 부분을 정리하여 올려본다. 어제 작업하던 JWT 부분에 대해 매듭을 지려고 했다. 일부분은 Ports And Adapters Architecture 방식으로 작성해보려고 노력중이다. 근데 확실히 레이어드 아키텍쳐보다 더 나은 것 같다. 이유는 크게 세 가지다. 하나의 코드 파일의 가독성 증가 레이어드 보다 더 세분화 가능 깔끔한 파일 관리 개인적 사견이 많이 녹여 있어서 다른 사람은 공감 못할 수 있다. 레이어드 아키텍쳐로도 충분히 구현 가능하지만, 이 아키텍쳐로 인해 명확하게 각 역할이 나눠지는 것을 채감했다. 이것은 차후에 다루고… 오늘 했던 고민은 아래와 같다. 고민 포인트 먼저 내가 jwt를 검증하는 Inbound 영역의 서비스 로직이 있다. 코드는 아래와 같다. 딱 봐도 코드의 문제가 보인다. (고민 포인트는 아래서 집어볼 예정) 일단…

23년 2월 13일 TIL & 개발노트 (흑우집합소) 금일 흑우집합소를 개발하며 배운 내용 및 겪은 과정을 정리하여 올려본다. 오늘은 JWT 인증 부분을 처리하였다. Nest.js에서 JWT 사용시 Error 커스텀 처리 Passport-JWT를 그대로 사용하려 했는데 Access Jwt의 토큰 만료시에도 401을 띄운다. 나는 Access Token에 대해서는 토큰 만료 시 서버 내에서 저장된 리프레시 토큰을 확인하고 그에 따른 추가 작업을 하기 원했다. 물론 try catch로 처리할 수 있지만 이렇게 하면 AuthExceptionHandler처리 부분이 너무 지저분해진다. 그래서 좀 찾아본 결과 passport-custom이란 것으로 Strategy부터 커스텀 처리를 할 수 있는 것을 찾았다.(이건 따로 포스팅 예정) 패키지를 설치하고 적용해봤다. 일일히 JWT에 대한 에러를 핸들링 해야 하는 부분이 있지만 직접 핸들링을 할 수 있어서 더 좋은 것 같다. 덕분에 기존에 있던 …

블로그용 작은 프로젝트를 만들다가… 이번에 Nest.Js에서 Jwt쓰기 주제로 포스팅을 준비중이다. 근데 처음부터 다시 설치해서 하려니까 몇 가지 막히는 부분이 있었다. 이런 코드가 있다. 근데 @Module 안에서 process.env로 설정파일에 접근하려 했다. 근데 아래와 같이 에러가 발생했다. 이유가 뭘까 잠깐 고민했는데… 기존 프로젝트는 이미 다 되어 있는 것이라서 내가 빼 먹은 설정과 패키지가 있었다. Next.js에서 Config 이유는 간단했다. 먼저 Config관련 패키지를 빼먹었었다. 먼저 아래의 명령어로 패키지를 설치해준다. 그리고 모듈의 최상단인 app.module을 연다. 아래와 같이 모듈 파일을 수정해준다. imports 부분에서 저렇게 처리하면 된다. 만약 구동 환경마다 설정파일을 좀 다르게 하고 싶다면 아래와 같이 처리가 가능하다. NODE_ENV는 실행 인자에서 전달해주는 것으로 처리했다. 이렇게 하면 각 구동 인자에 따라 설정 파일을 다르게 넣을 …

Nest.Js 프로젝트 만들어보기 이번에는 Nest.Js 프로젝트 시작하는 포스팅을 준비했다. 워낙 기초적인 내용이고, 별로 설명할 것도 없으며 공식 홈페이지에 상세히 나와있지만… 내가 또 프로젝트 셋업할 때 잊을까봐 남겨두는 포스팅이다. 진행은 MacOS에서 했다. Nest.Js 설치 크게 두 가지 방법이 있다. 하나는 그냥 npm이나 yarn 등으로 cli를 받은 다음 설치하는 법과 Github 클론 방식이 있다. Npm (Yarn) 설치 Npm이나 Yarn이 설치되어 있다면 너무 간단하다. 프로젝트를 시작할 디렉토리에서 아래의 명령어를 입력해준다. 나는 개인적으로 글로벌 설치를 안좋아해서 단일 프로젝트 방식으로 설치했다. 이렇게 하면 프로젝트 디렉토리 내에 node_modules, package.json, yarn.lock 파일과 디렉토리가 생긴다. 여기서 아래와 같이 Next.Js를 설치해주면 된다. 만약 자신이 특정 디렉토리에서 Nest.Js를 시작하길 원한다면 프로젝트 …

JWT를 원래 쓰고 있었지만… 전에도 썼었고, 지금도 쓰고 있는 JWT JWT에 대한 개념적인 것은 넘어가고, Nest.js에서 JWT를 쓰는 방법에 대해서 포스팅 해보려 한다. 사실 JWT를 그냥 쓰면 안되고, 몇 가지 기본적인 정책이나 알아야 할 점이 있지만, 이번 포스팅에서는 Nest.js에서 JWT를 생성하는 것에 포커스를 두려 한다. JWT에 대해서는 아주 예전에 포스팅을 했었다. JWT의 이론적인 부분이 궁금한 분은 JWT 포스팅을 참고해주시길… 이와 관련한 코드는 Github에 등록하였다. 일단 메인 브런치인데 향후 Part별로 브런치를 나누거나, 커밋으로 할 예정이다. 이와 관련한 것은 향후 다시 업데이트 예정이다. Nest.js에서 JWT 사용하기 본격적으로 설명에 앞서 위에 언급한 것처럼… 이번 포스팅에서는 Nest.js에서 JWT를 생성하는 것에 포커스를 둔 코드다. 그래서 약간 코드가 엉성할 수 있다. 하지만 어떻게 사용해서 적용하는지를 볼 수 있는 예제성 코…

타입스크립트를 접하게 되면서… 자바에서도 유명한 책이다. 물론 이름은 다르지만 앞에 이펙티브가 붙는 것은 같다. 이 책은 나같은 초급자들이 언어에 대한 이해도를 높이고, 좀 더 나은 코드를 작성하기 위해서 읽어야 하는 필독서로 알려져있다. 그래서 차근차근 공부를 하며 여기에 있는 지식을 내것으로 만들어보려 한다. 시간이 항상 부족하지만… 나 자신의 실력을 올리는 시간은 잠을 줄여서라도 내야 한다. 이번 포스팅은 내가 이 책을 읽으면서 배운 내용을 정리하는 포스팅이다. 책을 안 읽은 사람도 이해하기 편하게 포스팅을 해보려 한다. 주요 내용 및 개념 그리고 코드로 설명을 할 예정이며, 핵심적인 부분만 다룬다. 이 포스팅이 책을 완전히 대신할 수는 없겠지만, 책을 요약하는 정도로 다 읽지 않아도 그 책에서 전하려 하는 내용을 모두 담을 예정이다. 아래는 책의 전체 목차다. 목차 1장 타입스크립트 알아보기 아이템 1 타입스크립트와 자바스크립트의 관계 이해하기 아이템 2 타입스크립트 설정 …

오늘의 강의는.. 2일차 부터는 실제 Nest.Js에 대해서 알아보고, **포트 앤 어뎁터 아키텍쳐(Ports and Adapters Architecture)**에 대해 설명을 하는 시간을 가졌다. 강의를 들으면서 내용을 정리한 부분이다. 옆에서 강의 틀고 노션 및 수기로(개판 필기체를 해석 하는데 힘들었다…) 작성한 것을 다시 곱씹고 하면서 강의 내용을 정리했다. 이렇게 라이브를 직접 옮기면서 작성한 것을 정리한 것이라 약간 엉성할 수 있다. 이 부분은 감안하고 봐주시길 바란다. 강사님의 이야기 시간 강사님의 개발자 일대기 이야기를 해주셨다. 재직한 회사에서 다양한 경험을 쌓으셨고 매 순간 열심히 하신 것 같다. 어떤이는 운도 중요하여, 열심히 해도 운이 안좋으면 취업, 이직이 어렵다 라고 이야기 하는 사람도 있다. 하지만 개인적으로 거꾸로 아닌가 싶다. 열심히 노력하고 준비를 하고 있어여 기회가 온 운을 잡을 수 있는게 아닌가? 라는게 나의 생각이다. 불확실성은 곧 희망이다.…

코드를 이쁜 이미지로… 가끔 코딩 유튜브나 블로그에 보면 코드 이미지를 괜찮게 만들어서 올리는 것을 봤다. 이런 느낌으로 된 이미지였는데 이걸 한땀한땀 올리진 않을거 같아서 찾아봤다. Carbon now Carbon Now 위와 같은 이미지를 만들어주는 사이트다. 코드를 입력하면 언어에 맞춰서 잘 꾸며준다. 보여주는 창의 테마도 상단에서 바꿀 수 있다. 코드의 배경색도 변경이 가능하며… 에디터 표시 설정 및 라인 높이 줄번호 폰트 등의 설정, 그리고 미리 설정된 테마 기능도 지원한다. 그리고 내보내기는 단순 이미지 뿐만 아니라 iframe 링크, 이미지 자체 링크 등으로 제공이 가능하다. 아래는 iframe으로 가져온건데 코드를 복사하거나 할 수 있다. 그리고 export를 선택하면 이미지 확대 및 파일명, 확장자 등을 선택할 수 있다. 정리 잘 쓰면 유용할 것 같다. 근데 유튜브 같은데는 괜찮을지 모르겠지만… 블로그 같은데는 복붙 해야 하는 경우가 좀 있는데 이미…

저번 포스팅에 이어… 저번 포스팅(CloudFlare R2 사용해보기 Part 1)에 이어 이번에는 R2에 파일 업로드와 다운로드, 삭제 등을 Nest.Js로 구현하는 것을 해보려 한다. 일단 프로젝트를 따로 파서 깃허브에 올려서 하려 했으나… 생각해보니 각 설정들 부터 해서 Wrangler의 설정 및 배포 등 생각할 것과 직접 구현해야 할 부분이 많아지는 관계로… 일단 코드 조각으로 예시를 만들어보려 한다. 그렇다고 생략을 엄청 하는 것은 아니고, 환경이 구성되어 있다면 해당 코드 예제가 도움될 것이라 생각이 든다. 설명에 앞서 구성, 그리고 기타 사항은 다음과 같이 되어 있다. Nest.JS 사용 Typescript 사용 CloudFlare R2 사용해보기 Part 1 포스팅까지 진행 완료된 CloudFlare 계정 Wrangler 프로젝트가 현재 진행하는(또는 따로 만든) 곳 내부에 존재하는 것을 예시로 진행 먼저 files라는 도메인에서 진행한다. (아래 사진은 참고용) …

NestJs에서 스케쥴링… 현재 하고 있는 프로젝트에서 스케쥴링이 필요하여 구현했었다. 그런데 스케쥴링을 돌렸는데 뭔가 시간이 안맞게 돌아간다고 해야 하나? 분과 초단위는 잘 도는데 시간대가 좀 안맞았다. 그래서 테스트를 하고 자료를 찾다가 원인을 알게되었다… 원인? 이유는 바로 TimeZone 문제였다. 내가 구현한 코드는 다음과 같이 구성되어 있다. 일요일에서 금요일까지 자정에서 11시까지 도는 스케쥴러다. 근데 로깅을 찍어보고 해봐도 뭔가 이상했다. 저 @Cron의 함수 형태인데 뒤에 옵션이 수상했다. 위에 선언된 속성 중 timezone이 옵셔널로 들어오는데 이게 문제였었다. 아무것도 선언을 안해주면 그냥 UTC 시간대가 적용된다. 그래서 이걸 아래와 같이 timezone을 선언해주면 아주 간단하게 해결되는 문제였다. 이렇게 해주니 한국시 기준으로 잘 동작하였다. 참고 참고 공식 문서 원인? 참고

thumbnail AWS S3 사용할까 고민하다가… 전에 만들던 서비스에서는 보통 AWS의 S3 저장소를 사용했었다. 근데 myme.link를 만들면서 노마드코더의 클라우드플레어 소개 영상을 보면서 R2에 대해 알게 되었다. R2는 일단 S3에 비해 합리적인 가격을 제공한다. 아래에서 간단히 비교를 하게 되면… 아마존 S3 1G 용량 한달 저장 비용 : 0.02$ 저장된 데이터를 송신하는 비용(유저가 다운받는 것) 1G 기준 : 0.09$ CloudFlare R2 1G 용량 한달 저장 비용 : 0.015$ 저장된 데이터를 송신하는 비용(유저가 다운받는 것) 1G 기준 : 거의 무료(초당 10회 이상은 비용 발생) 나 같은 경우 서비스를 오픈할 때 잘 되기 전까진 무료 플랜과 저렴한 비용으로 최대한의 효율을 뽑자 마인드이다. 그래서 이번엔 S3보다는 R2를 적용해봤다. 근데 R2 자료가 거의 없었다. 대부분 S3 -> R2 마이그레이션만 있지, 이것을 S3처럼 사용하는 예제는 없었다…

블로그 이미지가… 전부터 좀 거슬리긴 했는데 이미지를 올리면 디지털 열화라고 부르는, 아주 낮은 품질의 이미지가 보이기 시작했다. 내가 올린 다른 컨텐츠의 썸네일 이미지인데 딱 봐도 품질 저하가 느껴진다. 이유야 알고 있었는데 해결해야지 하다가… 오래 끌었다. 일단 내가 쓰는 블로그는 Gatsby-starter-bee 이걸 약간 내 입맛에 살짝 바꿔서 쓰고 있다. 그래서 다른 개츠비 테마나 또는 직접 만든 것의 경우 아래의 플러그인을 사용한다면 해당 방법이 유효할 것이다. How to? 먼저 자신이 사용하는 테마나 또는 직접 만든 것이라면 gatsby-remark-images 플러그인을 수정하면 끝이다. 아래는 Gatsby-starter-bee 기준인데 다른 테마나 커스텀도 금방 찾을 수 있다. 먼저 gatsby-config.js파일에서 아래의 부분을 찾아본다. 여기서 resolve: , 영역의 옵션에서 퀄리티 값을 주면 된다. 근데 80을 줘봤는데 약간 열화가 심하고, 90도 …

맥에서 tree 명령을… 깃헙(Github) 같은데에 Readme에 트리 구조를 올리려고 명령어를 쳤는데… 명령어를 찾을 수 없다고 떴다. 그래서 brew에서 인스톨 해봤는데… 설치가 실패해서 자세히 보니… M1이라서 아키텍처를 바꾸고 해야 했다. 나온대로 명령어를 다시 쳤더니 잘 되었다.

React에서… 이번에 프리온보딩을 하면서 과제를 하다가 페이징 이동을 하고 쿼리를 지워줘야 할 로직이 필요했다. 예를 들면 위와 같이 url 파라메터가 왔을 때 뒤의 code… 부터 지워서 사용자에게 안보이게 해주고 싶었다. 결과는 이렇게? Next.Js에서는 전에 짜둔 코드가 있었는데, React 에서는 해당 방법을 사용할 수 없었다. 당연한게 Next.Js에서는 Link라는 훌륭한 것이 있지만, React에는 없다. 그래서 직접 찾아서 구현해야 했다. 어떻게? 그냥 커스텀 훅을 만들어서 썼다. 파라메터로 지울 쿼리를 받고, 지운 뒤 실행함수를 옵셔널로 전달받는다. 다음과 같이 사용 한다. 물론 이 Hook도 개선할 점이 있다. 만약 지울 파라메터가 여러개 일 경우에 대해 처리는 되어 있지 않다… (-_-;;) 이 부분은 Hook의 전달인자 중 query부분을 string이 아니라 string[] 로 받은 다음, 이를 순회하며 하나씩 지우는 로직으로 바꾸면 될듯 하다…(맞겠지?…

AWS에서 도메인사서 적용하기 현재 개발하고 있는 흑우집합소의 기능을 다 개발하지 않았지만… 일부 기능만 오픈해서 약간 홍보 겸 외부 테스트 겸… 무튼 이제 도메인을 사서 적용하는 부분을 기록해두려 한다. 도메인 쇼핑부터 제일 먼저 할 일은 도메인명을 정하는 것이다. (-_-;;) 생각보다 어렵다. 변수 짓기보다 약간 난이도 있는? 그래도 재미있다. 약간 게임 케릭터 이름 짓는 느낌일까나… 무튼 이 도메인이 현재 사용하는 것인지 아닌지를 알기 위해서는 후이즈나 도메인 등록 서비스에서 알아보면 된다. 내 서비스 이름은 흑우집합소이기 때문에 뭔가 관련된 걸로 해보려 했는데… 사실 유명하거나 괜찮은데? 라고 하는건 다 있다. 그래서 찾다가… 아마존도 도메인 등록 서비스를 사용할 수 있다. 내가 선택한 도메인은… bcow.world로 했다. 이렇게 추천도 해주지만… 사실 다른거 할까 하다가… 흑우 = black cow => bcow 집합소 = station communi.. => w…

이제 새롭게 시작할 서비스를 구성하며… 난 주로 EC2의 무료 플랜을 1년 굴려보고 희망이 보이면 그땐 제대로 하고, 그 외는 개발용으로 두고 종료한다. 이번에도 서비스를 올리려고 또 아마존에서 EC2 작업을 하다가 기록을 남긴다. 먼저 AWS에 가입이 되어 있고, 계정이 다 있다는 가정하에 진행한다. 먼저 EC2 선택부터 난 Ubuntu가 편하여 LTS 버전으로 선택해줬다. 본인이 원하는 OS가 있다면 그것으로 해도 무방하다. 그 다음은 인스턴스는 일단 프리티어에 맞는걸로 해준다. 서비스가 잘 되서 확장하는게 아닌 이상 일단 맛보기용으로 운영하기에도 스팩이 나쁘지 않다. 키페어는 이 인스턴스에 접근할 때 쓸 공개/비밀 키를 생성하는 부분인데, 난 키 하나로 돌려 쓰는게 아니라 하나의 인스턴스 당 하나의 키를 소유하게끔 한다. (너무 당연한 이야기…-_-;;) 보안그룹은 가급적 제한된 IP만 제공하는게 좋다. 나는 일단 ssh만 열어뒀다. 스토리지는 10기가로 되어 있는데,…

Clone을 받으려 하는데… 내 깃허브는 오픈된 프로젝트는 거의 관리를 안하고 보통 private repo만 주로 사용한다. 기여를 해야 겠지만 실력이… 무튼 private repo를 클론 받으려 하는데 자꾸 아래와 같이 에러를 뿜는다. 그래서 이를 찾아보고 해결한 방법을 포스팅으로 남겨둔다. 1. SSH Key 생성 먼저 Clone 받을 환경에서 SSH Key가 필요하다. 여기에서는 Ubuntu를 기준으로 설명한다. 그런데 SSH 발급 받는 환경은 맥이나 윈도우나 비슷하기에… 터미널에서 아래와 같은 명령어를 통래서 키를 발급받는다. 보안 때문에 일부 내용은 지웠지만 이해를 방해하지 않기에… Enter file in which to save the key 의 경우 key 파일 이름을 정해주는데 그냥 두면 기본 값으로 들어간다. Enter passphrase 는 키의 암호인데 없어도 무방하다. (하지만 보안을 위해 입력해주자) 그리고 다 되면 키가 생성되는데 이름을 기본으로 둔 것…

슬슬 데이터를 이동해볼까… 기존 개발 서버에서 쓰던 디비를 몇 가지 옮겨서 쓸 일이 있어서 찾아보다가… 또 잊을까봐 정리해두려고 쓰는 포스팅.. 구성은 Aws Ubuntu의 Docker 환경에서 진행하였다. MongoDb Backup 일단 Docker 안의 MongoDB에 접근해야 한다. 접근 명령어는 아래와 같이… 저 뒤의 mongo는 docker 컨테이너 이름인데 각자 알맞게 적어준다. Shell에 접근 후 전체 디비를 뜨는 경우 옵션을 안줘도 되지만, 나는 특정 디비만 백업하면 되는 것이라서 아래와 같이 명령어를 수행했다. 그리고 out뒤의 인자는 덤프를 뜬 뒤의 디렉토리를 정해주는건데 Shell 내부 디렉토리를 가리킨다. 만약 디비가 없는 경우 아래와 같이 에러가 나므로 주의 내 디비의 경우 계정 비밀번호가 있었는데 이 경우 아래와 같이 옵션을 주면 된다. 정상적으로 덤프를 따면 아래와 같이 덤프가 생성되고 담기게 된다. 이렇게 하면 백업 데이터가 backup 디렉토리에 저…

배포를 하려다가… 흑집소 서비스를 더 개발해서 오픈하려 했지만… 일단 홍보 전 몇가지 기능만 오픈해서 데이터를 모아보자는 생각에 배포를 준비하게 되었다. 로컬 환경을 떠나서 EC2의 서비스 환경을 구성하던 도중, 전에 개발했던 MyMeLink의 기록을 찾아서 적용하기 시작했다. package.json의 script 부분도 알맞게 변경 후 아래와 같이 구성되어 있었다. 위의 내용 중 실행 쪽은 가려둔 상태이다. 근데 실행을 하니… 아래와 같은 에러가 발생하였다. 뭐가 문제일까? 위 에러를 보면 알겠지만 run-s라는 것을 못찾아서 그렇다. 근데 따로 뭔가 설치하진 않았던것 같은데… 그래서 웹에서 찾아보니… 내가 설치를 안한게 있었다… 이상한데…package.json 비교해봤지만 저거는 따로 안깔았었다. 무튼 아래 패키지를 설치하니 잘 되었다. 여담인데 스택오버플에서 아래와 같이… 왜 비추 5개가 박혀있는 것인가… 정황은 잘 모르겠지만, 그 정도로 우매했던 질문인 것인가 라는 생각이…

개인적인 스터디를 하다가… Typescript에서 useRef에 대한 사용법을 조사하다… 좀 딥하게(?) 약간은 좀 알아보고자 찾고 학습한 내용을 포스팅으로 정리해봤다. 역시 매번 느끼는데 웹 문서 스크롤로 몇번 내리고 예제 몇번 해보면 되는데, 이걸 문서화 하는건 역시 시간이 든다. 하지만 이렇게 함으로써 머리속에서 정리가 되고 내 경험치가 쌓이겠지… 라는 위안으로 포스팅을 시작해본다. UseRef? 뭐 알다시피 React Hook의 일종이다. 함수의 형태는 다음과 같이 생겼다. 저것에 대해서는 차차 알아보고 저렇게 생겼다는 것을 알아두자. .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 말이 뭔가 어려운데 쉽게 DOM 객체를 조작하거나, 컴토넌트의 특정 부분을 선택할 수 있는 방법을 제시하는 Hook이다. 그래서 간단한 사용 예시는… 코드를 보자 예제 코드가 좀 엉망이지만 input에 값을 입력하고 버튼을 클릭하면…

노마드코더에서 몇 가지 학습을 하다가… 요새 기본기 부족을 느껴서 다시 React의 기본부터 한번 쭉 훝기로 하였다. 그러던 중 노마드코더 강의에서 hook 쪽을 듣는데 여기는 다 JS로 코드가 구성되어 있었다. Typescript로 진행하는 나로써는 이 부분을 각 타입에 맞게끔 처리하면서 진행을 했다. 그 중 useRef 부분에서 약간 문제가 있어서 이 부분을 조사하며 알아간 내용을 정리하려 한다. UseRef를 그래서? 음 여기 포스팅에서 UseRef를 직접적으로 다루진 않겠다. 이 부분은 따로 포스팅을 하고, 이번엔 어떤 식으로 쓰는지 알아보도록 한다. 먼저 타입을 정의 하기 전 useRef의 용도에 맞게 타입을 정의해준다. 아래 두 가지 형식을 확인하자. 값(Value) 제너릭과 초기값을 정해줘야 한다. DOM 객체 제너릭은 참조하는 HTML 타입을 넣어주고, 초기값은 null을 넣어준다. 왜 null을 넣어야 하면, useRef로 얻는 DOM은 처음으로 마운트 되기 전까진…

정신없이 지나간… 첫날은 1시간 차이로 백엔드 프론트엔드 둘다 겹쳐 있었다. 어우… 강의 2개를 동시에 틀어두니 정신없었다. 그나마 다행인 것은 프론트엔드가 아이스브레이킹이 좀 길었고, 취업과 관련된 썰로 시간을 좀 벌었다. 강사님도 대단하신 분이고, 강의가 너무 열정적이어서 11시에 끝났어야 하는데 오버 타임이 되었다. (11시 40분 넘었었나..) 난 끝까지 들었다 ㅎㅎ 첫 날이라 큰 내용은 없었고, 그냥 느낀점만 많았다. 강의 진행은 아래와 같았다. 각 챕터별로 느낀점 그리고 배운 점 등을 정리해보겠다. 노션은 공개된 자료인 줄 알았으나… 확실치 않아서 이 부분은 다시 감춤 처리로 바꿨다. 그냥 들으면서 학습한 내용 및 개인 생각을 정리한 노트고, 기술적인 부분은 향후 다룰 예정이다. 1-1 챌린저 메이커 / 코스 커리큘럼 소개 여기는 그냥 오버뷰 시간 입장 인원이 초기 590명까지 들어와서 놀랐다. 두 가지 의미로 놀랐다. 첫 번째로 이렇게 프론트엔드 영역에 대한 인기가 …

블록체인 강의 후기? 아직 강의가 안끝났지만… 강의 일정은 1월 20일까지지만… 아마 자체 종료를 하지 않을까 싶어 이제 가볍게 후기글? 처럼 남긴다. 이 글은 개인적 후기이며, 다른 참가자 분은 다르게 느끼실 수도 있습니다. 약간의 비판적인 글은 있지만 비난할 의도가 아닌 개선했으면 하는 점이라는 것을 밝힙니다. 어떻게? 아는 지인이 공식 홈페이지에 있는 것을 공유해주면서 알게 되었다. 사실 블록체인에 관심은 있었는데 막 찾아보는 수준은 아니었고… 그냥 배워보고 싶다는 생각만 들었다. 그래서 지원서를 냈는데…사실 될 줄은 몰랐다 -_-;; 마지막 인성검사 같은 지원 문서에서 똑같은 질문에 약간 다른 답을 내봤었다. 근데…되었다 -_-;; 교육과정은 Go언어로 백엔드 구축하고, 그 다음은 블록체인 교육이었다. 이건 여담인데 난 블록체인은 아니고 Go 백엔드만 진행하는 줄 알았다 -_-;; 즉 Go백엔드랑 블록체인이랑 나눠져 있고, Go백엔드 수업하고 끝나는 줄 알았다… 책을 …

thumbnail 백엔드 수업 1일차 학습 나는 이번에 프론트랑 같이 수강을 했는데 정말 어지러웠다. 난이도가 높은게 아니라 옆에는 프론트 띄우고, 옆에는 백엔드 띄우니 두 강의 내용을 쫒는거 자체가 불가능할 정도였다. 그래도 다행히 프론트 쪽은 아이스 브레이킹을 하느라 주요한 내용은 안나왔고, 백엔드 쪽을 약간 집중해서 들었다. 여기 TIL은 내가 들으면서 배우거나 학습한 내용을 정리하는 위주로 올릴 예정이다. 개인 학습 내용을 정리한 것이라 약간 부실할 수도 있다. 강의 자료는 강사님의 것이라 공유는 불가능하고, 혹시 저작권 침해나 외부 노출 불가 자료가 있다면 알려주시면 바로 수정 반영 처리하겠습니다. 오픈된 깃허브의 경우 웹에서 누구나 접근이 가능하기에 깃허브는 공개하였습니다. 2일차 강의는 이곳 포스팅 참조 금일 진행 내용 함수형 프로그래밍 컨셉에 대하여 객체지향, 함수형 프로그래밍 패러다임 실용주의 프로그래밍 Live Coding1 : 고차함수(map, filter,…

블로그를 보다가… 뭔가 한글이 좀 이상하게 보이는 느낌이 들었다. 너무 두껍고 가독성이 떨어진달까나? 그래서 폰트를 바꿔보려고 찾아봤다. 먼저 내가 쓰는 블로그 템플릿은 Gatsby-Starter-Bee이거를 쓰고 있다. 그리고 Node 버전은 이 블로그 구동을 위해 14.15.0으로 설정했다. 1. 폰트를 구해보자 이 블로그 템플릿은 typeface를 사용한 거 같은데 이거를 찾아보니 Deprecated 되었다. Github 참고 그리고 이것을 대신할 것이 fontsource이다. 더 자세한 정보는 FontSource 깃허브 와 공홈 을 참조하자. 무튼…나는 처음에 네이버의 나눔 고딕 폰트를 추가해봤지만…영 별로였다. 그래서 이것저것 찾다가 구글 폰트가 괜찮다 해서 해당 폰트를 찾게 되었다. 일단 적용을 위해 설치를 해준다. 이렇게 설치를 하고 난 뒤에 몇 가지 설정을 해줘야 한다. 2. 폰트 설정해주기 아래의 순서로 하나씩 해준다. 2-1 gatsby-browser.js 상단에…

React 개발을 하다가… 이번에 사전 과제를 하다가 a 태그를 쓰는데 이 태그는 알다시피 href 때문에 페이지 이동이 일어난다. 그래서 그냥 클릭했을 때 이벤트만 받길 원했는데 방법을 찾아봤다. 찾아보기 보다는 그냥 떠오른 생각? 1. 그냥 div 등에 onClick 이벤트 처리 위 코드 처럼도 처리할 수 있지만 마우스 커서가 갔을 때 클릭 가능함을 표시하고 싶었다. 물론 깊게 들어가면 또 할 수 있지만 간단히 처리하는 법이 필요했다. 2. a태그에 처리하기 위와 같이 작성하면 내가 원하는 방식으로 동작한다. 단 href에 구석기 시대에 쓰던 방식으로 쓰면 리엑트에서 쓰지 말라 한다. href=“javascript:void(0)” 1. 그냥 div 등에 onClick 이벤트 처리 2. a태그에 처리하기

Typescript Playground가 필요하다 Typescript로 개발을 하다가 뭔가 특정 기능(프로젝트와 무관한)을 테스트 해보고 싶은데, 이걸 매번 진행하는 프로젝트 내에서 테스트하기가 좀 불편했다. 물론 타입스크립트 온라인 플레이그라운드가 있긴 했지만 내 로컬에서 도는 것이 필요했다. 그래서 하나 만들면서 미래의 내가 또 잊을까봐 기록을 남겨둔다. 참고로 특이 사항 및 환경은 아래와 같다. Mac OS, VSCode 사용 npm이나 yarn 설치 가정 typescript를 전역 설치가 아닌 프로젝트 내에서만 사용하게끔 처리 1. 폴더 생성 및 초기화 먼저 디렉토리를 적당한 곳에 하나 만들어주고, 다음과 같이 명령어를 통해 초기화 해준다. 그리고 typescript를 설치해준다. 여기까지 하면 프로젝트 내에 tsconfig.json 파일이 생성되었을 것이다. 이 파일은 typescript의 전반적인 설정을 다루는 파일인데 파일을 열면 아래와 같이 기본 설정 값 및 설명…

VSCode에서 작업을 하다가 갑자기 VSCode가 강제종료가 된 후 다시 켜지는 일이 있었다. 그 때 VSCode에서는 몇 개의 개발 서버를 터미널에서 구동하고 있던 중인데, 포트가 안닫혔는지 계속 사용하고 있는 포트라는 메세지가 떠서 이를 해결한 부분의 기록을 남긴다. 1. 열린 포트 확인 먼저 해당 포트가 열려있는지 확인이 필요하고 그 포트를 담당하는 PID를 알아야 한다. 위 명령어를 통해 열린 포트를 찾는다. 2. 포트 닫기 아래의 명령어를 통해 PID를 죽인 뒤 확인하면 잘 된다. 1. 열린 포트 확인 2. 포트 닫기

새해에는 자연스럽게 바쁜 삶을… 작년 말(작년이라 하니 어감이 안감기네) 부터 이것저것 벌여놓은 것을 하나씩 정리하던 도중… 코드스테이츠 & 위메이드 블록체인 아카데미에 당첨되어 진행을 시작했고, 현재 진행 중이다. 맨 처음엔 Go언어 하다가 지금은 블록체인 영역을 하는데… 진짜 이론만 너무 많고 할 수록 나랑 핏이나 스타일이 맞지 않는 느낌이 들었다. 블록체인 모를 때는 재미있을 것 같고 했는데, 교육으로 오니 정말 답답하고 이걸 다 알아야 해? 라는 생각도 많이 들었다. 그렇다고 포기하는건 좀 그렇고 해서 일단 진행은 하고 있다. 이거는 나중에 후기글로 다시 찾을 예정이고… 그리고 블록체인은 한번 배워두면 좋을 거 같아서 시간이 날 때마다 조금씩 학습은 이어나갈 예정이다. 무튼 진행을 하다가 원티드에서 프리온보딩를 한다고 하여 봤다. 백엔드 프론트엔드 두 영역 다 하는 나로써 좀 더 깊게 알아가기 위해 둘 다 신청했다.(?) 근데 시간이 겹치는거 같은데…일단 강의는 zoom으로…

오랜만에 NextJs를 처음 셋업하다가… 최근 코드스테이츠&위메이드 블록체인 교육 과정을 듣는데… 일단 블록체인이 내가 생각한 거랑 너무 달랐고, 복잡했다. 결과를 바로 보기 힘들고 작은 시간 투자로는 제대로 해볼 수 없는 분야였다. (당연한 것…) 그러던 중 원티드에서 프리온보딩을 한다고 해서 바로 수강 신청 하였다. 근데 프론트도 있고 백엔드도 있어서 일단 둘 다 신청했다… (-_-;;) 사실 지금도 Next.Js랑 Nest.Js 둘다 쓰고 있어서… 둘다 깊게 잘 하는건 아니지만 서비스를 구현하고 실제 운영중이기도 하다. MyMeLink 이게 1차 결과물이다. 보완점이 엄청 많은데 지금은 일단 손놓고 있다;; 신규 서비스 개발이 하나 있었다가 블록체인 강의도 껴서… 각설하고 이유는 프리온보딩 프론트에서 사전 과제가 있었는데 그걸 위해서 플젝을 셋업하고… 상태관리에서 Zustand를 사용하고 적용을 하다가 문제가 발생했다. 그전에… Next.Js는 12.3.1 이고, Zustan…

너무 오랜만에 쓰는 포스팅 너무 오랜만에 포스팅이다… 2022년에는 너무 많은 일이 있었다. 갤러리 구경, 고프로 사서 이것저것 찍기, 취미 사진 촬영, 와인, 취미 개발 등등.. 게다가 연말엔 위메이드 & 코드스테이츠 주관 블록체인 개발자 인가 그거까지 진행하게 되어서 바쁘게 흘렀다. 이렇게 보내다 보니 개발 블로그를 손을 놓게 되었다. 남들처럼 정상적인 삶(?)이 아니다 보니… 온라인에 시간을 할애하기가 어려웠다. 그래도 새해가 되어 다시 마음을 잡고자 한번 시간을 내어 포스팅을 해보자 라는 생각으로 글을 남기게 되었다. 각설하고… 클립보드를 React에서 활용하는 법 클립보드를 사용하는 법은 두 가지가 있다. Clipboard-Api Document.queryCommandSupported 그런데 2번 방법은 이제 Deprecated 된다 그래서 1번 방법을 사용하는 것이 좋다. 나의 경우 UI에서 특정 버튼을 클릭하면 해당 텍스트를 클립보드로 변경시키는 것을 적용하였는데 코…

NextJs에서 Select 태그를 쓸 때… 요새 MyMeLink 개발을 잠시 멈추고, 신규 서비스 개발을 진행하고 있다. 고도화 해야 하지만 이것 먼저 개발을 하는게 순서상 맞는 거 같아서, 잠시 홀드 했다. 역시 혼자서 다 하는건 빡세다… 본론으로 돌아와서… 신규 서비스를 Next.Js로 만들던 중 Select 태그를 써서 구현을 하다가 개발자 콘솔에 이상하고 무시무시한게 떴다. 그 전에…사용한 select 코드는 아래와 같다. 난 저런 경고 에러만 봐도 해결을 해야 할거 같은 강박관념(?) 같은게 있어서 스스로 무덤을 판다; 먼저 원인은 저기 에러에서 나와있지만… Next.JS에서 select 태그 사용 시 option 값에 selected 사용보다는 defaultValue 라는 것의 사용을 권장한다. 그래서 코드를 다음과 같이 변경하면 경고가 더 이상 발생하지 않는다. 좀 더 찾아본 내용? 이거를 살짝 시간내서 찾아본 결과 React에서는 selected 속성을 사용하는 …

24.08.12 유감스럽게도 해당 프로젝트는 더 이상 운용되지 않고 있습니다… 마와셀과 흑우집합소도 이용해주시면 감사하겠습니다 ^^ 혼자서 만들어보다. 개발을 잠시 내려놓고 다른짓 하다가 문득 생각이 들었다. 한번 서비스를 직접 만들어서 운영해보면 어떻한가? 사실 전부터도 들었던 생각이긴 하지만 실천해보기로 했다. 그 전에 커뮤니티를 하나 만들었었는데 반응형도 안되고 jQuery라는 고대 유물로 개발을 해서 그런지 엉망이었다. 무튼 첫 커뮤니티는 Spring boot와 java8을 이용해 백엔드를 구현하고, 프론트? 라고 하기엔 유감스러울 정도인 화면단은 Thymeleaf로 만들었었다. 그러다가 문뜩 LinkTree라는 서비스를 보고 생각이 들었다. 이걸 내가 직접 구현해보면 어떨까? 만들고 싶었던 이유는? 그냥 나도 저런거 금방 만들 수 있을거 같은데? 라는 무모한 생각과 더불어 NextJs를 한번 공부해볼 요량을 만들게 되었다. 그렇다… 뭐든지 쉽게 생각하면 안된다. 마치 주식…

오늘도 평화로운 날이 있을 수 없는… 기존 프로젝트를 진행하면서 신규를 또 진행하는 어이없는 일정을 진행하며… 이번 문제는 DasiyUI에서 Countdown 컴포넌트를 적용하면서 발생한 문제로.. 바로 아래의 문제의 코드를 보자. 위 코드에서 span 태그 안에 style에 —value라는 css 키 요소가 문제였다. 에러는 다음과 같이 발생했다. 에디터 내에서는 에러가 발생하지만 개발용으로 구동 시 잘 돌아간다. 하지만 빌드를 하여 프로덕션으로 가면 이야기가 달라진다. 저 에러를 해결하지 않는 이상 빌드는 진행되지 않는다. 그렇다면 어떻게 해결했는가? 뭐 index.d.ts 라는 파일을 만들고 새로 declare? 재정의 해보고 정의 파일을 src 디렉토리 밖에 빼기도 하고 했지만 당연 안되었다. -_-;; 문제는 어떤거 때문에 발생했다는 것을 알고 있고 이걸 어떻게 해결해야 하는지도 알고 있지만 그 해결 방법을 구현하는 방법을 몰랐다. 마치 해외 여행 나가서 밥 주세요를 그 …

블로그를 갈아타면서… 기존에 쓰던 Hexo 를 버리고 새롭게 이전을 했다. 개인적으로 만들던 플젝에 집중하느라 블로그 이전이 좀 늦었었다. 자잘한 이야기는 뒤로 하고… Gatsby로 갈아타면서 직접 블로그를 만들까 했는데 할일이 너무 많아서 포기했다. 사실 직장 안다니면 한가할 줄 알았는데 전혀… 할일이 더 많아진거 같다. =.= 그래서 직접 개발은 포기하고 다른거 주워서 쓰려고 찾아보니… 이 블로그 테마가 가장 많이 사용되는거 같았다. Gatsby-starter-bee 근데 이 테마의 단점(?)은 검색 기능이 없다는 것이다. 그래서 깃허브 이슈에도 등록이 되어는 있지만, 진척은 없었다. 그래도 마지막에 kostyrko라는 외국 성님이 뭔가 힌트를 줘서 나도 그거에 맞춰 적용을 해봤다. 이 내용은 내 블로그에 검색 기능을 추가하는 것을 남길 목적으로 포스팅한다. 다른 테마 버그나 기타 문의는 깃허브 이슈 등록을 하고 물어보길 바란다. (여담인데 요새는 업데이트가 안되고 버려진거 같…

NVM (Node Version Manager) 이번에 Hexo 에서 Gatsby 블로그로 옮겨오면서 이것저것 셋팅하느라 바빴다. 그 중 이 블로그는 Gatsby-Starter-bee 라는 테마로 구성되어 있다. 근데 이 블로그 탬플릿은 노드 상위 버전을 지원하지 않는다. 허나… 지금 하는 프로젝트는 18버전대 이상을 사용한다. 그래서 Node 버전을 관리하며 사용해야 했다. 파이썬에는 PyEnv인가 하는 것이 있는데 역시 노드 진영에도 비슷한 것을 하는게 있었다. 오늘 포스팅할 NVM이라는 것인데 대충 설명하면… 프로젝트마다 버전 관리하기. 라고 할 수 있다. 먼저 nvm을 설치한다. 윈도우나 기타 리눅스는 다른 블로그를 참고해주시고… 이곳에서는 MacOS 기준으로 설명한다. 뭐 설명이고 자시고 할 것 없이 brew 하나 있으면 끝이다. 설치 후 NVM 설정을 해줘야 하는데 터미널 쉘을 수정해야 한다. 나의 경우 zsh를 사용하는데 home 디렉토리의 .zshrc라는 파일을 열어…

배열 합치기(?) 프로젝트를 진행하다가 배열을 좀 다룰 일이 있어서 찾아봤다. 그냥 안써두면 까먹을거 같아서 기록해둔다. 방법은 여러가지가 있는데 하나씩 적어둔다 1. concat 함수 이용 …연산자 (Spread Operator)를 활용 Push 함수 활용 (with …연산자) 단 여기서 …연산자를 뺄 경우 배열 자체가 추가가 된다. 즉 결과물이 아래와 같이 나오게 된다. 1. concat 함수 이용 …연산자 (Spread Operator)를 활용 Push 함수 활용 (with …연산자)

23.01.18 아마존에서 작업이 미흡해서 일부 내용을 추가합니다. 이번에 서비스를 개발하고 오픈하면서… 예전에 LetsEncrypt를 적용해봤던 적은 있었다. 하지만 방법이 너무 오래되었고, 와일드카드 방식으로 도메인을 사용해서 인증 방법을 다시 찾아보았다. 그 전에 앞서 먼저 내가 사용했었던 두 가지 방식을 간단하게 정리하고 넘어가겠다. Standalone 과 Webroot 방식 먼저 Standalone 방식의 경우 비 효율적인 방식이다. 적용 대상의 80포트에 서버를 띄워서 인증하고 인증서를 발급받는 방식인데, 실제 서비스 시 인증을 하게 될 경우 매우 곤란한 상황이 연출될 것이다. 그리고 와일드카드 서브 도메인의 인증이 불가능하다. Webroot 방식의 경우 위 방법보다는 덜 무식하다. 서버의 특정 디렉토리에 접근 가능 여부를 테스트 해서 인증서를 발급해주는 방식이다. 하지만 서브도메인이 존재하는 경우 각각 인증서를 발급받아야 한다. 예를 들어서 설명하면 www.test.…

어쩌다 보니… 부동산 공부, 투자 공부 등을 하다가 취미로 개발을 좀 다시 시작했었었다. 기존에 쓰던 블로그의 글을 본 사람은 얼마 안될거 같지만… 무튼 근간 정리하면서 블로그를 다시 정비하며 글을 남겨본다. 아참… 기존의 hexo로 운영했던 블로그 글들은 조금씩 이전할 생각이다. 과거의 실패 지금으로부터 한 3년 4년 전이려나… 좋은 직장(?)에서 때려치고 나와서 자만하다가 대기업 이직에 실패하고… 스타트업도 이곳 저곳 다니며 경력을 쌓긴 했지만, 물경력 + 깊은 기술 쌓기 실패로 또 대기업 이직에 실패 후… 개인적으로 좀 쉬면서 직업을 바꿀까 라는 생각을 많이 했었다. 어찌보면 그 당시는 패배자 마인드고 꿈이랄 것도 없었다. 당시만 해도 돈이라는게 목적인 바보같은 삶을 살고 있었으니 말이다. 개발 말고 다른 분야로 근데 투자라는 것에 관심이 생기고, 부동산 공부를 하며 임장 다니고 매물 공부하고… 그러다 코로나가 오고 대 유동성 파티에 몸을 실어서 투자에 눈을 뜨게 되었다. 뭐…

Next.js에서 body에 height 값을… 이번에 Next.JS로 프로젝트를 진행하다가 footer를 하단에 고정시켜야 했다. 그런데 css를 적용했음에도 안되서 개발자 도구를 키고 화면 컴포넌트를 확인하던 도중 화면 사이즈가 전체 화면이 아닌것을 확인하였다. 그래서 형식을 적용하려 했다. 내가 쓰는 Tailwindcss에서 로 적용하려 했지만 body에 적용이 안되었다. 방법을 찾다 포기하려 했는데 방법을 찾게 되어 공유한다. 1. 공통 레이아웃 또는 _app.tsx 에서 global style 을 적용해준다. 아래의 코드를 적용한다. 나는 _app.tsx 에 선언된 공통 레이아웃 코드에서 적용 처리를 해줬다. 이렇게 하면 전체 화면이 적용된다. 1. 공통 레이아웃 또는 _app.tsx 에서 global style 을 적용해준다.

VSCode에서 Tailwindcss를 사용하려 보니… 이번에 개발하는 내 서비스의 기술스택을 완전히 바꾸게 되었다. 그 중 프론트엔드 쪽을 React로 잡았다. 그런데 이것저것 찾아보니 next.js를 쓰는게 좋을거 같아서 일단 변경해봤다. 근데 여긴 뭐 Typescript인지 뭔지 해서 이걸 써야 하는거 같다는 생각이 들었다. (안쓰면 나중에 고생할거 같은?) 일단 이것저것 셋팅을 해뒀는데 몇 가지 거슬리는 부분이 생겼다. 그 css에서 @tailwind 를 선언한 부분이 이렇게 경고가 났다. 그냥 무시해도 되는데… 나의 성격상 이게 또 거슬렸다. 그래서 찾아보니 두 가지 방법으로 해결 가능했다. 1번. 아주 심플한데 좀 찜찜한 방법 (미봉책) 말 그대로 간단하다. VSCode에서 setting 으로 들어간다. 검색창에서 css.lint.unknownAtRules 을 검색 값을 ignore로 변경한다. 이렇게 처리하면 된다. 근데 미봉책이자 찜찜한 방법이다. 2번. 정석으로…

VSCode에서 Import에서 모듈이… 다른 블로그나 유튜브 영상에서 보면 VSCode에서 Import 한 모듈이나 라이브러리의 설명이 잘 나오는데 나는 안나왔다. 그래서 소스코드를 보니 아래 사진처럼 떴다. 내가 WebSocket 의 라이브러리인 ws를 추가했더니 저렇게 떴다. ws 앞에 보면 … 이 보인다. 맨트는.. 모듈 wd에 대한 선언 파일을 찾을 수 없습니다 암시적으로 any 형식이 포함됩니다. 그리고 ws 위에 마우스를 올리면.. 이렇게 any 가 뜬다. 처음엔 이걸 어떻게 찾아야 하나… 구글링 엄청 했다. 그리고 답을 찾았다. 해결법 너무 간단했다. 저기 나온 설명대로 하면 되는 거였다 -_-;;; 난 yarn을 쓰는데 아래의 명령어를 수행한다. yarn add —dev @types/ws npm도 앞에 구문만 바꾸면 된다. 개발용 의존성에 @types/[lib name] 을 설치해주면 끝… 여기서 @types는 타입 선언만 포함하는 모듈이다. 이걸 설치함으로써 …

최근 개발을 접고… 주식도 하락장으로 접어들어 재미없어졌고… 넷플릭스도 맨날 보니까 이제 좀 질려졌다. 그래서 개발을 다시 한번 제대로 해볼까? 라는 무시무시한 생각을 해보게 되었다. 몇달 전 전에 같이 일했던 지인으로부터 프로젝트 합류 요청을 받고 진행했었지만… 그 프로젝트에서 해야 할 포지션도 애매했고.. 나중에 뭔가 잘 되었을 때 스타트업 창립 맴버로 들어가기에도 좀 애매했다. 그리고 무엇보다 그 팀이 개발하거나 프로젝트를 진행하는 방식이 나랑 안맞았고, 가장 중요한 건… 난 프로젝트를 할 때 진행상황, 무엇을 해야 하는지 목표 등이 좀 명확하게 보여야 하는 문서나 도표? 그런 지표가 있었어야 하는데 약간 중구난방 식이었다. 다들 직업군이 있어서 바쁜거라 이해는 하지만… 그렇게 진행하는 플젝은 나랑 맞지 않았다. 그리고 내 개인적인 사유도 있고 해서 난 나왔다. 그쪽에서 진행하는 프로젝트는 node.js와 react, react-native 등을 썼다. 물론 난 하나도 몰라서…

React에서 Cors 문제가… 최근 내 개인 프로젝트를 위해서 React와 node, next.js, typescript, tailwindcss 가 필요했다. 개발을 한창 내려놨던 터라 다시 새로운 것을 하려니 귀찮아졌다. 하지만 기존의 jQuery로 진행한 프로젝트를 모바일용으로 개발하는 것과 서버 기능 분담 등은 불가능 했다. 그래서 노마드코더 에서 강의를 들으며, 외국 성님들의 유튭 강의를 들으며 공부를 시작했다. 강의는 다 들었고, 샘플 프로젝트로 한번 개발을 시작해봤다. 그런데 fetch를 사용해서 JSON을 가져오는 부분에서 Cors 문제가 발생했다. 에러 내용은 다음과 같았다. 저 위에 xxx.com은 내가 임의로 설정한 사이트다. (정보 조회 사이트 공개가 불가해서 임의로 설정했다.) 이걸 해결하는 법은 총 2개가 있다. xxx.com 의 서버 사이드에서 처리해주기. React의 package에서 proxy 처리 해주기. 1번 방법의 경우 나에겐 선택할 수 없는 옵…

VSCode에서 Emmet 이 동작하지 않는다. VSCode를 잘 쓰다가 어디서 에밋? (발음이 Emmet 맞나 모르겠다) 이거를 알게 되서 해보려 했는데 안되었다 =.= 이상하게 뭔가 항상 인터넷에서 도는건 내 개발환경에서 안된다. 개발을 하지 말라는 게시인가… 무튼 나와 비슷한 상황의 사람들을 위해 남겨본다. VSCode에서 설정을 연다. (Mac 기준 Cmd + ,) 거기서 왼쪽 메뉴에서 확장(Extensions) 안에서 HTML을 선택하여 HTML › Format: Unformatted 항목의 settings.json에서 편집 항목을 선택한다. 설정 항목이 열리는데 맨 마지막 쯔음 아래 항목을 추가해준다. 다 되면 테스트 해본다. 위 사진처럼 html 파일 하나 만들고 ! 입력 후 tab해보면 위와 같이 뜨면 제대로 동작하는 것이다. 참고 참고 사이트 참고

세션을 사용하려다가… Node.JS에서 세션을 사용하려 했고, 저장소로 레디스(Redis) 를 사용하기로 했다. 설정법은 다음 포스팅에서 다루기로 하고… 일단 내가 쓰려 했던 패키지는 아래와 같다. 이렇게 설정하고 redis 설정을 해줬다. 참고로 설정 파일을 외부로 빼고 app.use() 에서 넣어서 쓰는 방식으로 개발했다. 이 부분을 참고하면 될 것 같다. 그리고 설정파일의 경우 전체 정보를 공개하기 어렵기에 공통적인 부분만 남긴다. 위와 같이 설정된 상태에서 node.js를 실행할 경우 아래와 같은 에러가 발생했다. 이런 문제가 발생하는 원인은 버전 문제다. 바로 connect-redis 패키지 문제이다. NPM 사이트 에서도 확인 가능하지만 일부 내용을 발췌하면 다음과 같다. 요기서 보면 redis를 사용할 때 v4를 사용할 경우 legacyMode를 사용해서 쓰라 되어 있다. 난 redis 버전을 낮췄다. “redis”: “v3” 무튼 해결법은… redis 버전을 낮춘다.…

최근에 Node.JS 쪽으로 개발을 진행해보고 있다. Spring boot만 쓰다가 새롭게 해보니까 신기한게 많았다. 그리고 jQuery만 쓰고 수준 낮은 형태의 JS 개발을 했었던 내 개발 방법이 싫어서 이번에 JS도 다시 제대로 배워보고 있다. 근데 Node에서 아주 답답한게 있었다… 난 ES6 형식으로 개발하는데 모듈을 임포트할 때 아래와 같은 문제가 있었다. 저 경로 보이는가? 처음에 몇개 간단하게 쓸 때는 안거슬렸는데 점점 코드가 늘어나면서 상당히 귀찮게 되었다. 게다가 해당 파일의 위치가 변경될 경우 이 부분도 문제가 되었다. 그래서 구글에 이것저것 찾아보는데 이쪽으론 어떤 식으로 키워드를 넣어야 할지 몰라서 좀 삽질했다. 사실 간단한 패키지 하나 설치하면 끝났을 문제기도 한데…난 뭔가 더 설치하기가 좀 불편했다. 덕지덕지 쌓이기만 할 뿐더러 보안 문제가 생길수도 있을거 같아서 사람이 많이 받아서 쓰거나 가급적 안쓰는 방식으로 진행했다. 해결법 (Node 14.6.0 이…

VSCode에서 한글이 깨질 때… 이번 M1 맥북을 사용하면서 기존에 Jetbrain 제품군을 사용하다가 Node.js 개발에 VSCode를 많이 사용한다 하여 이번에 써보기로 했다. 그런데 한글이 자꾸 한글자 한글자 씩 씹히는 현상이 발생했다. 아마 검색하다 들어온 사람은 무슨 말인지 이해할 듯.. 이걸 해결하는 법은 몇 가지 있는데 내가 적용된 방법을 공유해본다. 1. VSCode에서 모든 명령 표시 창 열기 모든 명령 표시 창을 연다. 단축키는.. CMD+Shift+P 2. 검색 창에 표시 언어 구성을 선택한다. 표시 언어 구성을 입력하면 en만 있을텐데 ko를 선택하고 VSCode를 재시작 해준다. 만약 없다면 설치해주고 재시작 해주면 된다. 나같은 경우 이 방법으로 해결했다. 1. VSCode에서 모든 명령 표시 창 열기 2. 검색 창에 표시 언어 구성을 선택한다.

크론탭을 수정하려 할 때.. 요새 잠시 개발을 손 놓았다가 다시 하게 되었는데 크론탭을 어떻게 수정해야 할지 막막했다 =.=;; 그래서 기억해둘 겸 간단 포스팅을 해두려 한다. 이 글은 우분투(Ubuntu) 20.04 인가 무튼 우분투 기준으로 작성되었다. 아래의 명령어를 입력한다. sudo vim /etc/crontab 그럼 현재 등록된 크론탭이 보이는데 해당 내용에서 수정하거나 추가 후 저장하고 나와서 아래의 명령어를 입력한다. sudo crontab -e 위와 같이 입력하면 크론탭이 수정되었다는 메시지가 나오고 처리는 끝난다.

AWS 프리티어 기간을 확인해보려면… 최근 개발용으로 쓰던 계정들의 프리티어가 언제까지인지 궁금해졌다. 이걸 확인해보는 방법은 간단했다. 1. AWS Console 에 접속한다. 위 사진과 같이 로그인 이후 우측 상단의 계정을 클릭하여 결제 대시보드 로 이동한다. 2. 청구서 항목을 클릭한다. 청구서의 청구 기간을 하단으로 내리면 최초 청구일이 나오는데 그거에서 1년이 지난 기간이 프리티어 기간이다. 나처럼 개발용으로 사용하는 사람들은 이 기간을 잘 확인해두었다가 마지막 달에 사용하는 서비스를 모두 정리하고 계정을 탈퇴하면 된다. 1. AWS Console 에 접속한다. 2. 청구서 항목을 클릭한다.

즐겨찾기 관리 프로그램을 만들다. 예전 포스팅 에서 공개했던 프로그램을 완성했다. 사실 완성이라고 하기엔 뭐하고 쓸만할 정도가 되었다. 예전에 공개한 버전에서 UI를 조금 바꾸고 변경했다. 아직 미흡한 부분이 남아있지만… SML을 만들면서 몇 가지 목표가 있었고, 그 중 한가지가 내가 필요해서 만들었으니 나에게 맞는 기능을 만들어 써보자 였다. 사실 프로그래머 개발자 이런게 뭐 별거인가? 그냥 내가 필요해서 만드는게 그 직업군이지. 무튼 그래서 내가 만들었고, 현재 잘 쓰고 있다. 노션에 정리할 때 보다 더 편리한거 같다. 공개는 Github 에 해뒀고, 다운로드는 릴리즈 페이지에서 가능하다. 소스코드는…정리좀 하고 올릴 예정이다. 너무 하나에 몰아두고 짜서 보기 어렵다… 뭐 누가 보겠느냐 싶겠지만 그래도 추가 기능 개발 및 향후 내가 만들 웹 서비스에 연동을 위해서 몇 가지 사전 작업을 해둬야 해서… 곧 리펙토링 및 코드 정리가 끝나면 오픈할 예정이다. 참고로… 난 Javasc…

요새 시끄러운 log4j2 공격… 요새 Log4J2 취약점 때문에 난리다. 사실 이 이슈가 알려진건 좀 되었다. (물론 일주일 전에 오픈된거로 알고 있긴 하지만…) 보안쪽은 이런 큰 문제가 터지면 바로 대응해야 한다. 조금만 늦게 대응하는 순간 비트코인 마냥 추락하는 거대한 손실을 껴안을 수 있다. 개발쪽은 역시 부지런해야 살아남는듯… 사설이 길었다. 이번 이슈에 대해서는 많은 사람이 적었기에 따로 언급은 안하겠다. 정 궁금하신 분은 이곳 KISA 에서 확인해보기 바란다. 나는 현재 개인적으로 돌리는 서비스가 있는데 Spring boot 기반으로 되어 있다. 저 이슈보자마자 바로 문제가 생기겠구나 싶어서 확인했다. 처리는 금방 했는데 블로그에는 좀 늦게 올리게 되었다. 어떻게 공격이 들어오는가? 일단 불법적으로 들어오는 것들을 조사하는 로그 서버에서 이런 결과가 들어있었다. 동작 방식은 사실 대충 알고, 자세하게 동작하는 방식은 popit 게시글을 참고하자. (여담인데 난 원…

개발을 하다보면 쌓이는 링크들… 개발을 하다보면 개발자의 성지 stackoverflow나 다른 사람의 기술 블로그를 많이 보게 된다. 그리고 유용한 것은 즐겨찾기에 저장하거나 페이지 탭에 그대로 두게 된다. 문제는… 브라우저에서 제공하는 즐겨찾기는 몹시 불편하다. 제한적인 카테고리에 일정 수가 넘어가면 찾는데 어려움의 문제가 기다린다. 두 번째로 페이지에 그냥 두면… 이런 대 참사가 발생한다. 그래서 이번에 노드 공부하다가 빠져버린 일렉트론으로 직접 개발해보기로 했다. 일단 1차 개발용 버전은 아래와 같다. 이거 개발하면서 JS의 await / async 에 대해서 좀 어느정도 배우게 되었다. 나름 학습 효과가 있었던 미니 프로젝트였다. 개발시간은… wakatime 이 정도? 근데 저거 벳지 클릭하면 404 나온다… 처음 써봤는데 신기하다 ㅎㅎ 오늘 기준으로 일주일 동안은 11시간을 쏟았군… 솔직히 이야기 하면… 낮에 윈도 피시에서 주식창 띄우고 거래 보다가 개발하고… 밤에는…

최근 AWS의 EC2 인스턴스가… 현재 베타 테스트로 진행 중인 AWS의 EC2 인스턴스가 자꾸 상태이상 1/2 상태로 되면서 접속이 불가능했었다. 간헐적으로 일어나는걸 보면 뭔가 문제가 좀 심각한 거 같았다. AWS를 잘 쓰는 타입은 아니라서… 클라우드 워치인가 모니터링 툴을 봤는데 CPU 사용률이 갑자기 치솟다가 멈춰 버리는 구간이 보였다. 정확히 표현하면 내가 운영하는 서비스에 로그가 기록되는데, 일정 시간 마지막 로그를 보면 그 CPU 사용률이 튄 뒤부터 로그가 끊겼다. 그렇다고 내 서비스가 CPU 파워를 엄청 쓰는 것도 아니고…접속률은 베타라서 그렇게 많지 않다. 커널 로그인가에서 메모리 관련 에러를 찾아봤지만 없었다. (근데 메모리가 범인…) 도데체 뭐가 문제인가 하다가 이것저것 검색을 하던 도중 나랑 비슷한 증상을 가진 글 을 보게 되었다. 여기에 나온것과 같이 메모리 문제였다. 근데 나 같은 경우 위에서 나온 명령어는 동작하지 않았다. 내 환경은 Ubuntu 20.0…

Node.js에서 request를 사용하여… 현재 베타테스트 중인 내 프로젝트의 일부 기능을 Node.js로 변환하는 중이었다. 아직 Node를 학습하면서 붙이는 거라서 좀 익숙하지 않았다. 일단 진행하면서 겪은 문제의 포인트는 아래와 같다. 특정 사이트의 크롤링을 진행한 다음 해당 내역중에 필요한 데이터를 html 파싱 처리. 테스트 환경이 Node.js로 구축한 서버의 특정 url로 접근 시 1번 기능이 호출된다. 문제는 2번에 나온 url 호출을 하면 1번의 작업이 끝나고 그 결과를 json으로 뱉어야 하는데 {} 반환. 난 거의 Java로만 개발을 많이 했던 사람이라 (물론 python도 많이 썼지만 그건 좀 과거라 패스하고…) 순차적인 흐름에 익숙한 사람이다. 일단 코드로 보자. 내 개념으로는 crawling4Test() 함수의 처리 결과가 끝나고, 그 반환 값을 res.json() 에 전달하여 Json 응답이 처리되는 것으로 이해하고 있었다. 근데 아니었다. 먼저 cra…

Hexo 설치 글을 보면… 이게 뭐 도움이 될지 모르겠지만… 나는 hexo 설치할 때 npm 이라는거 대충 알았지 자세히는 몰랐다. 그래서 거기 가이드에서 설치할 때 보면 npm install hexo -g 이렇게 글로벌로 설치하게 하는데 이건 내 생각에 좋은 방법은 아닌 것 같다. (나한테는?) 난 보통 어떤 프로젝트나 모듈이 프로젝트 내에서만 영향을 줘야지 공통으로 사용하는 곳까지 설치되어 거기서 끌어다 쓰는 형식을 안 좋아한다. (정말 싫어한다 -_-;;) 그래서 이번에 노드를 학습하면서 이렇게도 관리할 수 있겠구나 싶어서 공유한다. 뭐 다 아는 사실이겠지만… hexo 사용할 디렉토리에서 아래의 명령어 대로 설치한다 npm install hexo 이렇게 -g 옵션만 빼면 로컬에서 사용할 수 있는데 여기서 한가지 더.. path를 등록해줘야 한다. 난 mac 에서 zsh를 사용하기에.. 자신의 홈 디렉토리에 .zprofile 하나 만들어준다. (만약 있으면 맨 밑에 추가한다) …

Node에서 환경 변수를 사용하는 법? (설정 파일로 관리하기) 내가 Spring boot로 개발할 때는 application.yml에 설정을 넣고 개발을 했다. 그러다가 설정에 넣은 값에 변경이 필요할 경우 서버를 내렸다가 올려야 하는 문제가 생겼다. (물론 이중화 되어 있다 하더라도 이렇게 하는건 비효율적..) 그래서 Spring config server를 사용해서 처리하였다. Node.js는 이런 비슷한게 있나 찾아보다가… 아주 똑같지 않지만 설정 파일을 외부에 두고 사용할 수 있는 것을 찾았다. (Node를 첨 다뤄보니 이런게 있는줄 몰랐다) dotenv 먼저 설치를 진행한다. (yarn 을 사용하였는데 npm도 똑같다) yarn add dotenv 설정 내용을 선언 설정 파일을 만드는 형태는 두 가지가 있다. 여기서는 ES6 문법으로 설명한다. (CommonJS 는 간략하게만 표기..) 1. .env 파일 사용 프로젝트 내에 (보통은 자신 프로젝트 루트에) .env 파일을…

VSCode로 Node 개발을 진행하다가… 공부 겸 이번 프로젝트에 적용시키려고 Node를 공부하고 예제를 돌려보려던 중… 이상한 점을 발견했다. express를 분명 yarn add express 이렇게 로컬 프로젝트 영역에 설치했음에도 VSCode에서 해당 모듈을 참고하는 곳은 엉뚱한 곳을 가리키고 있었다. 경로가 Mac OS 기준으로.. /User/YourHome/Library/Caches/typescript/YourVersion/node_modules/@types/… 이상해서 저기를 열었다가 지워도 똑같이 생성되고 계속 참조했다. 그래서 이곳저곳 찾다가… 아주 간단하게 해결하였다. Solution VSCode의 환경설정을 들어가서 (Mac 기준 : Command + ,) 검색창에 아래의 키워드 검색 disableAutomaticTypeAcquisition 이거 항목이 체크가 안되어 있을건데 체크해준다. 라이브러리 참조 영역을 삭제하고 VSCode 재시작 해본다. 참고 스택…

22.09.25 내용 추가 여기서 진행한 방식의 경우 standalone 방식이다. 이 방식은 80포트를 강제로 내려서 인증 대상이 진짜 사용하는 서비스인지를 체크하기에 매우 비효율적인 방식이다. 최근 방식의 경우 Webroot나 DNS 인증을 사용하는데, 이번에 DNS 인증에 대하여 포스팅을 진행했다. Webroot도 사용하지만 와일드카드(ex: *.api.com 등) 인증이 불가하기 때문에 DNS 인증을 사용할 것을 추천한다. DNS 인증 방식이 필요한 경우 아래 포스팅을 참고하자. LetsEncrypt 적용법 (DNS 인증 & AWS) Let’sEncrypt 갱신이 불가능?? Let’sEncrypt를 적용하고 나서 갱신 테스트를 해보는데 이상한 에러를 마주했다. 아 뭐가 이렇게 안되지? 라고 삽질했었으나… 이것저것 찾아본 결과 아래의 문제가 원인이었다 원인은 갱신을 auto 모드가 아닌 manual 모드로 진행한 문제 원인을 제공했던 명령어는 다음과 같다 메뉴얼 모드로 만든 …

22.09.25 내용 추가 여기서 진행한 방식의 경우 standalone 방식이다. 이 방식은 80포트를 강제로 내려서 인증 대상이 진짜 사용하는 서비스인지를 체크하기에 매우 비효율적인 방식이다. 최근 방식의 경우 Webroot나 DNS 인증을 사용하는데, 이번에 DNS 인증에 대하여 포스팅을 진행했다. Webroot도 사용하지만 와일드카드(ex: *.api.com 등) 인증이 불가하기 때문에 DNS 인증을 사용할 것을 추천한다. DNS 인증 방식이 필요한 경우 아래 포스팅을 참고하자. LetsEncrypt 적용법 (DNS 인증 & AWS) Let’sEncrypt 유효기간? 혹시 아직 Let’sEncrypt를 설치하지 않으신 분이라면 Let’sEncrypt 설치후 AWS에 적용하기 에 설치법을 참고하시길 바란다 Let’sEncrypt는 무료인 대신에 인증서를 주기적으로 인증해줘야 한다 그래서 보통 이것을 크론탭으로 처리해서 편하게 간다. 경각심(?)을 위해 직접 갱신하는 분(?)도…

22.09.25 내용 추가 여기서 진행한 방식의 경우 standalone 방식이다. 이 방식은 80포트를 강제로 내려서 인증 대상이 진짜 사용하는 서비스인지를 체크하기에 매우 비효율적인 방식이다. 최근 방식의 경우 Webroot나 DNS 인증을 사용하는데, 이번에 DNS 인증에 대하여 포스팅을 진행했다. Webroot도 사용하지만 와일드카드(ex: *.api.com 등) 인증이 불가하기 때문에 DNS 인증을 사용할 것을 추천한다. DNS 인증 방식이 필요한 경우 아래 포스팅을 참고하자. LetsEncrypt 적용법 (DNS 인증 & AWS) Let’sEncrypt? 이번에 서비스를 준비하면서 EC2에서 하나씩 올려서 해보기로 했다. 사실 AWS 기반이라 로드벨런서에 인증서 물리면 되는데… 전에 해보던게 생각 나기도 했고.. 일단 서비스 규모가 더 커지면 그 때 안정적으로 가고 지금은 빌드업 수준으로 해보기로 했다. 일단 뭐 Let’sEncrypt에 대한 자세한 것은 이미 알고 있다…

주의 이 문건은 과거 Hexo 블로그 (2021-10-18) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 처음 node를 하려다가… 이번에 진행하는 프로젝트에 노드를 적용해보려고 노드 공부를 시작했다. 노드 환경을 구축하고, npm은 문제가 많아서 페이스북에서 만든 yarn이라는걸 많이 쓰는 추세라 하여… yarn을 사용하기로 마음먹고 실행해봤다. 그런데 역시 처음엔 고통과 배움의 시간이 필요하듯… 이상한 문제가 나에게 찾아왔다. 프로젝트를 지웠다가 다시 해도 계속 발생하고, 검색을 해도 잘 안나오거나 뭐라고 하는지 이해가 잘 안되었다. 지금 생각해보면 너무나도 간단한 문제였지만 -_-;; 내가 찾은 솔루션은 이 문서 였다. 내용을 요약하면… 너가 지금 하려는 디렉토리의 상위쪽에 package.json 또는 yarn.lock 파일이 존재한다 맨 처음엔 ‘상위에 저런게 있을리가 없지’ 라면서 그냥 넘겼는데.. 도저히 못찾아서 헤매다가……

주의 이 문건은 과거 Hexo 블로그 (2021-10-04) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. iTerm2 에서 경로가 깨저서 나오는 경우 위와 같이 깨질 경우 설정에서 폰트를 바꿔주면 된다. Preferences(command + ,) -> Profiles 탭 -> Text 항목 -> Font를 변경 위와 같이 변경한 경우 깨지는것은 사라진다.

주의 이 문건은 과거 Hexo 블로그 (2021-10-18) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. RSA 키 충돌 문제 (REMOTE HOST IDENTIFICATION HAS CHANGED) 최근 인프라 쪽 작업을 하면서 ec2 에 작업을 좀 하다가 키를 바꾸게 되었다. 그리고 다시 접근을 하는데 아래와 같은 에러가 발생하였다. 이럴 경우 다시 키를 생성해서 처리해주면 된다. ssh-keygen -R [접근할 주소] 위와 같은 출력이 뜬 뒤로 다시 해보면 잘 된다. 참고사이트 이 문건은 과거 Hexo 블로그 (2021-10-18) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다.

주의 이 문건은 과거 Hexo 블로그 (2021-10-03) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Aws ec2 ubuntu에서 타임라인 맞추기 두 가지 방법이 있다. 명령어 처리 아래의 명령어를 통해 처리한다 AWS 추천 방법 - Amazon Time Sync Service 구성 처리 참고링크 이 문건은 과거 Hexo 블로그 (2021-10-03) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 명령어 처리 AWS 추천 방법 - Amazon Time Sync Service 구성 처리

주의 이 문건은 과거 Hexo 블로그 (2019-09-23) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Java에서 Singleton 패턴이란? Singleton(이하 싱글톤) 패턴은 자바에서 많이 사용한다. 먼저 싱글톤이란 어떤 클래스가 최초 한번만 메모리를 할당하고(Static) 그 메모리에 객체를 만들어 사용하는 디자인 패턴 을 의미한다. 즉 생성자의 호출이 반복적으로 이뤄져도 실제로 생성되는 객체는 최초 생성된 객체를 반환 해주는 것이다. 보통 아래와 같이 사용하게 된다. 위 코드에서는 instance라는 전역 변수를 선언하는데 static을 줌으로써 인스턴스화 하지 않고 사용할 수 있게 하였지만 접근 제한자가 private 로 되어 있어 직접적인 접근은 불가능하다. 또한 생성자도 private으로 되어 있어 new 를 통한 객체 생성도 불가능하다. 결국 getInstance 메서드를 통해서 해당 인스턴스를 얻을 수 있게 된다.…

주의 이 문건은 과거 Hexo 블로그 (2019-06-22) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Spring boot에서 H2 데이터베이스 사용하기 정말 오랜만에 포스팅을 남긴다. 이직 후 블로그를 정리할 시간도 없이 다양한 프로젝트를 진행하였다. 하면서 쌓은 경험들이나 작성할 것들이 Notion에 산더미처럼 쌓여있다. 이제부터 하나씩 정리를 하면서 포스팅을 다시 열심히 해볼 예정이다. 각설하고… 첫 포스팅은 H2 데이터베이스를 붙여보는 부분이다. H2? H2는 자바 기반의 RDBMS이다. 브라우저 콘솔 지원, 저용량 (2MB), JDBC API 지원 등 다양한 장점을 가지고 있다. 이런 장점들 덕에 테스트 DB로 많이 쓰인다. 나도 포스팅을 하면서 JPA 등을 테스트 하기 위해 H2를 설정을 하였는데 이번 포스팅에서는 이 H2를 Spring boot에 붙이는 것에 대해 알아보려 한다. H2에 대해 더 알고 싶은 분은 공식 홈…

주의 이 문건은 과거 Hexo 블로그 (2019-01-31) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Spring boot에서 특정 url을 베이스로 잡고 싶을 때 최근 프로젝트를 진행하면서 특정 컨트롤러의 url을 기본으로 잡고 싶었다. 말이 뭔가 이상한데 쉽게 예제로 표현을 하자면… 위와 같은 샘플 url이 있고 앞의 rest/test 이 부분이 경우에 따라 변경이 되어 매번 컨트롤러에서 수정이 번거로웠다. 그래서 특정 url을 베이스로 잡고 처리하는 방법을 찾아보았다. How to? 몇 가지 방법이 있는데 이 중 사용하기 편한 두 가지 방법을 알아보겠다. 1. Custom Annotation 사용 이 방법은 커스텀 어노테이션을 하나 만들고 이것을 적용할 컨트롤러에 붙여준다. 먼저 커스텀 어노테이션을 하나 만들어준다. 그리고 적용할 컨트롤러에 아래와 같이 붙여서 사용한다. 이렇게 공통적으로 사용할 컨트롤러에 어노테이션만 붙이고…

주의 이 문건은 과거 Hexo 블로그 (2019-01-26) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Postman을 사용하다가… 최근 개발을 하면서 Rest api를 개발하다 보니 개발된 api를 테스트하기 위해 Postman을 사용한다. 그런데 기능을 개발하던 중 첨부파일 기능을 개발하게 되었는데 첨부를 어떻게 해야 하는지 몰라서 찾아보았다. (매번 파라메터만 주는 것만 하다보니…) 파일 첨부 먼저 url과 http protocal을 적당하게 작성 후 하단의 Body 항목을 클릭하면 몇 가지 옵션이 나온다. 여기서 form-data 항목을 선택하면 key 부분에 항목을 file로 변경하고, 파라메버 이름을 적어준다. 그리고 Value에서 원하는 파일을 첨부하면 된다. 자세한 것은 아래 사진을 참고하자. 이 문건은 과거 Hexo 블로그 (2019-01-26) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니…

주의 이 문건은 과거 Hexo 블로그 (2019-01-25) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 만약 1부를 안 보신 분이 있다면 이곳 1부 포스팅을 참고하자. 실제 구현 전 설치하거나 구성해야 할 것들이 있는데 이는 1부 포스팅의 참고 링크를 확인하자. 1부에 이어서.. 이번엔 바로 적용한 코드를 확인해보자. 1. Hwp to XHtml 아래의 메서드로 구현을 하였다. 위의 메서드는 hwp를 xhtml로 변환 후 변환된 경로를 반환하는 메서드이다. 자세한 것은 코드를 참고하자. 2. Xhtml to Pdf 이것도 아래의 메서드를 참고하면… 이 메서드도 변환 후 경로를 반환하는 메서드이다. 여기서 사용된 Pdf의 경우 WKHtmlToPdf 설치하기 포스팅의 번외 1편을 참고하자. 3. Pdf to Image 바로 코드를 보자면… 이곳에서는 PDF를 이미지로 변환하기 위해 PDFbox 를 사용하였다. 이것과 관련해서는 Java에서…

주의 이 문건은 과거 Hexo 블로그 (2019-01-25) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Java에서 PDF를 이미지 파일로 변환하려면… 사내 프로젝트 중 Spring boot로 진행하는 프로젝트의 개발을 진행하던 중 위의 기능을 개발해야 했다. 이번 포스팅에서는 Java 라이브러리 중 PDFBox를 이용하여 Pdf를 이미지로 구현하는 방법을 정리해보려 한다. 개발환경은 Mac OS 이며 Spring boot 2.0, Java8을 사용하였다. 1. Gradle 추가하기 현재 포스팅을 하는 시점에서는 2.0.13 버전을 사용하였다. 아래의 Gradle을 추가해줘야 한다. Maven을 사용하시는 분은 아래를 참고하자. 2. Java Code… 아래의 코드를 참고하자. 위 메서드에서 전달인자는 InputStream을 받는데 이 부분은 PDF 파일을 FileInputStream으로 넘겨주면 된다. 와 같이 처리할 수 있다. 그…

주의 이 문건은 과거 Hexo 블로그 (2019-01-25) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. WKhtmlToPdf? 회사에서 진행하는 프로젝트에서 Hwp -> Image를 만드는 과정을 진행하며 찾게된 툴이다. WKHtmlToPdf는 Html을 Pdf로 변환해주는 툴이다. 이번 포스팅에서는 이것을 AMI에 설치하고, 사용하는 방법을 소개한다. 설치하기 전… 일단 진행하는 환경은 Amazon의 AMI에서 진행하였다. (CentOS-6 64bit) 다른 OS환경은 공식 홈페이지를 참고하도록 하자. 1. 의존성 설치 및 Wget 가져오기 설치 전 필요한 의존성을 설치해준다. (명령어는 가급적 Control C + Control V 조합으로..) 그리고 wget으로 다운을 받는다. bin으로 이동 처리를 해준다. 2. 실행 특별히 환경변수를 안잡아도 터미널에서 아래와 같이 명령어를 수행하면 실행이 될 것이다. 이를 통해서 아래와 같…

주의 이 문건은 과거 Hexo 블로그 (2019-01-22) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 추가 내용 by 19.07.29 포스팅 하단에 pyhwp의 버전 추가 관련 내용을 추가하였습니다. Install Pyhwp! Pyhwp를 찾게 된 것은 이곳 포스팅과 연결된다. Java에서 hwp를 이미지로 변환하다 보니 이것 저것 찾게 되었고, 결국 종착지는 Pyhwp였다. 일단 Pyhwp에 대해 자세한 것은 공식문서를 참고하고… 이번 포스팅에서는 설치하는 과정에 대해 다루려 한다. (중요) Pyhwp는 Python 2.7에서 동작한다! => 최신버전에서는 Python 3.x를 지원하게 되었다. 그래서 먼저 별도로 실행할 환경은 Python 2.7을 구축해두고 진행하자. 최신 버전인 0.1b12 를 사용할 경우 가상환경에서 python3.x 버전을 구축해두고 진행하자. 아래는 설치 진행 과정이다. 1. lxml 설치 pyhwp는 공…

주의 이 문건은 과거 Hexo 블로그 (2019-01-22) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Hwp 파일을 이미지로 변환? 회사를 이직한 뒤에 언어가 Python-Django에서 다시 Java-Spring으로 변하였다. 사실 다시 Java측으로 와도 가끔 집에서 토이 프로젝트나 그런 것을 할 때 Python을 애용한다. 무튼 이번 회사에서는 기존의 레거시 프로젝트의 기능 중 일부를 신규 서버에서 구현하기로 하고, 신규 서버를 개발하게 되었다. 그 레거시의 기능 중 일부를 구현하게 되었는데, 제목에도 나와있는 것처럼 **hwp(한글)**을 이미지로 변환하는 기능이 있었다. 기존에는 윈도우 프로그램에서 변환 처리를 진행하였는데 이제 이 기능을 서버단에서 처리하게 되었다. 혹시 결론을 좀 급하게 원하는 분들도 있을 거 같아서 미리 요약을 드리자면.. Java에서 바로 Hwp to Image를 처리하는 것은 불가능 하지만 몇 가지 …

주의 이 문건은 과거 Hexo 블로그 (2018-08-12) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 인증과 토큰 그리고 JWT? 최근들어 보안 및 인증을 위해서 JWT를 사용하게 되었다. 그래서 사용만 하다가 이번에 JWT에 대한 개념과 구조, 사용법과 문제점 등을 알아보고자 한다. 일반 토큰 기반의 인증과 클레임(Claim) 토큰 기반 인증 일반 토큰 기반은 과거에 많이 사용하던 방식이다. 주로 의미가 없는 문자열(Random string) 기반으로 구성되어 있으며 아래와 같이 표현이 된다. 그리고 사용할 때는 아래와 같은 json으로 보내는 방식으로 사용하게 됩니다. 그런데 이런 일반 토큰은 단순한 문자열이기 때문에 정보를 담거나 할 수 없다. 크게 보자면 아래와 같은 문제점을 가지고 있다. 발급된 토큰에 대해서 만료를 시킬 수단이 없다. 발급된 토큰을 검사하거나 처리할 때마다 DB에 접근하여 검사할 경우 부담이 생긴다. 사용자…

주의 이 문건은 과거 Hexo 블로그 (2018-06-08) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. org.thymeleaf.exceptions.TemplateInputException 발생… Spring Boot의 프로젝트를 진행하던 중 화면을 하나 추가하고 서버를 올린 뒤 해당 뷰로 접근하는 순간… 아래와 같은 에러가 발생하였다. 여기서 org.thymeleaf.exceptions.TemplateInputException 이 에러를 보지 못해서 계속 뷰에 뭔가를 잘못 입력했나 싶어서 계속 thymeleaf 화면 파일을 계속 찾다가 도저히 못찾아서 검색해본 결과… 문제는 Controller 영역의 view 화면 지정하는 곳이 문제였다. 자세한 것은 아래 코드를 참고! 이 문건은 과거 Hexo 블로그 (2018-06-08) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다.

주의 이 문건은 과거 Hexo 블로그 (2018-04-26) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. JS에서 값을 받으려 했더니… SpringBoot를 사용하여 JS에서 Json으로 서버측에 데이터를 보냈더니 아래와 같은 에러가 발생하였습니다. Could not read JSON: Can not deserialize instance of hello.Country[] out of START_OBJECT token 사실 제 로그는 아니고 검색해서 나온 로그입니다… (저장 해두는 것을 깜빡하여…) 저의 경우 이 문제가 일어난 케이스는 제가 개발 중인 사내정보시스템 기능 중 하나인 회의록 저장 기능이었습니다. 먼저 JS 단에서 전송하는 데이터는 아래와 같습니다. 저기 데이터 중에 member라는 값은 Select2의 값인데 이게 문제였습니다. 위의 값을 받는 데이터 중에 DTO를 사용하는데 아래와 같습니다. 위 코드는 일부 코드이며, 참…

주의 이 문건은 과거 Hexo 블로그 (2018-04-24) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 오늘의 주제는? 이번 주제는 프로젝트에서 버전을 표시하는 부분을 다루려 합니다. 제가 진행하는 프로젝트는 아래의 사진과 같이 하단에 버전을 표시합니다. 근데 이것을 thymeleaf에서 일일히 버전을 고치는 것은 일입니다. (사실 여기 말고도 JS 등에서 메뉴를 클릭하면 빌드 및 버전 정보가 뜨게 되는 부분도 있어서 이걸 일일히 고치는 것은 심각한 노가다입니다.) 그래서 이번에는 Java의 Enum과 thymeleaf를 활용해서 버전 정보를 관리하는 방법에 대해 포스팅을 해보려 합니다. How to? 진행하는 법을 순서대로 하나씩 진행해보도록 하겠습니다. 1. Java에서 Enum 만들기 먼저 저는 간단한 정보 표시를 위해 enum을 하나 만들었습니다. 2. 정보를 표시할 Thymeleaf에 코드 작성 진행하는 프로젝트는 화면의 …

주의 이 문건은 과거 Hexo 블로그 (2018-04-22) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 오늘의 주제는? 간만에 작성하는 연구일지입니다. 정말 많이 바빠서 포스팅도 주말에 시간을 내서 작성하게 되네요. 이번 주제는 게시판에서 새로운 글 작성 시 사이드 메뉴에 표시를 하는 것을 다루겠습니다. 위와 같이 새로운 글이 작성될 경우 옆에 new라는 버튼이 뜨게끔 하는 것이 목표입니다. 프로젝트 진행 환경은 Spring Boot에 Thymeleaf 에서 진행하고 있음을 알려드립니다. 어떻게 해야 새 글이라는 것을 알 수 있을까? 먼저 아래와 같은 순서로 구현을 생각해 보았습니다. 새 글이 작성된 기준은 조회 시점 정하기 각 게시판에서 새 글이 있는지 알기 위한 체크하는 로직이 필요하다. 새 글이 작성되었다는 것을 저장할 곳이 필요하다. 새 글이 있는 것을 어디서 조회할 것인가? 뷰 단에서 해당 값을 찾아서 있는 경우 표시를 해…

주의 이 문건은 과거 Hexo 블로그 (2018-04-22) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Thymeleaf에서 반복문 안에서 if문 사용하기 Thymeleaf에서 반복문을 사용하는 것은 여기 포스팅에서 다뤘었습니다. 이번에는 반복문 안에서 if문을 사용하여 반복문 안에서 값을 찾은 경우 값을 표시하는 방법을 다루겠습니다. 위 소스코드는 참고용입니다. 하나씩 풀어서 설명을 하겠습니다. 먼저 예로 span 태그에 적용을 해본 것이며, 다른 태그에도 적용이 가능합니다. th:each에서 배열 또는 컬렉션 객체를 선언하고 해당 컬렉션 내의 객체를 선언합니다. 예를 들면 으로 선언된 것을 사용한다면 다음과 같습니다. th:object에는 위 반복문의 객체, 예시의 str을 넣습니다. 그리고 th:if에서 조건을 적어주게 되면 해당 값이 맞을 때 small태그가 보여지게 됩니다. 위의 예제에 대한 사용 예를 보시고 싶으시면 이…

주의 이 문건은 과거 Hexo 블로그 (2018-03-19) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Certbot으로 만든 인증서 사용하기 전의 포스팅인 Certbot으로 무료 인증서 발급 받기 에서 만든 인증서를 이용해 Spring Boot의 SSL을 적용하는 방법에 대해서 알아보겠습니다. 만약 Certbot으로 인증서를 만들지 않으신 분은 위의 포스팅 링크를 참고하여 만들어주시면 됩니다. PEM -> JKS 변환 먼저 Certbot에서 인증서를 생성할 경우 총 4개의 파일이 certbot 경로에 생성되게 됩니다. 다른 설정을 건들지 않았다면 경로 밑에 도메인 이름으로 저장이 됩니다. 만약 **/etc/letsencrypt/**까진 접근이 되지만 live 디렉토리에 접근 시 와 같은 권한 문제를 만날 경우 등을 통해서 접근합니다. 디렉토리 안에는 총 4개의 pem 파일이 생성되어 있습니다. privkey.pem : 개인키 …

22.09.25 내용 추가 최근 방식의 경우 Webroot나 DNS 인증을 사용하는데, 이번에 DNS 인증에 대하여 포스팅을 진행했다. Webroot도 사용하지만 와일드카드(ex: *.api.com 등) 인증이 불가하기 때문에 DNS 인증을 사용할 것을 추천한다. DNS 인증 방식이 필요한 경우 아래 포스팅을 참고하자. LetsEncrypt 적용법 (DNS 인증 & AWS) 주의 이 문건은 과거 Hexo 블로그 (2018-03-19) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 무료 인증서를 받기 위해서… 사내정보시스템을 1차 오픈을 위해서 aws 준비, 도메인 설정 등등 이것저것 할일이 많았습니다. 그 중 HTTPS 적용을 위해서 인증서를 알아보고 있었습니다. 개발중에는 인증서를 직접 만들어 사용하였지만, 정식오픈을 할 경우 공식적인 인증을 받은 인증서를 사용해야 했습니다. 그래서 이것저것 찾아보던 중 Certbot을 알게 되었습니다.…

주의 이 문건은 과거 Hexo 블로그 (2018-02-28) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Java8의 LocalDateTime을 Json으로 변환하였더니… 제가 개발하는 프로젝트들은 Java8을 이용하여 개발을 하고 있습니다. 그 중 Java8의 Date 클래스를 보완하기 위해 나온 것이 Java8의 LocalDateTime입니다. 그런데 이 LocalDateTime을 Spring-Boot에서 Json 형식으로 호출할 경우 아래와 같이 Json을 만들게 됩니다. 위 사진에서 joinDate라는 값을 보면 날짜 정보가 상세하게 등록되어 있는 것을 확인할 수 있습니다. 하지만 요즘은 ISO-8601(한국위키)의 양식에 맞춰서 사용합니다. 위 사진처럼 결과를 나오게 하는 방법을 알아보겠습니다. 예제 환경은 아래와 같습니다. Spring Boot 1.5.8.RELEASE Gradle 환경 1. build.gradle에 의존성…

주의 이 문건은 과거 Hexo 블로그 (2018-02-18) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Thymeleaf에서 반복문 그리고 index 사용하기 thymeleaf에서 table 태그와 같이 안의 셀 내용을 반복적으로 표시해야 하는 경우(대표적으로 게시판이 있죠?)에 for와 같은 loop를 사용하게 됩니다. 위의 예제와 같이 사용을 합니다. 그런데 이렇게 loop식으로 사용하는 것 외에도 특정 반복 인덱스에서 무언가 작업 처리를 해야 할 때가 있습니다. 그런 경우 다음의 예제와 같이 사용합니다. 첫 번째 인자는 each항목에서 반복문에서 나온 값이며, 두 번째 인자는 loop 인덱스의 값으로써 접근은 ${index.index} 할 수 있습니다. 이 문건은 과거 Hexo 블로그 (2018-02-18) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다.

주의 이 문건은 과거 Hexo 블로그 (2018-02-18) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Spring에서 Controller의 전달인자… Spring을 사용하다 보면 Controller 단에서 클라이언트에서 URL에 파라메터를 같이 전달하는 경우가 있습니다. 주로 사용하는 형태는 아래의 두 가지가 대표적인 케이스입니다. Type 1 => http://127.0.0.1?index=1&page=2 Type 2 => http://127.0.0.1/index/1 Type 1의 경우 파라메터의 값과 이름을 함께 전달하는 방식으로 게시판 등에서 페이지 및 검색 정보를 함께 전달하는 방식을 사용할 때 많이 사용합니다. Type 2의 경우 Rest api에서 값을 호출할 때 주로 많이 사용합니다. Spring에서는 이러한 전달인자를 처리하는데 두 가지 방법을 제공합니다. @RequestParam 사용하기 Type 1의 URL을 처리할…

주의 이 문건은 과거 Hexo 블로그 (2018-02-18) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Thymeleaf에서 조건문 사용하기 Thymeleaf를 사용하다 보면 서버측의 데이터에 대한 분기 조건이 필요할 경우가 있습니다. 이번 포스팅에서는 if와 else를 사용하는 것에 대해 알아보겠습니다. if 문 Thymeleaf에서 if문은 다음과 같이 사용합니다. th:if 문법으로 사용하는데 태그는 li 뿐만이 아닌 div등에 사용하여 조건이 맞는 경우 화면에 보여줄 수도 있고, 감출 수도 있습니다. 만약 다중 조건을 찾아야 하는 경우에는 다음과 같이 사용하기도 합니다. else 문 다중 if문으로도 체크 가능하지만 그 외의 값을 체크할 때 else를 사용하는데, else는 thymeleaf에서는 다른 속성인 th:unless를 사용합니다. 사용 예제 코드는 다음과 같습니다. 위의 예제처럼 th:unless는 if문과 조건이 …

주의 이 문건은 과거 Hexo 블로그 (2018-02-17) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Thymeleaf에서 페이지 레이아웃을 도와주는… Spring boot로 개발을 하면 화면단 작업을 할 때 템플릿 엔진을 사용하게 됩니다. Freemaker, JSP, Thymeleaf와 같은 텍스트 템플릿 엔진을 사용하거나 Tiles나 Sitemesh와 같은 레이아웃 템플릿 엔진을 함께 사용하여 화면단 개발을 하게 됩니다. 이중 Thymeleaf에서는 공통적으로 사용하는 레이아웃을 작성하기 위해서는 thymeleaf-layout-dialect를 사용하면 좋습니다. Thymeleaf Layout Dialect Github 페이지의 소개글을 간략하게 번역하자면 다음과 같습니다. (오류 번역이 있을 수 있습니다.) 타임리프에서 코드 재사용을 개선하기 위해 재사용이 가능한 레이아웃과 템플릿을 작성할 수 있도록 도와주는 라이브러리입니다. …

주의 이 문건은 과거 Hexo 블로그 (2018-02-16) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. JSP만 쓰다가… 사실 저는 Spring boot를 쓴지는 얼마 되지 않았습니다. 그 전에는 Spring + Jsp + mybatis 조합을 많이 사용하였지요. Spring Boot를 접하게 된 것은 4월달 쯔음 토이 프로젝트를 하나 진행하면서 쓰게 되었습니다. Spring을 쓰다가 Spring Boot를 사용하였을 때는 신세계 였습니다. Spring Boot에서는 View단을 JSP보다는 Thymeleaf라는 것을 사용하길 권장하고 있습니다. Thymeleaf는 순수 HTML에 HTML5문법을 사용하여 Server side 로직을 수행할 수 있는 HTML 태그 및 속성 기반의 Template Engine입니다. 일단 Spring Boot 에서는 JSP를 쓰려면 약간 복잡해집니다. 만약 Spring Boot 에서 JSP를 쓰길 원한…

주의 이 문건은 과거 Hexo 블로그 (2018-02-11) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 너무 오랜만의 포스팅?? 간만에 작성을 하는 포스팅입니다. 요새 너무 정신없이 바빠져서 포스팅을 할 기회가 없었습니다. 계속 포스팅을 꾸준하게 해야 하지만…노오력을 해야 겠네요 ㅠ 근황은 근화이고 포스팅은 해야겠죠? Java에서 컬렉션에서 중복 제거 요새 Java 개발에 빠져서 허우적 중인데 개발을 하다 보면 데이터를 컬렉션에 담아서 처리하는 경우가 많습니다. 그리고 그 컬렉션에 중복된 데이터가 발생하는 문제가 있었는데 이런 문제를 해결하기 위한 방법을 알아보겠습니다. 먼저 예를 위해서 아래의 컬렉션을 사용하도록 하겠습니다. 최종 결과는 다음과 같이 나오게 됩니다. Step 1. HashSet을 사용하여 중복 제거하기 Java의 컬렉션 중 Set 컬렉션 중 하나인 HashSet을 통해서 제거하는 방법입니다. 중복된 컬렉션을 HashS…

주의 이 문건은 과거 Hexo 블로그 (2017-12-25) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Android에서 푸시 알림을 구현하려면? 전에 하던 프로젝트에서 안드로이드와 서버간의 푸시 알림을 구현하였습니다. 이걸 한번 정리해서 문서화 해야 했지만 시간이 없어서 정리를 못하다가 이번 기회를 통해 포스팅을 하여 정리하려 합니다. 위 이미지는 FCM 사이트에서 가져온 것인데, 이미지에서 보는 것처럼 푸시 서비스를 구현하려면 모바일측 구현과 푸시 메세지를 관리하는 서버 측 두 가지를 구현해야 합니다. (GUI는 제외하도록 하겠습니다.) 이번 포스팅에서는 FCM을 안드로이드에 적용하는 방법에 대해서 알아보도록 하겠습니다. 안드로이드에서 FCM 설정하기 설정하는 것은 공식문서를 참고하면 되지만, 이 포스팅에서는 핵심만 집어서 정리하도록 하겠습니다. 1. Firebase 프로젝트 만들기 FCM을 적용할 프로젝트에 Firebase 프로…

주의 이 문건은 과거 Hexo 블로그 (2017-12-25) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. HTML에서 Table 요소 처리 이번에 제가 만드는 사내정보시스템을 이번에 저희 회사에도 도입을 하게 되면서, 회사에 특화된 기능을 개발하게 되었습니다. 그런데 이번에 Html의 테이블 요소를 다루게 되면서 생긴 문제점과 해결 방안에 대해서 포스팅을 해보려 합니다. 프로젝트를 진행한 환경은 Spring Boot의 Thymeleaf 템플릿 엔진을 사용하였으며, 코드 전체는 공개가 불가하여, 일부만 공개합니다. 또한 테이블 요소를 처리하기 위하여 jQuery v3.2.1를 사용하였습니다. 어떤 문제점이 있었는가? 구현을 하고 싶은 기능은 다음과 같았습니다. 테이블의 행을 동적으로 추가 또는 삭제하기 서버로 데이터 전송 시 입력된 테이블의 행 데이터 모두 가져오기 사실 첫 번째 기능은 검색하면 많이 찾아 볼 수 있는 기능이지만, 두 번…

주의 이 문건은 과거 Hexo 블로그 (2017-12-21) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Spring에서 설정파일을 감추고 싶다… Spring Framework를 이용하여 프로젝트를 진행할 때 데이터베이스 정보나 기타 민간함 정보를 설정파일에 작성하게 됩니다. 물론 Java Config를 사용하게 된다면 상관 없지만, 저는 주로 application.yml(또는 application.properties)을(를) 사용합니다. 문제는 이 설정파일의 경우 배포 시 노출이 되어 보안에 문제가 생길 수 있습니다. (물론 Java Config도 100% 안전한 것은 아니지만…) 그래서 이런 고민을 해결해 줄 라이브러리를 하나 소개하려 합니다. Jsaypt(Java Simplified Encryption) 를 써보자 Jasypt는 위에서 언급했던 문제를 해결해주는 자바 라이브러리입니다. 좀 더 자세한 내용은 Jasypt 공식 문서를…

주의 이 문건은 과거 Hexo 블로그 (2017-12-14) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 19년 9월 8일 추가 19년 9월 8일 Github에 해당 소스를 등록하였다. Github의 이곳을 참고하면 된다. 커스텀 어노테이션을 만들어 보자. Java에서 어노테이션(Annotation)이란? 포스팅에서 어노테이션에 대해 간단히 알아보았습니다. 이번 포스팅에서는 직접 커스텀 어노테이션을 작성하는 방법에 대하여 알아보도록 하겠습니다. 두 가지의 예제를 통해 알아보도록 하겠습니다. 1. 정수 값 주입 예제 처음 주제는 어노테이션을 선언한 정수형 변수에 값을 넣는 예제를 진행해보겠습니다. 간단한 예제 이므로 주석은 달지 않거나 간단한 설명으로 대체하겠습니다. 1. 어노테이션 인터페이스 작성 인터페이스를 만들어주는데 앞에 @ 표시를 붙이면 됩니다. 1번과 2번에 대한 설명은 어노테이션 포스팅에서 정리하였습니다. 일단 멤버 변수에 d…

주의 이 문건은 과거 Hexo 블로그 (2017-12-14) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 커스텀 어노테이션의 활용 제가 진행하는 프로젝트에서는 안드로이드와 Spring Boot 서버의 서로 통신을 진행하면서 Jwt를 이용하여 사용자 인증을 진행하였습니다. 이번 포스팅에서는 Jwt인증에 대한 부분 보다는, 커스텀 어노테이션을 왜 쓰게 되었는지와 더불어 어떤식으로 커스텀 어노테이션을 활용하였는지에 대해 작성하도록 하겠습니다. 왜 커스텀 어노테이션을 쓰게 되었는가? 서버와 모바일에서 사용자 인증은 jwt를 활용하고 있습니다. 컨트롤러에 진입할 때 Header에 있는 jwt를 받아서 해당 jwt를 검증하는 방식을 사용하고 있습니다. 처음에는 로직을 너무 복잡하게 짰습니다. 초창기에 개발된 일부 코드를 보도록 하겠습니다. 위의 작은 코드에서만 봐도 jwt를 검증하는 로직 자체도 불분명하고, 람다식을 잘못 쓴 것도 보이네요. 컨트…

주의 이 문건은 과거 Hexo 블로그 (2017-11-29) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Spring Boot에서 HTTPS를 적용하려면? Spring Boot환경에서 HTTP 통신으로 프로젝트를 구현하고 있었습니다. 하지만 보안적인 부분에 문제가 있어서 이 부분을 해결하기 위해 다양한 방법을 찾아봤습니다. RSA로 암호화를 하는 방법을 주로 사용했었습니다. 하지만 이렇게 하는 것보다 그냥 HTTPS를 사용하여 처리하는 것이 좋을 것 같아서 이 부분에 대해 적용을 해보았고, 경험을 포스팅하려 합니다. 진행에 앞서 개발환경은 Mac OS X이고, Java가 설치되어 있는 환경에서 진행됩니다. 어떻게 진행을 해야 하는가? 먼저 다음의 스텝으로 진행을 합니다. 1. 키스토어 생성 2. 인증서 추출 3. Trust-Store 생성 4. Spring boot 환경 구성 위 순서대로 하나씩 진행을 해보겠습니다. Key Store …

주의 이 문건은 과거 Hexo 블로그 (2017-11-27) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 삽질만 6시간…실화임? 지금 생각해보면 하도 어이가 없어서 이 포스팅을 쓰기도 부끄럽습니다만… (제 무지의 깊이가 상당히 깊다는 것도…반성의 의미로 작성하는 글) 오늘 봉착한 문제는 이것입니다. 데이터베이스에 값이 정상적으로 등록이 되지 않는 문제 이렇게 보니 정말 심플한 문제로 보일 것입니다. 좀 더 자세하게 들어가서 보자면… Spring Boot 프로젝트의 Jpa를 사용하여 데이터베이스에 값을 넣는데 계속 문제가 발생하였습니다. 이렇게만 봐도 설정을 잘못했거나 미숙한 초보의 실수(물론 초보의 실수..)라 보이겠지만… 오늘의 실수와 교훈에 대해 시작하겠습니다. 문제와 원인 그리고… 문제의 DB 테이블은 다음과 같습니다. 그리고 Entity객체는 다음과 같이 구성되어 있습니다. 그리고 jpa에서 데이터가 추가되는 로직은 아래와 같습…

주의 이 문건은 과거 Hexo 블로그 (2017-11-26) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 해당 글은 11월 초중순 쯤 초안이 작성되었고, 해당 글을 정리하여 포스팅한 내용입니다. UI와 UX의 고민 사용자와 관련된 모바일 어플리케이션 또는 웹 페이지를 개발할 때 우리는 고민을 하게 됩니다. 물론 큰 규모의 회사인 경우 UX를 전담으로 하는 팀이 있고, UI를 작업하는 디자이너가 있습니다. 하지만 작은 규모의 회사는 이런 인력을 충원하기 매우 어렵습니다. 일반적으로 제가 만나본 개발자들의 경우 디자인에 대한 고려를 전혀 하지 않았습니다. 또한 기능만 동작하면 되지, UX와 UI는 크게 신경을 쓸 필요가 없는 부분이라 생각을 합니다. (제 개인적인 경험과 인맥에 제한된 것입니다. 절대 대다수 개발자를 이야기하는게 아닙니다.) 개인적으로 이렇게 생각하는 것은 몹시 안 좋은 습관이라 생각합니다. 모바일 어플리케이션과 웹 서비스…

주의 이 문건은 과거 Hexo 블로그 (2017-11-25) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 개발일지(는 아니고 근황?) 무엇을 했길래 글 리스폰 상태가? 기술 블로그에 괜찮은 내용으로 포스팅을 많이 올리고 싶지만… 어제(24일)까지 프로젝트를 마무리 짓느라 제대로 글을 올릴 수 없었습니다. 서버와 안드로이드간의 개발을 모두 마무리 짓고, 어제 플레이스토어에 정상적으로 등록까지 마쳤습니다. 지금 재직 중인 회사는 서비스를 개발하는 회사는 아니고, 제조쪽 기계와 연관된 서비스(는 아니고 어플리케이션?)를(을) 개발하는 회사입니다. 사실 서비스 개발을 중심으로 하는 회사를 가고 싶었지만, 개발자로써의 자질을 좀 더 키운 후 이직하는 것을 목표로… 어제까지 개발을 마무리하고 문서화를 하느라 포스팅을 제대로 못하였지만, 이제 프로젝트가 마무리 되어서 진행하며 배우거나 찾은 것을 위주로 포스팅을 진행할 예정입니다. 주요 포스팅 예정…

주의 이 문건은 과거 Hexo 블로그 (2017-11-25) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 안드로이드 로그 안드로이드 개발자라면 개발에서 결과 또는 테스트를 위해 로그 기능을 사용할 것입니다. 하지만 이 로그는 배포버전이 아닌 개발버전에서만 나오게끔 하는 것이 제일 베스트한 선택일 것입니다. 또한 기본적으로 사용하는 로그의 경우 아래와 같이 사용하게 됩니다. Log 클래스 뒤에 메서드는 로그 레벨로써 아래와 같이 분류됩니다. 로그 레벨 설명 우선순위 e(Error) 오류가 났을 때 사용 매우 높음 w(Warn) 오류는 아니지만 문제가 발생할 가능성이 있을 때 사용 높음 i(Info) 일반적으로 사용 중간 d(Debug) 개발 중 확인이 필요할 경우 사용 낮음 v(Verbose) 자세한 정보 등을 표시할 때 사용 매우 낮음 로그에 대해 좀 더 상세한 설명은 공식문서를 참고하시길 이제 기본적인 내용은 여기까지하고, 포스트에서 …

주의 이 문건은 과거 Hexo 블로그 (2017-11-15) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 안드로이드에서 Font Awesome을? 웹 개발을 할 때 아이콘 같은 것을 표시하기 위해서 Font Awesome을 많이 사용했습니다. 이것을 안드로이드에서도 사용할 수 있는데 어떻게 쓰는지 알아보도록 하겠습니다. Ready? 실습 환경은 다음과 같습니다. OS : Mac OS Sierra Android Studio 2.3.3 일단 안드로이드 프로젝트 생성 및 기타 설정은 생략하도록 하겠습니다. 기존의 프로젝트 또는 예제를 하나 생성하여 시작한다는 가정하에 진행하도록 하겠습니다. 또한 Text View에 아이콘을 올려보는 것을 목표로 합니다. How to use? {% asset_img img01.png fontawesome %} Font Awesome의 아이콘 중 Bell(위 이미지)을 구현해보는 것을 목표로 하겠습니다. Font…

주의 이 문건은 과거 Hexo 블로그 (2017-11-15) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 오늘의 삽질 요 몇일 회사업무 +개인 일정으로 인해 바빠서 포스팅을 제대로 못했네요. 사실 바쁘다는것은 핑계인듯 하고…깊게 반성하는 부분입니다… 그래서 오늘의 연구일지는? (사실 이 글은 어제 퇴근하며 작성한 일지입니다.) 오늘도 안드로이드와 혈투(?) 지금 만들어 가는 것은 서버에 Rest api를 호출하여 가지고 온 값을 앱에서 보여주는 작은 서비스(?)를 개발하고 있습니다. 오늘의 삽질은 안드로이드 영역입니다. 안드로이드 영역에서 그래프를 구현해야 하는데 잘 구현되어 있는 것을 찾아보다가 를 알게 되어 구현을 하였습니다.. MPAndroidChart 이 그래프 라이브러리를 쓰다 보니 정말 잘 구현되어 있었습니다. 문제는 웹에서는 D3 라이브러리를 써서 쉽게 구현 하였지만, 저 라이브러리에서 데이터 표시를 동일하게 하는 것은 어…

주의 이 문건은 과거 Hexo 블로그 (2017-11-12) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Toy Project? 음… 사실 개발자라면 쉬는 날에 다른 일도 할 수 있겠지만, 본인의 역량 강화 또는 무언가 필요에 의해 본업 개발 외에 다른 개발 프로젝트를 시작하기도 합니다. 이런걸 Toy Project라고도 표현을 하는데, 이번에 나도 본격적으로 진행하려 기획을 하고 설계 및 개발을 진행하기로 하였습니다. (사실 해보고 싶은게 넘 많은게 문제지만…) 주제 일단 Toy Project를 진행하게 된 계기는 매우 간단했습니다. 지금 제가 일하는 곳은 아주 작은 규모의 스타트업으로써, 아직 회사의 전반적인 프로세스나 시스템을 갖추는 중입니다. 그런데 회사 특성 상 소프트웨어와 하드웨어(제조관련)가 맞물려 있어서, 소프트웨어적인 업무 프로세스를 갖추지 못하였습니다. 그 중 하나가 사내정보시스템입니다. 사내 공지사항이나 근태, 급여…

주의 이 문건은 과거 Hexo 블로그 (2017-11-08) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 오늘의 주제 근무하는 회사에서 Android 앱 개발과 앱에서 사용하는 데이터를 위해 서버에서 Rest api 부분을 개발하였습니다. 또한 알림 부분도 구현을 해야 해서 FCM을 사용하였습니다. 근데 Android에서 FCM을 사용하면 토큰을 생성하여 서버에 전달을 하게 되는데, 이 토큰이 갱신이 되거나 새로운 기기에서 설치 시 토큰의 유효성을 검사해야 했었습니다. 모두 공개하기는 힘들지만 서버에 클라이언트의 FCM토큰을 받아서 저장을 하는데, 만약 유효하지 않은 토큰까지 계속 저장할 경우 향후에 문제가 될 것 같았습니다. 그래서 FCM 토큰의 유효성을 체크하는 것을 알아봤고, 두 가지 주제에 대해 포스팅해보고자 합니다. 1. FCM 토큰 유효성 검사 2. Spring에서 Http Request 그리고 주제를 통해 달성할 최종 목표…

주의 이 문건은 과거 Hexo 블로그 (2017-11-01) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Android Studio에서 Master Password 안드로이드 스튜디오에서 스토어 배포를 위해 서명을 할 때 앱 서명을 하려 하면 Master Password 암호 관련을 물어봅니다. 이 Master Password는 KeyStore와는 무관하며, Android Studio 사용자 인증을 위해서 사용하는 암호입니다. 근데 Master Password를 설정한 뒤 KeyStore를 사용한 경우 서명을 할 때마다 물어보게 됩니다. 문제는 이 Master Password를 잊은 경우 서명이 불가하며, 리셋을 할 경우 KeyStore암호를 입력해도 사용이 불가능해집니다. 사실 개인적으로 사용하는 컴퓨터라 이런 기능을 사용할 필요가 없어서 비활성화를 찾아봤지만 어떻게 하는지 몰라서 결국 구글행… Master Password 비활성(Di…

주의 이 문건은 과거 Hexo 블로그 (2017-10-31) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 문서를 시작하면서… Java를 사용할 때 본인의 경우 가장 많이 사용하는 클래스는 아무래도 String이 아닐까 싶습니다. String을 쓰다보면 문자열을 새로 문자열을 넣거나 또는 변경을 하는 경우 subString() 또는 split() 를 주로 사용합니다. 이것을 찾다보면 같이 마주치는 것은 StringBuffer 또는 StringBuilder가 있을 것입니다. 아마 면접질문 (신입 또는 주니어급 개발자)으로 저 세 가지의 차이점을 물어보는 경우가 많을 것입니다. 이번 포스팅을 통해서 한번 정리를 해보려 합니다. Java의 String. 이번 포스팅에서는 Java의 String을 집중적으로 포커싱을 하는 글은 아니니 간략하게만 확인하고 넘어가도록 하겠습니다. String은 일단 **불가변적(Immutable)**입니다. 이걸 쉽…

주의 이 문건은 과거 Hexo 블로그 (2017-10-31) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Java Bean 이란? 처음 자바 개발을 하다가 Java Bean이란 용어를 듣게 되었습니다. 구글에서 다양한 블로그에서 검색을 하여 찾아보았고, 이것을 정리하여 블로그 포스팅을 하게 되었습니다. Java Bean의 정의 데이터를 표현하는 것을 목적으로 하는 자바 클래스. 컴포넌트와 비슷한 의미로도 사용된다. JavaBean 규격서에 따라 작성된 자바 클래스를 가리킨다. Java Bean의 규격 클래스는 패키지화 하여야 한다. 멤버변수는 프로퍼티(Property)라 칭한다. 클래스는 필요에 따라 직렬화가 가능하다. 프로퍼티의 접근자는 private이다. 프로퍼티마다 getter/setter 가 존재해야 하며, 그 이름은 각각 get/set으로 시작해야 한다. 위의 프로퍼티 getter/setter 메서드의 접근자는 public이어야…

주의 이 문건은 과거 Hexo 블로그 (2017-02-14) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Java에서 어노테이션(Annotation) 이란? 자바 개발을 하다 보면 클래스 또는 메서드 또는 변수 앞에 @Override 같은 @ 표시를 많이 봤을 것입니다. 이 어노테이션은 JEE5(Java Platform, Enterprise Edition 5)부터 새롭게 추가된 요소입니다. 이 어노테이션으로 인해 데이터의 유효성 검사 등을 쉽게 알 수 있고, 이와 관련한 코드가 깔끔해지게 됩니다. 일단 어노테이션의 용도는 다양한 목적이 있지만 메타 데이터의 비중이 가장 크다 할 수 있습니다. 메타-테이터(Meta-Data) : 데이터를 위한 데이터를 의미하며, 풀어 이야기하면 한 데이터에 대한 설명을 의미하는 데이터. (자신의 정보를 담고 있는 데이터) Java에서 기본적으로 제공하는 어노테이션 종류 @Override 선언한 메서드가 오…