WEB개발이야기/React.js 2024. 2. 28.
Next.js 14버전에서 모달창 띄우는 초간단 방법
Next.js 14 버전에서 모달 창을 쉽게 띄우는 방법을 포스팅하려고 합니다. Next.js는 폴더의 형태와 이름에 따라 경로 구성과 기능이 달라지니, 폴더 구조와 이름을 주의 깊게 설정하는 것이 중요합니다. 아래 글을 참고하여 설정해 보세요. Next.js 14버전에서 App 라우팅 심화: 폴더 구조와 파일 특징 완벽 가이드 모달 창을 띄우기 위한 기술 Next 14버전에서 모달을 띄우기 위한 핵심기술로 패러랠 라우트와 인터셉트 라우트가 있습니다. 일반적으로 모달을 구현하기 위해 다음과 같은 폴더 구조를 사용합니다. └── app ├── @modal │ ├── default.js │ ├── (.)flow │ │ └── page.js │ └── ... └── ... 패러랠 라우트 개념 하나의 layou..
WEB개발이야기/웹퍼블리싱 2024. 2. 22.
Day.js vs Moment.js: 날짜 처리 라이브러리 비교 분석 (초보자를 위한 가이드)
JavaScript에서 날짜 처리를 위한 라이브러리는 필수적인 요소입니다. 다양한 날짜 형식을 다루고, 계산하고, 포맷팅하는 작업을 쉽게 해주죠. 그 중 가장 인기 있는 라이브러리로는 Moment.js와 day.js가 있습니다. 과연 어떤 라이브러리가 더 나은 선택일까요? 1. 비교 분석 기준 day.js Moment.js 크기 (gzip) 2.1KB 22.9KB 성능 약 1.4배 빠름 - API Moment.js와 유사, 변경 불가능 객체 사용 다양한 함수 제공, 객체 직접 수정 가능 기능 핵심 기능 집중, 플러그인을 통한 확장 가능 다양한 기능 제공 지원 활발하게 개발 중, 커뮤니티 성장 중 탄탄한 지원 체계, 활발한 커뮤니티 브라우저 지원 IE 11 지원하지 않음 IE 11까지 지원 장점 가볍고 빠..
WEB개발이야기/React.js 2024. 2. 20.
React와 Next.js에서 상태 관리하는 7가지 방법 비교: 심층 분석 및 실제 사례
React와 Next.js는 웹 개발에서 가장 인기 있는 프레임워크 중 하나이며, 동적인 웹 애플리케이션을 구축하기 위한 강력한 도구입니다. 하지만, 프로젝트 규모가 커지면서 여러 컴포넌트 사이에서 데이터를 공유하고 관리하는 것은 점점 더 복잡해집니다. 이러한 문제를 해결하기 위해 다양한 상태 관리 방법들이 등장했습니다. 본 글에서는 7가지 대표적인 상태 관리 방법 (useState, useReducer, Context API, Redux, Recoil, Zustand, Next.js SWR)을 심층 분석하고, 각 방법의 장단점을 비교하며 실제 사례와 함께 적용 방법을 제시하려고 합니다. 또한, 프로젝트 특성에 따라 적합한 상태 관리 방법을 선택하는데 도움이 되는 추가 고려 사항과 팁을 제공하려고 합니다..
WEB개발이야기/React.js 2024. 2. 19.
Next.js 14 핵심 기능: App 라우팅과 Pages 라우팅의 장단점 비교
Next.js 12버전이하에서는 기본적으로 Pages Routing 방식을 사용했으나 Pages Routing의 단점을 극복하고자 14버전에서 App Routing을 도입하게 되었습니다. 그래서 현재 14버전에서는 Pages Routing과 App Routing 방식을 선택하여 사용할 수 있습니다. 각 라우팅 컨벤션은 서로 다른 구조와 특징을 가지고 있으며, 프로젝트의 특성에 따라 적합한 컨벤션을 선택하는 것이 중요합니다. 기존 Next.js 프로젝트를 관리하는 차원이라면 Pages 라우팅 방식을 추천하지만 만약 새롭게 프로젝트를 진행하게 된다면 App 라우팅 방식을 추천합니다. 1. App 라우팅 컨벤션 App Routing Conventions는 Next.js 14 버전에서 새롭게 도입된 라우팅 컨벤..
WEB개발이야기/React.js 2024. 2. 19.
Next.js 14버전에서 App 라우팅 심화: 폴더 구조와 파일 특징 완벽 가이드
Next.js 14 버전에서 도입된 App 라우팅 방식은 폴더 구조와 파일 규칙을 기반으로 강력하고 유연한 라우팅 경험을 제공합니다. 이 글에서는 폴더와 파일의 명칭에 대한 규칙을 명확하고 간결하게 정리하여 개발자들이 App 라우팅을 쉽게 이해하고 활용할 수 있도록 정리 했습니다. 라우팅(Routing) 파일들 APP 라우팅 방식은 기본적으로 컴포넌트를 기준으로 경로를 설정하게 됩니다. 기본적으로 사용되는 라우팅 파일 형식은 아래와 같습니다. 파일 명 확장자 설명 layout .js .jsx .tsx 화면의 레이아웃을 정의 합니다. page .js .jsx .tsx 화면의 컨텐츠를 정의 합니다. loading .js .jsx .tsx 화면이 로딩될 때 보여줄 UI 화면입니다. not-found .js ...
WEB개발이야기/React.js 2023. 11. 25.
nextjs(react)에서 tailwindcss와 구글폰트 연계해서 사용하기
Next.js를 사용할 때 스타일링으로 tailwindcss를 많이 사용할 것입니다. 또한 폰트로 Google Fonts도 많이 사용하게 되는데요. 구글 웹폰트를 사용하는 경우 보통 아래와 같이 CDN으로 구글에서 웹폰트를 불러와서 적용하는 방법을 많이 사용합니다. Making the Web Beautiful! 이럴 경우 사용이 편한 장점도 있지만 오프라인이거나 네트워크가 좋지 않은 환경에서는 단점으로 작용을 합니다. 그래서 Next.js에서는 폰트를 별도의 패키지로 만들어서 제공하고 있습니다. 이럴 경우 사용하는 것은 웹폰트를 사용하는 것만큼 쉽고 퍼블리싱 할 때 local로 해당 폴더만 가져가기 때문에 오프라인일 때도 웹폰트가 표현이 되는 장점이 있습니다. Next.js에서 Google Fonts 적..
WEB개발이야기/React.js 2023. 11. 17.
Nextjs(React)에서 Google Sheets를 데이터베이스로 사용할 수 있을까
영세한 개발자나 취미로 개발을 하는 사람이라면 항상 생각하는 것이 내가 개발한 웹서비스를 무료로 서버에 올려서 사용할 수 있을까? 라는 것입니다. 스태틱 한 웹서비스인 경우는 상대적으로 길이 많은데 데이터베이스까지 붙여야 한다면 이건 또 말이 다르게 됩니다. 고성능의 데이터베이스까지는 필요도 없는데 말이죠. 저도 이번에 Next.js(React)로 아주 간단한 웹서비스를 토이 프로그램으로 개발하기로 하면서 데이터베이스에 대해 문득 든 생각이 Google Sheets를 사용하면 되지 않으까?였습니다. 그래서 여기저기 이것저것 알아보다가 굳이 고성능이 필요하지 않다면 Google Sheets가 대안이 될 수도 있겠다고 판단하여 시도해 봤습니다. 결과는 어느 정도 성공적이어서 잊어버리기 전에 공유를 하려고 합..
WEB개발이야기/React.js 2022. 7. 14.
React.js에서 JSX사용하기
JSX란? React에서 JSX는 필수 요소는 아니지만 React를 코딩하는데 많은 편리함을 더해주는 확장 문법이라고 보면 됩니다. JSX란? - React 공식웹사이트 React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다. React는 JSX 사용이 필수가 아니지만, 대부분..
WEB개발이야기/React.js 2022. 7. 11.
React.js의 아주 기초적인 사용법
React를 공부하기 시작했습니다. 아주 간단한 것부터 알게 된 것을 기록해 볼까 합니다. React는 프레임워크라기보다는 라이브러리라고 할 수 있습니다. 그렇기 때문에 기존의 HTML에 간단하게 React를 적용할 수 있습니다. 먼저 가장 기본적인 HTML은 아래와 같습니다. React.js 적용하기 react.js를 적용하기 위해서 먼저 react.js javascript CDN을 적용해야 합니다. 이제 이 HTML 문서는 React를 실행시킬 수 있습니다. 간단하죠? 한번 간단하게 적용해 보겠습니다. 먼저 react가 발현될 dev를 지정합니다. 보통은 id="root"를 많이 사용하나 바꾸어도 상관없습니다. 그리고 react 문을 작성합니다. react도 javascript이므로 javascrip..
WEB디자인이야기/WEB디자인 2020. 7. 16.
CSS position:sticky로만 레이아웃 슬기롭게 만들기
프론트엔드 개발을 하다보면 javascript를 많이 사용하게 됩니다. 하지만 javascript를 너무 많이 사용하다 보면 코드가 복잡해 지기도 하고 퍼포먼스도 점점 떨어지는 것을 느끼게 됩니다. Affix 같은 기능을 구현하려면 부트스트랩같은 특정 프레임워크를 사용하거나 별도로 개발을 해야 했으나 CSS의 position:sticky를 이용하면 javascript를 전혀 사용하지 않고도 멋진 기능을 구현해 낼 수 있습니다. sticky란 무엇인가?sticky는 CSS의 Position의 속성으로 사용되어 집니다. Fixed가 브라우저 화면의 절대 위치를 사용하는 반면 Sticky는 부모 태그의 절대위치값을 사용하는 방법입니다. 그래서 반드시 Sticky의 상위에 부모 컨테이너가 존재해야 합니다. po..
WEB개발이야기 2020. 6. 30.
javascript에서 동적으로 변수를 만들 수 있는 eval()
javascript로 프로그래밍을 하다가 보면 변수를 동적으로 생성하거나 변수와 텍스트를 결합해서 다른 변수를 생성해야 할 경우가 있습니다. 그냥 서로 합친다고 새로이 변수가 생성되는 것이 아니고 eval()라는 함수를 이용해야 합니다. eval() 함수eval()의 괄호 안에 들어 있는 모든 내용을 스크립트로 인식을 합니다. 사용법 var key = "nara"; eval("var haha" + key + "= 100"); console.log(hahanara) => 100위의 코드 처럼 문자열처럼 변수를 생성할 수 있습니다. hahanara 변수를 확인해 보면 결과 값은 100이 표시됩니다. 객체의 key값을 변수 형태로 사용하기또하나는 객체를 사용할때 애를 먹었던 건데.. 객체의 key값을 기본적으..
WEB개발이야기/웹퍼블리싱 2020. 2. 29.
DOM의 변화를 감시하는 javascript MutationObserver
Tistory같은 경우 스킨을 만들때 내가 모든 Event를 통제 할 수 없기 때문에 DOM의 변화를 감지하는 javascript 장치가 필요합니다. 옛날에는 DOMSubtreeModified 를 많이 사용했었지만 DOMSubtreeModified을 잘못 사용하면 무한루프에 빠지기 떄문에 성능을 저해해서 DOM 이벤트 표준에서 지원이 중단되었습니다. 그래서 대체로 사용할 수 있는 것이 MutationObserver입니다. MutationObserver 는 DOM의 변화를 감시합니다. 기본 사용법 가장 기본적인 사용법은 아래와 같습니다. 상세한 설정은 config를 통해 할 수 있습니다. // 1. 대상 선정 var target = document.getElementById('some-id'); // 2...
WEB개발이야기/웹퍼블리싱 2019. 9. 30.
javascript로 드레그가 가능한 HTML 요소 만들기
javascript로 HTML의 DIV를 드레그할 수 있게 하는 간단한 기능 구현입니다. 이와 비슷한 기능은 jquery UI에서 제공해 주고 있긴 하지만 드레그 기능 하나 구현하겠다고 jquery UI를 붙히기는 웬지 손해 보는 느낌입니다. 바닐라JS로 구현하는 코드와 설명입니다. HTML 먼저 간단하지만 HTML 구성요소 입니다. CSS CSS도 간단하게 구현합니다. 마우스가 해당 요소에 올라가때 화살표 마우스 표시가 이동이 가능한 표시로 바뀜니다. #dragdiv { cursor: move; } javascript 핵심기능인 javascript 코드 입니다. 바닐라JS로 구현 시 3가지의 단계로 구현이 되면 하나씩 설명을 하겠습니다. 마우스로 요소를 클릭 할 때 기능 구현 클릭한 요소를 움직일 떄 ..
WEB개발이야기/웹퍼블리싱 2019. 5. 24.
현재 가장 모던한 모바일 터치 슬라이더 swiper
현재 github에서 거의 20,000에 달하는 Star을 받고 있는 모던한 모바일 터치슬라이더 플러그인입니다. 모바일뿐 아니라 Web화면에서도 아주 잘 작동하는 검증된 플러그인이라고 보시면됩니다. MIT 라이선스를 가지고 있어서 부담없이 사용할 수 있고 데모 사이트에서 다양한 Swipe DEMO를 보고 쉽게 적용할 수 있습니다. 홈페이지http://www.idangero.us/swiper DEMOhttp://www.idangero.us/swiper/demos/Install아래와 같은 다양한 방법으로 소스를 적용할 수 있습니다. bower로 설치할 경우 $ bower install swiper또는 Atmosphere as Meteor 패키지로 설치할 경우 $ meteor add nolimits4web:s..
WEB개발이야기/Vue.js 2019. 3. 27.
javascript(Vue.js)로 배열에서 ID를 활용하여 Index값을 찾을때 요긴한 함수
Vue.js에서 배열에 있는 특정 id의 Index값을 찾아서 그 배열을 처리하는 요긴하면서 쉬운 함수를 공유합니다. 아래의 예제는 todolist배열을 화면에 나열해 놓고 그 중에 항목을 하나 클릭할 경우 doneToggle(id) 또는 deleteTodo(id)를 불러와서 반대 값으로 토글 시키거나 항목을 삭제하는 함수입니다. {{ a.todo }} (완료) × doneToggle : function(id) { var index = this.todolist.findIndex(function(item){ return item.id === id; }) this.todolist[index].done = !this.todolist[index].done } 핵심은 findIndex() 함수입니다. 함수에서 받..
WEB개발이야기/웹퍼블리싱 2019. 2. 22.
javascript ECMAScript 2015(ES6)로 개발할 때 반드시 알아야할 9가지
ECMAScript2015로 개발하기 위해 알아야 할 9가지를 정리해 보려고 합니다. 먼저 간단하게 ECMAScript를 소개 하겠습니다. ECMAScript 옛날 옛적에 넷스케이프(NE)와 인터넷익스플로러(IE)가 주도권 경쟁을 하던 시절~~ 넷스케이프(NE)는 javascript를 지원했고 인터넷익스플로러(IE)는 Jscript를 지원 했었습니다. 윈도우즈에 끼워팔기 신공으로 점차 득세를 하기 시작한 인터넷익스플로러는 그만 자만심에 빠져 Jscript를 표준이 아닌 적당히 자기만의 기능을 추가하기 시작했습니다. 내가 점유율이 높으니 모든 브라우저들이 내가 만든 기준을 따라 올 거라 생각을 했던 것입니다. 하지만 망하기는 했지만 넷스케이프도 그렇게 호락호락하지 않았습니다. 자신이 밀고 있던 javasc..
WEB개발이야기/웹퍼블리싱 2018. 8. 29.
jQuery로 A태그 실행 시키기
웹퍼블리싱을 하다 보면 사용자가 아니라 javascript에서 A태그에 적혀있는 링크를 실행시켜야 하는 경우가 종종 있습니다. 다시말해 사람이 클릭하는 것이 아니라 조건에 맞으면 javascript가 클릭하게 하는 방법입니다. 저도 한참 찾아 해맸었는데.. 아래와 같은 jQuery 명령어로 실행이 가능 합니다. $('선택자').get(0).click(); 간단하게 예제를 살펴보시면 이해가 될것입니다. Javascript 코드 if( true ) { $('#uxgjs').get(0).click(); } HTML 코드 조건이 참이면 http://uxgjs.tistory.com이 경로로 이동을 합니다.
WEB개발이야기/웹퍼블리싱 2018. 8. 12.
원하는 DIV박스 안에 최적의 이미지 사이즈로 표시하기
이미지를 최적의 사이즈로 마추어서 표시해야 할 때가 있습니다. 저같은 경우는 Bootstrap 4의 card Component를 사용할 경우에 필요해서 개발을 해 봤습니다. 구현결과 구현하고자 하는 모양새는 아래와 같습니다. 이미지가 넓이로 긴 경우 높이값을 100%로 맞추고 넓이값을 중앙으로 맞춥니다. 이미지가 높이로 긴 경우 넓이값을 100%로 맞추고 높이값을 중앙으로 맞춥니다. HTML 구현 핵심은 class="js-imgSizeSame" 입니다. 이 클래스명을 기준으로 javascript로 사이즈를 조절합니다. javascript 구현 javascript는 jquery를 활용하였습니다. 이미지를 찾는 부분과 불러온 이미지의 크기를 조절하여 중앙으로 맞추는 Function으로 구분하여 작성하였습니다..
WEB개발이야기 2018. 7. 10.
Grunt 소개와 설치방법
Node.js의 탄생으로 인해 javascript진영이 비약적인 발전을 이루고 있으며 그러한 발전에 견인차 역활을 한 Grunt라는 것이 있습니다. 이러한 프레임워크를 javascript Task기반 빌드 Tools이라고 하는데 과연 이것이 무엇인지, 그리고 어떻게 설치하고 사용하는지에 대해 포스팅을 하려고 합니다. Gruntjs란 무엇인가. Grunt 또는 Gruntjs라고 하며 인터넷을 검색하면 Task기반 빌드 툴이라고 나옵니다. 풀어서 설명을 하면… Node.js를 기반으로 하고있는 무수한 패키지들 중에 프로젝트에서 필요한 패키지들을 설치하고 그 패키지들을 미리 설정한 순서와 옵션에 맞게 자동으로 명령어를 실행시켜주는 Tool이라고 보면 됩니다. 마치 Desktop컴퓨터의 `.bat ` 배치파일과..
WEB개발이야기 2018. 7. 10.
Gruntfile의 주요 플러그인들
앞선 포스팅에서 Grunt 소개와 설치방법를 소개했었습니다. 이번에는 Grunt의 주요 플러그인들을 소개하고 간략한 설명을 포스팅 하겠습니다. 플러그인 Grunt.js에서 말하는 플러그인과 Node.js에서 말하는 패키지는 동일한 것입니다. 그래서 Grunt에서 패키지를 설치하는 방법과 Node.js에서 패키지를 설치하는 방법이 동일합니다. 플러그인 찾기 대부분의 Grunt 플러그인들은 Grunt사이트의 Plugin 메뉴에서 확인할 수 있습니다. 먼저 Grunt웹사이트의 플러그인 메뉴로 이동합니다. 원하는 기능의 플러그인을 검색창을 이용하여 검색을 합니다. 검색결과의 플러그인 리스트중에 하나를 선택하여 설치방법을 확인합니다. 찾는 플러그인이 명확하지 않다면 검색결과 중 **다운로드 수가 많은 것** 이나..
WEB개발이야기 2018. 7. 10.
Gruntfile의 구조와 사용법
Gruntjs를 사용한다고 하는것은 gruntfile.js를 다룰 줄 안다고 하는 것과 마찬가지로 gruntfile.js는 중요합니다. 중요하다고 해서 배우기가 어렵다는 말은 아닙니다. 개인의 차이는 있겠지만 보통 1~2일이면 개념을 이해 할 수 있고 1주일 정도면 구글링을 하면서 Gruntjs를 사용할 수 있을 정도로 어렵지 않습니다. 이전 포스팅에서 Gruntjs의 소개와 설치법을 작성했으니 완전 초보자이시면 이전 포스팅을 먼저 보는 것이 도움이 될것 같습니다. gruntfile.js의 구조와 사용법 gruntfile.js의 가장 기본적인 구조는 아래와 같습니다. 1. 프로젝트의 구성, 2. 사용한 플러그인 로딩, 3. 실행 명령어의 3개의 분류로 구성되어 있으며 각각 영역별로 설명을 하도록 하겠습니..
WEB개발이야기 2018. 7. 10.
웹프로그램 개발 시 필요한 샘플 이미지를 무료로 제공해 주는 사이트
웹사이트를 개발하다 보면 이미지 영역을 잡는 경우가 있습니다. 이때 사용할 수 있는 무의미한 더미 이미지를 무료로 제공해 주는 사이트가 있어 포스팅합니다. 더미 이미지를 제공해 주는 사이트도 있고 이미지의 글자정보만 제공해 주는 사이트도 있습니다. 더미 이미지 제공 placeimg.com placeimg는 더미이미지를 크기와 카테고리만 지정하면 해당 크기와 카테고리에 해당하는 이미지를 보여줍니다. 사용법은 매우 간단합니다. 웹사이트 : placeimg.com 기본사용법은 가로크기와 세로크기 그리고 카테고리를 지정하면 됩니다. 특정 이미지는 지정할 수 없고 카테고리에 따른 랜덤이미지로 보여줍니다. 디폴트 카테고리는 any이고 카테고리 구분없이 모든 이미지에서 랜덤으로 뿌려줍니다. 아래의 카테고리와 필터 지..
WEB개발이야기/웹퍼블리싱 2018. 7. 10.
스크롤에 따라 배경이미지의 시차가 다르게 움직이는 Parallax_ImageScroll
홈페이지를 보게되면 화면을 스크롤 할 때 배경의 이미지가 스크롤에 비해 더 조금씩 움직임으로써 역동적으로 보이게 하는 기술을 볼 수 있습니다. 이것을 Parallax(시차)라는 이름으로 많이 사용되고 있는데.. jQuery의 플러그인으로 구현된 것이 있어 소개합니다. **홈페이지 : ** [https://github.com/pederan/Parallax-ImageScroll](https://github.com/pederan/Parallax-ImageScroll) **DEMO : ** [http://codepen.io/pederan/full/Hheuy](http://codepen.io/pederan/full/Hheuy) **라이선스 : ** MIT Install bower로 설치할 경우 bower inst..
카테고리 없음 2017. 5. 23.
GNB메뉴 Mouse On일때 스치기만해도 서브메뉴가 나올 시 해결방법
퍼블리싱을 하다보면 GNB의 1Depth 메뉴에 마우스를 올렸을경우 2Depth메뉴가 아래로 내려오는 UI를 구현하는경우가 많습니다. 퍼블리싱을 하다보면 GNB의 1Depth 메뉴에 마우스를 올렸을경우 2Depth메뉴가 아래로 내려오는 UI를 구현하는경우가 많습니다. 이때 의도치 않게 마우스가 브라우저 상단에서 컨테츠쪽으로 이동하려고 할때 GNB영역을 거치게 되는데, 바로 2Depth메뉴가 나타나는 경우가 생깁니다. 말하자면 의도치 않게 2Depth메뉴를 보게 되는 것입니다. 그럴경우 Mouse On의 감도를 조절하여 그냥 스쳐지나가는 것은 반응이 일어나지 않고 의도를 가지고 어느정도 버튼에 머물 경우 2Depth메뉴가 나오게 하는 javascript코드입니다. JAVASCRIPT var delay = ..
