분류 전체보기 123

[Note] 버스 팩터(Bus Factor)란 무엇일까?

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

Note 2023.11.16

[Note] 늦은 22년 세이지리서치 입사 회고

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

Note 2023.02.22

[Tech] Debounce(디바운스)와 Throttle(쓰로틀)

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

Tech 2023.02.16

[NPM] npm sill idealtree buildDeps에서 멈추는 현상 해결

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..

Tech/Node.js 2022.10.30

[Typescript] '파일 이름.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.

타입스크립트로 작업을 진행하면서 아래와 같은 오류가 발생해서 간단하게 정리해보고자 한다. '파일 이름.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..

Tech/Typescript 2022.10.25

[HTML] 웹 접근성과 시멘틱 마크업(Semantic Markup)

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

Tech/HTML 2022.04.28

[Javascript] 자바스크립트 실행 컨텍스트(Execution Context)

실행 컨텍스트는 자바스크립트에서 가장 중요한 핵심 개념 중에 하나입니다. 자바스크립트에서 작동하는 다양한 것들의 동작 원리를 담고 있기 때문입니다. 이를 정확히 이해하는 것은 자바스크립트 개발자에게 매우 중요합니다. 목표 실행 컨텍스트에 대해서 이해한다 실행 컨텍스트란? 실행 컨텍스트는 실행 가능한 코드에 제공할 환경 정보들을 모아놓은 객체를 말합니다. 따라서, 우리가 코드를 작성하고 실행하게 된다면 실행 컨텍스트 내부에서 실행되고 있는 것입니다. 여기서 말하는 실행 가능한 코드는 아래와 같습니다. 전역 코드 : 전역 영역에 존재하는 코드 함수 코드 : 함수 내에 존재하는 코드 Eval 코드 : eval 함수로 실행되는 코드 block 코드 : while, if , for, function 등에서 만들어..

Tech/Javascript 2022.04.20

[Network] REST, REST API, RESTful API?

프론트 엔드 개발을 진행하면서, 백엔드 개발자와 협업을 진행하기 위해서는 REST의 개념에 대해서 알아야 할 필요가 있습니다. 오늘은 REST와 REST API, RESTful API에 대해서 알아보겠습니다. 목표 REST의 개념 및 특징을 이해한다 REST API의 개념 및 규칙을 이해한다 RESTful의 개념을 이해한다 REST의 정의 먼저 REST는 ‘Representational State Transfer’의 약자로 자원을 이름으로 구분하여 자원의 상태를 주고받는 모든 것을 의미합니다. REST의 개념 REST는 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시합니다. HTTP Method(GET, POST, PUT, PATCH, DELETE..

[React] 리액트의 hydration

리액트는 DOM에 리액트 컴포넌트를 렌더링 해주는 render메소드를 제공한다. ReactDOM.render(element, container[,callback]) render는 컨테이너 DOM에 element를 렌더링 하는 함수이다. 이 render함수는 container의 자식으로 react component를 넣어주는데, 기존에 이미 렌더링 된 react component가 있다면, 업데이트만 해주게 된다. 그리고 렌더링이 완료되면 세 번째 인자로 전달된 callback이 실행되게 할 수 있다. 이 방식은 CSR(Client Side Rendering)을 할 경우에 사용된다. 그렇다면 SSR(Server Side Rendering)을 사용하는 프레임워크를 사용할 경우에는 어떻게 해야 할까? 이때 사..

Tech/React 2022.04.15

[Tech] CRA없이 react 개발 환경 구축하기

React 환경에서 개발을 진행하면서 CRA를 통해 보통 개발 환경을 구축해왔다. 하지만, '프론트엔드 개발자라면 빌드 시스템을 직접 구축할 수 있어야 하지 않을까?'라는 생각이 들었다. 또한 상황에 맞게 환경 설정을 수정하며, 성능을 개선해 나가는 작업이 필요하다고 생각했다. 이번 작업은 macOS 환경에서 진행하였고, CRA 없이 react 개발 환경 구축을 시작해보겠다. package.json 만들기 가장 먼저 내가 작업하고자 하는 위치에 가서 프로젝트 초기화를 통해, 어떤 프로젝트를 진행하고자 하는지에 대한 정보를 입력한다. yarn init 명령어를 통해서 내가 작업하고자 하는 폴더를 node.js 프로젝트로 초기화 시킨다 해당 명령어를 진행하면 아래와 같은 question이 나오게 되는데, 내..

Tech 2022.04.14