.mjs Vs .js 원래 Node.js의 모듈 시스템은 commonjs를 사용했습니다(require과 module.exports를 사용하는..) 그러다가 ECMAscript 모듈 시스템이 표준이 되었고, Node.js는 이를 지원하게 되었습니다. Node.js 는 .cjs 파일로 commonjs 모듈 시스템을 지원했고, .mjs파일로 ECMAsript 모듈 시스템을 지원했습니다. 그러고 js파일은 둘 다 모두를 지원하게 되었습니다. (default는 commonjs) (package.json에 "type" :"module"쓰면 ecma 모듈 지원) .JS const b = require("./main2.js"); console.log(b.a); 받아오는 js function hello() { retur..

https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com link 복사 Hello, world! 번역된 부트스트랩 https://getbootstrap.kr/ Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, ..

null: 사용자가 값이 없다는 걸 의도적으로 표기할 때 사용 undefined: 사용자가 값이 없다는 걸 표기하기보다, 코드를 실행했는데 값이 없을 경우 사용

truthy한 값: falsy한 값 true: false 0을 제외한 모든 숫자 (음수, 소수 포함): 0 ''을 제외한 모든 문자열 (공백으로만 이루어져 있는 문자열 포함):'' -:null -:undefined

숫자로 변환Number() 문자열로 변환String() 불린으로 변환Boolean()

자료형설명예시 숫자형정수와 소수1, -2, 3.832 문자열글자'JavaScript', '*%&^$', '' 불린형참과 거짓 둘 중 하나의 값을 가짐true, false null값이 없다는 것을 의도적으로 표현null undefined코드를 실행했는데 (변수에) 값이 없을 경우undefined

relative, sticky는 요소의 원래 자리를 차지하기 때문에 플렉스박스의 영향을 받음 absolute랑 fixed는 요소의 원래 자리에서 쏙 빠져버리기 때문에 글의 흐름에서 빠지는 거랑 마찬가지로, 플렉스박스랑 상관없이 배치됨

..

값이 비어있을 때 보여주는 값 placeholder input::placeholder { color: #dddddd; } 반드시 입력해야 하는 값 required 자동 완성 autocomplete https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

post 방식 데이터 확인 사이트 Request Bin(https://requestbin.com/)

이미지 비디오 자동 재생을 하는 autoplay 속성, 음소거를 하는 muted, 조작하는 버튼들을 보여 주는 controls 속성 오디오 자동 재생을 하는 autoplay 조작하는 버튼들을 보여 주는 controls 속성 iframe 인라인 프레임이라는 뜻으로, 다른 HTML 문서를 문서 안에 집어넣을 때 사용합니다.

Premium Standard Basic 화질 최대 FHD HD 다운로드 무제한 월 30회 불가 ₩15,900 ₩10,900 ₩8,900 table { border: 1px solid red; /* 표 전체의 테두리를 빨간색으로 */ } th { border: 1px solid green; /* 제목 셀의 테두리를 초록색으로 */ } td { border: 1px solid blue; /* 각 셀의 테두리를 파란색으로 */ } table { border: 1px solid red; border-collapse: collapse; /*테두리 겹치기 */ } th { border: 1px solid green; } td { border: 1px solid blue; } table { border: 1px s..

캐스케이드(Cascade) 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 의미 스타일 시트의 종류 브라우저에서 기본으로 제공하는 스타일시트(User Agent Stylesheet)는 똑같은 선택자를 쓰고 있다면 우리가 작성한 코드보다 우선순위가 낮습니다. 코드 상의 순서 코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높습니다. 명시도 선택자마다 명시도 점수가 있는데요. 간단히 말해서 아이디 개수, 클래스 개수, 태그 개수를 적어서 점수를 비교합니다. 상속 부모 태그에 적용된 CSS 규칙은 자손에게도 상속되는데요. 모든 속성이 상속되는 건 아니고, 상속되는 속성들이 정해져 있습니다. 상속된 속성의 우선순위 조상 태그들에서 스타일이 모두 계산된 상..

let vvv; console.log(vvv); // undefined vvv= null; console.log(vvv); // null null: 사용자가 값이 없다는 걸 의도적으로 표기할 때 사용 undefined: 사용자가 값이 없다는 걸 표기하기보다, 코드를 실행했는데 값이 없을 경우 사용됨 변수에 undefined를 할당해도 오류가 나지는 않음 let vvv = undefined; console.log(vvv); // undefined 변수에 아무 값도 할당하지 않으면 어차피 undefined가 되기 때문에 이건 불필요한 코드 변수는 값이 없다는 걸 의도적으로 표현하기 위해서는 undefined 대신 null을 사용

전체 선택자 (Universal Selector) * 라는 선택자는 모든 요소를 선택하는 선택자입니다. 모든 요소를 선택하기 * { box-sizing: border-box; } .gallery의 모든 자식 요소 선택하기 .gallery > * { width: 120px; height: 90px; } n번째 자식 선택자(n-th child Selector) :nth-child()를 사용합니다. 괄호 안에는 숫자나 even, odd, 2n 같은 값이 들어갈 수 있는데요. 혹시 다른 프로그래밍 언어를 쓰신 경험이 있다면 0부터 시작할 거라고 생각하실 수도 있지만, 여기서는 1부터 시작합니다. (첫 번째 자식은 1이고, 세 번째 자식은 3임) .gallery의 세 번째 자식 .gallery :nth-child..

CSS 선택자(CSS Selector) CSS 규칙에서 맨 앞에 적어 주는 걸 CSS 선택자라고 부릅니다. 선택자를 사용해서 이 규칙을 어떤 요소들에 적용할지 선택할 수 있습니다. 선택자 { 선언; 선언; 선언; } 선택자 목록 콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있습니다. 선택자1, 선택자2 { ... } 선택자 붙여 쓰기 여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 쓸 수 있습니다. 예를 들어서 아래 HTML 코드에 있는 태그를 선택해 볼게요. 몽골 대자연으로 떠나는 여행 예시 1. 아이디 + 클래스 #mongolia.title 예시 2. 클래스 + 클래스 .large.title 예시 3. 태그 + 아이디 + 클래스 h2#mongolia.larg..

npm install @next/font 로 설치 후 ​ import { Noto_Sans_KR } from "@next/font/google"; import Head from "next/head"; ​ const notoSansKR = Noto_Sans_KR({ weight: ["400", "700"], subsets: [], }); ​ ​ {` html { font-family: ${notoSansKR.style.fontFamily}, sans-serif; } `}

npm install --save-dev http-proxy-middleware 백엔드와 프론트 앤드를 같은 도메인으로 운영하기 위해 사용 setupProxy.js const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: "http://localhost:3001", changeOrigin: true, }) ); };

npm install react-helmet --> 설치가 필요 javascript 아래와 같이 표현 document.title = 'header title'; react 문법 예시 import { Helmet } from 'react-helmet'; header title react-helmet - npm

VS Code 실행 후 파일 > 기본설정 > 확장 메뉴를 클릭한다. 색창에서 live server를 검색 후 설치버튼을 클릭한다. 새파일 아이콘을 클릭 후 파일명에 test.html을 입력하여 html 파일을 생성한다. 좌측 코드 탭에서 html:5를 입력하면 자동완성이 되는데 엔터를 쳐서 기본 코드를 생성한다. 좌측 코드 탭을 우클릭한 후 Open with Live Server 메뉴를 클릭한다. show preview를 볼수 있다.

http://jqueryui.com/demos/

1. vue 정의 자바스크립트로 개발된 컴포넌트 구조 기반 프론트엔드 프레임워크 ​ 2. vue router ​ Vue 기반 애플리케이션은 흔히 SPA(Single Page Application, 한 화면으로 구성된 애플리케이션을 말한다)로 구성되는데, 이때 한 페이지 내에서도 다른 페이지로 이동할 필요 없이 마치 여러 개의 페이지가 있는 듯한 방식으로 작동하게 해 주는 것이 바로 Vue Router이다 ​ ​ #vue

코드펜은 이름에서 알 수 있듯이, 간단히 코드를 작성해서 실행해보고 공유할 수 있는 서비스입니다. codepen.io로 접속 ​ https://codepen.io/

window 에서 cmd 창을 열어준다. ​ 초기세팅 ​ 기본적으로 node.js, npm은 설치가 되어 있어야 합니다. ​ npm init react-app [폴더이름] npm init react-app . -->폴더 안에서 프로젝트 생성하기 npm run start --> 프로젝트 개발 모드 실행하기 ​ ​ ctrl + c--> 프로젝트 개발 모드 실행 종료하기 ​ 2. 크롬에 react 개발자 도구 세팅하기 ​ react developer tools -> 구글 검색 크롬 확장 프로그램 설치하기 구글 개발자 도구에서 components 탭 클릭 ​ 3. 빌드하기 , 빌드 후 확인 실행 ​ npm run build --> 빌드 하기 ​ npx serve build --> 빌드 한 부분 서버 실행 ctr..

파이썬 인터렉티브 모드 파이썬 파일이 없이도 파이썬 실행하기 cmd 창에서 python 명령어를 치면 인터렉티브 모드로 변경됨 quit() 명령어로 인터렉티브 모드 종료

파이썬 파일이 있는 폴더에서 python .[파이썬 파일명].py

# w 는 덮어쓰기 a 기존 데이터에 추가로 작성하기 with open("data/new_file.txt", 'w') as f: f.write("new test file\n")

기본 옵션 open("data/chicken.txt", 'r') 한글이 있는 경우 with open("data/chicken.txt", 'r', encoding='utf-8') as f: for line in f: print(line.strip())

strip : 문자열의 중간 공백은 나두고 앞 뒤의 공백, \t, \n 을 모두 지워줌 str.strip() 선행과 후행 문자가 제거된 문자열의 복사본을 돌려줍니다. chars 인자는 제거할 문자 집합을 지정하는 문자열입니다. 생략되거나 None 이라면, chars 인자의 기본값은 공백을 제거하도록 합니다. chars 인자는 접두사가 아닙니다. 모든 값 조합이 제거 됩니다. str.strip([chars]) >>> ex_str = " hello " >>> ex_str.strip() # 'hello' >>> 'http://www.example.com'.strip('m') # 'http://www.example.co' >>> 'http://www.example.com'.strip('w') # '.exampl..