비전공자 개발일기

// import _ from 'lodash' // From 'node_modules' // import { random, user as tony } from './getRandom.js'// getRandom.js // import getType from './getType.js' // getType.js // (한번에 가져오기) import * as R from './getRandom.js' // console.log(_.camelCase('the hello world')) // theHelloWorld // console.log(getType([1, 2, 3])) // Array // console.log(random(), random()) // console.log(tony) // (한번에 가져오..

관련 내용 참고 https://developer.mozilla.org/ko/docs/Web/JavaScript JavaScript | MDN JavaScript (JS)는 경량, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼 많 developer.mozilla.org Javascript data type: String(' ', " ", ` `), Number, Boolean(True, False), undefined, null, Array([ ]), Object( { }) 1. String const result = 'Hello wor..

작업 환경 구성 (VS code) Npm init -y Npm i-D parcel-bundler Package.json -> script 수정 ("dev" : "parcel index.html", "build": "parcel build index.html") SCSS 연결 npm i -d sass SCSS => CSS 변환 확인 사이트 https://www.sassmeister.com/ SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com SCSS에서 나누기(몫)을 할 때, 괄호 사용 ex) margin: (30px ..

NPM Project - Bootstatp 1. 준비 (NPM 준비 후) 터미널에서 npm install bootstrap@next 2. SCSS 생성(폴더 및 파일) 3. Javascript 연동 연동 확인

1. 산술 연산자 console.log(1 + 2)// 덧셈 console.log(5 - 7) // 뺄셈 console.log(3 * 4)// 곱샘 console.log(10 / 2) // 나눗셈(몫) console.log(7 % 5) // 나눗셈(나머지) 2. 할당 연산자 let a = 2 a += 1 // a = a + 1 a -= 1 // a = a - 1 a *= 1 // a = a * 1 a /= a // a = a / 1 a %= 1 // a = a % 1 console.log(a) 3. 비교 연산자 const a = 1 const b = 3 console.log(a === b) // 일치 연산자 console.log(a !== b) // 불일치 연산자 console.log(a < b) con..

Node.Js: Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임(프로그래밍 언어가 동작하는 환경) 설치(In Windows) 1) https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS ver 다운로드(안정적이고 신뢰도 높음) 2) https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go...

표기법 dash-case(kebab-case) snake_case camelCase PascalCase 데이터 종류(자료형) String: 문자 데이터, 따옴표를 사용 let myName = "ABC"; let email = 'abc@abc.com'; let hello = `Hello ${myName}??`; console.log(myName); // ABC console.log(email); // abc@abc.com console.log(hello); // Hello ABC?? Number: 숫자 데이터, 정수 및 부동 소수점 숫자 let num = 123; let opacity = 1.57; console.log(num); // 123 console.log(opacity); // 1.57 Boole..

CSS 속성(Properties) 박스 모델 글꼴 & 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 1. 박스 모델( 내부 & 외부 여백, 가로 & 세로 등) width / height : 요소의 가로 / 세로 너비 기본값(요소에 이미 들어있는 속성의 값): auto(브라우저가 너비를 계산) 단위: px, em, vw 등 span(인라인 요소) vs div(블록 요소) span(인라인 요소) div(블록 요소) 가로 콘텐츠의 크기만큼 자동으로 줄어듬 부모 요소의 크기만큼 자동으로 늘어남 세로 콘텐츠의 크기만큼 자동으로 줄어듬 콘텐츠의 크기만큼 자동으로 줄어듬 max-width / max-height: 요소가 커질 수 있는 최대 가로 / 세로 너비 기본값: none(최대 너비 ..