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 또한.. 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이 가장 먼저 떠오를 수 있을 겁니다 하지만 이 함수들은 절대로 사용합니다 보안상의 큰 문제를 야기시키기 때문입니다 그럼 어떻게 안전한 환경에서 코드를 실행시킬 수 있을까요? 개인적으론 그다음에 떠오른 생각이 좋~은 인터프리터가 있지 않을까? 였는데요ㅋㅎ... 당연 없습니다... 허허 일단 가장 먼저 가상환경(가상머신)에서 코드를 실행시켜야 합니다 그리고 안전성이 보장된 샌드박스 환경.. 기획은 상상력에서 나오는걸까? (해당 게시물은 지극히 주관적임을 참고 부탁드립니다) 기획은 없던걸 만들어 내는 거니까 다 상상으로 만드는 거예요 IT 업계에 종사하시는 분들은 위 문장에 대해 어떻게 생각하시나요? 일단 위에 문장은 제가 실제로 회사생활 하면서 들었던 말입니다 만약 제가 첫회사에서 저 말을 들었더 라면 "맞지 맞지" 라며 고개를 끄덕였을 수도 있습니다 그땐 사내에 기획자가 없었고, 이미 모든 건 정해진 내용으로 외주가 들어오는 거라서 무조건 만들라면 만들어야 하는 구조였거든요 근데 회사를 옮기고 실제로 기획자, 디자이너와 대면해서 일해보니 상당히 신선한 충격이었습니다 갑자기 그 기능에 버튼을 추가하려는 이유가 뭐죠? 데이터적으로 근거가 명확하지 않으면 불필요한 추가인 겁니다 위 문장은 제가 입사 후 처음으로 참여했던 스.. 📝 2022~2023년 회고 2022~2023 회사 2022년 2월쯤 제가 SI 회사를 퇴사하고 운이 좋게 거의 바로 2022년 3월 멋쟁이사차럼 프로덕트팀에 합류하게 되었습니다 처음 느껴보는 수평적인, 활발한 분위기에 한동안은 주말에도 출근하고 싶다라는 생각이 들 정도로 행복했었답니다 물론 회사란게 이런 기분이 오래가긴 힘들지만요 ㅎㅎ 테킷이라는 IT 코딩 교육 프로덕트의 프론트엔드 개발자로서 다양한 업무를 경험해 보았습니다 사내 어드민 개발 KDT 사업을 시작함과 동시에 KDT 지원서를 받을 어드민 개발에 들어가게 되었습니다 지원서는 1차, 2차, 3차로 나뉘고 각 스텝마다 input form이 다른 게 특징이었습니다 그리고 지원현황에 따라 form 수정이 잦을 수 있어 확장성 있게 개발을 해야 했습니다 이 당시 데드라인이 굉장.. React Query 사용기 안녕하세요! 오늘은 제가 실무에서 쓰고 있는 react-query에 대해 글을 써볼까 합니다 지금 실무에서 쓰고는 있지만 늘 같은 형태로만 쓰고 있고, 아무것도 모른 상태에서 다른 동료가 작성한 코드를 토대로만 공부(?) 했기 때문에 모자른 부분이 굉장히 많아서... 공부 겸 내용 정리를 해보려고 합니다 블로그 글 중에 react-query에 대해 잘 정리해주신 분이 계셔서 링크 남깁니다 https://maxkim-j.github.io/posts/react-query-preview React-Query 살펴보기 React의 Server State 관리 라이브러리 React Query를 살펴봅니다. maxkim-j.github.io 1. react-query와 redux 차이점 사실 저는 redux만 알고.. 이전 1 2 3 다음
