항상 오픈소스 컨트리뷰터가 되어보는것이 꿈이였던 나...깃허브의 망령처럼 돌아다니다 깃허브를 꾸며주는 레포지토리중 하나를 찾게되었다. 기능도 단순하고 이쁜 뱃지를 제공하는 레포였는데 나의 눈에 띈 것은 바로 번역률!한국어가 67% 밖에 번역이 되어 있지 않았다. 실제로

Command Pattern 001커맨드 패턴에 대하여 알아봅시다Command Pattern 002간단한 게임을 하나 제작할 예정입니다.이번 게임에서는 두가지 버튼만 활용할 예정이고, 버튼들은 alt 와 ctrl 만 사용할 예정이기에, alt에는 jump ctrl 에는

Hook 을 구현하기 앞서 Closure에 대한 개념을 알고 가야된다. 클로저는 자바스크립트 처음 등장한 것은 아니며 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다.MDN 공식문서를 읽어 보면 다음과 같다.A closure is the

FIRE팀이 모도코를 개발한지 어느새 7개월이 넘었다. 소프트웨어 마에스트로과정도 이제 끝이 보이고 (글쓴 기준 25일정도 남았다) 우리가 어떻게 작업했었는지 정리할겸 작성해보았다.팀 구성은 나(팀장이자 FE) 외 두명(FE, BE)로 이루어졌다. 팀은 모으는것도 정말

imageFinite-state_machine 참고모든 주어진 순간에 프로그램이 속해 있을 수 있는 상태들의 수는 유한하며, 어떤 고유한 상태 내에서든 프로그램은 다르게 행동하고 한 상태에서 다른 상태로 즉시 전환될 수 있다. 현재의 상태에 따라 프로그램은 특정 다른

IMG_6115객체 간의 혼란스러운 의존 관계들을 줄일 수 있는 행동 디자인 패턴즉 중개자 패턴은 객체 간의 직접 통신을 제한하고 중재자 객체를 통해서만 협력할 수 있게 설정간단한 로그인 Form을 만든다고 구현을 해보자Guest를 누르면 Username과 Passwo

❗ 뇌피셜 주의우선 이전글에서 다뤘던 SW Maestro 소마 라고 하는 정부지원사업에 붙게 되었다. 320명이나 되는 연수생들을 대충 확인해보았는데, 정말 다양한 사람들이 정말 많다는것을 느꼈다. 그리고 대부분이 전공생이 였다는게 정말 놀라웠다. 현재 진행중인 42

우리 서비스에는 new-relic 이라는 APM이 연동되어 있다. 하지만 사용법이 너무 복잡하고 어려워서 잘 사용하고 있지는 않고 있는데, 마침 쓸 상황이 왔다.스크린샷 2022-10-09 오후 9 32 55스크린샷 2022-10-09 오후

데이터 구조는 많은 요소가 저장되어 있고, 각 요소에 대해 어떻게 처리가 필요한 경우를 생각해보자.처리에 대한 코드는 어디에 있어야 될까? 일반적으로 데이터 구조를 표지하는 클래스에 기술하겠지만, 처리가 늘어날 때 마다 데이터 구조의 클래스를 수정해야 되는 경우가 생긴

요새 망 사용료에 대한 말이 온/오프라인으로 많이 언급되고 있다. 한술 더 떠서 트위치는 화질 제한을 720p로 낮추는 등 화질제한을 거는등 관련 이슈들이 정말 계속 터져나오고 있다. 망 사용료란 무엇이고, 왜 우리가 관심을 가져야 하는지에 대해서 알아보자망 사용료에

적을 부수기 위한 작전군대를 움직일 때의 방책문제를 해결하기 위한 방법등 이라 볼 수 있다.즉 알고리즘을 빈틈없이 교체하여 같은 문제를 다른 방법으로 쉽게 해결할 수 있게 도와주는 패턴이다!StrategyPatternTemplate drawioStrategy는 전략을

환경: React, typescript, styled-components사실 테스트를 진행해야 되는이유는 정말 셀 수 없이 많다.개발 과정에서 문제가 생겼을 때 바로 눈치 챌 수 있디리팩토링을 믿고 할 수 있다바로 코드의 동작 상태를 확인할 수 있다테스트 코드를 만들기

생성 패턴에서는 중요한 이슈가 두 가지가 존재한다.생성 패턴은 시스템이 어떤 Concrete Class를 사용하는지에 대한 정보를 캡슐화한다.생성 패턴은 이들 클래스의 인스턴스들이 어떻게 만들고 어떻게 결합하는지에 대한 부분을 완전히 가려준다.생성 패턴을 이용하면 무엇

현재 진행중인 웹 플랫폼에서는 실시간 통신, 즉 음성 및 비디오가 필수적으로 들어가며, 오디오가 잘 나오는지 확인할 수 있는 오디오 비주얼라이저 또한 필수적으로 들어가게 되었다.처음에 이걸 구현하기에는 다소 어려움이 있었는데, 우선 reference도 많이 없어 힘들었

이번에는 모킹 없이 간단하게 DOM관련 테스트만 진행할 예정이다. 모킹 관련은 다음 포스트에서 다룰 예정.여러 테스트 예시들을 보면, 한 jest.it 함수 에서 render를 여러번 하는것을 손쉽게 볼 수 있다. 그렇게 나도 유사하게 해보며 익혀보았다.describe

image가장 전통적인 CSS 방식에는 크게 3가지 방식이 존재한다.Inline CSS(- Internal CSS(- External CSS(일반적으로 간단하게 태그안에 style을 적용하는 방법HTML 페이지에 쉽고 빠르게 CSS 룰을 삽입할 수 있다.변경에 대한 미

현재 만들고 있는 프로제긑는 디스코드와 게더타운과 유사한, 실시간 통신이 들어간 웹 플랫폼이다. 이런 유사한 프로젝트에 필수적으로 들어가야 되는 요소는 오디오의 제어이다.말을 하다가 마이크를 바꿔야 되는 상황이 된다면?음질이 좋지 않다고 해서, 이어폰을 꼈을 때, 소리

사실 커스텀 드랍다운은 옛날부터 만들고 싶었지만, 시간 투자 대비 사소한 디자인이여서 그냥 기본 custom selector나 mui를 주로 사용했었다.그러다 이제는 더이상 미룰 수 없기에 커스텀 드랍다운 제작에 나섰다.우선 이번 드랍다운의 기능은 다음과 같다.드랍다운

CDN 서버를 만들기 앞서, 왜 CDN 서버를 만드는지에 대해 알아보자콘텐츠 전송 네트워크(CDN)는 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크로 콘텐츠 전송 혹은 배포 용도로 사용된다.실제 사용자는 웹사이트에 접속 시

프로젝트를 진행중에, 이러한 시안이 날라왔다. 대충 볼륨을 컨트롤 할 수 있는 Slider를 제작하는 것.우선 여러가지 선택사항이 있는데, material UI를 사용하여, 간단하고 이쁜 슬라이더를 가져다 쓰는것, 아니면 직접 구현이 있었다.우선 라이브러리를 쓰는것 보