본문 바로가기

반응형

Web Dev

(106)
Node.js에서 mongoose 사용하여 MongoDB 연동 하는 방법 요로코롬 [MongoDB Atlas 접근] [MongoDB Atlas 로그인] [MongoDB Atlas Project 생성] [MongoDB Atlas Cluster 생성] [ 필히 공짜 버전으로 세팅하세요 ! ] [MongoDB Atlas Cluster 연결] [ 본인 아이피도 꼭 등록해야 합니다. 페이지에서 자체적으로 알려줄 거예요] [MongoDB Atlas Cluster 연결 Url] mongodb+srv://ghwnsgkgk:@cluster0.nhafe7u.mongodb.net/?retryWrites=true&w=majority [해당 url 확인 및 생성한 id pw 적용] 물론 npm install mongoose 해야 한다 const mongoose = require("mongoose"); con..
Java Spring Ajax 문법으로 DB 데이터 가져와서 화면에 보여주는 방법 https://genesis8.tistory.com/214 DAO / VO / DTO란? 원본 출처 : http://lbass.tistory.com/entry/DAO-%EB%9E%80 http://choijaehyuk.com/128 http://everyit.tistory.com/4 DAO란 Data Access Object의 약어로서 실질적으로 DB에 접근하는 객체를 말한다. DAO의.. genesis8.tistory.com DAO =DTO ? /* 메일 주소록 조회 : mailDAO.selectCompanyGroupUserList */ SELECT AA.USER_NM , AA.EMAIL , ISNULL(AA.GROUP_NM, '-') AS GROUP_NM , AA.MAIL_GRP_IDX , AA.GR..
[Javascript] 웹페이지에 현재 날짜 제공하는 Date() 생성자 toLocaleDateString 함수 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/Date Date() 생성자 - JavaScript | MDN Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성합니다. Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는 UNIX developer.mozilla.org if (content) { var currentDate = new Date(); var formattedDate = currentDate.toLocaleDateString("ko-KR", { year: "2-digit", month: "2-digi..
JavaScript 배열에서 요소 추가, 삭제 및 교체: splice 함수 사용법 JavaScript에서 배열은 데이터를 효과적으로 관리하는 중요한 데이터 구조 중 하나입니다. 배열의 요소를 조작하려면 내장 함수 중 하나인 splice를 사용할 수 있습니다. splice 함수는 배열의 특정 위치에서 요소를 추가, 삭제 또는 교체할 수 있는 강력한 도구입니다. 이 함수를 사용하여 배열을 다양한 방식으로 변형할 수 있으며, 이 글에서는 splice 함수의 사용법을 자세히 살펴보겠습니다. 1. 요소 삭제 splice 함수를 사용하여 배열에서 요소를 삭제하는 방법을 알아보겠습니다. 예를 들어, 다음과 같은 배열이 있다고 가정해 봅시다. var fruits = ["사과", "바나나", "체리", "딸기"]; 이 배열에서 "바나나"와 "체리"를 삭제하려면 다음과 같이 splice 함수를 사용할 ..
Next.js HTML 파일 JSX 형식으로 변환하는 방법 https://www.youtube.com/watch?v=eHB6hMiv0lw html로 대부분 작업된 웹 개발 환경을 너무너무너무 react 환경으로 바꾸고 싶은데 나는 프론트앤트 , 퍼블리셔가 아니라서 html을 react로 치환하고 있을 시간이 없어 해당 방법을 알아보았다 그렇다고 멋진 백엔드도 아니니까 결국 게을러서 ...... 코딩 is 심플 .... 일단 위의 방법을 따라하면 상용된 HTML 또는 현재 사용중인 웹 페이지에서 해당 html을 가져온다 https://bubble.io/templates Templates for Bubble Buy and sell Bubble template to speed up app development. Bubble is a visual programing l..
Quill editor 홈페이지에 적용 하는 방법 너무 쉬워요 !! https://quilljs.com/docs/quickstart/ Quickstart - Quill Quickstart The best way to get started is try a simple example. Quill is initialized with a DOM element to contain the editor. The contents of that element will become the initial contents of Quill. Hello World! Some initial bold text var quill = new Quill quilljs.com 빠르게 사용해보기 npm install quill@1.3.6 일단 설치 ! Hello World! Some initial bold ..
React.js 파일 업로드 풀스택으로 구성하는 방법 여기서 확인하세요 ! // 1. 사용자가 이미지를 업로드 // 2. 업로드한 이미지를 받아서 서버에서 저장 // 3. 저장한 이미지의 경로를 다시 클라이언트에게 전송 // 4. 경로를 받아서 post model에 저장 // 1. 사용자가 이미지를 업로드 FRONTEND import React from 'react' import { Form } from 'react-bootstrap' import axios from 'axios' function ImageUpload() { // 1. 사용자가 이미지를 업로드 // 2. 업로드한 이미지를 받아서 서버에서 저장 // 3. 저장한 이미지의 경로를 다시 클라이언트에게 전송 // 4. 경로를 받아서 post model에 저장 const FileUpload = (e) => { conso..
React 함수형 컴포넌트 생성 단축키 rafce , rfce + Extension VScode 에는 매우 좋은 extension 들이 많이 있습니다. 단축키를 통해 함수형 컴포넌트 생성을 빠르게 하고 싶으면 설치해야할 extension이 있습니다. 마켓에서 react 를 검색하여 나오는 최 상위 extension을 설치해줍니다. 이처럼 약자만 입력해도 코드를 출력할 수 있습니다. rafc import React from 'react' export const page = () => { return ( page ) } 제시해주신 코드는 JavaScript의 React 라이브러리를 사용한 함수형 컴포넌트입니다. 이 컴포넌트는 "page"라는 문자열을 화면에 렌더링하는 간단한 페이지 컴포넌트입니다. React는 UI를 구성하기 위한 JavaScript 라이브러리로, 컴포넌트 기반의 접근 방식..

반응형