본문 바로가기

MegabyteSchool31

JS 표준 내장 객체 - String 메서드 String .charCodeAt() / String.fromCharCode(아스키번호) .includes(str) .indexOf(str) .match(RegExp) .padStart() / .padEnd() .replace() .slice(시작 인덱스, 끝 부분의 다음 인덱스) .split('구분자') / .join('구분자') .startsWith() .substring(begin index) / .substring(begin index, end index) toUpperCase() / toLowerCase() .trim() . 2022. 10. 28.
번들러(Bundler) Parcel 번들러의 종류 : Parcel, Webpack, Rollup ... 순수하게 HTML, CSS, JS를 가지고 웹페이지를 만드는데 있어서는 비효율적인 부분이 있기 때문에 다양한 라이브러리를 사용해 작성하게 되지만, 그 라이브러리들이 직접 그 기능을 수행하는게 아니고 그 라이브러리를 통하여 작성된 코드를 가지고 다시 HTML, CSS, JS로 변환하는 작업을 거쳐 웹페이지가 작성된다. 각 라이브러리를 번들러를 통하여 동작할 수 있도록 변환시켜준다. 하지만 번들러가 모든 것을 변환시켜줄 수 없기 때문에 외부 패키지(ex. sass, postcss, typescript, @babel/core, vue-template-compiler 등을 자동으로 설치해준다. Parcel : 구성 옵션 없는 단순한 자동 번들링.. 2022. 10. 19.
SCSS 시작하기 npm init -y 전체 yes로 npm 시작 => 왼쪽 사이드바에서 package.json 파일 생성되는 것 볼 수 있음 npm i -D parcel-bundler 개발 의존성 모듈로 parcel-bundler를 설치 => 왼쪽 사이드바에서 node_modules 폴더와 package-lock.json 파일이 생성된 것을 볼 수 있음 parcel-bundler를 실행해서 프로젝트를 브라우저에 오픈할 수 있게 "scripts": { } 안에 "dev": "parcel index.html" 라고 작성해서 dev 라는 명령으로 parcel이라는 명령어에 index.html을 연결해서 실행할 것이라고 설정(개발 서버)한다. "build": "parcel build index.html" 라고 작성해서 parc.. 2022. 10. 14.
CSS animation 속성 animation 속성은 요소에 애니메이션을 제어하는 기능을 한다. 아래 코드에서 확인할 수 있듯이, 이 제어될 animation은 @keyframes이라는 CSS 규칙을 통해서 만들어지고, animation의 이름과 속도, 진행 방식들을 CSS animation 속성의 값으로 하여 설정한다. cf. CSS에서는 밀리세컨드(밀리초) 단위가 아닌 세컨드(초) 단위로 값을 지정한다 ! => @keyframes로 애니메이션 이름을 지정한다. => 애니메이션의 지속 시간을 설정한다. => 타이밍 함수를 지정한다. => 애니메이션의 대기 시간을 설정한다. => 애니메이션의 반복 횟수를 설정한다. => 애니메이션이 반복될 때의 방향을 설정한다. => 애니메이션의 전후 상태나 위치를 설정한다. => 애니메이션의 재생.. 2022. 10. 12.
JS 생성자 함수, prototype 속성 new라는 키워드를 함수 앞에 붙이면 그 함수는 생성자 함수가 되고, 생성자 함수는 함수에 입력된 인자 값들을 가지고 원래의 함수 작업을 동일하게 해내도록 한다. 위의 user라는 함수는 첫번째 인자를 받아 이 객체의 firstName이라는 변수에 그 인자 값을 할당하고, 두번째 인자를 받아 이 객체의 lastName이라는 변수에 그 인자 값을 할당하여 이루어진 객체 데이터를 생성한다. new 키워드로 생성자 함수가 된 user는 함수의 두 개의 인자 값만 받으면, 위에서 선언된 user 함수에 따라 자동으로 객체 데이터가 생성되는 것이다. 이 때 키는 firstName과 lastName이고, 각각의 키의 값은 Merry와 Jang, Amy와 Chandler, venom과 Pink인 객체 데이터가 use.. 2022. 10. 4.
웹 사이트 클로닝을 통한 HTML과 CSS (실습) position: fixed 를 통한 요소의 배치는 브라우저에 뷰포트를 기준으로 배치하겠다는 의미이다. width, height는 기본값이 auto이다. (기본값은 외워두는 게 좋다 !) 따로 width, height 값을 명시하지 않으면, 기본값인 auto 값을 갖게 된다. position: fixed와 position: absolute로 배치하면 가로 너비(width)가 최소한으로 늘어나려고, 즉 최대한 내용만큼만의 너비로 줄어든다 ! cf. 원래 블록 요소는 가로 너비가 최대한으로 늘어나려는 성질을 갖고 있다. width: 100%로 주면 최소한으로 줄어들어 화면이 보여지려 하는 것을 정상적으로 보이게 해 준다 ! lodash 라이브러리 https://cdnjs.com/libraries/lodash.. 2022. 9. 30.
HTML과 JS 상호작용 (실습) JS에서 HTML의 요소를 가져와 변수에 그 요소를 담을 수 있다. 보통은 const(상수와 같은 변수)로 담고, 추후 다른 값을 할당해야할 것 같은 경우에는 let(재할당 가능한 변수)으로 선언하면 되겠다. HTML 요소를 불러올 때는 getElementById, getElementByClassName, getElementByTagName 등 이나 querySelector, querySelectorAll 등으로 불러올 수 있고, getElement로 시작하는 명령어로 불러올 때는 id, class, tag임을 명시하기 때문에 그 이름만 큰 따옴표 " " 안에 작성하면 되지만, querySelector 명령어로 요소를 불러올 때는, 그 안의 요소 이름이 id의 이름인지, tag를 지칭하는지, class의.. 2022. 9. 30.
Git 윈도우 버튼 옆 검색창에 터미널, cmd, 명령 프롬프트 검색하면 검은색 창이 뜬다. git --version | 컴퓨터에 깃 git이 깔려있는지, 깔려있다면 버전이 어떻게 되는지 확인해본다. VS Code에서도 위의 터미널 탭을 열어 새 터미널을 클릭하여 같은 명령을 입력하면 깃 버전이 확인 가능하다 설치되어 있지 않다면 깃을 다운로드한다. (윈도우즈 기준) https://gitforwindows.org/ Git for Windows Git for Windows focuses on offering a lightweight, native set of tools that bring the full feature set of the Git SCM to Windows while providing appropr.. 2022. 9. 23.
git commit error: pathspec '메세지'' did not match any file(s) known to git 강의를 들으면서 강사님 설명에 따라 git 버전 생성을 실습하던 중, git commit -m '메세지'를 입력했더니 다음과 같은 에러 메세지가 떴다. 에러 발생시 믿고 찾아보는 stackoverflow로 고고! 에러를 검색했더니 주효한 에러의 원인을 찾아 해결할 수 있었다. 읽어보면 다음과 같다. (클릭해서 크게 보세요.) 돌이켜 생각해보니 강사님을 따라 실습을 했는데, 강사님은 되시고 나는 에러가 뜬 상황이었는데 아래쪽 답변을 보니 그 이유를 알 수 있었다. 강사님은 macOS를 사용하셨어서 싱글과 더블 쿼테이션(작은 따옴표와 큰 따옴표) 둘 다 커밋 메시지 작성시 사용이 가능했고, 나는 windows라 error: pathspec '메세지'' did not match any file(s) known.. 2022. 9. 23.

티스토리툴바