타코딩

npm i mongodb 몽고디비설치 const { MongoClient, ServerApiVersion } = require("mongodb"); const uri = "mongodb+srv://admin:qwer1234@admin.eepuvsg.mongodb.net/?retryWrites=true&w=majority"; // Create a MongoClient with a MongoClientOptions object to set the Stable API version const client = new MongoClient(uri, { serverApi: { version: ServerApiVersion.v1, strict: true, deprecationErrors: true, }, }); as..

서버컴포넌트,클라이언트컴포넌트 컴포넌트 사용이유 : 더러운코드축약,같은코드재사용 서버컴포넌트: JavaScript의 서버 컴포넌트 는 클라이언트의 브라우저로 전송되기 전에 서버 측에서 처리되고 렌더링되는 응용 프로그램의 요소 또는 부분을 나타냅니다. 이러한 컴포넌트 는 서버에서 동적으로 생성되어 일반적으로 클라이언트 요청에 대한 응답으로 HTML로 전송됩니다. 정적이거나 자주 변경되지 않는 콘텐츠를 렌더링하는 데 유용합니다. Next.js와 같은 프레임워크는 서버 컴포넌트 를 활용하여 페이지를 사전 렌더링하여 초기 로드 시간과 SEO를 개선합니다. 요약 : 서버컴포넌트는 자바스크립트 기능을 집어넣을수없음 ex onclick,usestate 등 but 서버컴포넌트는 로딩속도가 더 빠르고 검색엔진 노출의 이..

import { age, name, hello } from "./data.js"; /* "use client" */ export default function Cart() { let 장바구니 = ["tomato", "pasta"]; return ( Cart ); } //1.더러운코드축약 //같은코드재사용 //서버컴포넌트,클라이언트컴포넌트 //"use client"; //차이는 서버컴포넌트는 자바스크립트 기능을 집어넣을수없음 ex onclick,usestate 등 but 서버컴포넌트는 로딩속도가 더 빠르고 검색엔진 노출의 이점이 있음 //클라이언트 컴포넌트는 가능함 이걸로 페이지를 만들어버리면 자바스크립트 파일일 많아져서 무거워짐, hydration 필요(리액트 문법을 html을 유저한테 쏴준다음에 분석하..

Node.js 패키지 관리자인 npm을 사용하면 Next.js를 설치하는 것이 매우 간단합니다. 먼저 시스템에 Node.js가 설치되어 있는지 확인해야 합니다. 설치 - npx create-next-app@latest - npm run dev 실행 페이지 라우팅 - app 하위경로로 폴더생성하면 그게 바로 url로 적용이 된다. page.js라고 폴더하위에 작성하면 해당폴더의 index 파일로 자동 반영이 됨 - 공통 레이아웃 적용 넵바나 푸터 같은 공통레이아웃은 layout.js로 반영한다 layout.js에 포함된 공통레이아웃은 자신을 포함한 하위 컴포넌트에 모두 적용된다 import { Inter } from "next/font/google"; import "./globals.css"; import..

npx create-next-app@latest 설치 npm run dev 실행 페이지 라우팅 app 하위경로로 폴더생성하면 그게 바로 url 로 적용이 된다. page.js라고 폴더하위에 작성하면 해당폴더의 index 파일로 자동 반영이됨 공통 레이아웃 적용 넵바나 푸터 같은 공통레이아웃은 layout.js로 반영한다 import { Inter } from "next/font/google"; import "./globals.css"; import Link from "next/link"; const inter = Inter({ subsets: ["latin"] }); export const metadata = { title: "Create Next App", description: "Generated b..

CREATE TABLE dump.book99 LIKE blog.book99; INSERT INTO dump.book99 SELECT * FROM blog.book99; dump 데이터베이스의 book 99 테이블은 blog 데이터베이스의 book99 테이블을 복사하여 만든다 라는 명령어임

import React, { useEffect, useState } from "react"; import Header from "../components/Header"; import styled from "styled-components"; import { motion } from "framer-motion"; import { Link, useNavigate } from "react-router-dom"; import { IoArrowBack } from "react-icons/io5"; import StatusBar from "../components/StatusBar"; import { io } from "socket.io-client"; import { useForm } from "react-hoo..

npm init npm i express npm i nodemon npm i cors npm i mysql2 { "name": "server", "version": "1.0.0", "description": "", "main": "app.js", "type": "module", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "app.js" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.18.2" } } "type": "module", "start": "app.js" 모듈타입과 start경로 추가 import express, { urlenco..

프론트 { FileUpload(e); }}> form 을 작성한다 input type은 file , accept 는 'image/*' (이미지 업로드 허용한다는 뜻임) audio,나 video도 가능함 const FileUpload = (e) => { console.log(e.target.files); } change 이벤트로 e.target.files 찍어보면 서버 import express from "express"; import { upload } from "../controller/uploadController.js"; const router = express.Router(); router.post("/", upload); export default router; post 요청 server.use..

문제 예전에는 운영체제에서 크로아티아 알파벳을 입력할 수가 없었다. 따라서, 다음과 같이 크로아티아 알파벳을 변경해서 입력했다. 크로아티아 알파벳 변경 č c= ć c- dž dz= đ d- lj lj nj nj š s= ž z= 예를 들어, ljes=njak은 크로아티아 알파벳 6개(lj, e, š, nj, a, k)로 이루어져 있다. 단어가 주어졌을 때, 몇 개의 크로아티아 알파벳으로 이루어져 있는지 출력한다. dž는 무조건 하나의 알파벳으로 쓰이고, d와 ž가 분리된 것으로 보지 않는다. lj와 nj도 마찬가지이다. 위 목록에 없는 알파벳은 한 글자씩 센다. 입력 첫째 줄에 최대 100글자의 단어가 주어진다. 알파벳 소문자와 '-', '='로만 이루어져 있다. 단어는 크로아티아 알파벳으로 이루어져 ..