미미의 메모장

SQL SELECT, ORDER BY SQL: Structured Query Language 데이터베이스 조작에 필요한 언어 데이터 삽입데이터 출력데이터 삭제데이터 수정조건문, 반복문, 함수, 변수등  프로그래밍 가능 후 New script 클릭 테이블 데이터 출력SELECT * FROM 테이블명 특정 컬럼만 출력하는 법SELECT 컬럼명, 컬럼명 FROM 테이블명 출력한 데이터 정렬하는 법SELECT  * FROM 테이블명 ORDER BY 컬럼명 ASC/DESC 엑셀 파일 불러올 때,인코딩 euc-kr로 바꿔야 한글 안깨짐 원하는 행(ROW)만 출력하고 싶으면 SELECT *  FROM 테이블명 WHERE 조건식(ex.컬럼명 = '값', 카테고리='가구')조건식에 여러가지 비교 연산자 사용 가능 =,!..

DBeaver 같은 GUI 툴 쓰는게 편함  /강의 출처: 코딩애플/

웹소켓이란? 유저와 서버가 양방향으로 데이터 전송 할 수 있는 기능 1. server.js 파일 생성 2. 터미널에 npm init (서버 만들어 주는 라이브러리) 3. 터미널에서 npm install express wx (웹 소켓 연결을 뚫어주는 라이브러리) 4. server.js에 웹서버 만들기 const express = require('express'); const app = express(); app.use("/", function(req, res) { res.sendFile(_dirname + '/index.html'); }); app.listen(8080); 5. index.html 만들기 Hello world 6.node server.js 실행 7. 웹소켓 열기 const express =..

자바스크립트는 타입에 관대하다 예를들어, 3-'2' 해도 타입을 알아서 변환해주어 에러가 나지 않는다. Dynamic typing 을 지원하는 언어이기 때문이다. 큰 프로젝트 할 때는 Typescript가 더 유용하다. 에러 메세지가 상세하다. 🎈타입스크립트 사용 방법 1. Nodejs 최신 버전, VScode 에디터 설치 2. VScode 오픈 후 터미널에 아래 명령어 입력 npm install -g typescript 브라우저는 ts 파일 못 읽는다. 터미널에서 tsc -v 명령어 치면 자동으로 js로 컴파일 해준다. 변수 만들때 타입 지정 let 이름 :string = 'son' array 혹은 object 자료는 let 이름 :string[] = ['son', 'park'] let 나이 :{ ag..

원하는 폴더에에서 아래 명령어 실행 https://nextjs.org/docs/getting-started/installation npx create-next-app@13.2.4 --experimental-app tailwindcss 추가 (참고: https://tailwindcss.com/) ==> 최신 버전은 이미 포함 되어 있다. yarn add -D tailwindcss postcss autoprefixer npx tailwindcss init -p src directory 사용하므로 tailwind.config.js에 content에 추가 해주기 ["./src/**/*.{html,js,ts,jsx,tsx}"] globals.css 에 추가 @tailwind base; @tailwind compo..

CMS : Content Management System 컨텐츠를 관리하는 시스템의 약자 머리가 없는, CMS 즉, Front-end가 없는 Body(데이터를 저장하는 것을 담당하는 것을 CMS라고 함) 즉 Back-end만 가지고 있는 웹 컨텐츠 매니지먼트 시스템의 약자. 주로 컨텐츠를 보관하고 있는 저장소 역할을 한다. 데이터를 저장하고 변경하기 위해서는 API를 사용해야 한다. 랜더링을 어디서 어떤 방식으로 할 건지는 자유 자재로 할 수 있다. => WordPress, Strapi, Sanity(만족도가 가장 높다) Sanity를 사용해서 데이터를 저장하면 Content Lake 클라우드에 데이터에 저장된다. 1. Sanity Studio를 통해 관리할 수 있다. (개발자 모드, 관리자용 콘솔 UI..

캐러셀 라이브러리 yarn add react-multi-carousel 마크다운 뷰어 npm install react-markdown yarn add remark-gfm 테일윈드 타이포그래피 npm install -D @tailwindcss/typography tailwind.config.js에 아래 내용 추가 plugins: [require("@tailwindcss/typography")], react icon yarn add react-icons react-syntax-highlighter yarn add react-syntax-highlighter yarn add -D @types/react-syntax-highlighter node mailer (yup:유효성 검사) yarn add yup nod..

서버 컴포넌트 app 폴더에 있는 모든 컴포넌트 들은 기본적으로 서버 컴포넌트이다. 별도로 설정하지 않는 이상 서버에서 실행됨. 로딩 속도 빠름 자바스크립트 기능 넣을 수 없다. useState, useEffect등 사용 불가 검색 엔진 노출도 이점이 있을 수 있다. 그래서 node API 사용할 수 있으나 브라우저 API는 사용 못 함(메모리, 로컬호스트, 상태관련된 것들) 서버 구성 요소를 사용하면 초기 페이지 로드가 더 빨라지고 클라이언트 측 JavaScript 번들 크기가 줄어든다. 기본 클라이언트 측 런타임 환경은 캐시 가능하고 크기를 예측할 수 있어서 애플리케이션 규모가 커진다고 해서 번들링되는 사이즈가 커지지 않으니까 성능이 좋다. JavaScript는 클라이언트 구성 요소를 통해 애플리케이..

라우팅이란? 네트워크상에서 주소를 이용하여 목적지까지 메시지를 전달하는 방법을 체계적으로 결정하는 경로선택 과정 정적 라우팅 app 에서 폴더 별로 page.txs 만들면 됨 고정된, 지정된 경로 별로 라우팅 된다. 동적 라우팅 골격은 그대로, 키워드 별로 해당하는 데이터를 보여주는 것 [키워드] 로 폴더 만듬. 키워드는 임의대로. 페이지 미리 생성하고 싶다면 generateStaticParams 사용 기본적으로 모든 페이지를 Pre-rendering 한다. HTML 페이지를 미리 생성해 두고, HTML에 필요한 최소한의 자바스크립트 코드도 함께 브라우저에서 다운로드 받는다. HTML 페이지가 브라우저에 로딩이 되었을 때, 최소한의 자바스크립트 코드를 받아서 페이지를 fully interactive 하게..

Next.js는 웹 애플리케이션을 구축하기 위한 프레임워크 Next.js를 사용하면 React 구성 요소를 사용하여 사용자 인터페이스를 구축할 수 있다. 그런 다음 Next.js는 애플리케이션에 대한 추가 구조, 기능 및 최적화를 제공 또한 내부적으로 Next.js는 번들링, 컴파일 등과 같은 도구를 추상화하고 자동으로 구성한다. 이를 통해 도구 설정에 시간을 소비하는 대신 애플리케이션 구축에 집중할 수 있다. 개인 개발자이든 대규모 팀의 일원이든 관계없이 Next.js는 대화식의 동적이며 빠른 웹 애플리케이션을 구축하는 데 도움이 될 수 있다. https://nextjs.org/docs/getting-started/installation Getting Started: Installation | Next..