Web8 네이버&구글 서브링크 노출을 위해 시도한 것들 올해 초 회사 홈페이지 새로 만들면서 SEO 설정과 관련된 작업들도 했다. 그 중 특히 네이버/구글 검색 시 서브링크가 노출되지 않는 이슈가 꽤 오래 되었는데, 서브링크는 개발자가 설정할 수 있는 것이 아니라 각 브라우저에서 웹크롤링을 통해 사용자에게 도움이 되는 링크인지 자체적으로 생성되어 원인을 파악하기 어려웠다. 서브링크란? 메인링크 아래에 네비게이션 링크가 표출된다. seo 도구로는 구글 서치콘솔과 네이버 서치어드바이저 사용했다. 1. Navigation tag에 말고 "a" tag 넣기 seo를 위해 시멘틱태그를 사용하는 것은 가장 기본적이다. 우리도 navigation에는 nav tag를, 각 메뉴에는 Link(Next) tag를 사용했다. 그렇게 Navigation을 잘 구성했다고 생각했.. 2024. 3. 7. 특정 브라우저에서만 400 Bad Request가 나왔다. 원인이 뭘까? 🍊 문제 발견 오늘 블로그 글을 작성하려는데 아래와 같은 에러가 나왔다. Bad Request Your browser sent a request that this server could not understand. Size of a request header field exceeds server limit. 🍊 뜯어보기 뭐가 문제일까? request header의 필드 크기가 서버 리밋을 초과했다 하여 개발자도구를 열어보았다. Cookie 부분에 저 아래로 엄청난 양의 _ga가 있네? 이때 제가 생각한 것은 쿠키의 양이 많아서구나 라고 예상했는데, 그 이유는 쿠키는 작은 용량을 가지고 서버에 request를 보내는데 스크롤리 3번은 넘게 내려갔으니까! 참고로 _ga는 구글 애널리틱스에서 사용하는 쿠키인데.. 2023. 8. 7. 브라우저가 사용자에게 홈페이지를 보여주는 방법 오늘은 브라우저가 사용자에게 홈페이지를 어떻게 보여주는지를 알아봅시다. 그 전에 오랜만에 window 객체를 생각해보는 시간을 가져보았습니다. 0. window 객체와 브라우저 구조 우리가 보는 브라우저를 크게 보면 Window > Document > navigator로 이루어져있습니다. 근데 좀 더 구체적으로 나누면, window object는 DOM, BOM, JavaScript로 구성되어 동작합니다. DOM 요소와,BOM (브라우저에 관련된 Wep API와 관련된 것들)과 Javascript와 관련된 것들이 포함되어 있는데, 일단은 이렇게 크게만 알고 동작이 어떻게 되는지는 서서히 알아봅시다. window 객체를 console로 찍어보니 document도 보이고, navigator를 펼치면 블루투스.. 2023. 2. 20. 내가 알던 REST API는 새 발의 피였떵 백엔드를 시작하고 얼마 전 만든 api에서 rest api 주소정책을 다시 공부해보라는 코드리뷰를 받았다. 코드를 공개하긴 좀 그렇지만 A에서 B의 뭐를 불러온다. 이런거였음 개발 공부를 처음 시작 할 때 html, css, javascript 다음에 배운게 rest api였고, 이제 REST API를 더 심도있게 생각해봐야 되겠다고 생각도 들었다. 그리고 이번에 공부하면서, 간단하게 알고있었던 POST, PUT, DELETE .. 또는 ststus code의 의미의 쓰임새 뿐만 아니라, response를 어떻게 보내주냐도 restful해지는 것임을 알게되었다. HATEOAS는 처음 들어 본 개념이었고, JSON을 통한 에러 응답처리 또한 실무에서 사용하고있었지만 이 개념에 들어있는지는 처음 알게되었다... 2023. 2. 18. CSR, SSR을 이해해야 하는 이유? SEO 🌐 프론트엔드 개발자가 꼭 챙겨야 하는 것 중 하나는 SEO입니다. 이번에는 SEO란 무엇인지, 왜 프론트엔드에서 신경써서 챙겨야 하는지, 어떻게 신경쓸 수 있을지 그리고 CSR과 SSR를 통해 어떻게 SEO를 향상시킬 수 있는지에 대해 알아보았습니다. SEO (Search Engine Optimization 검색 최적화) 검색 크롤러 먼저 웹 크롤러 봇에 대해 설명드리겠습니다. 웹 크롤러 봇(검색 크롤러/ 스파이더 / 검색 엔진 봇)는 웹 상의 모든 웹페이지를 돌아다니며, 그 페이지가 무엇에 대한 페이지인지 파악하여 필요할 때 정보를 추출할 수 있도록 합니다. 이렇게 소프트웨어 프로그램을 통해 자동으로 웹사이트에 엑세스하여 데이터를 얻는 과정을 "크롤링"이라고 합니다. 이런 웹 크롤러 봇은 구글이나 네이버.. 2021. 9. 7. HTTP, HTTPS의 차이점 HTTP http는 웹서버와 클라이언트 사이에서 문서를 전송하기 위해 사용하는 프로토콜(=규약, 약속) 입니다. HTTP는 클라이언트가 서버로 요청, 서버가 클라이언트로 응답을 하는 과정으로 정보를 교환합니다. 그런데 이HTTP는 기본포트인 80번 포트를 사용하는데, 여기에서는 단순한 텍스트만 주고 받기 때문에 정보가 보안처리 없이 그대로 전송되고, 이는 해킹과 정보 유출의 문제점을 가지고 있습니다. 그래서 우리는 정보를 암호화하여 연결하여, 서버와 브라우저 사이에서 안전한 암호화 연결을 할 수 있는 HTTPS를 사용합니다. HTTPS HTTPS는 HTTP + Secure 의 약자입니다. HTTPS는 내가 어떤 사이트에 보내는 정보를 특정 서버만 알아볼 수 있는 텍스트로 변경하여 통신합니다. HTTPS는.. 2021. 6. 23. 함수형 프로그래밍 프로그래밍 패러다임 프로그래밍 패러다임은 프로그래밍을 할 때 원하는 목표에 따라 적절한 방법과 기법을 활용하도록 합니다. 잘 알려진 최신의 패러다임은 아래의 것들이 있습니다. 명령형 프로그래밍 - 무엇을 할 것인지 보다, 어떻게 할 것인지 설명하는 방식 (How), 알고리즘을 명시하고 목표는 명시 안함 절차 지향 프로그래밍 객체 지향 프로그래밍 선언형 프로그래밍 - 어떻게 할건지 보다 무엇을 할건지를 설명하는 방식 (What), 알고리즘 명시하지 않고 목표만 명시 함수형 프로그래밍 위 3가지 패러다임만 놓고 본다면 절차지향 프로그래밍 -> 객체 지향 프로그래밍 -> 함수형 프로그래밍 순으로 발전하고 있습니다. 객체지향 프로그래밍 객체지향 프로그래밍은 프로그래밍에서 필요한 데이트를 추상화시켜 상태와 행위를.. 2021. 6. 19. REST API란? 1. REST API란 무엇인지 2. RESTful 한 것의 의미 3. REST API와 GraphQL의 차이점 에 대해 다뤄볼 것입니다. REST API ? REST API란 정보들을 주고받는데 있어서 개발자들이 널리 쓰이는 일종의 '형식'입니다. 어떤 기술이나 제품이 아닌 '형식'이기 때문에 어떤 프로그래밍 언어, 프레임워크 등을 쓰는지간에 REST API 폼에 맞춰서 어디에서든 사용할 수 있습니다. 전에 더 쉽게 이해하기 위해 API에 대한 개념에 대해 살짝 정리하겠습니다. API는 소프트웨어가 다른 소프트웨어로 부터 지정된 형식으로 요청, 명령을 받을 수 있는 수단입니다! 우리가 자주 접할 수 있는 것은 Web API, Windows API, Kakao API 등이 있죠? REST API도 그런 .. 2021. 6. 18. 이전 1 다음
