끄적끄적끄적끄적 끄적끄적끄적끄적

저는 요즘 회사에서 seo와 관련된 작업을 하고있는데요!시멘틱 마크업에 이어서 이번엔 사이트맵을 작성하는 간단한 라이브러리를 소개하려고 합니다!라이브러리 소개에 앞서 사이트맵이 뭔지 알아볼게요! 사이트맵??사이트맵을 구글 검색센터에서는 아래와 같이 이야기 합니다.사이트에 있는 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일입니다.  정확히는 웹사이트의 모든 페이지 목록을 나열한 파일인데요,책으로 치면 목차 같은 파일이라고 생각하시면 쉬울것 같습니다.크롤러에게 내 웹사이트의 페이지 목록을 제공해서 빠짐없이 볼수있게 해주는것이죠, 그럼 이걸 어떻게 만들지 한번 볼까요? 저는 사이트맵 제작에 앞서 next-sitemap이라는 라이브러리를 사용할건데요!사용법을 한번 알아보도록 하겠습니다!n..

얼마전 업무를 하면서 유저가 접속한 디바이스(플랫폼)의 환경을 이용해야 되는 경우가 있었는데요,일전에 포스팅 했던 matchMedia로는 웹뷰기반의 앱을 걸러내지 못하게 되어서..결국 또 새로운 방법을 찾게 되었습니다! 이번엔 userAgent를 활용한 방법인데요! 한번 알아보겠습니다!userAgent?구글링을 해보면 아래와같이 나오는데요사용자를 대신하여 일을 수행하는 소프트웨어의 식별 정보이다.여기서 사용자 에이전트가 쓰이는 곳은 대개 웹 분야이기 때문에 '사용자를 대신하여 일을 수행하는 소프트웨어'는대개 웹 브라우저를 뜻한다.쉽게 말하면 사용자의 디바이스 종류, 브라우저 종류, os등의 정보를 가지고 있는 정보라고 할수 있겠습니다. 그럼 바로 실전 코드를 보여드릴게요! 사실 이건 뭐.. 크게 설명할 ..

일을 하다보면 SEO 라는 말을 심심치 않게 듣게되는데요!SEO를 검색하다보면 꼭 나오는 개념이 시멘틱 마크업입니다. 오늘은 SEO와 시멘틱 마크업을 알아보겠습니다! 1. SEO??한국어로는 검색엔진 최적화, 영어로는 Serch Engine Oprimization을 줄여서 SEO라고 합니다. 검색엔진 최적화는 웹사이트가 검색결과에서 상위에 노출되도록 최적화하는 과정으로검색엔진의 크롤러는 웹페이지를 수집할때 HTML구조를 분석하며 콘텐츠의 중요도와 관련성을 파악하게 됩니다.특히나 google은 웹페이지 크롤링에 있어서 HTML마크업을 중요하게 고려한다고 하는데요!하지만! 검색엔진마다 색인 방법이 다르기 때문에 모든곳에 한번에 적용되긴 쉽지않습니다. SEO의 주요 요소로 몇가지가 있는데요!키워드 최적화콘텐츠..

개발을 하면서 한번 쯤은 들어봤을, 전공생이라면 더더욱 들어봤을 원칙인데SOLID법칙 즉, 솔리드 법칙은 객체지향 프로그래밍에서 사용되는 다섯가지 원칙의 약어로소프트웨어의 유지보수, 확장성, 재사용성, 테스트 용이성을 위해 개발된 원칙이라고 합니다. 1. SRP ( Single Responsibility Principle )단일 책임 원칙이라고 불리는 원칙인데 하나의 클래스는 한 가지 책임만 가져야 한다는 원칙 2. OCP (Open-Closed Principle )개방-폐쇄  원칙이라고 불리는 원칙이며 소프트웨어의 구성 요소는 확장에는 열려있어나 하지만 변경에는 닫혀있어야 된다는 원칙기존의 코드를 변경하지 않아도 새로운 기능을 추가할수 있어야 된다는 이야기 입니다. 3. LSP ( Liscov Subs..

예전부터 회원 로그아웃쪽 로직을 작업하면 항상 의문이 들었던게 있는데요!로그아웃 로직에 router.push("/") 을 사용해서 홈으로 돌아가면 다음 로그인때 꼭 브라우저 스토리지의 데이터를 가져오지 못하는데 요상하게 window.location.replace를 통하면 잘 되는겁니다 그땐 그냥 이게 이렇게 하니까 되네? 뭐지..? 하고 넘어갔었는데 이번엔 한번 알아봐야겠다 싶어서 블로그에 적어봅니다!  router.push VS window.location.replace 둘은 공통적으로 페이지를 이동하는 기능을 제공하는 메서드입니다. 그럼 이 둘은 대체 어떻게 다르길래 사용하는 상황이 다를까요? 먼저 router.push부터 알아보겠습니다!1. router.pushimport { useRouter } ..

1. DRYDRY는 Don’t Repeat Yourself의 줄임말로 같은 기능이 반복되는 코드를 작성하지 말라는 뜻입니다. 2. YAGNIYAGNI는 YouAin't Gonna Need It 의 줄임말로 불필요하게 확장을 고려한 개발을 하지 말라는 이야기이다.어떻게 보면 solid법칙에서의 개발 폐쇄 원칙과 반대가 되는 의견으로 생각 될수 있는 여지가 있지만,무조건적으로 확장을 하지 말라는 이야기가 아닌,"미래의 이 기능이 커질거야", 또는 "이런 기능이 생길수도 있겠지?", "이 기능이 지금은 없어졌지만 다시 사용될수 있겠지?"등의 이유로 불필요하게 확장에 치중한 코드가 생기거나 지금당장 필요하지 않은 로직을 만들지 말자는 원칙입니다. 3. KISSKISS는 앞서 이름에서부터 보이듯이 심플을 엄청 강..

최근에 반응형 웹 작업을 하면서 그런 생각이 들었는데요"미디어 쿼리가 로직도 분리해주면 참~ 좋겠다!"근데 비슷한게 진짜로 있더라구요? 그래서 써보려고 합니다! matchMedia!를 이용한 로직분기! matchMedia?mdn에 검색해보면 아래와 같이 쓰여있는데요,"Window.matchMedia() 메서드는 주어진 미디어 쿼리 문자열의 분석 결과를 나타내는 MediaQueryList 객체를 반환합니다." 써보시면 바로 아~ 이거구나 하시겠지만 굳이굳이 이야기 하자면 media query 문자열을 인자로 넣었을때 그 값을 확인해서 알려주는 녀석입니다.  사용법사용법은 엄청 간단합니다. window.matchMedia(mediaQueryString);//MediaQueryList 를 반환window.ma..

타입스크립트로 된 라이브러리를 사용하다 보면 가끔씩 라는 타입이 보일때가 있는데요,처음엔 T라는 타입이 대체 어떤 타입일까? 라고 궁금증을 가졌던 기억이 있습니다 그럼 오늘은 그 T 바로 제네릭 타입에 대해서 알아보겠습니다. 제네릭?제네릭은 특정 타입을 명시하지 않고, 다양한 타입을 사용할 수 있도록 하는 타입스크립트의 기능으로, 코드 재사용성과 타입 안전성을 높일 수 있습니다.  사용해보기제네릭은 함수, 클래스, 인터페이스에서 사용가능 합니다.function identity(arg: T): T { return arg;}위의 함수는 arg의 타입과 return값의 타입을 T로 지정하여 T를 받아 T타입을 반환하게 되는 함수가 됩니다.오히려 더 복잡해 보이는건 기분탓이겠죠..?좀더 자세히 보겠습니다...