반응형

전체 글 122

jQuery와 JavaScript를 이용한 마우스 이벤트 처리 - 왼쪽 및 오른쪽 클릭 이벤트

"마우스 이벤트란 무엇인가?" 말그대로 기본적으로 마우스 우클릭과 좌클릭 이벤트를 말할 수 있으며 이번에는 해당 내용을 다뤄볼 생각이다. 그외 다양한 이벤트도 존재하지만 그것은 나중에 다시 언급하도록 하겠다. 우선적으로 마우스 클릭 이벤트 관련하여 우클릭과 좌클릭에 관한 명령어 용어는 Click Event와 Contextmenu Event가 존재한다. jQuery를 활용한 마우스 이벤트 처리 jQuery를 활용한 왼쪽 좌클릭 이벤트 $(document).ready(function() { $("#elementId").click(function() { alert("왼쪽 클릭 이벤트 발생!"); }); }); jQuery를 활용한 오른쪽 우클릭 이벤트 $(document).ready(function() { $..

웹 공부 2024.01.14

JavaScript에서 현재 날짜를 'YYYY-MM-DD' 형식으로 얻는 방법

JavaScript에서 현재 날짜를 'YYYY-MM-DD' 형식으로 얻는 방법이며, 이 방법은 웹 개발에서 자주 사용되며, 특히 날짜 관련 데이터를 처리할 때 매우 중요합니다. 기본 개념 JavaScript의 Date 객체를 사용하여 현재 날짜와 시간을 얻을 수 있습니다. 하지만 기본적으로 Date 객체는 전체 날짜와 시간 정보를 포함한 긴 문자열 형태로 날짜를 반환합니다. 때문에, 우리가 원하는 'YYYY-MM-DD' 형식으로 변환하는 추가 작업이 필요합니다. 단계별 구현 1. 현재 날짜 가져오기 먼저 new Date() 함수를 사용하여 현재 날짜와 시간을 포함한 Date 객체를 생성합니다. var today = new Date(); 2. 년, 월, 일 정보 추출 getFullYear(), getMon..

웹 공부 2024.01.11

HTML 태그 기본 가이드 - 레이아웃 및 텍스트 포맷팅

웹 페이지를 만들 때 HTML의 역할은 매우 중요합니다. HTML 태그는 웹 페이지의 구조를 정의하고, 콘텐츠를 표시하는 데 사용됩니다. 유용한 HTML 태그들을 간략하게 소개하겠습니다. 기본 구조 태그 : HTML 문서의 버전을 선언합니다. HTML5에서는 로 사용됩니다. : HTML 문서의 루트 요소입니다. 문서의 전체 내용을 감싸는 태그입니다. : 문서의 메타데이터, 스크립트, 스타일 시트 등을 포함하는 부분입니다. : 문서의 본문, 즉 실제로 화면에 표시되는 내용을 포함하는 부분입니다. 텍스트 포맷팅 태그 , , ..., : 제목을 나타내는 태그들입니다. 이 가장 크고 중요한 제목을 나타내며, 숫자가 커질수록 제목의 크기와 중요도가 줄어듭니다. : 문단을 나타냅니다. 텍스트의 블록을 구성합니다. ..

웹 공부 2024.01.10

React에 대한 전체적인 이해 - 혁신적인 프론트엔드 개발

React란 무엇인가? React는 Facebook이 2013년에 출시한 오픈 소스 JavaScript 라이브러리로, 웹 애플리케이션의 사용자 인터페이스를 구축하기 위해 사용된다. 이 라이브러리의 핵심 목적은 대규모 애플리케이션에서 데이터가 변경되어도 페이지를 새로고침하지 않고도 이러한 변경사항을 효율적으로 반영하는 것이다. 왜 ? React를 사용해야 하는가? React의 사용은 여러 이유로 인해 권장되는데, 가장 중요한 이유 중 하나는 그것이 제공하는 유연성과 효율성 때문이다. React는 컴포넌트 기반의 접근 방식을 사용하여, 개발자가 재사용 가능한 UI 부분을 만들 수 있도록 하며, 이것은 개발 과정을 단순화하고, 시간을 절약하며, 유지 보수를 용이하게 해준다. React의 주요 장점 컴포넌트 기..

React 2024.01.04

[공포영화] 프레디의 피자가게 - 젠옹의 리뷰 스토리

줄거리 “환상적이고 즐거움이 넘치는 프레디의 피자가게에 오신 걸 환영합니다!” 80년대에 아이들이 실종되고 폐업한지 오래된 프레디의 피자가게. 그곳의 야간 경비 알바를 하게 된 ‘마이크'는 캄캄한 어둠만이 존재하는 줄 알았던 피자가게에서 살아 움직이는 피자가게 마스코트 '프레디와 친구들’을 목격한다. 어딘가 기괴하고 섬뜩한 프레디와 친구들이 실체를 드러내기 시작하는데... 참조 - 나무위키 간략 내용 일터에서 매번 문제를 일으켜 얼마 일하지 못하고 짤리게 되는 '마이크' 새로운 일자리로 경비 일을 추천을 받지만, 야간근무라는 점에 거절한다. 이후 그는 이모와 이모가 고용한 변호사와 만나고 이모는 '애비'를 데려갈려고 한다. 경제적을 어려운 '마이크'가 여동생을 돌보는건 힘들기 때문에 자신들이 키우겠다고 ..

영화 리뷰 2023.11.17

[일본영화] 지브리 영화 그대들 어떻게 살 것인가 - 젠옹의 리뷰 스토리

그대들 어떻게 살 것인가 줄거리 화재로 어머니를 잃은 11살 소년 ‘마히토’는 아버지와 함께 어머니의 고향으로 간다. 어머니에 대한 그리움과 새로운 보금자리에 적응하느라 힘들어하던 ‘마히토’ 앞에 정체를 알 수 없는 왜가리 한 마리가 나타나고, 저택에서 일하는 일곱 할멈으로부터 왜가리가 살고 있는 탑에 대한 신비로운 이야기를 듣게 된다. 그러던 어느 날, ‘마히토’는 사라져버린 새엄마 ‘나츠코’를 찾기 위해 탑으로 들어가고, 왜가리가 안내하는 대로 이세계(異世界)의 문을 통과하는데…! 참조 - 나무위키 간략 내용 제2차 세계대전이 일어나게 되어 병원 화재로 어머니를 잃은 주인공 '마히토'와 새 출발을 하게 된 아버지는 어머니는 동생 '나츠코'와 재혼을 하게 되어 아버지와 함께 어머니의 고향으로 오게 되었..

영화 리뷰 2023.11.10

[일본영화] 그렇게 아버지가 된다 - 젠옹의 리뷰 스토리

이번에 가져온 영화는 " 그렇게 아버지가 된다 " 줄거리 그날 이후, 내가 알던 모든 것이 달라졌다 자신을 닮은 똑똑한 아들, 그리고 사랑스러운 아내와 함께 만족스러운 삶을 누리고 있는 성공한 비즈니스맨 료타는 어느 날 병원으로부터 한 통의 전화를 받는다. 6년 간 키운 아들이 자신의 친자가 아니고 병원에서 바뀐 아이라는 것. 료타는 삶의 방식이 너무나도 다른 친자의 가족들을 만나고 자신과 아들의 관계를 돌아보면서 고민과 갈등에 빠지게 되는데… 참고 - 나무위키 간략 내용 제가 영화를 선택할 때 많은 고민을 한 뒤 보게 되는 경향이 있는데요. 그 이유는 한번 재생을 한 순간 끝까지 보게 된다면 후회를 하고 싶지 않다는 마음 때문이지 않을까 싶어요. 그런것 처럼 이번 영화를 선택하게 된 이유는 줄거리를 보..

영화 리뷰 2023.11.09

[ReactNative] - rn-fetch-blob OR @react-native-community/cameraroll 사용하여 앱에 파일 저장하기

이미지 및 동영상 같은 파일을 다운 받아야 할 경우가 있다. 다운 받은 파일을 앱에서 특정 디렉토리에 저장시켜야 할 경우 경로를 찾아야 하기 위해 rn-fetch-blob라는 라이브러리를 활용할 수 있다. npm i rn-fetch-blob yarn add rn-fetch-blob 설치 한 뒤 원하는 경로를 찾아 지정을 하여 파일을 다운로드 해준다. const destinationPath = `${RNFetchBlob.fs.dirs.PictureDir}/${dateToString(date,)}.${movieExt}`; RNFetchBlob.config({ fileCache: true, appendExt: ext, path: destinationPath, }) .fetch('GET', imageUrl) ...

ReactNative 2023.11.03

[ReactNative] - rn-fetch-blob 사용시 cycle 이슈 해결방안

파일 관리를 위해 rn-fetch-blob라는 라이브러리를 사용하게 된다면 아마 밑에 같은 이슈를 보게 될 것 이다. 워닝 이슈라 작업에 대해 크게 문제는 없다만, 해당 오류가 계속 보이는게 신경쓰여 해결 방법에 대해 찾아보았다. Require cycle · Issue #183 · joltup/rn-fetch-blob Require cycle: node_modules/rn-fetch-blob/index.js -> node_modules/rn-fetch-blob/polyfill/index.js -> node_modules/rn-fetch-blob/polyfill/FileReader.js -> node_modules/rn-fetch-blob/index.js It is ... github.com 다행이 해결 ..

ReactNative 2023.11.03

[ReactNatvie] react-native-image-viewing를 사용하여 이미지 슬라이드안에 동영상도 넣을 수 있을까?

React Native에서 이미지 슬라이드 모달창을 쉽게 만들 수 있는 방법이 react-native-image-viewing를 사용하는 방법이 있다. npm install react-native-image-viewing yarn add react-native-image-viewing 해당 라이브러리를 설치 후 import ImageView from "react-native-image-viewing"; // 이미지 항목 배열 const imageItems = [ { uri: "IMG_URL" }, { uri: "IMG_URL" }, // ... ]; // 모달 열기 상태 관리 const [isImageViewVisible, setImageViewVisible] = useState(false); const..

ReactNative 2023.11.03
반응형