개발 블로그

요즘 책을 꾸준히 읽고 있다.최근 읽고 있는 책은 팀 페리스의 "타이탄의 도구들" 이라는 책이다. 이 책에 21 섹션(?) "안태암불로가 되어라" 를 읽다가 지금 회사 생활과 앞으로의 인생에 도움이 될만한 많은 문장들이 있어후기와 함께 좋은 글들을 남기려고 이렇게 노트북을 켰다!  21. 안태암불로가 되어라 섹션에 대해서 아주 간단하게 이야기하면 다음과 같다. 안태암불로는옛 로마 제국에서 예술가들이 부유한 계층한테 후원을 받는 대신 길을 터주고 심부름을 하는 등 후원자의 생활 편의를 도모하는 역할중 하나를 말한다. 유명한 풍자시인인 마르티알리스도 안태암불로였다. 마르티알리스는 자신이 안태암불로라는 것에 불만이 있었지만, 풍자시로 유명해진 것 자체가 자신이 안태암불로였기 때문이였다.  즉, 자신이 안태암불..

네이버에서 로또를 검색하였을때 이번 주 당첨 번호가 나오게 된다. 이전에 유튜브에서 로또 당첨 번호를 포토샵으로 조작하여서 몰래카메라를 진행하는 것을 재밌게 본 기억이 있다. 그 기억을 바탕으로 누구나 몰래카메라를 시도할 수 있게 크롬 확장프로그램으로 만들어 보았다. 그림과 같이 번호를 바꿀 수 있다. 로또를 사서 번호를 바꿔서 친구 및 가족을 놀리면 될 것 같다. 사용 방법 1. 확장프로그램 설치 https://chromewebstore.google.com/detail/%EB%84%A4%EC%9D%B4%EB%B2%84-%EB%A1%9C%EB%98%90-%EB%B2%88%ED%98%B8-%EC%A1%B0%EC%9E%91/dcjiffpbnkgnpocnmmgcjfelfmdaegoc 네이버 로또 번호 조작 네..

프론트와 백을 나누어 프로젝트를 진행하다보면 API 가 만들어지기 전에 디자인 및 레이아웃이 먼저 나오는 경우가 정말 많다. 이 경우에 백엔드에서 마치 데이터를 받아 오는 것처럼 미리 구현을 해놓으면, 추후 API 가 만들어졌을때 라우터명만 바꿔주면 된다. 이렇게 더미 데이터를 만들어 놓고 미리 화면을 짜고, 로직을 만드는 방식은 정말 많다. 구글링을 해보면 보통 MSW(https://www.npmjs.com/package/msw) 라이브러리를 사용하여 Mocking (단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을 가짜(mock)로 대체하는 기법) 하는 방법을 많이 소개해준다. 이번 포스팅에서는 MSW 와 같은 Mocking 라이브러리를 사용하지 않고 아주 간단하게 Mocking 하는 방법을 소..

최근 크롬 익스텐션으로 만들고 싶은 것들이 꽤 생겨서, 타입스크립트로 프로젝트를 하려고 한다. 그런데, 매번 초기 세팅을 하기가 정말 귀찮고.. 매번 하는 거지만 할때마다 찾아보게 되어서, 내가 사용하기 편하게 최소한의 세팅으로 boiler-plate 로 만들어보았다. https://github.com/daehwan2/chrome-extension-typescript-boilerplate GitHub - daehwan2/chrome-extension-typescript-boilerplate: chrome-extension-typescript-boilerplate chrome-extension-typescript-boilerplate. Contribute to daehwan2/chrome-extension..

사내에서 확장프로그램을 유지보수중인데, 처음부터 끝까지 건드려보고 싶어서 구글 이미지 크롤러 확장 프로그램을 만들어보았다. 해당 링크에서 다운로드 받은 후 사용할 수 있다. https://chromewebstore.google.com/detail/google-image-crawler/hoggjapabhffmkfijmkfhlihfjblefhm?hl=ko&authuser=0 Google Image Crawler Google Image Crawler chrome.google.com Google Image Crawler 확장프로그램 다운 후 아래 그림과 같이 고정핀을 누르고 사용하면 된다. 키워드와 다운받을 이미지 수를 누르고 Download 버튼을 누르면 아래와 같이 탭이 열리고, 이미지를 순차적으로 다운로드..

그룹 웨어 사이드 프로젝트를 현재 진행중이다. 곧 다음주에 자체 메일 시스템을 개발해야하는데 메일 시스템에 대한 개념이 아무 것도 없어 공부 후 정리해본다. 메일 시스템에 대한 전반적인 이해가 필요하신 분들이 읽고 도움이 되면 좋겠다. SMTP 란? Simple Mail Transfer Protocol 의 약자로, 흔히 말하는 이메일을 전송할 때 사용되는 프로토콜이다. 프로토콜은 서로 약속한 규칙을 말하며, 그러므로 SMTP 는 쉽게 말하면 메일을 전송하기 위한 약속을 정해놓은 것이라고 말할 수 있다. 메일 시스템의 구조는 다음과 같다. user agent 는 메일을 전송하고 받을 수 있는 사용자를 말한다. mail server 는 흔히 SMTP 서버로 메일 전송하고 받을 수 있는 서버를 말한다. mai..

벌써 프론트엔드 개발 2년차인데 이 회사를 들어오고 나서 단 한번도 Context API 를 사용한 적이 없다. 기존 프로젝트가 redux 로 상태관리를 하였었고, 이후에 react-query 와 jotai 라이브러리로 상태 데이터를 관리하는 것으로 리팩토링을 진행하였기 때문이다. 이러던 중 문득, 다른 많은 UI 라이브러리들이 Context API 로 구성되어 있는 것을 발견하였고 Context API 공부의 필요성을 느껴 따로 공부하여 정리하여 본다. Context API 란? Context API 란 React 에서 제공하는 상태 관리 API 이다. 먼저 기존 리액트의 구조를 살펴보겠다. 리액트는 컴포넌트가 다음과 같이 트리구조로 구성되어 있다. 때문에, 컴포넌트 간의 데이터를 교환 할때는 pro..

우리 회사 프로젝트는 리액트로 되어 있다. 프로젝트는 약 3년정도 된 프로젝트이고 규모도 꽤나 있는 프로젝트이다. 해당 프로젝트에 네이버 검색엔진에 최대한 많이 노출되게 끔 하는 업무를 하게 되었고 많은 시도 끝에 성공하였다. 우선 SEO 최적화를 진행하기 전에 어떤 상태였는지 말해보겠다. 네이버 서치 어드바이저에 등록이 된 상태였지만, React 프로젝트가 SPA 라서 네이버 검색엔진에 홈 라우터 ( / ) 밖에 노출이 되지 않고 있었다. 네이버 웹 마스터 도구를 이용하여 각 라우터마다 수집 요청을 새롭게 넣어도 잘 노출이 되지 않았다. ( 네이버 웹마스터 가이드에서는 SPA 라도 네이버 검색 엔진 봇이 자바스크립트를 읽어서 페이지를 로드 후 수집을 한다고 되어 있긴 하다. 하지만 우리 프로젝트의 경우..