개발 블로그

우리 회사 프로젝트는 리액트로 되어 있다. 프로젝트는 약 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 아직은 업..

용어 간단 요약 용어에 대해서만 궁금해하는 분들도 많을 것 같아서 미리 간단 요약을 해본다. - MVC: Model , View, Controller 의 약자로 어플리케이션을 세가지 구조로 나누어서 개발하는 디자인 패턴이다. Model 은 데이터베이스를 직접적으로 접근하는 로직을 말하고, View 는 유저가 실제로 보는 화면을 말한다. 그리고 Controller 는 유저와 상호작용하는 로직을 말한다. - MPA: Multiple Page Application 의 약자로 여러 페이지로 구성된 애플리케이션을 말한다. - SPA: Single Page Application 의 약자로 한 페이지로 구성된 애플리케이션을 말한다. - CSR: Client Side Rendering 의 약자로 클라이언트 측에서 Vi..

벌써 2023년이 끝나가고 있다. 한 해를 마무리하면서, 많은 블로거들이 작성하는 회고 글을 나도 한 번 남겨 보려고 한다. 회사 내 기술적 / 업무적 이야기.. 막상 회고를 작성하려다 보니, 딱히 뭐 적을게 없는 것 같다..😅 이전에 2023년 6월에 포스팅했던 프론트엔드 개발자로 일한지 벌써 1년이 됐다. 글이 있는데 해당 글에서 1년간 이 회사를 다니면서 배운 것들에 대한 회고(?)를 이미 한 번 작성했기 때문에 그런 것 같다. 기술적으로 달라진 점에 대해서도 포스팅을 하였는데, 그걸 그대로 가져와 보면 아래와 같다. 지금 현재도 위에 나열한 기술적인 것들을 계속해서 사용하여 업무를 진행하고 있다. 6개월 동안 기술적으로 새롭게 접하거나, 공부를 한 것은 없는 것 같다. (굳이 하나 말해 보면 개인..

DNS 는 Domain Name System 의 약자로, 도메인 이름을 ip주소로 변환하기 위한 시스템이다. 여기서 말하는 Domain Name 은 흔히 우리가 접속하는 웹사이트의 주소이다. 만약 www.naver.com 을 브라우저에서 입력 하였을 경우, 우리는 아래와 같은 웹사이트를 볼 수 있다. 어떤 과정을 통해서 볼 수 있을까? 우선 저 네이버의 html 파일과, css, js, 이미지 파일 등 웹사이트를 구성하는 기본적인 콘텐츠들은 모두 네이버의 서버에 있다. 그렇기 때문에 네이버 서버로 부터 해당 파일들을 받는 과정이 필요하다. 그럴려면 네이버의 ip 주소를 알아야 한다. www.naver.com으로 어떻게 네이버의 ip 주소를 알 수 있을까? 바로 DNS 를 이용해서 ip 주소를 얻을 수 있..