메바동 서식지

유튜브를 보다 보면 한국인이 올린 영상에 아무리 스크롤을 해도 한글로 작성된 댓글이 나오지 않는 경우가 많았다. 그래서 올해 초부터 '기회가 된다면 한글로 작성된 댓글만 필터링해서 보여주는 크롬 확장을 만들어보자.'라고 생각만 하고 만드는 방법도 제대로 모르겠고 귀찮기도 해서 만들지 않았었다. 이제 회사를 9개월 정도 다니다 보니 대충 어떤 식으로 뭘 찾아서 응용하면 되는지 알 수 있는 능력이 생긴 것 같았고 계속 생각만 했던 한글 댓글만 보여주는 확장 프로그램을 만들기로 하였다. 우선 생각한 게 댓글을 불러오는 ajax가 있을 거라 생각하였고 무작정 유튜브에 들어가 관리자 도구를 열었다. 그런 다음 댓글을 불러온 뒤 네트워크 탭에서 확인을 해보니 알기 쉽게 comment라고 붙어있는 ajax가 바로 보..

table을 이용하여 가입 경로를 표시해 주는 화면이 있었는데 기타 항목은 그 밑으로 세부 사항을 표시해 주고 있었다. 위와 같은 느낌이었는데 당연한 거지만 디자인은 훨씬 깔끔하고 제대로 된 내용이 담겨 있었다. 나는 이 화면에서 기타는 접혀 있다 사용자가 더 보기를 원할 때 클릭해서 하위 항목이 열리는 화면으로 바꾸고 싶었고 아무 생각 없이 ::after를 이용해 삼각형을 표시해주었다. .toggle::after { content: ''; position: absolute; top: 140px; left: 195px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top..

창이 열리면 input 태그에 focus를 주어야 하는데 자꾸 다른 곳에서 DOM이 변경되면서 focus가 나가버리는 상황이 있었다. 고민하다가 DOM이 변경될 때 input 태그에 focus를 주는 방법을 없을까? 하고 찾아보니 Mutation Observer가 있었다. 추가하기 1번 아이템 다음과 같이 페이지에서 ul에 li가 추가되거나 텍스트의 내용이 변경되거나 속성이 변경되거나 하는 것들을 감지하고 싶다면 Mutation Observer를 사용하면 된다. Mutation Observer를 이용하면 특정 노드의 DOM 변경을 감지할 수 있다. html 태그나 body 태그에 사용하여 페이지의 전체적인 변경을 감지할 수도 있을 것 같다. 위에 작성한 예제에 ul에 li가 추가될 경우 alert을 띄우..

mebadong-kor.github.io/When-should-I-fall-asleep-/ When should i fall asleep? 추천되는 취침 시간 00:00, 00:00, 00:00, 00:00 00:00, 00:00, 00:00, 00:00 짧은 수면 시간은 추천하지 않습니다. 그렇다고 너무 긴 수면 시간도 추천하지 않습니다. 성인의 경우 하루에 7 ~ 8시간 정도 자는 것 mebadong-kor.github.io 뭔가를 만들고 싶었다. 그러다가 우연히 잠드는 시간을 추천해주는 사이트를 알게 되었고 계산이 정말 단순했다. 기상 시간을 입력하면 1시간 30분씩 빼서 계산해 주는 방식이었다. 만들 때 부트스트랩 대신 사용할 것을 찾다가 알게 된 Materialize를 이용해서 만들기로 하였다...

Chart.js를 이용해서 원형 차트를 그리고 사용자 지정 범례를 만들어야 했다. 한 번도 사용한 적이 없어 사용 방법을 찾아보니 그리 어려운 라이브러리는 아니었다. window.onload = function () { pieChartDraw(); } let pieChartData = { labels: ['foo', 'bar', 'baz', 'fie', 'foe', 'fee'], datasets: [{ data: [95, 12, 13, 7, 13, 10], backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 25..

문자열로 입력된 "123.45.67.89"와 같은 IP를 "123.45.67.*"과 같은 와일드 카드가 들어간 IP 형식과 비교하는 기능을 만들어야 했다. ​ 처음 딱 든 생각은 3번째 자리까지 잘라서 비교하면 되겠네~ 하는 생각이었다. 비교 할 아이피들을 String 타입에서 지원하는 메서드인 substring 메서드를 이용해서 잘라낸 뒤 비교하면 어차피 마지막 자리의 *이 모든 범위를 뜻하므로 해결되는 일이었다. public class IpValidTest { public static void main(String[] args) { String ip = "158.23.1.39"; String validIp = "158.23.1.*"; boolean check = ip.substring(0, ip.la..

Eclipse에서 SVN의 Compare를 이용해 바뀐 내용을 볼 때 다음과 같이 한글이 깨져서 나오는 경우가 있습니다. 이럴 때는 Project의 인코딩과 Editor의 인코딩을 같게 맞춰주면 해결됩니다. 우선 프로젝트를 우클릭한 후 Properties를 열어줍니다. 혹은 Alt + Enter를 입력해 Properties 창을 열어주어도 됩니다. Resource 탭에 가보면 위의 사진과 같이 Text file encoding이 설정되어 있습니다. 현재 프로젝트는 UTF-8로 되어있습니다. 대부분 UTF-8로 되어있을 겁니다. 이 인코딩을 기억해 둡니다. 이클립스의 Perferences 창에 들어가 General > Workspace 탭의 사진에 표시한 Text file encoding을 위에서 확인한 ..

Java 객체 생성 방법 1. 점층적 생성자 패턴 점층적 생성자 패턴을 만드는 방법은 다음과 같다. 필수 인자를 받는 필수 생성자 를 하나 만든다. 1개의 선택적 인자를 받는 생성자를 추가한다. 2개의 선택적 인자를 받는 생성자를 추가한다. ... 모든 선택적 인자를 받는 생성자를 추가한다. // 점층적 생성자 패턴 코드의 예 public class Member { private final String name; // 필수 인자 private final String age; // 선택적 인자 private final String location; // 선택적 인자 // 필수 생성자 public Member(String name) { this(name, "나이 비공개", "지역 비공개"); } // 1개의..

MVC 패턴 1. MVC 패턴이란? MVC - Model, View, Controller의 합성어로 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다. Model : 백그라운드에서 동작하는 로직을 처리한다. (데이터를 가진 객체, 파람미터로 주로 쓰인다, DB의 테이블과 대응하는 경우가 많다.) View : 사용자가 보게 될 결과 화면을 출력한다. (html, css, javascript를 모아둔 컨테이너) Controller : 사용자의 입력처리와 흐름 제어를 담당한다. (사용자가 접근한 URL에 따라서 사용자의 요청사항을 파악한 후, 그 요청에 맞는 데이터를 Model에 의뢰하고, 데이터를 View에 반영해서 사용자에게 알려준다.) 2. MVC Model 1 비즈니스 로직 영역(Controlle..

객체 지향 프로그래밍 (Object Oriented Programming, OOP) 1. OOP (Object Oriented Programming) 객체 지향 프로그래밍이란 이전의 컴퓨터가 사고하는 대로 프로그래밍을 하는 컴퓨터 중심적 패러다임과는 다른 인간 중심적 패러다임 프로그래밍이라고 할 수 있다. 즉, 현실 세계의 사물들을 객체라 보고, 그 객체로부터 개발하고자 하는 애플리케이션에 필요한 특징들을 뽑아와 프로그래밍하는 것을 말한다. 1.1 클래스(Class) 연관되어 있는 변수와 메서드의 집합으로, 객체를 만들어 내기 위한 설계도 혹은 틀이라고 볼 수 있다. 1.2 객체(Object) 속성(Field, 변수)과 행위(Method)로 객체를 표현한다. 소프트웨어 세계에 구현할 대상이다. 클래스에 ..