html 파일에서 스크립트의 실행 순서는 위에서부터 읽어온다. 그렇기 때문에 대부분의 스크립트 파일을 body 제일 마지막에 넣어주는 방식으로 처리한다.  // ...  이렇게 사용하는 이유는 script 태그에 있는 코드가 html 코드에 영향을 받아서 실행되기 때문에 먼저 script가 로드되고 html 코드가 불러와지면 오류가 발생할 수 있다.   head에 있는 querySelector가 실행되는 시점에는 div.test가 로드되지 않았기 때문에 아무것도 불러오지 못한다. 그런 상태에서 ele 관련 속성을 사용하면 오류가 발생하는 것이다.  하지만 script 태그 내부에서 적어주는 방식이 아닌 파일을 가지고 오거나 외부 플러그인을 가지고 오는 경우 head에 작성해도 문제..

React나 Vue 같은 라이브러리가 아닌 html에 바로 Script 태그를 사용할 때 주의해야 할 것이 전역변수이다. const나 let으로 변수를 만들 때 잘못하면 전역에서 만들어지기 때문이다.  // ... // ...  위와 같이 JavaScript 코드를 작성했다고 생각해보자.  여기서 전역변수는 vari 와 clickHandler이다. 단순 이렇게 사용하는 것이 문제가 되는 것은 아니다. 하지만 추후 다른 개발자가 동일하게 vari와 clickHandler로 변수를 만들 수 있는 여지가 있다면 어떻게 될까? 코드가 합쳐지면서 동일한 명칭을 가진 변수가 생기면서 오류가 발생할 것이다.  이것을 해결하는 방법은 2가지가 있다. 즉시 실행 함수 표현식정의되자마자 즉시 실행되는 ..

Not Found는 Next.js에서 404 에러가 발생했을 때 렌더링되는 페이지이다. 일반적인 사용 방법은 Not Found 가 필요한 위치에 not-found.jsx 파일을 만들어주면 끝이다.  근데 한가지 이상한 점이 있었다. 모든 페이지에 Header와 Footer라 필요해서 app 폴더 아래에 있는 layout에게 Header와 Footer를 불러왔다. const RootLayout = () => { return ( {children} )};export default RootLayout; 사건 재현을 위해서 Header와 Footer에는 특별한 기능이 있는 것은 아니고 간단한 문자만 렌더링 했다. 그 결과는 당연히 ..

지난번엔 Funnel 컴포넌트에 대해서 알아봤다. 토스에서 이미 잘 만들어둔 useFunnel 컴포넌트가 있지만 해당 기능을 참고해서 유사한 기능을 하는 Funnel 컴포넌트를 만들어 보려고 한다.  핵심 기능은 다음과 같다 : Funnel에 steps를 넘겨줘서 현재 Step에 해당하는 컴포넌트만 렌더링next() 함수를 통해서 다음 Step으로 이동 Funnel이란게 어려운 기능이 아니다. 현재 Step에 맞는 컴포넌트를 렌더링 해주는 것이 끝이다.  추가로 다음과 같은 기능을 구현할 생각이다 :next 외 prev, update 함수를 통해 컨트롤할 수 있는 기능을 구현할 계획이다.useFunnel이 토스의 Funnel 컴포넌트의 시작 지점인데, 나는 useFunnel을 전역 상태를 관리하는 용도로..

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..