본문 바로가기

전체 글182

Git 버전 관리 (실습) .gitignore를 만들어 그 파일 안에 원격 저장하지 않아도 되는 파일이나 폴더를 명시하여, 버전 관리시 무시할 파일이나 폴더를 설정할 수 있다. git init 으로 버전관리 초기화 터미널에서 cmd로 보면 경로 마지막에 브랜치 이름이 붙지 않는다 ! gitbash로 변환하니 git init 후 경로 마지막에 브랜치 이름이 보인다. 폴더나 파일이름은 영문으로 작성해야 에러가 생기지 않는다. git add .를 하였더니 필요없는 캡쳐 파일들이 다같이 staging 되서 내리고 gitignore 폴더에 넣고자 했다. 먼저 캡쳐 파일들을 unstaging하기 위해 git reset HEAD (파일이름)을 입력했는데, 다음과 같은 메시지가 떴다. 이유는 git reset HEAD (파일이름) 명령어는 최근.. 2022. 10. 14.
autoprefixer와 postcss 동시에 설치할 때 오류나는 경우 autoprefixer와 postcss 패키지 설치하고 package.json 파일 확인해보니 위와 같다. npm run dev로 개발서버 열어보니 다음과 같은 오류가 발생한다. 이유는 바로 버전 충돌. postcss plugin autoprefixer requires postcss 8로 오류 검색해보면, 다음과 같은 이유를 알 수 있다. 아래 내용은, PostCSS는 버전 8로 업데이트 되었지만, PostCSS CLI가 아직 새 PostCSS 8+ API를 사용하는 PostCSS 플러그인를 다룰 수 있도록 업데이트가 안되어 있다는 것이다. 오토프리픽서 10버전 이후로는 새 PostCSS 8 API를 사용한다. https://stackoverflow.com/questions/64057023/error-p.. 2022. 10. 14.
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.
BEM (Block Element Modifier) BEM (Block Element Modifier) HTML 클래스 속성의 작명법으로, 요소_일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시하는 방법이다. 요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시하는 방법이다. 자주 사용되는 이름, 중복되는 이름을 요소 간의 관계를 드러나게 하거나 클래스 이름이 요소와 맺는 관계, 상태 정보를 알려주는 BEM 작명 방식으로 작성함으로써 조금 더 정확한 CSS 선택자 혹은 유의미한 선택자를 제공할 수 있다. (예시) 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.
자바스크립트의 null과 undefined, console.log와 console.dir 자바스크립트에서는 의미가 다소 다르지만, 다른 프로그래밍 언어에서 사용하는 null 외에 특수하게 undefined이라는 자료형이 있다. null은 null 값만을 포함하는 null 자료형으로 분류되고, '존재하지 않는 값(nothing)', '비어 있는(empty) 값', '알 수 없는(unknown) 값'을 나타낸다. undefined와 유사하지만 차이점은 '의도적으로' 값이 없는 것을 의미한다. undefined는 null과 같이, undefined 값 만을 포함하는 undefined 자료형으로 분류되고, '값이 할당되지 않은 상태 값' 즉, 기본값과 같은 의미를 띈다. 변수를 선언하였지만 값을 할당하지 않았으면 그 변수의 값은 undefined로 자동 할당된다. cf. 파이썬의 None 참조 자바.. 2022. 9. 21.

티스토리툴바