개발 블로그

그룹 웨어 사이드 프로젝트를 현재 진행중이다. 곧 다음주에 자체 메일 시스템을 개발해야하는데 메일 시스템에 대한 개념이 아무 것도 없어 공부 후 정리해본다. 메일 시스템에 대한 전반적인 이해가 필요하신 분들이 읽고 도움이 되면 좋겠다. 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 라도 네이버 검색 엔진 봇이 자바스크립트를 읽어서 페이지를 로드 후 수집을 한다고 되어 있긴 하다. 하지만 우리 프로젝트의 경우..