React에서는 React Router Dom, Next에서는 next/navigation 을 사용해서 주소와 관련된 처리를 한다. 프론트엔드 작업을 하면서 History 관련 코드를 직접 사용하는 경우는 많이 없다.  그럼 History을 잊어도 상관 없을까? 하지만 골수까지 뽑아먹어야 될테니 History에 뽑아먹을 게 있는지 알아보려고 한다.  History브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다. 설명을 보면 심상치 않은 복잡한 기능이 가능할 것 같다.방문 기록을 조작한다면 들어오지 않은 페이지를 들어왔던 것처럼 변경도 할 수 있는건가?  속성 length세션 기록의 길이를 나타내는 정수를 반환한다.  여기서 말하는 세션 기록..

SEO ▶ 2024.05.05 - [Next.js/실험실] - 홈페이지 상단에 노출시키기▶ 2024.06.09 - [Next.js/실험실] - 포괄 검색어로 홈페이지 노출시키기지난 도전 지난 글에서 회사명을 검색 엔진에 검색했을 때 8페이지에 존재했었다. 원인을 파악하려고 네이버 서치 어드바이저에서 확인 해보니 Title와 Description 에 문제가 있어서 검색엔진측에서 홈페이지에 문제가 있다고 판단해서 상단에 노출시키지 않았던 것 같다.  그리고 하필이면 동명의 연예인과 유사한 이름의 업체가 있어서 경쟁에서 밀려버렸던 것 같다.  우선 네이버 서치 어드바이저에서 지적한 Title을 변경했더니 2페이지까지 올라갔다. 여기까지가 지난번 글을 올리고 2주가 지난 상황이다.  현재 상황여기서 추가로 [ ..

개요.CSS의 역할 중 하나로 HTML 요소를 적절하게 배치하는 것이 있다. [ 요소를 배치 ] 하는 것을 레이아웃이라고 부르며 CSS의 레이아웃 시스템의 변화 역사가 있다. 과거에는 float를 사용해서 레이아웃을 구현하고 이후 flex 레이아웃이 등장하면서 점차 float를 사용하지 않게 되었다. 마지막으로 제일 나중에 grid가 등장하였으며, grid가 제일 마지막에 등장했다고 grid만 사용하는 것이 아닌 상황에 따라 flex와 grid를 혼용한다.  ※ flex와 grid는 상황에 따라 혼용해서 사용하는데 왜 float는 사용하지 않을까? 여러가지가 있겠지만 반응형 웹에 적합하지 않기 때문이다.  과거 PC를 통해서만 웹 사이트를 접근하는 상황에선 반응형이 중요하지 않았지만 최근에는 모바일, 테..

FBI WARRING  문제의 흐름에 따라 공부를 찾다보니 글쓴이가 지금 무슨 짓을 하는지 모를 수 있음이쁘게 봐주시고 잘못된 부분이 있다면 언제든 회초리 환영입니다.    NextJS를 사용하다보니 문뜩 layout.js에서 "use client"를 사용하면 그의 자식 요소들이 모두 클라이언트 컴포넌트가되는 것인지 궁금증이 발생했다.  일단 직접 테스트를 진행해봤다. 테스트 방식으론 Root Layout에게 "use client"를 주고 page에게는 따로 주지 않는 상태에서 콘솔을 각각 주는 방법으로 했을 때, 만약 page의 콘솔이 먼저 나온다면 전파가 안되는 것이고 layout이 먼저 나온다면전파가 되는 것이라고 생각했다. "use client";export default function Root..

NextJS에서 Styled Components를 사용할 때 문제가 발생했다. css 적용이 초기 렌더링때 바로 적용이 되지 않는 문제가 있었다. 위 이미지에서 보이듯 글자의 CSS가 잠깐 적용되지 않는 문제가 있었고 해결하기 위해서 이것저것 찾아봤다. App Router를 사용하는 경우라면 NextJS에서 제공하는 방법이 있어서 문제가 없지만 해당 문제가 발생한 것은 옛날 프로젝트 환경이라서 Pages Router를 사용하고 있었다.  또한 App Router로 마이그레이션할 시간이 따로 주어지지 않아서 어쩔 수 없이 현재 환경에서 해결을 해야했다. ( 해결 방법은 제일 하단에 ) babel 설정 ( 실패 )plugins: ["babel-plugin-styled-components"] 설정을 추가해주면..

React는 cra를 통해서 간단하게 설치가 가능하다. 하지만 React Native 역시 간단 설치가 가능한데, 프로젝트를 본격적으로 진행한 적이 없어서 정리하면서 같이 진행할 계획이다. ( 전에 GPT로 만든 React Native는 ... 제외! ) Android Studio는 설치가 되어 있다고 생각하고 프로젝트를 진행하겠다. 그게 아니고 완전 최초 상태라면 공식 문서를 참고해서 Android Studio를 설치하는 것을 먼저 진행하자! 개발 환경은 Expo가 아닌 React Native를 사용해서 개발을 할 생각이다. Expo는 프로젝트가 생각보다 자유롭지 않아서 개발 시 많은 불편함이 있었다.  그 외에는 Styled-Components, Tanstack Query, Zustand를 기본 베이..

DOM을 사용하는 경우는 React를 사용하면서 많이 줄어들었다.  하지만 특정 애니메이션 등을 작업하기 위해서 State 등을 사용할 수 있겠지만 Ref를 사용해서 DOM을 변경하는 것도하나의 방법이다. 즉, React를 사용하면서 Ref를 사용한 DOM 스크립트를 사용할 수 있는데, 사용하는 경우가 적다보니 자주 사용하는 명령어 외엔 어떤게 있는지 모르는 경우가 있어 정리를 해보자  DOM 선택하기  const el = document.querySelector(".element2") 가운데에 있는 요소를 가지고 오기 위해서는 querySelector를 사용하면 간단하게 가지고 올 수 있다.  document.getElementById 같은 방식으로 가지고 오는 것이 더 익숙한 사람도 있겠지만..

회사에서 만든 홈페이지가 홈페이지 명으로 검색을 했을 때 8페이지에서 노출되는 문제가 발생했다. 해당 프로젝트는 작년 3월 첫 입사를 하고 [ 모바일 ] 부분만 담당해서 개발하게 된 홈페이지인데, 실제 도메인에배포한지 1년이 넘도록 8페이지에 머물러 있던 것이다.   이런 문제를 인지하지 못하고 있다가 이번에 검색을 하다가 노출되지 않는 것을 확인하고 점검을 시작했다.우선 회사명과 유사한 이름의 서비스가 하나 있었고 동일한 이름의 가수가 무려 2명이나 존재했다.... 일단 홈페이지를 보면서 점검을 진행하면서 부족한 부분을 함께 작업을 진행하기로 했다.  OG 태그공유를 할 때 사용되는 태그가 바로 OG 태그이다. 현재 개발 환경이 Next.JS이므로 원한다면 SSR을 통해서 페이지에 맞는 제목과 썸네일을..