메바동 서식지

그 누가 그러지 않았던가 이별은 새로운 만남의 시작이다. 그렇다. 맥북 프로 16인치 2019년형과 영원한 이별을 한 나는 맥북 프로 14인치 2023년형과 새로운 만남을 시작하게 되었다. 노트북 고장으로 한참 스트레스를 받는 나를 위해 너무나도 고맙게도 여자친구가 선물을 해주었다. 리뷰로 올릴까 잡답으로 올릴까 고민을 하긴 했는데, 딱히 맥북에 대한 평가를 내릴만한 수준은 아닌 것 같아 잡담 카테고리에 올리게 되었다. 우선 어째서 16인치를 사용하다가 14인치 맥북 프로로 선물 받게 되었는지에 대해 얘기하자면 우선 16인치를 사용하는 동안 무게에 대한 압박이 상당했다. 가지고 외출을 한 적이 별로 없긴 하지만 가지고 나갈 때마다 크기와 무게가 상당하여 굉장한 부담감을 주었다. 그래서 새로운 노트북은 조..

이별은 언제나 갑자기 찾아온다... 2023년 05월 22일 월요일. 회사에서 나는 퇴근 후 React 프로젝트를 Vite를 이용해서 생성하는 방법을 블로그에 정리하기로 마음먹었다. 새로운 포스팅을 남길 수 있다는 생각에 가벼운 발걸음으로 방에 돌아와 노트북을 열었다. 배터리 부족... 분명 어젯밤에 사용했기에 70프로 이상의 배터리가 남아 있었을 텐데 배터리 부족으로 전원이 나가 있었다. 오랜 기간 본가에 내려가 충전을 하지 않았을 때도 보이지 않았던 화면인데 순간 이상함이 느껴졌다. 충전기 연결 후 전원이 켜지기를 기다리며 저녁을 먹고 화면을 보았는데 뭔가 이상했다. 계속해서 부팅 화면을 보여주는 노트북. 그러다가 갑자기 위의 사진과 같은 화면이 나타나더니 노트북의 팬이 굉장한 속도로 돌고 난 뒤, ..

react-beautiful-dnd 라이브러리를 이용하여 Droppable 요소 내의 정렬을 지원하지 않고, 위치시킨 순서대로 정렬하도록 구현을 하니 아래와 같은 문제가 굉장히 신경 쓰였다. Draggable 요소를 드래그했을 때, transform: translate(x, y) 스타일을 이용하여 해당 요소를 움직이도록 하고 있기 때문에 요소가 있던 부분이 사라지는 것이 신경 쓰였다. 다른 공간에 드롭을 했을 때는 문제없었지만, 위와 같이 동일한 공간에 드롭을 시켰을 경우 기능상으로는 문제가 없지만 보기 좋지 않았다. import { Card } from 'antd'; import { Draggable } from 'react-beautiful-dnd'; function ItemCard({ id, ind..

지금 하고 있는 프로젝트에서 Drag and Drop 기능을 구현하기 위해 react-beautiful-dnd 라이브러리를 사용하고 있다. react-beautiful-dnd를 사용하면 요소 간의 순서를 변경하기 용이하지만, 요소 간의 순서 변경이 필요 없고 단순히 이동만 구현하려고 하는데 draggable 요소가 움직이는 것이 거슬렸다. 단순 이동만 구현하려는데 위와 같이 정렬 애니메이션이 들어가는 것은 사용자에게 혼란을 줄 수도 있기에 요소가 움직이는 것을 막기로 하였다. import { Card } from 'antd'; import { Draggable } from 'react-beautiful-dnd'; function ItemCard({ id, index, title, content }) { ..

나는 회사에서 비싼 점심을 먹는 것을 원하지 않는다. 맛있는 음식을 먹어봤자 후다닥 먹고 다들 휴식을 취하러 가고, 일하다 4시쯤이 되면 배가 고파지니 회사에서 먹는 점심은 그냥 배만 채우면 된다고 생각한다. 그런 의미로, 7,000원으로 원하는 만큼 메뉴를 퍼담을 수 있는 지하식당을 참으로 좋아한다. 티끌 모아 티끌이라는 말이 있지만, 그런 티끌도 소중하게 생각하는 삶을 사는 나로서는 회사에서 먹는 점심이 10,000원이 넘어가게 되면 심리적 저항감이 생겨버린다. 지하식당 7,000원에 대해 잠시 얘기하자면, 처음 회사에 들어왔을 때 있었던 지하식당은 5,500원이었다. 하지만 얼마 뒤 6,000원이 되었고, 지금은 다른 지하식당으로 바뀌긴 했지만 7,000원이 되었다. (가격은 거기서 거기였으니 비슷..

러닝 리액트(Learning React)를 따라 하던 중 XMLHttpRequest를 사용하려니 ReferenceError: XMLHttpRequest is not defined 에러가 발생하였다. XMLHttpRequest (XHR) 객체는 서버와 상호작용할 때 사용하는 객체로, XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있다. 하지만 XHR은 브라우저에서만 제공되기 때문에 NodeJS 환경에서는 사용할 수 없는 것이 당연하다. axios나 fetch를 사용하여 NodeJS 환경에서 http 요청을 사용할 수 있는데, 책에서 나온 내용을 그대로 따라 하기 위해 XMLHttpRequest를 사용하려면 다음과 같이 하면 된다. // npm npm install xhr2 // ..

샀다. 드디어 2020년, 일을 시작하고 나서. 물론 그 이전부터도 관심은 있었지만. 입력 장치에 대한 욕심이 생겨났다. 써보고 싶었던 노뿌(NIZ EC 스위치) 무접점, 토프레 무접점(저소음), 체리 저소음 적축 키보드를 모두 갖고 나니 (물론 모두 여자친구가 사줬다. 너무너무 고마운 여자친구.) 이제는 조금 비싼 마우스를 사도 된다는 생각이 들었다. 물론 키보드도 커스텀의 영역으로 가면 더 비싼 키보드를 살 수 있지만 사실 이제 더 이상 키보드에는 돈을 쓰기 싫다. 아무튼, 일을 시작하고 마그네틱 휠의 멋짐을 알게 된 후 MX MASTER 3을 사고 싶었지만 마우스라는 제품에 그 정도의 돈을 쓴다는 게 선뜻 내키지 않았다. 키보드는 자주 쓰는 입력 장치이기 때문에 좋은 것을 써도 된다고 생각했었고, ..

Do not access Object.prototype method 'hasOwnProperty' from target object. 대상 오브젝트에서 Object.prototype 메서드 'hasOwnProperty'에 액세스 하지 마세요. eslint를 사용할 경우 no-prototype-builtins라는 규칙에 위배되어 오류가 나타나게 된다. 해당 항목을 읽어보니 ECMAScript 5.1에서 지정된 [[Prototype]]을 가진 객체를 생성할 수 있는 Object.create 함수가 추가되었는데, Object.create(null)을 사용하여 객체를 생성할 경우 Object.prototype을 상속받지 않아 오류를 일으킬 수 있기 때문에 Object.prototype 메서드를 직접 호출하지 못..

본 포스팅은 단지 내가 겪은 상황일 뿐이며, 지역 및 건물 상황에 따라 다를 수 있습니다. 우선 얘기를 시작하기 전에 내가 살고 있는 원룸은 월 관리비에 전기, 가스, 수도 그리고 통신비까지 내는 그런 구조이다. 그래서 따로 인터넷을 가입하지 않고 건물에서 제공하는 공용 인터넷을 사용하고 있었다. 어느 날 원룸 문에 종이가 붙었다. 현재 건물에서 사용 중인 인터넷과 케이블을 KT에서 딜라X브로 바꾸겠다는 내용이었다. "딜라X브", 처음 들어보는 통신사였다. 여태 아산의 본가에서도 그렇고 인터넷은 KT 밖에 써본 적이 없었는데, 거기다가 딜라X브라는 처음 들어보는 통신사의 인터넷이라니. 걱정이 쌓이기 시작했다. '인터넷이 너무 느려지면 어쩌지.' 찾아보니 메이저 3사 통신사 외에도 지역 케이블 인터넷이 있..

최근에는 뭔가를 빼는 게 참 유행인 것 같다. 내 살을 빼는 건 안 유행 콜라와 사이다도 설탕을 뺀 제로 제품이 유행이고, 소주까지 그 바람이 불어 처음처럼 새로와 진로 제로 슈거 제품이 나왔다. 물론 위는 무설탕, 무가당의 제로이고 또 다른 제로가 있는데 알코올이 1도 미만으로 들어간 논알코올 주류이다. 술을 못 마시는 경우 분위기를 내기 위한 논알코올 맥주가 한 때 유행했던 것으로 기억한다. 오늘은 여자친구와 홈플러스를 구경하다가 신기한 음료를 발견하였는데 바로 "발왕산 막걸리 제로"였다. 보는 순간 이 제품을 마셔보고 리뷰를 쓰고 싶다는 욕구가 마구마구 샘솟았다. 옆에 있는 대저 토마토는 이제 서른을 바라보는 나를 위한 건강식품이다. "발왕산 막걸리"는 무슨 제품인지 모르겠는데, "발왕산 막걸리 제..