post-thumbnail

커맨드 패턴

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

2022년 11월 17일
·
0개의 댓글
·
post-thumbnail

React Hook을 구현해보자

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

2022년 11월 10일
·
3개의 댓글
·
post-thumbnail

FIRE는 이렇게 협업했다

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

2022년 11월 7일
·
7개의 댓글
·
post-thumbnail

상태 패턴

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

2022년 11월 2일
·
0개의 댓글
·
post-thumbnail

중개자 패턴

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

2022년 10월 27일
·
0개의 댓글
·
post-thumbnail

함께자라기

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

2022년 10월 17일
·
0개의 댓글
·
post-thumbnail

APM 로그로 문제 해결하기

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

2022년 10월 9일
·
2개의 댓글
·
post-thumbnail

방문자 패턴

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

2022년 10월 5일
·
0개의 댓글
·
post-thumbnail

망 사용료가 대체 뭔데?

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

2022년 10월 3일
·
0개의 댓글
·
post-thumbnail

전략패턴

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

2022년 9월 29일
·
0개의 댓글
·
post-thumbnail

Cypress로 e2e 테스트 진행하기

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

2022년 9월 19일
·
0개의 댓글
·
post-thumbnail

빌더 패턴

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

2022년 9월 14일
·
0개의 댓글
·
post-thumbnail

React로 오디오 비주얼라이저 만들기

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

2022년 9월 13일
·
0개의 댓글
·
post-thumbnail

리액트 unit test를 진행해보자

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

2022년 9월 13일
·
0개의 댓글
·
post-thumbnail

CSS의 역사

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

2022년 9월 7일
·
0개의 댓글
·
post-thumbnail

브라우저에서 오디오 입출력 제어하기

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

2022년 9월 7일
·
0개의 댓글
·
post-thumbnail

커스텀 드롭다운 애니메이션을 만들어보자

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

2022년 9월 7일
·
0개의 댓글
·
post-thumbnail

S3 & CloudFront를 활용한 CDN 서버 만들기

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

2022년 8월 10일
·
0개의 댓글
·
post-thumbnail

React Volume Slide 만들기

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

2022년 7월 31일
·
0개의 댓글
·
post-thumbnail

React Horizontal Scroll 구현

좌우 스크롤은 직접 구현해도 되지만, 누군가 이쁜 library를 만들어 두었길래, 바로 사용하였다.공식 페이지나 깃허브에 상세하게 설명이 있으니, 참고해도 좋아보임공식 페이지깃허브(https://github.com/asmyshlyaev177/react-hor

2022년 7월 11일
·
1개의 댓글
·