개발 블로그

사내에서 확장프로그램을 유지보수중인데, 처음부터 끝까지 건드려보고 싶어서 구글 이미지 크롤러 확장 프로그램을 만들어보았다. 해당 링크에서 다운로드 받은 후 사용할 수 있다. 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 라도 네이버 검색 엔진 봇이 자바스크립트를 읽어서 페이지를 로드 후 수집을 한다고 되어 있긴 하다. 하지만 우리 프로젝트의 경우..

IP 주소: 인터넷 상에서 Host 를 구분할 수 있는 고유 주소이다. 여기서 말하는 Host 는 네트워크에 연결된 장치를 말한다. IP 주소의 종류는 두 가지가 있다. IPv4 와 IPv6 가 있는데, IPv4 가 범용적으로 쓰이고 있다. IPv4: 32 비트로 IP 주소를 표현한 것. IPv6: 128 비트로 IP 주소를 표현한 것. IPv4 가 32비트로 주소가 표현된 것이기 때문에 IPv4 로 만들 수 있는 고유한 IP 주소는 2의 32승으로 약 43억개 이다. 엄청나게 많은 것 같지만 인터넷은 전 세계적으로 사용되는 것이기 때문에 43억개보다 IP주소가 더 필요하게 되었고 그래서 새롭게 나오게 된 IP주소가 IPv6 이다. IPv4 의 구성 IPv4 는 Network ID 와 Host ID 로 ..

프로스세와 스레드에 대해서 정리해본다. 간단하게 정의부터 해보겠다. 프로세스: 운영체제가 할당한 자원을 사용하는 작업 단위이다. 스레드: 프로세스 내에서 실행되는 작업 단위이다. 즉, 하나의 프로세스 안에는 하나 이상의 스레드가 있다. 어떠한 프로그램이 실행된다고 생각해보자. ( 여기서 말하는 프로그램이란 컴퓨터에서 실행할 수 있는 것을 말한다. 브라우저, 내가 만든 node.js 소스 코드 등) 프로그램을 실행시키면, 프로세스가 생성이 되고 운영체제가 RAM 과 하드웨어를 적절히 배분해서 Virtual Memory를 프로세스에 할당해준다. 프로세스는 할당받은 메모리를 이용하여서 내부에 있는 스레드로 작업을 처리해 나간다. 즉 프로그램을 실행할때 사용할 메모리는 프로세스가 할당 받고 할당받은 메모리를 스..

정적 웹과 동적 웹의 차이를 정리해보겠다. 정적 웹 ( Static Web ) 서버가 이미 만들어진(정적인) html, css, javascript 파일을 클라이언트에게 제공하는 것. 더 자세히 말하면, 서버에는 단순히 html, css, javascript 파일들이 이미 만들어져 있고 서버는 라우터로 요청이 들어오면 그에 맞는 파일을 단순히 제공만 해주는 것이다. 동적 웹 (Dynamic Web ) 서버가 직접 html, css, javascript 를 만들어서 클라이언트에게 제공하는 것. 요청이 들어오면 그 때 html, css, javascript 파일을 생성하여서 클라이언트에게 제공하는 것. SPA 웹은 정적 웹 일까? 동적 웹 일까? 정적 웹이다. 해당 내용에 대해서 구글링을 해보면 많은 블로..

이번에는 똥피하기 웹게임을 만들어보았다. PC / Mobile 둘 다 플레이 가능하다. 다만 모바일에서는 일부 기기 및 브라우저에서 똥이 내려오는 속도가 다를 수 있다.. 수정을 하려 했지만 ... 여러 기종의 휴대폰을 들고 있는게 아니라서 쉽지가 않다 ㅠㅠ 크롬을 기준으로 개발하였기 때문에, 제대로 즐기고 싶으신 분들은 피씨 크롬 브라우저로 게임을 플레이하면 된다. 구글 로그인 및 랭킹 시스템이 존재한다. 방향키로 조작이 가능하며 스테이지가 올라갈수록 똥의 속도가 빨라지며, 큰 똥도 출몰한다. 현재 1등은 나다. 다들 재밌게 즐겨줬으면 좋겠다! https://steady-zabaione-6ad90f.netlify.app 똥 피하기 steady-zabaione-6ad90f.netlify.app 아직은 업..