마이구미의 HelloWorld 마이구미의 HelloWorld

이 글은 백준 알고리즘 문제 17144번 "미세먼지 안녕!" 을 풀이한다. 삼성 SW 역량 테스트 문제이다. 특정 알고리즘을 요구하는 것보다는 정확한 문제 이해를 통한 구현이다. 문제 링크 - https://www.acmicpc.net/problem/17144 미세먼지를 제거하기 위해 구사과는 공기청정기를 설치하려고 한다. 공기청정기의 성능을 테스트하기 위해 구사과는 집을 크기가 R×C인 격자판으로 나타냈고, 1×1 크기의 칸으로 나눴다. 구사과는 뛰어난 코딩 실력을 이용해 각 칸 (r, c)에 있는 미세먼지의 양을 실시간으로 모니터링하는 시스템을 개발했다. (r, c)는 r행 c열을 의미한다. 공기청정기는 항상 왼쪽 열에 설치되어 있고, 크기는 두 행을 차지한다. 공기청정기가 설치되어 있지 않은 칸에는..

이 글은 백준 알고리즘 문제 17143번 "낚시왕" 을 풀이한다. 삼성 SW 역량 테스트 문제이다. 특정 알고리즘을 요구하는 것보다는 정확한 문제 이해를 통한 구현이다. 문제 링크 - https://www.acmicpc.net/problem/17143 낚시왕이 상어 낚시를 하는 곳은 크기가 R×C인 격자판으로 나타낼 수 있다. 격자판의 각 칸은 (r, c)로 나타낼 수 있다. r은 행, c는 열이고, (R, C)는 아래 그림에서 가장 오른쪽 아래에 있는 칸이다. 칸에는 상어가 최대 한 마리 들어있을 수 있다. 상어는 크기와 속도를 가지고 있다. 낚시왕은 가장 처음에 1번 열의 한 칸 왼쪽에 있다. 다음은 1초 동안 일어나는 일이며, 아래 적힌 순서대로 일어난다. 낚시왕은 가장 오른쪽 열의 오른쪽 칸에 이..

이 글은 AWS 람다 서비스를 이용해 이미지 리사이징에 대한 다룬다. 우선 제목에서도 1편이라고 한 이유는 다음과 같다. 람다를 이용한 이미지 리사이징은 여러 방식이 있고, 계속해서 새로운 방식이 나오고 있기 때문이다. 여기서는 가장 기본적이고, 간단한 예제를 통해 다룬다. Lambda@Edge 를 활용한 이미지 리사이징 2편 - https://mygumi.tistory.com/377 AWS 문서 기반 - https://docs.aws.amazon.com/ko_kr/lambda/latest/dg/with-s3-example.html 크게 S3 와 Lambda 를 이용한 예제를 다루려고 한다. S3 에 이미지를 업로드하면, 자동적으로 원하는 크기로 리사이징되어 서버에 저장되길 원한다. 즉, 여러 디바이스 ..

이 글은 마우스 포인터 좌표를 얻을 수 있는 MouseEvent 의 좌표 값에 대한 속성들을 다룬다. 크게 client*, page*, offset*, screen* 네 가지의 차이점을 알아보고, 주의사항을 알아본다. 차이점은 사실 이 글이 아니더라도, 쉽게 이해할 수 있을 것이다. 이 글을 쓰게 된 계기는 "주의사항" 이 된다. 결과적으로 특정 속성의 리턴값은 Integer 형태가 아닌 double 형을 반환한다. MDN - https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent client*, page*, offset*, screen* 차이점 본인이 경험한 관련 이슈 원인과 해결 참고하면 좋을 것들 우선 가장 기본적인 마우스 포인터 좌표에 대한 속성..

"수학을 활용한 예제" 란 카테고리는 한번쯤은 접했던 수학 공식을 활용한 예제를 다룬다. 컴퓨터 비전, 그래픽, 게임 등을 다루지 않으면, 사실 우리가 배운 수학 공식이나 지식을 사용할 일은 많지 않다. 하지만, 수학은 프로그래밍에서 확실히 도움이 된다. 이 카테고리는 수학 공식을 활용하는 예제를 통해 조금이나마 (프로그래밍수학) 연관 관계와 흥미에 도움을 되었으면 한다. 코드 예제 - https://codesandbox.io/s/circle-animation-7byle 이 글은 원의 좌표를 활용한 예제를 다룬다. 원에 관한 내용은 아마 고1에 접했을 것이다. 예제를 다루기에 앞서, 우리는 무엇을 만들어야하는가? 를 살펴보자. 원을 기반으로 한 리스트가 존재하고, 이 리스트는 톱니바퀴처럼 회전하는 애니메..

이 글은 CSS 의 결합자(Combinators) 에 대해 다룬다. 각 결합자를 단순한 예제가 아닌, 실제로 많이 사용하고, 활용할 수 있는 예제를 통해 진행한다. 본인은 부끄럽게도 최근 들어서야, 모든 결합자를 사용하고 있다. 혹시나 특정 몇개만 사용하거나, 각 용도를 구분해서 사용하지 않고 있다면, 도움이 될 것이다. 우선 결론적으로, 이 글을 작성하게 된 이유는 인접 형제 결합자와 일반 형제 결합자 때문이다. CSS 구문에 있어, 크게 선택자와 결합자로 분류할 수 있다. CSS 선택자는 스타일을 적용시키기 위한 HTML 요소를 선택할 수 있다. h1 {...} #app {...} .container {...} input[type="text"] {...} 위와 같은 정해진 규칙(선택자)을 통해 우리는..

아주 오래전에 Flexbox 에 대한 아주 기본적인 내용을 다뤘다.이번 글은 크게 flex-wrap 과 flex(flex-grow, flex-shrink, flex-basis) 속성 사용법을 알아본다.Flexbox 에 있어서는, 가장 중요한 핵심인 주축과 교차축의 이해가 필요하기 때문에, 아래 글을 먼저 참고하면 좋다.flex-direction 의 값을 사용한다면, 주축과 교차축을 바뀐다는 것을 인지하고 있어야한다.또한, flexBox 를 다룰 때에는 관련된 속성들의 디폴트 값을 이해할 필요가 있다.Flexbox 기본 1 - https://mygumi.tistory.com/237 이미지리스트에 대한 예제를 단계별로 진행하면서 Flexbox 의 활용하는 방법을 다뤄본다.우선 첫번째 예제를 작성해본다. fl..

이 글은 디자인 패턴 중 컴포지트 패턴(Composite Pattern) 을 다룬다.위키피디아의 내용을 기반으로 정리할 예정이다.위키 - https://en.wikipedia.org/wiki/Composite_pattern 글의 주제를 다루기에 앞서, 글들을 참고하면서, 기억에 남는 문장은 다음과 같다. It suggests that design patterns aren’t things we invent. They’re things we discover. 디자인 패턴은 누군가 발명한 것이 아닌, 발견했다고, 생각하면 조금 더 편하게 바라볼 수 있지 않을까 생각한다. 컴포지트(Composite) 란? OOP 에서 컴포지트(Composite) 는 하나 이상의 유사한 객체를 구성으로 설계된 객체로 모두 유사한..