내 첫 디버깅 도구는 연습장이었다. 소수 찾기, 행렬곱셈, 마방진 같은 문제를 TurboC 2.0을 이용해서 풀었다. 제대로 동작하지 않으면 소스 라인 단위로 예상되는 변숫값을 연습장에 적어 가며 디버깅했다. 다중, 삼중 for문 거기다가 재귀호출까지 있으면 도저히 연습장으로 해결이 안 될 때가 있다. 그때는 소스코드도 마음도 비우고 다시 코딩했다. 어느 날 브레이크 포인트 기능이란 걸 알게 되었다. 한 단계씩 스텝을 밟아가며 조건문 실행 여부 파악이 가능하고 거기다가 실시간으로 변숫값을 볼 수 있었다. 충격이었다.내 디버깅 기술을 한 단계 높여준 브레이크 포인트2008년부터 지금까지 매일 저녁 가계부를 쓰고 있다. 처음에는 무료 가계부 프로그램 다운로드 받아 썼다. 어느 날 나도 개발자인데 가계부 정도는 만들어 써야 하지 않을까? 생각이 들어 그날로 개발을 시작했다. PC 애플리케이션 개발 경험과 지식이 부족해 잘 알고 있는 웹으로 개발했다. 기술 스택은 Spring Boot + JPA + Vue.js로 정했다. 그 당시 Vue.js는 사용해 본 지 얼마 되지 않아 많은 시행착오가 있었다. 또한 JSP를 기반한 프론트 개발에 익숙했던 나에게 npm, Webpack, Babel 같은 Node기반 개발환경이 많이 낮설었다. 2018년 8월에 시작해 그해가 끝나기 전 복슬머니-웹버전 개발을 완료했다.복슬머니-웹버전에는 큰 문제가 있었다. PC 애플리케이션처럼 사용했는데 내장형 Tomcat 컨테이너 기반으로 동작하기 때문에 실행시간이 20~30초 정도로 너무 오래 걸렸다. 그러다가 VSCode가 Electron 프레임워크로 만들어졌다는 걸 알게 되었다. Electron에 대해서 좀 더 알아보니 PC 애플리케이션을 자바스크립트로 만들 수 있고 무엇보다 UI를 HTML + CSS로 개발할 수 있다는 게 마음에 들었다. 더해서 멀티플랫폼도 지원한다. 그동안 PC 애플리케이션 UI 개발이 너무 어려웠다. 자바 기반 GUI 개발 라이브러리인 AWT, Swing, SWT 써봤다면 알 거다. 조금 복잡한 레이아웃 하나 잡는 게 얼마나 어려운지. HTML처럼 유연하지 못하다. 그런데 PC용 애플리케이션 UI를 HTML로 만들 수 있다니 흥분이 됐다.바로 Electron을 적용한 복슬머니-데스크톱앱을 만들기 시작했다. 2019년 11월에 시작해 다음 해 8월에 완료했다. 자바스크립트 기반으로 백엔드 개발이 처음이라 시간이 오래 걸렸다. 익숙하지 않은 프레임워크 때문에 개발 환경 특히 디버깅 환경 세팅이 어려웠다. Sequelize를 이용해서 ORM을 적용했지만, 동적 타입의 한계 때문인지 JPA를 사용했을 때처럼 편하게 느껴지지 않았다. 한편으로 이번에는 주식매매 기록 및 자산스냅샷 기능을 추가했다. 2020년부터 본격적으로 자본주의의 꽃인 주식을 시작하게 되어 손익 및 평가 자산에 대한 기록이 필요했기 때문이다.코로나 때 너나 할 것 없이 미국 주식에 사람들이 몰리기 시작했다. 나도 뒤늦게 막차를 타는 심정으로 미장에 뛰어들었다. 여기서 복슬머니의 기능적

안녕하세요!3월부터 시작해 약 9주 동안 진행했던 러닝클럽 활동이 마무리 되었습니다.러닝클럽은 CJ올리브네트웍스에서 주관하는 OpenClass로 해보고 싶었던 과제를 수행하거나 기술을 학습하고 싶을 때비슷한 관심사가 있는 구성원들끼리 학습하는 클럽입니다.저희는 CJ그룹의 보안성 증대, 기존에 수행하던 취약점 점검 업무의 고도화의 일환으로 모의침투 서비스를 제공하고자 러닝클럽을 진행하게 되었습니다.다양한 구성원이 적극적으로 참여해주어서 양질의 결과를 얻고, 모의침투 서비스를 준비하는데 많은 도움이 되었는데요~그동안 학습했던 내용을 바탕으로 Dev.Inn을 통해 저희가 학습한 HackTheBox 문제 풀이과정을 공유드리고자 합니다.먼저, 저희는 HackTheBox라는 플랫폼을 사용하여 다양한 취약한 환경에 대해 경험하며 학습하였습니다.HackTheBox는 다양한 환경에서 해킹 기술을 연습하고, 보안 전문성을 향상 시킬 수 있는 플랫폼으로 이를 통해 다양한 모의침투 및 해킹 기술 역량을 쌓을 수 있습니다.9주동안 진행된 상호학습을 통해 발표된 내용 중 하나를 선정하였고 그 중 하나인 Cloud Track의 Unobtainium 문제의 풀이과정을 소개해드리고자 합니다!VM 생성HackTheBox에서는 문제풀이를 위한 Virtual Machine 환경을 제공합니다.플랫폼에서 제공하는 VM을 통해 해당 문제의 취약점을 찾고, 플래그 값을 획득하는 것이 목적입니다.또한, 해당 문제에서는 플래그 값을 2개를 찾아야 하며 각각 user.txt와 root.txt를 찾아야 합니다.문제풀이를 위해 생성된 VM해당 VM의 IP는 10.129.136.226으로 할당이 되었고 이 아이피를 시작으로 취약점을 찾고, 시스템 권한까지 획득하는 과정을 수행하게 됩니다.포트 스캔 및 정보 수집먼저, 해당 서버에서 동작하고 있는 포트가 어떤 것이 있는지 확인하기 위해 nmap이라는 도구를 이용해 포트 스캐닝을 시도합니다.Port Scan포트 스캔을 통해 발견된 포트는 22(SSH), 80(HTTP), 8443(SSL), 31337(HTTP)로 확인되었습니다.nmap에서 제공하는 정보에 따르면, Apache 서버와 Node.js의 Express 기반의 서버가 동작하는 것으로 보이네요.먼저, 웹 서버가 동작하고 있으므로 31337 포트에 브라우저를 통해 접속해보았습니다.31337 포트 접근하지만 해당 포트에서는 얻을 수 있는 정보가 없었으며 다음으로 80 포트로 접근을 시도해보았습니다.80 포트 접근80 포트에서는 Unobtainium이라는 chat application을 제공하고 있으며 각각 deb, rpm, snap 방식으로 다운로드를 제공하고 있었습니다.다음으로 8443 포트에 접근을 시도해보았습니다.8443 포트 접근해당 포트에서는 JSON 방식의 데이터가 출력되었는데, 해당 내용을 구글링 해보면 쿠버네티스와 관련된 데이터라는 것을 확인할 수 있었습니다.구글 검색 결과nmap을 통해 발견된 포트에 대해 접근했을 때의 상태를 확인하였고 추가적으로 80 포트에서 동작하는 웹

Front End(이하 FE) 개발이라고 하면, 보통 웹(Web) 사이트/페이지 또는 앱을 개발한다고만 생각할 수 있는데요, 오래전부터 Node.js등을 활용해 서버 측 백엔드, PC 프로그램, VR/AR 개발까지 영역을 확장해가고 있습니다. 일렉트론(Electron)을 이용해 GUI 구현과 서버 측 연동으로 데스크톱용 앱을 개발하는 이야기를 들려드리고자 합니다.이 글은 카카오 FE플랫폼팀에서 데스크톱용 애플리케이션을 개발한 경험을 공유하기 위한 목적으로 당시 사용한 일렉트론 버전 11.2.2를 기준으로 작성되었으며, 글 작성에는  FE플랫폼팀 Thomas와 Judy가 함께했습니다. 안녕하세요. FE 플랫폼팀의 비즈인프라FE파트에서 FE 개발자로 근무하고 있는 Thomas와 Judy입니다. Thomas와 Judy 저희는 이번 프로젝트에서 처음으로 Electron을 사용하여 데스크톱 애플리케이션을 개발하게 되었습니다. 프로젝트 동안 Electron을 사용하면서 겪었던 것, 배웠던 것 그리고 느꼈던 것들을 많은 사람과 공유해보고자 합니다. 왜 일렉트론을 선택했을까? 이미 많은 Electron의 사례들 개발자라면 한 번 정도는 써봤을 법한 VSCode, Atom, Slack 등의 검증된 데스크톱 앱들이 이미 Electron으로 개발되었습니다. 이러한 성공적인 개발 사례들은 기술 도입을 고민 중인 개발자들에게 무한한 자신감을 심어줍니다. (저만 그런가요.. ㅎㅎ) 출처: https://www.electronjs.org/ 적은 러닝 커브와 큰 효율성 출처: https://www.electronjs.org/docs/tutorial/introduction 데스크톱 앱에 대한 개발 경험이 없는 FE 개발자에게 Electron은 한 줄기의 빛이라고 생각됩니다. FE 개발자에게 익숙한 HTML, CSS, JavaScript를 사용하여 데스크톱 애플리케이션을 개발할 수 있기 때문입니다. FE 개발자들이 모여 있는 저희 조직에서는 이 점이 가장 매력적으로 다가왔습니다. 그뿐만 아니라 크로스 플랫폼을 지원하기 때문에 Windows, Mac 그리고 Linux 각각에 설치할 수 있는 애플리케이션을 동시에 개발할 수 있는 것도 큰 장점이었습니다. 일렉트론은 어떻게 동작할까? 일렉트론에는 두 가지의 프로세스가 존재합니다. 메인(Main) 프로세스와 렌더러(Renderer) 프로세스입니다. 일렉트론 앱은 단 하나의 메인 프로세스를 가집니다. 메인 프로세스는 Node.js 기반으로 동작하며 메인 프로세스에서는 이러한 렌더러 프로세스들을 관리하고, 각각의 렌더러 프로세스는 서로 독립적으로 동작합니다. 위에서 언급한 메인 프로세스와 렌더러 프로세스 간에 통신이 이뤄져야 하는데, 일렉트론에서는 이를 ipcMain과 ipcRenderer와 같은 IPC 모듈을 통해 프로세스 간의 통신을 이루고 있습니다. 좌충우돌 개발기 1. 카카오 인증 붙이기 대부분의 서비스는 인증 과정을 포함하고 있습니다. 이러한 인증 기능의 구현 방법도 매우 다양합니다. 그중에서도 SNS 로그인이라고 불리

2020-09-25 오희경 자바스크립트(JavaScript)는 현재 전세계에서 가장 많은 개발자가 사용하는 프로그래밍 언어로 그 인기만큼이나 활용 영역도 확대되고 있습니다. 본 아티클에서는 자바스크립트로 데스크톱 애플리케이션을 만드는 솔루션인 일렉트론(Electron)에 대해 알아보겠습니다. 일렉트론은 노드JS(Node.js)를 기반으로 자바스크립트, HTML, CSS를 사용하여 데스크톱 애플리케이션을 만드는 오픈소스 프레임워크입니다. 2013년 아톰 쉘(Atom Shell)이라 불리는 크로스 플랫폼 애플리케이션 쉘로 시작하였으며 오픈소스화, 명칭 변경 등을 거쳐 현재 깃허브(GitHub)에 의해 개발되고 있습니다. 윈도우(Windows), 맥OS(Mac OS), 리눅스(Linux)를 모두 지원합니다. 일렉트론은 노드JS를 기반으로 자바스크립트, HTML, CSS를 사용하여 데스크톱 애플리케이션을 만드는 오픈소스 프레임워크입니다. 일렉트론은 오픈소스 웹브라우저 크로미움(Chromium), 브라우저 밖에서 자바스크립트 코드를 실행하는 런타임 환경인 노드JS, 오픈소스 자바스크립트 엔진 V8, 이 세 가지 핵심요소로 구성되어 있습니다. 프론트엔드로 크로미움을, 백엔드로 노드JS를 사용해 크로미움 렌더링 라이브러리를 노드JS와 결합합니다. 이 둘은 V8을 공유합니다. 시중의 자바스크립트 엔진 중 표준을 가장 잘 구현한 것으로 평가받는 V8은 ES6(ECMAScript 표준의 여섯 번째 버전) 기능을 내장하고 있어 컴파일러 없이 일렉트론 애플리케이션에서 사용할 수 있습니다. 일렉트론은 크로미움, 노드JS, V8으로 구성되어 있습니다. 활용사례 일렉트론으로 개발한 데스크톱 애플리케이션은 시중에 다양하게 출시되어 있습니다. 대표적으로 아톰 에디터(Atom Editor), VS코드(VisualStudio Code), 슬랙(Slack), 워드프레스(WordPress) 등이 있으며 완성도가 뛰어나 성능과 개발 편의성은 검증되었다고 보면 됩니다. 자세한 사항은 일렉트론 웹사이트(www.electronjs.org/apps)에서 확인할 수 있습니다. 일렉트론으로 개발한 데스크톱 애플리케이션은 시중에 다양하게 출시되어 있습니다. 에스코어가 수행한 IoT 프로젝트에서 SDK(Software Development Kit)에 포함되는 시뮬레이터를 일렉트론으로 개발했었습니다. 테스트 서버와의 통신은 메인 프로세스로 제어하고 클라이언트 사이드(Client Side)는 렌더러 프로세스(Renderer Process)를 통해 웹뷰(WebView) 위에 리액트(React)를 사용해 대시보드 카드를 그리도록 설계 및 구현했습니다. SDK에 포함하여 배포해도 함께 제공되는 편집기 애플리케이션과 이질감 없는 룩앤필과 동작을 보이고 타겟 OS 네이티브 기능을 사용할 수 있다는 장점이 인상적이었습니다. 이같은 필자의 경험으로 보건대 자바스크립트의 이벤트 주도 프로그래밍(Event-driven Programming)에 익숙하다면 일렉트론도 큰 어려움 없이 다룰 수 있을 것입니다. 장