Developer Minbro's Blog

[개발 환경 정리] 장단점 및 비교 정리소규모 개발팀(3명), 무료 플랜 기준개발 환경을 고려해 정리한 기록입니다.✍️ 글을 쓰게 된 배경AI 팀으로 이동하면서 기존과는 다른 개발 환경이 필요해졌습니다.개발 영역: Python · C++ 기반 Vision AI, ROS 개발팀 규모 / 조건: 3명 소규모 팀, 무료 플랜검토 범위: IDE, 형상 관리, 기술 리뷰, 기술 문서 관리 플랫폼, 협업툴·메신저그래서 개발 환경 전반을 한 번에 비교해보게 되었습니다.1️⃣ IDE 비교🔹 VS Code장점가볍고 빠름Python, C/C++ 등 다중 언어 개발 지원확장 플러그인 생태계가 매우 풍부SSH 기반 원격 개발 환경 지원단점기본 기능은 단순하여 필요한 기능을 직접 플러그인으로 구성해야 함AI 보조 기능 사용 ..

지난 번에는 저희 팀 R&D를 위해 프론트엔드 테스팅 툴을 조사해봤습니다. 이번에는 우리 팀에 적합한 차트 라이브러리는 무엇이 있을지 조사해보며 정리해봤습니다. 저희 팀은 Vue.js 프레임워크를 유지하기로 결정했으니, 이에 최적화되고 눈에 띄었던 차트 라이브러리들을 공유해보고자 합니다. ✍️ 차트 라이브러리 종류 1) Chart.js 먼저 Chart.js 입니다. Chart.js는 웹 상에 차트를 그리는데 특화된 라이브러리로, Canvas를 이용한 라이브러리 입니다. Vue.js 프로젝트에서 가장 많이 쓰이는 라이브러리 1위로 알려져있고, 워낙 대중성이 높아 정보 활성화가 잘 되어 있습니다. 현재 중량 모니터링 페이지에서 실시간 데이터를 보이기 위해 라인 차트를 사용 중입니다. ▶ 장점 간단한 차트를 ..

현재 저희 팀은 R&D를 위해 여러 기술 스택 도입을 준비하는 과정에 있습니다. 저는 프론트엔드 팀의 소속으로서 R&D 기술 조사 기간 동안 관련 기술 스택을 열심히 찾아보기로 했습니다. 회의 도중 팀 프로젝트 테스트 체계의 확립을 위해 관련 툴을 찾아보자는 이야기가 나와, 프론트엔드 테스팅 툴에는 무엇이 있고, 어떤 것이 우리에게 필요한 것인지를 정리하며 끄적여보려 합니다. ✍️ TDD란? TDD (Test Driven Development) : 테스트 주도 개발 : 만들게 될 프로그램에 대한 테스트 코드를 먼저 작성한 다음, 실제 코드를 작성하여 테스트를 실행하는 개발 프로세스 테스트하면 가장 중요한 개념이 TDD입니다. TDD의 핵심은 개발 전 요구사항을 검증하는 자동화된 테스트 코드를 미리 작성한..

안녕하세요. 오늘은 외근으로 다녀온 전시회 후기를 남기려 합니다. 전시회를 다녀와서 보고 느낀 것들을 이번 블로그를 통해 공유하고자 합니다. 👀 전시회 후기 🔎장소 : 코엑스 A홀 🔎기간 : 2023.11.29(수) ~ 2023.12.01(금) 10:00 ~ 17:00 11.30(목) 날짜로 2023 대한민국 소프트웨어대전 softwave 전시회를 다녀왔습니다. 이번 소프트웨어대전 전시회는 참여하는 기업이 330개이면서, 약 570개의 부스가 설치되었다고 합니다. 수많은 기업이 이번 전시회에 참여하는 만큼 다양하고 색다른 기술의 제품들이 있을 것이란 생각에 기대감이 한껏 부풀었습니다. 대기 줄은 없어 명함을 받는 즉시 입장할 수 있었습니다. 정말 많은 기업이 참가했기 때문에 모든 전시 제품들을 이 블로그..

오늘은 ORM의 개념을 알아보고자 합니다. 제가 근무 중인 회사에서는 Java 언어를 사용하여 서버단 개발을 진행하고 있습니다. 서버단에서 데이터 사용을 위해 SQL을 Mapping 해올텐데, 저희는 myBatis 프레임워크를 사용했습니다. myBatis를 통해 SQL Mapper 방식으로 xml 파일에 쿼리문을 작성한 다음, Java 클래스 코드와 Mapping 하여 DB 데이터를 가져왔습니다. ※ SQL Mapper : 직접 SQL 쿼리를 작성하고 매핑하는 방식 그런데 요즘은 myBatis 대신 ORM 기술을 사용한 API를 많이 사용한다고 합니다. 이 ORM 기술이 무엇이고, 어떤 장점이 있길래 점점 사용 추세가 늘어나고 있는지 파헤쳐 보도록 하겠습니다. ✍️ORM 정의 ORM(Object Rela..

오늘은 repaint 와 reflow의 개념을 알아보고자 합니다. 해당 용어는 웹 브라우저에서 렌더링(Rendering) 과정에 관련된 용어라는 것 정도만 알고 있었으나, 구체적으로 무엇을 의미하는지, 어떤 차이가 있는지는 알지 못했습니다. ※ 렌더링 : 서버로부터 받은 개발 문서(Javascript, HTML, CSS)를 웹 브라우저에서 그래픽 형태로 출력하는 과정 프론트엔드 개발자로서 알아야할 개념이라고 들었고, 기술 면접에서 은근히 자주 나오는 단골 질문이라고 하니 지금부터 확실하게 파헤쳐보고자 합니다. ✍️ 렌더링 과정 먼저 웹 브라우저를 통해 화면이 뿌려질 때까지 렌더링이 어떻게 이뤄지는지 알아보도록 하겠습니다. 1. 문서 파싱(Parsing) & Render Tree 구축 웹 브라우저는 서버로..

오늘은 Commit 메세지에 대한 이야기를 나눠보려고 합니다. 저는 현재까지 회사에서 형상관리도구를 SVN(Subversion)을 사용했습니다. 매일 할당 받은 개발 업무를 마치고, Commit을 할 때 개발 내역을 메세지로 남겼습니다. 그런데 어느날 문득, 우리 팀에는 Commit 메세지를 남길 때 특정한 규칙이 없었기 때문에 다른 회사에서는 이 Commit 메세지를 어떠한 방식으로 남기는지 궁금하기 시작했습니다. 마침 우리 팀이 형상관리도구를 Git으로 바꾸게 되었는데, 이참에 우리 팀만의 Commit 규칙을 정하는 것이 어떨까 생각이 들었습니다. 우선, 규칙을 정하기 전에 Git의 기본적인 좋은 Commit 메세지를 남기기 위한 7가지 습관을 알아보려고 합니다. ● Git에서 Commit 메세지를 ..

오늘은 SOP, CORS가 뭔지 알아보려고 합니다. 웹 개발자라면 이 단어들은 한 번쯤은 봐왔을 것이라고 생각합니다. 저도 프로젝트를 진행하며 위의 단어들이 개발자 도구에 빨간 글씨로 뜨는 것을 많이 접했던 것 같습니다. 그럼 이 단어들이 각각 무엇을 의미하는지 알아보도록 하겠습니다. 1. SOP (Same Origin Policy) SOP(Same Origin Policy, 동일 출처 정책)은 다른 Origin과 리소스를 주고받지 못하도록 금지하는 보안 정책이다. ※ 여기서 Origin(출처)은 프로토콜, 호스트, 포트를 합친 것을 의미합니다. 예시로, 'https://minhyung.com:80'라는 URL이 있다고 치면, 프로토콜(https://) + 호스트(minhyung.com) + 포트(:80..

보호되어 있는 글입니다.

Javascript에서 '==' 와 '===' 연산자의 차이를 알아보려고 합니다. 우선 각각의 기능을 정리하자면 아래와 같습니다. == 는 서로 다른 변수의 값을 비교하는 연산자이고, === 는 서로 다른 변수의 값과 자료형을 비교하는 연산자이다. 예를 들어보겠습니다. let param = 1; if (param == "1") { console.log("참입니다."); // 도출 } else { console.log("거짓입니다."); } 위 Javascript 코드에서 결괏값은 어떻게 도출될까요? "참입니다." 가 도출되겠지요. 각각의 자료형이 숫자(Number)와 문자열로 다를 지라도 오로지 값 자체만 비교하기 때문에 같다고 보는 겁니다. 그렇다면 이번엔 === 연산자를 사용해보겠습니다. let pa..