디자인 시스템 세팅하기 | 디자인 시스템 구축하기 - 1 디자인 시스템은 왜 필요할까?구글에 디자인 시스템이 필요한 이유를 검색하면 매우 많은 내용들이 검색됩니다. 제가 생각하는 디자인 시스템이 필요한 이유는 6가지입니다편리한 컴포넌트 재사용서비스의 브랜드성 확보일관된 디자인독립적인 관리명확한 UI 로직, 컴포넌트 분리개발자와 디자이너의 효율적인 커뮤니케이션 상승물론 그 외에 다양한 이유가 더 있습니다. 근데 저는 이 6가지가 디자인 시스템을 구축해야 하는 이유에 엄청난 근거가 된다고 생각합니다. 물론 이제 막 시작한 스타트업에서 디자인 시스템을 갖추기란 시기상조일 수 있다고 생각합니다. 그래서 많은 스타트업 개발팀은 UI 컴포넌트를 한땀한땀 만들기보다는 유명한 UI 라이브러리를 사용하고 이걸 조금씩 커스텀해가며 씁니다. 하지만, 좀 더 우리 서비스의 브랜드를.. 프론트엔드 FSD 아키텍처 적용하기 | Map Service 구축하기 - 3 사이드 프로젝트인 myCafe에서 현재 모바일용 라우트도 파서 작업하고 있고, 기능이 하나둘씩 늘어가고 있는 중입니다프론트엔드에게 좋은 로직이란 무엇일까?라는 고민을 늘 하는데요. 사실 정말 정답이 없는 분야이고, UI와 엮여있다 보니, 마냥 이상향을 쫓기란 쉽지 않은 영역이라고 생각합니다. 그렇다 보니 점점... 관심사 분리도 모호해지고, 기능 분리도 모호해지고, 상태 분리도 모호해지고... 모호함의 연속을 모호하니까~라며 내버려두다가는 진짜 똥 될 수 있는데요(?) 아무튼 정말 어려운 게 프론트엔드의 클린 코드라고 생각합니다이전에도 FSD 아키텍처를 적용해볼까 하다가 개념이 굉장히 크길래(?) 아직은 적용할때가 아니라고 생각해서 일단 기본틀만 잡아놓고 기능구현부터 했습니다. 이젠 공통된 부분이 점점 .. aws EC2 인스턴스 유형 변경 및 github action을 이용한 자동 배포 | Web IDE 구축하기 - 7 현재 프로젝트는 aws EC2를 이용하여 배포하고, 변경 사항이 있을때마다 해당 서버에 접속해 git pull을 받아 다시 반영하는 형태였습니다. 여기서 늘 문제점이 front 코드가 원격 서버에서는 build가 되지 않는 문제가 있었습니다. 이전에도 이슈에 대해 언급을 한적이 있었는데 이유를 알게되었습니다. 바로 메모리 부족으로 JavaScript heap out of memory 이슈였습니다. 초기에 프리티어를 쓰려고 t2.micro를 사용했었는데 t2.micro같은 경우에는 메모리가 1GB밖에 안되는거였습니다. 사실 하드웨어 지식이 부족한 저인데, 이전에 사이드 프로젝트 백엔드 팀원분이 프리티어는 구멍가게 수준이다라는 말을 왜 했는지 이제서야 이해가 가더라고요... 사실상 하나의 기능만 있는 게시판.. Socket.io 오버헤드 최적화하기 | Web IDE 구축하기 - 6 제가 개발한 Web IDE 서비스는 Socket을 통해 클라이언트의 코드를 받아 실시간으로 테스팅해 결괏값을 반환해주고 있습니다. 여기서 제가 발견한 한가지 문제점은 액션을 취하지 않아도 polling이 뜨면서 불필요한 요청이 많아지는 것입니다. 이런 불필요한 요청이 많아지면 오버헤드가 과도하게 발생될 수 있고, EC2 리소스 비용에 영향을 끼치는 것 같아 리팩토링을 해보려고 합니다 HTTP polling 요청이 많이 발생하는 이유최초 접속 시 http polling이 발생하는 이유socket.io는 초기 핸드쉐이크 과정을 거치는데, 웹소켓을 사용하여 연결을 시도합니다. 클라이언트에서 웹소켓 사용이 가능하다면 socket.io가 웹소켓으로 업그레이드 하는 초기 연결 단계에서 long polling방.. React + express(node.js) + Docker 프로젝트 AWS EC2 배포 후기 | Web IDE 구축하기 - 5 요 근래 제가 백수기간에 만들었던 프로젝트들을 하나씩 배포하고 있습니다myCafe Map service 같은 경우에는 vercel로 배포하면서 어려움이 크게 없었습니다(오히려 너무 쉬워서 당황했을 정도)근데 이번에 web-ide 플젝을 배포하려면서 엄청 고난과 역경을 겪었습니다이번 포스팅에 배포법을 설명하지 않습니다배포법이 복잡하고, 다른 블로그 글에 설명이 잘 되어있어서..건너뛰고 마주쳤던 이슈들만 다뤄보려고 합니다 프로젝트의 핵심 기능제 프로젝트는 단순 CRUD가 아닌, 조금은 특이한 경우라고 생각합니다(난이도가 마냥 높은건 아니지만 주니어가 하기엔 어려울 수 있다고 생각합니다)클라이언트 - React (CRA)서버 - express.js (Node.js)그 외 핵심 - Docker, Socket... Docker 내부에 코드 복사 및 실행 | 터미널 입력 줄바꿈 처리 문제 | Web IDE 구축하기 - 4 Docker 컨테이너에서 터미널을 입력할 때 줄바꿈 처리의 문제현재 코딩테스트 input이 될 값을 띄어쓰기 정도만 포함된 문제로밖에 못하는 것입니다. "3" 또는 "3 7 4" 이런 값은 가능한데, "1 2 3\n5 6 7" 이런 값이 안됩니다. 쉘 명령어를 echo -e "1 2 3\n5 6 7" 이렇게 작성을 해보았으나, 클라이언트 측에서 출력할 때 -e 1 이렇게만 출력됩니다. 컨테이너 안에서 shell 명령어가 실행되거나, shell 파일을 읽어오도록 수정해 보았으나 해결되지 못했고, bash 에러가 떠서 이 부분도 수정을 해보았으나, 아직까지 해결하지 못했습니다. 이 부분은 공부가 좀 더 필요할 것 같습니다위에는 제가 이전에 프로젝트를 하다가 해결하지 못한 부분이었습니다해당 프로젝트의 실행 순.. Vercel DNS 에러 | Vercel 국내 도메인 차단 | DNS_PROBE_FINISHED_NXDOMAIN | 크롬 DNS 에러 해결법 ++이 이슈가 발생한 날짜랑 도메인 차단 사태랑 날짜가 똑같더군요?저는 이 이슈를 11일로 넘어가던 새벽에 마주한거라 관련 최신글들이 없었던 사태라서 몰랐나봅니다뒤늦게 제로초님 숏츠 보고 알게되었습니다저는 통신사 LG가 아니어서 해결된 것 같은데...LG 쓰고 있었음 여전히 못 들어갔을까 싶네요.... 갑자기 찾을 수 없다는 나의 사이트그저 나는 배포한게 너무 뿌듯해서 늦은 새벽 사이트에 들어갔을뿐이고...사이트에 연결할 수 없음DNS_PROBE_FINISHED_NXDOMAIN이라는 에러를 마주해버렸다....갑자기 이럴 수 있나? 불과 몇시간 전까지만 해도 잘 들어가졌고..무언가를 바꿨다면 Function Region을 한국으로 바꿔놓긴 했었나,수정 후 바로 들어갔을때 문제가 없었다그리고 나는 그 이후.. Vercel에 Remix.js 서버리스 배포하기 | Map Service 구축하기 - 2 배포 과정을 기록하다배포하면서 엄청 초간단하면서도 방향을 잘못 잡아 좀 헤맸었는데,그 과정을 기록해보려고 합니다저처럼 Remix.js + Prisma + SQLite 조합으로 시작하신 분들한테 도움이 될 것 같습니다 (Remix.js 2.x 이상) Vercel을 선택한 이유지금은 Remix.js 공식 문서에 삭제가 되었는데불과 1달 전만해도 빠른 시작으로 vite 탬플릿 버전으로 설치할 수 있었습니다(지금은 통합된건지 뭔지 설치 명령어가 바뀌었더군요)$ npx create-remix@latest --template remix-run/remix/templates/vite저는 이 템플릿으로 시작했습니다만,저처럼 서비스 배포까지 고려 중이라면 이 외에 빠르고 편리하게 배포할 수 있도록 Remix.js 자체.. 코딩테스트용 Web IDE 구축 회고 | Web IDE 구축하기 - 3 완벽하진 않지만, 한 스프린트를 마쳤다는 느낌으로 현시점에 대해 정리를 하고 갈까 합니다 해당 내용 플젝 readme로도 작성된 내용입니다 프로젝트 동기 및 목표 클라이언트는 React, 서버는 Express.js, 컴파일 환경은 Docker를 활용했습니다. 프로그램 동작 방식은 다음과 같습니다. 유저는 원하는 프로그래밍 언어를 고른 뒤, 해당 문제에 맞는 코드를 작성합니다. 유저가 [코드 실행] 및 [제출하기] 버튼을 누르면 작성한 코드는 Socket 통신 서버에 전송됩니다. 유저가 작성한 코드는 back/compile 디렉터리에 해당 언어에 맞는 파일로 만듭니다. 해당 언어에 맞는 Dockerfile을 실행시켜 유저의 코드 파일을 복사해 Docker 내 임시파일로 저장하고, 이미지 생성, 컨테이너를 .. Docker로 각 컨테이너마다 Java, C++, Python, Node.js 언어 실행시키기 | Web IDE 구축하기 - 2 Java, C++, Python 언어가 설치되지 않은 환경에서 어떻게 실행시킬까? 저번 글에는 Javascript 코드를 isolated-vm 가상머신 환경에서 실행시키는 작업을 했습니다 이제 그다음 스텝인 Python, Java, C++ 언어를 받아서 실행시켜야 하는데 어떻게 해야 할까요? 여기서 제가 한 가지 놓친 점이, JS를 뺀 나머지 언어들을 실행시키기 위해선 내 로컬에 해당 언어가 깔려있어야 된다는 것입니다 이 부분을 몰랐던 건 아닌데... 왜 JS 작업할 때 놓치고 있었던 걸까요...?😥 그래서 제 노트북에 모든 언어를 설치해야 하나? 싶었는데, 가뜩이나 똥컴인 노트북에 너무 부담이 되더라고요 (어차피 용량 때문에 깔지도 못했을 듯) 그래서 Docker를 사용하게 되었습니다 Docker 또한.. Remix.js V2 살펴보기 | Map Service 구축하기 - 1 전회사에서 사내 어드민 프로젝트로 Remix.js + React-query 환경에 작업을 했었습니다 그때 처음 알게 된 Remix.js는 좀 독특하다고 느껴졌었는데요 이번에 토이 프로젝트로 Remix.js로 풀스택 개발을 해보자고 결심했습니다 근데 웬걸... 버전 2가 나왔더라고요? 또한 Remix.js를 온전히 써보려고 하니 생각보다 제가 Remix.js 생태계 자체를 잘 이해한 건 아니구나 라는 생각이 들었습니다 이번 글에서는 Remix.js를 써보면서 신기하다고 생각했던 점을 쭈욱 써볼까 합니다 파일 시스템 규칙 Remix.js는 React Router 위에 구축이 되었다고 합니다 그래서 React Router 가 기본으로 내장되어있고, 우린 Nested Routes를 구성할 수 있습니다 V1에서는.. Javascript 코드를 서버에서 안전하게 실행시키는 방법 (feat. isolated-vm) | Web IDE 구축하기 - 1 사용자에게 받은 코드를 서버단에서 어떻게 실행시켜야 할까? 제가 이번에 개발하려는 Web IDE는 React + Node.js 환경으로 구축하려고 합니다 가장 먼저 Javascript 환경인 만큼, Javascript 코드를 클라이언트에게 받아서 서버에 어떻게 실행시켜야 할까요? eval() 함수 또는 new Function이 가장 먼저 떠오를 수 있을 겁니다 하지만 이 함수들은 절대로 사용합니다 보안상의 큰 문제를 야기시키기 때문입니다 그럼 어떻게 안전한 환경에서 코드를 실행시킬 수 있을까요? 개인적으론 그다음에 떠오른 생각이 좋~은 인터프리터가 있지 않을까? 였는데요ㅋㅎ... 당연 없습니다... 허허 일단 가장 먼저 가상환경(가상머신)에서 코드를 실행시켜야 합니다 그리고 안전성이 보장된 샌드박스 환경.. 이전 1 다음
