본문 바로가기

국비지원교육21

번들러(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.
favicon.ico가 자동으로 뜨지 않을 때 강사님께 문의드려보니 favicon.ico 파일 자체에 문제가 없다면, 브라우저 파비콘 캐시 문제일 수 있습니다. 강력 새로고침(Cmd + Shift + R)을 해보거나 혹은 코드를 추가한 후 브라우저에서 확인하고 다시 코드를 삭제하는 방법을 사용할 수도 있습니다.(그대로 두어도 되고요) 강사님의 답변에 따라 강력 새로고침을 해보니 파비콘이 바로 똬앟 ! 브라우저 캐시 문제인가보다.. 캐시에 대해 몰라 좀 더 알아보고자 조사한 내용은 다음과 같다. 캐시(Cashe)란 무엇일까? 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 메모리 장소를 가리킨다. 캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다. 캐시에 데.. 2022. 9. 23.

티스토리툴바