로니의 개발 이야기

조직 문화에 대해서 리서치를 하던 중에, 버스 팩터(Bus factor)라는 재밌는 용어를 보게 되어서 정리해보고자 한다. 버스 팩터(Bus Factor)? 먼저 버스 팩터는 소프트웨어 개발 또는 프로젝트 관리에서 사용되는 용어로 특정한 개발자나 팀 멤버가 얼마나 중요한 역할을 하는지를 나타내는 지수이다. 트럭 팩터(Truck Factor) 또는 로또 팩터(Lottery Factor)라고도 하며, 간단히 얘기해서 몇 명의 팀 멤버가 버스에 치여서 죽거나 크게 다쳤을 때 프로젝트가 망하게 되는지를 나타낸다. 이 지수가 높을수록 대체로 프로젝트의 안전성이 높아진다. 예를 들어 버스 팩터가 1이라면 팀 멤버 중 한 명만 빠져도 프로젝트에 문제가 생기는 경우이다. 반대로 팩터가 100이라면 100명이 빠져야 비..

2022년 5월 이전 직장을 퇴사하고, 5월 초 세이지리서치라는 회사에 MlOps Solution Frontend Developer 직무로 면접을 보게 되었다. 정확히는 퇴사 전에 면접을 본 거긴 하지만.. ㅎㅎ 세이지리서치의 전형은 서류 전형, 전화 면접, 기술 면접, 컬처핏 면접을 순서로 진행되었고, 조금 특이한 부분은 기술 면접과 컬처핏 면접을 같은 날에 진행한다는 것이었다. 처음 서류 전형을 운좋게..? 통과하고, 전화 면접을 진행하게 되었고 이 또한 좋게 봐주신 덕분에 통과하게 되었다. 그리고 대망의 기술 면접 날 세이지리서치에 처음 입성하게 되었는데, 회사 인테리어가 아주 깔끔하고 풍기는 분위기가 매력적인 장소라는 생각이 들었다. 세이지리서치 기술 면접을 볼 때는 아는 부분에 대해서 설명을 못..

Debounce와 Throttle이 필요한 이유? Debounce와 Throttle은 DOM 이벤트를 기반으로 실행하는 자바스크립트 이벤트를 제어하기 위해 필요하다. 즉, 불필요한 호출을 방지하기 위해 사용하는 것이다. 먼저 아래의 예시를 한 번 보자. 스크롤을 내릴 때, 엄청나게 많은 이벤트가 발생하게 되면서 그 이벤트에 대한 콜백(callback)이 발생하게 된다. 그렇게 되면 그 콜백을 수행하기 위한 리소스가 많이 사용되고 따라서 성능적인 이슈가 발생할 것이다. 그렇다면 Debounce와 Throttle은 어떻게 동작하는 걸까? Debounce Debounce는 이벤트를 그룹화하여 일정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다. 예시로 시간을 200ms로 두고 작업을 진행해 보았다...

npm install을 진행했는데, npm sill idealtree buildDeps에서 멈추는 현상이 발생하여서 해당 문제를 해결해보기로 했다. 먼저, https://ggodong.tistory.com/318 글의 3번을 따라서 진행해보았다. 아래 명령어를 입력 후 npm install을 진행해보았다. npm set registry http://registry.npmjs.org/ 일단 npm sill idealtree buildDeps에서 멈추는 현상은 사라졌지만, 아래와 같은 메시지가 나와서 뭔가 해결되지 않은 느낌이 들었고, 아래의 메시지에서 해결책을 찾아보고자 했다. 메시지 내용은 2021년 10월 4일부터 패키지 설치를 포함하여 npm 웹 사이트 및 npm 레지스트리에 대한 모든 연결은 TLS..

타입스크립트로 작업을 진행하면서 아래와 같은 오류가 발생해서 간단하게 정리해보고자 한다. '파일 이름.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module. 해당 오류에 따르면, isolatedModules가 적용되어 있는 상태에서는 파일이 전역 스크립트 파일로 간주되기 때문에 컴파일될 수 없다고 말한다. 그래서 import, export 구조를 만들어 주거나 export {}를 넣어주어서 모듈로 만들어 주거나, isolatedModules 를 tsco..

react 개발을 진행하면서 webpack에서 빌드를 할 때, 계속 아래와 같은 오류가 발생해서 이를 해결해보고자 했다. 오류에 따르면 뭔가 최적화가 안되고 있고, react-icon 주에서 fa와 md에서 최대 값인 500kb를 초과하고 있다는 내용이었다. [BABEL] Note: The code generator has deoptimised the styling of .. react-icons/fa/index.esm.js as it exceeds the max of 500KB. [BABEL] Note: The code generator has deoptimised the styling of .. react-icons/md/index.esm.js as it exceeds the max of 500KB...

mongoDB Compass를 외부 서버의 컴퓨터에 연결을 하면서 많은 시행착오를 겪어서, 내용을 천천히 기록으로 남겨보려고 합니다. 먼저 이 과정은 mongoDB, mongodb-compass 가 정상적으로 설치되어 있고, 환경 설정이 끝났다는 가정하에 진행되었습니다. mongoDB Compass를 실행 시켜보면 아래와 같은 화면을 볼 수 있습니다. 여기서 연결하는 방법이 두가지가 있는데, 저는 string 형식을 사용하지 않기 때문에 Fill in connection fields individually를 눌러 줍니다. 그러면 아래와 같은 폼을 볼 수 있습니다. 여기서 Hostname은 default로 localhost로 두고, port도 마찬가지로 27017로 둡니다. (별도의 변경 사항이 없었다면)..

AWS EC2 Instance에 ping test를 진행해봤더니 아래와 같이 timeout 메시지를 받게 된다. 그리고 테스트를 종료해보면 100.0% packet loss라는 메시지를 보게 된다. 그렇다면 ping test 진행을 위해서 어떠한 설정을 해주어야 할까? Request timeout for icmp_seq 0 이것을 해결해주기 위해서는 인바운드 규칙을 별도로 추가해주어야 한다. 순서는 다음과 같다. AWS EC2에 접속 후에, 좌측 네비게이션 바에서 보안 그룹을 클릭한다. 내가 수정하고 싶은 보안 그룹을 클릭한다. 인바운드 규칙 편집을 클릭한다. 규칙 추가 버튼을 클릭한다. 여기서 유형 , 프로토콜 , 소스 를 지정해주면 된다. 각각의 설정 내용은 아래와 같다. 유형 : 네트워크 트래픽에 ..

목표 시멘틱 마크업이 무엇인지에 대한 이해 시멘틱 마크업의 사용 이유 정리 시멘틱 마크업의 사용법 알기 시멘틱 마크업?(Semantic Markup) 시멘틱 마크업은 글자 그대로 해석하면, ‘의미론적인 HTML 태그 문서 작성’을 뜻합니다. 즉, 의미를 잘 전달 할 수 있도록 HTML 태그 문서를 작성하는 것을 말합니다. 그렇다면 이러한 방식은 왜 사용되는 것일까요? 시멘틱 마크업을 사용하는 이유 시멘틱 마크업을 사용함에 따라 얻을 수 있는 효과는 다음과 같습니다. 웹 접근성에 효율적 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있기 때문입니다. 코드 가독성에 따른 유지 보수의 용이 끊임없는 div 들을 탐색하는 것보다, 의미 있는 코드 블록을 찾는 것..

1. Javascript class에서 method 구현 1) prototype 이용 클래스를 선언하고, 외부에서 프로토 타입을 통해 함수를 구현한 예이다. 결과 값은 정상적으로 합계 30이 출력 되는 것을 볼 수 있다. 2) 내부 메소드로 구현하기 클래스 안에 메소드를 선언함으로써, 위의 코드와 같은 결과물을 얻을 수 있다. 그렇다면 'dongle' 이라는 객체에서 sum을 다르게 정의 즉 재정의하고 싶다면 어떻게 하면 될까? 형식 : 객체 이름. 내부 메소드 이름 = function() { return 리턴할 내용; } 이 형식대로 재정의를 하면 된다. console 창에서도 반영이 잘 되어있을까? 하는 의문이 들 수 있다. 이 콘솔 로그는 sum()을 출력하기 위해서 다음과 같은 순서를 갖는다. '..