분류 전체보기
-
[웹 접근성] 명시적, 암시적 <label> 태그 :: 마이구미HTML, CSS 2019. 10. 5. 18:10
이 글은 태그에 대해 다룬다. label 태그에 대한 코드 작성 방식에는 명시적(explicit)과 암시적(implicit)으로 분류된다. 본인은 label 태그와 input 태그에 있어서, 일관성있게 코드를 작성하는 것을 고민하다가 정리한 글이다. 참고 링크 - https://cccaccessibility.org/web/web-developer-tutorials/explicit-and-implicit-form-labels 우선 label 태그란 무엇인가? label 태그는 용어 그대로 이름표와 같은 역할을 한다. 양식 입력 창의 요소들을(form controls) 위한 캡션을 나타낸다. 대부분 input 태그와 함께 사용하는 것을 많이 볼 수 있을 것이다. 사용하는 이유 중에서, 쉽게 알 수 있는 이점..
-
[React] Prompt 커스텀해서 제어하기 :: 마이구미React 2019. 10. 3. 12:53
이 글은 react-router 에서 제공하는 Prompt 컴포넌트를 다룬다. 페이지 뒤로가기 또는 다른 페이지 이동으로 하면, 바로 페이지 전환이 일어난다. 때로는 Confirm 과 같은 창을 통해 페이지 이동을 막고 제어하는 것을 원할 수 있다. react-router(v4) 를 사용하고 있다면, 쉽게 제공해주는 으로 해결할 수 있다. 참고 링크 - https://medium.com/@michaelchan_13570/using-react-router-v4-prompt-with-custom-modal-component-ca839f5faf39 브라우저에서 뒤로가기 뿐만 아니라 페이지 이동을 막는 것이 필요한 경우가 많다. 이를 해결하기 위한 방법으로 네비게이션 가드(Navigation Guard) 라고 ..
-
[자료구조] 스택, 큐는 무엇인가? :: 마이구미알고리즘 2019. 9. 7. 22:35
이 글은 자료구조의 "스택, 큐" 를 다룬다. 자료구조에서 가장 먼저 나오는 기본적인 자료구조이다. 각 자료구조에 대한 깊은 설명보다는 현실적인 이해에 도움을 위해 다루려고 노력했다. 알고리즘 문제를 풀기 위해 알아야하는 지식을 위한 설명이 아닌, 현실적으로 활용할 수 있는 이해를 위한 도움에 중점을 둔다. 실제로 요즘은 자료구조를 생각하지않고도 코드를 작성할 수 있다. 예를 들어, 스택과 큐와 같은 개념은 배열로 처리하면 그만이다. 하지만 이 과정에서도 자료구조의 개념을 인지하고 활용하면 분명 코드와 개발에 도움이 된다. 본인은 왜 코딩테스트가 존재하는지도 연관이 있다고 생각한다. 자료구조를 구현하기 위한 코드를 작성해야하는가? 에 대한 글은 다른 글을 참고하길 바란다. 자료구조에서 가장 기본적인 스택..
-
[HTML5] Audio 태그와 Video 태그 이벤트 :: 마이구미HTML, CSS 2019. 9. 5. 00:51
이 글은 미디어 태그인 , 태그가 가지고 있는 이벤트들을 다룬다. 그 중에서 헷갈리기 쉬운 이벤트들을 정리한다. => loadeddata, loadedmetadata, canplay, canplaythrough https://developer.mozilla.org/ko/docs/Web/API/HTMLMediaElement 미디어 태그(audio, video) 를 사용하는 경우, 대부분 해당 태그가 가지는 이벤트들을 제어해야한다. 예를 들어, play() 메소드를 호출하면 play 이벤트가 발생하고, pause() 를 호출하면 pause 이벤트가 발생한다. audio.addEventListener('play', () => { console.log('play event'); }); audio.play(); ..
-
create-react-app 에서 service worker 커스텀하기 :: 마이구미React 2019. 8. 21. 23:37
이 글에서는 create-react-app 에서 Service Worker 커스텀을 다루려고 한다. CRA 을 사용한다면, eject 를 하고 싶지 않은 경우가 많을 것이다. 웹팩의 경우는 react-app-rewired 와 같은 라이브러리를 통해 커스텀하고있다. 서비스 워커는 sw-precache 라이브러리를 사용할 수 있다. React 를 사용할 때, create-react-app 을 통해 셋업을 하는 경우가 많다. 우리는 복잡한 빌드 설정를 걱정하지 않고 편하게 사용할 수 있다. Webpack, PWA, Service Worker 등 대부분 우리가 원하는 것들을 이미 제공해주고 있다. 따로 설정 변경이 필요하지않는다면, 굳이 시간을 쓸 필요가 없다. 하지만 CRA 에서 제공하는 설정을 커스텀해야할 ..
-
백준 13415번 정렬 게임 :: 마이구미알고리즘 풀이/스택, 큐 2019. 6. 20. 18:51
이 글은 백준 알고리즘 문제 13415번 "정렬 게임" 을 풀이한다 2016 국민대학교 교내 경시대회 문제이다. Deque 를 이용하여 문제를 해결하지만, 그 외에도 고려해야하는 것들이 까다로운 문제라고 생각한다. 많은 힌트를 얻었지만, 그래도 까다로운 문제였다. 문제 링크 - https://www.acmicpc.net/problem/13415 즐거운 컴퓨터 프로그래밍 시간! 이번 시간의 수업 내용은 정렬이었다. 학생들은 오름차순 또는 내림차순으로 입력받은 값을 정렬해보기 시작하였다. 수업이 끝나갈 무렵, 오늘도 어김없이 조교의 과제가 주어졌다. 과제 이름은 정렬 게임. 과제 내용은 다음과 같다. 처음에 임의의 수열이 있고, 처음 위치부터 지정된 위치까지 오름차순, 내림차순, 오름차순, 내림차순, .....
-
백준 17140번 이차원 배열과 연산 :: 마이구미알고리즘 풀이/스택, 큐 2019. 6. 9. 00:36
이 글은 백준 알고리즘 문제 17140번 "이차원 배열과 연산" 을 풀이한다. 삼성 SW 역량 테스트 문제이다. 큐와 정렬을 이용해서 문제를 해결한다. 문제 링크 - https://www.acmicpc.net/problem/17140 크기가 3×3인 배열 A가 있다. 1초가 지날때마다 배열에 연산이 적용된다. R 연산: 배열 A의 모든 행에 대해서 정렬을 수행한다. 행의 개수 ≥ 열의 개수인 경우에 적용된다. C 연산: 배열 A의 모든 열에 대해서 정렬을 수행한다. 행의 개수 = 열의 개수라면 R 연산, 그렇지 않으면 C 연산을 실행한다. 2번이 의미하는 것은 다음과 같다. 1 2 1 1 3 4 4 => 1의 개수 => 3, 2의 개수 => 2, 3의 개수 => 1, 4의 개수 2개 위 결과를 수의 등장..
-
백준 17142번 연구소 3 :: 마이구미알고리즘 풀이/그래프 2019. 6. 3. 20:31
이 글은 백준 알고리즘 문제 17142번 "연구소 3" 를 풀이한다. 삼성 SW 역량 테스트 문제이다. 문제 해결을 위해 DFS, BFS 2가지 모두 요구한다. 문제 링크 - https://www.acmicpc.net/problem/17142 DFS, BFS - https://mygumi.tistory.com/102 인체에 치명적인 바이러스를 연구하던 연구소에 승원이가 침입했고, 바이러스를 유출하려고 한다. 바이러스는 활성 상태와 비활성 상태가 있다. 가장 처음에 모든 바이러스는 비활성 상태이고, 활성 상태인 바이러스는 상하좌우로 인접한 모든 빈 칸으로 모두 복제되며, 1초가 걸린다. 승원이는 연구소의 바이러스 M개를 활성 상태로 변경하려고 한다. 연구소는 크기가 N×N인 정사각형으로 나타낼 수 있으며,..