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 Query와 Redux의 차이, 장단점 요근래 몇 없는 면접이지만, 두 라이브러리를 써왔어서 그런지 늘 받던 질문입니다. 정확히는 Redux를 써보다가 React Query를 쓰게된 이유가 무엇인가요? 였는데, 다시한번 두 라이브러리의 차이점을 고찰해보려고 합니다이전에 제가 처음으로 React Query를 사용했을때 블로그 글이 있어서 링크 남깁니다https://kyung-a.tistory.com/40 React Query란?서버 상태를 패칭, 캐싱, 동기화, 업데이트 하는 작업을 쉽게 해주는 라이브러리저는 React Query가 Tanstack (오픈 소스 소프트웨어) Query로 되기 전에 사용했습니다둘 차이점은 무엇이지? 했더니 원래부터 같은 회사의 라이브러리였던 것 같고 단지 v4 버전이 나오면서 이름을 바꾼 것 같습니다제가 Reac.. 신입, 주니어 개발자에게 필요한 3가지의 자세 | 사이드 프로젝트 회고 이전에 올린 [같이 일하고 싶은 개발자] 주제가 생각보다 관심을 받아서, 같이 일하고 싶은 개발자가 되기 전, 먼저 갖춰야 하는 기본자세에 대해 말해보면 좋겠다 싶더라고요. 이 자세를 먼저 갖추면 팀에 속해 협업할 때도 좋을 거고, 일할 때 주변에서 많은 인사이트를 저절로 얻을 수 있는 팁이 될 수도 있으며, 회사에서 예쁨 받는(?) 개발자가 될 수 있습니다 😆 모르면 모른다고 말하는 자세정말 간단하면서도 현실에선 쉽게 입이 떨어지지 않죠. 특히 개발자라면 더더욱 입이 안 떨어지는 말이기도 합니다. 왜 우린 "모릅니다!" 라는 간단한 말을 못 하는 걸까요?모른다고 하면 혼날까 봐모른다고 하면 무시당할까 봐자존심 상해서쪽팔려서나름 개발자인데 모른다고 했다가 잘리면 어쩌지?등등... 여러 가지 이유가 .. 같이 일하고 싶은 개발자란 무엇일까? 저는 그다지 길지 않은 경력을 가진 3년차 프론트엔드 개발자입니다.그러나 제 사회생활 경험은 참 다사다난 했다고 생각합니다. 별 일이 다 있었거든요.다양한 사건들과 환경에 있으면서 늘 주변을 보며 곱씹고, 생각하고, 고민하고, 결심도 하고, 느꼈던 것들이 참 많았습니다.일 잘하는 개발자? 같이 일하고 싶은 개발자란 무엇일까요?아무것도 모르던 사회초년생 시절에는 그저 상사 말 잘 듣고 개발을 잘하기만 하면 될 거라고 생각했습니다.근데 좀 더 사회생활을 해보니 아닌 것 같다는 생각이 들더군요.어느날 이런 일이 있었습니다.기획자분이 기획을 했는데, 상대 개발자분께서 "그 기능은 지금 개발하기엔 무리다" 라는 말을 하며 그 이유에 대해 설명을 해주는데 기획자분은 전혀 이해하지 못했던걸 옆에서 지켜봤던 일이 있었.. 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 자체.. 프론트엔드 개발자에게 코딩테스트 공부가 필요할까? 저는 개발자가 되어야겠다고 결심했던 날부터 지금까지 알고리즘, 자료구조 공부에 최선을 다하지 않았습니다 요즘은 부트캠프, 국비수업에서 코딩테스트까지 알려주고 관리해 준다고 들었습니다만, 저는 개발을 독학한 사람이기에 그런 케어는 받아보질 못했죠. 또한 그 당시 코딩테스트 실력은 실무를 하는데에 전혀 도움되지 않는다는 글도 많았습니다. 저는 그 당시 굳이 필요하지 않다는 말에 자기합리화를 하며 코딩테스트에는 소홀히 하고, 클론 코딩에 집중했었습니다. 지금부터 3년 전에는 프론트엔드, 백엔드 가릴 거 없이 정석으로 코테를 푸는 면접이 많이 포함되기 시작하던 때였습니다. 지금은 트렌드가 많이 바뀌어서 정석 그 자체 고테보다는 실무형 테스트, 과제로 많이 내주는 편이죠. 쨌든 저는 운이 좋게도 기술면접은 있었지.. 코딩테스트용 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 또한.. 이전 1 2 3 4 5 다음
