본문 바로가기

전체 글25

네이버&구글 서브링크 노출을 위해 시도한 것들 올해 초 회사 홈페이지 새로 만들면서 SEO 설정과 관련된 작업들도 했다. 그 중 특히 네이버/구글 검색 시 서브링크가 노출되지 않는 이슈가 꽤 오래 되었는데, 서브링크는 개발자가 설정할 수 있는 것이 아니라 각 브라우저에서 웹크롤링을 통해 사용자에게 도움이 되는 링크인지 자체적으로 생성되어 원인을 파악하기 어려웠다. 서브링크란? 메인링크 아래에 네비게이션 링크가 표출된다. seo 도구로는 구글 서치콘솔과 네이버 서치어드바이저 사용했다. 1. Navigation tag에  말고 "a" tag 넣기 seo를 위해 시멘틱태그를 사용하는 것은 가장 기본적이다. 우리도 navigation에는 nav tag를, 각 메뉴에는 Link(Next) tag를 사용했다. 그렇게 Navigation을 잘 구성했다고 생각했.. 2024. 3. 7.
Github Actions로 CI/CD 구축해보기 (with Jest) 기존 프로젝트 활용 & 목표이번 목표는 main에 머지하거나 PR을 올릴 때 Github Actions을 동작하게하는 것이다. CI/CD와 github Actions 이해를 위한 학습으로 따로 프로젝트를 만들지는 않았다. 대신 평소에 알고리즘 문제를 풀고 올리고 있었던 코딩테스트 문제풀이 레포지토리를 사용했다. javascript로 푼 문제를 올려 간단한 test를 넣어 실행해보기 딱 좋은 레포였다. 복습을 할 때 직접 문제푸는 사이트에 들어가지 않아도 test case를 활용할 수 있기에 코테 문제푸는 레포를 이용하기로 했다.Github Actions1. 개념github actions에서 가장 중요한 5가지 키워드이다. Events어떤 일이 일어났는지 지정한다.pr을 main 브랜치로 머지, 커밋을 푸.. 2023. 9. 3.
2 Pointer - 값들을 합해서 원하는 값이 되는 숫자들의 모음을 아는 방법 코딩테스트에서 3-Sum 문제유형이 나왔다. 처음 문제를 풀 때는 for 문을 마구 돌리며 i, j, k 를 다 돌며 합해서 0이 되는 값을 배열에 push해주는 경우를 생각했다. 하지만 집에 와서 다시 풀어보니 같은 숫자 ex) [[-1, 0, 1], [2, 0, -2], [-1, 0, 1]] 이렇게 같은 배열이 중복되는 경우와 0으로만 이루어진 배열에서도 따로 예외처리를 해줘야하는 등 더 복잡하고 for문을 많이 중첩해서 쓰니 O(n^3)의 시간복잡도가 나오는 방법이다. 풀면서도 이건 아니다싶었지만 생각이안나 일단 이 잘못된 방법으로 다시 풀어보았다. (안좋은 방법) 어찌저찌해서 test case는 다 통과되었지만 submit했을 때 55 / 312 testcases passed가 떴다. test c.. 2023. 8. 10.
특정 브라우저에서만 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.
Next.js 프로젝트를 create하고 run할 때 실행되는 script 뜯어봅시다 npx create-next-app@버전 을 통해서 편하게 Next.js project를 만들 수 있다. 하지만 Next 서버가 어떻게 만들어지는지 어떻게 시작되는지는 자세하게 알지 못했다. Next.js github 을 참고해서 프로젝트를 생성하고 실행할 때 어떻게 동작하는지 알아보았다. 1. Project 생성하기 npx create-next-app@12.3.4 명령어를 이용해서 내가 원하는 디렉토리에 Next.js 프로젝트를 만들었다. 이때 알게된 것은 Next project의 생성 시점이다. 차근차근 보면 먼저 npx 명령어로 버전을 설저한 후 이름을 설정하는 프롬프트가 뜬다. npx create-next-app@12.3.4 ✔ What is your project named? … hj-next-.. 2023. 7. 11.
React Native (Expo) 실행과 문제 해결하기 Expo로 실행하는게 쉽다해서 폰으로 보는거 까지는 쉬웠지만 ios 와 안드로이드 시뮬레이터를 보는과정에서 예상하지 못한 삽질을 하게되었다.. 혹시 나같은 사람이 있다면 빨리 해결하길 바라며 이 글을 남긴다(람쥐). 근데 사실 폰으로 볼때도 약간 실수를 했다. 1. 맘대로 하지말자 - 큐알 코드로 Expo가 안열리나요? 해결 방법 와이파이 같은거로 해야함 ㅅㄱ. 공식문서를 잘 읽자. 1. Xcode 이슈 주제: install 했는데 왜 계속 설치하래 스토리: 앱스토어에서 xcode를 다운받으려니까 맥북 os 버전을 업데이트 해야 한다고 했다.. ^^ 1시간정도 업데이트 후 xcode를 실행하고 공식문서에 나온대로 Expo로 ios 시뮬레이터를 열라고 하는데 계속 이런 개똥같은 에러가 나왔다. 혹시나해서 .. 2023. 4. 17.
브라우저가 사용자에게 홈페이지를 보여주는 방법 오늘은 브라우저가 사용자에게 홈페이지를 어떻게 보여주는지를 알아봅시다. 그 전에 오랜만에 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.

티스토리툴바