JJakeingcee.hashnode.dev·Jul 9, 2024 · 1 min read프론트엔드 반응형 테스트 도구모음💡 프론트엔드 개발을하면서 반응형 테스트를 좀 더 쉽게하기위해서 찾아본 것들입니다. Responsively APP 첫번째는 Responsively App입니다. 아래 화면처럼 모바일, 패드, 데스크탑을 3개의 화면을 동시에 키고 테스트해 볼 수 있습니다.그리고 오른쪽 상단에 있는 카메라 버튼을 누르면 각각의 화면을 캡쳐하는 기능도있습니다.개발하면서 혼자서 반응형 기기별로 테스트 해보기 좋습니다.홈페이지에 들어가서 각 pc환경에 맞게 다운로...00
JJakeingcee.hashnode.dev·Jul 8, 2024 · 8 min readHistory API를 사용하여 뒤로가기 막기 (Next.js)사내 프로젝트에서 특정 페이지에서 뒤로가기 이벤트를 실행 시 모달을 띄우는 요구사항 구현을 정리하였습니다. History API란? MDNHistory API는 브라우저의 세션 기록(탭이나 프레임에서 현재 페이지가 로드된 기록)에 접근할 수 있는 기능을 제공합니다. 이를 통해 사용자는 뒤로 가기와 앞으로 가기, 그리고 히스토리 스택의 내용을 조작할 수 있습니다. 이 API는 메인 스레드(Window)에서만 사용할 수 있으며, Worker나 W...00
JJakeingcee.hashnode.dev·Jul 3, 2024 · 4 min readuser-agent를 이용한 모바일만 접근하기사내 프로젝트에서 회원가입페이지를 모바일 기기에서만 접근할 수 있도록 만들어달라는 요청이있어 구현과정을 정리해보았습니다. 프로젝트는 next.js v14.2버전으로 진행했습니다. User-agent란? 사용자 에이전트 (User Agent)란, 우리가 사용하는 웹 브라우저 속에 숨겨진 중요한 기능 중 하나를 말합니다. 간단히 말해 내가 어떤 OS를 쓰고 있고, 버전은 어떤 버전인지 웹 브라우저의 정보는 어떤 것인지 등을 담고 있는 번호판 같은 ...00
JJakeingcee.hashnode.dev·Jun 5, 2024 · 4 min readNext.js v14 아키텍처(폴더구조)💡 Next.js 폴더구조(아키텍처)에 대해 정리했습니다. Next.js v14 + MUI v5 셋팅에 이어서 폴더 구조(아키텍처)에 대해서 설명하려합니다.저는 항상 프로젝트를 시작, 진행하면서 고민되는 포인트는 프로젝트 아키텍처를 어떻게 설계해 나가야 되는 것인가 대한 고민을 했었는데요. 프로젝트 규모에 따른 아키텍처 설계 기준을 정리해보려합니다. 일단 현재 셋팅하고있는 Next.js +. MUI프로젝트는 FSD(기능 분할 설계)를 활...00
JJakeingcee.hashnode.dev·Jun 4, 2024 · 7 min readNext.js v14 App router + MUI v5💡 Next.js 와 MUI 셋팅법에 대해 정리하였습니다. Node.js 설치 Next.js를 설치하기위해서는 Node.js 18.17 or later 버전이 필요합니다.Node.js는 Javascript로 작성된 프로그램을 운영체제 상에서 일반 애플리케이션 프로그램처럼 실행시켜주는 런타임입니다. Next.js를 사용해보기 위해서 설치해 봅니다. node.js 공식문서 https://nodejs.org/en LTS 다운로드 클릭합니다....00