Frontend
-
meta 태그 및 og 의미Frontend 2023. 1. 6. 19:19
태그는 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다. 간략히, 문서에 어떤 정보가 담겨있는지를 기술한다. 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용 된다. 1. 검색엔진을 위한 keyword를 다음과 같이 입력한 뒤 검색 엔진에서 조회될 수 있도록 할 수 있다. 2. 웹 페이지에 대한 설명을 기입할 수 도 있다. 이밖에도 누가 저장인지를 나타내는 author 등 다양한 속성값이 있다. 그런데 메타 태그 내부에 og:title 과 같이 적힌 경우가 있다. og 는 오픈그래프(Open Graph) 의 약자로 SNS에 게시될 때 문서의 데이터를 가지고 갈 수 있도록 설정하는 것을 의미한다. 즉, 아래와 같이 해당 주소 복사시 전 미리 크롤러가 해당 웹사이트를 방문하..
-
html :root 의미Frontend 2023. 1. 5. 23:33
최상위 html Template에 아래와 같이 CSS 가 style에 설정되어 있는것을 보는 경우가 있다. :root 는 CSS 가상 클래스의 일종이다. CSS 가상 클래스는 선택자에 추가하는 키워드인데 포인터가 올라갔을떄 작동하는 :hover를 생각하면 이해가 쉽다. 즉, :root 를 사용하면 문서의 root 요소에 공통적인 속성을 넣을 수 있다. html 의 경우에는 아래 사용할 수 있는 전역 변수를 지정할 수 있다. 예를 들면 아래와 같이 변수로 설정하면 css 내부 에서 변수를 호출하여 공통적인 색상을 사용하게 할 수 있다. div { background: var(--main-color); }
-
-
npm 원하는 특정 버전 설치 하는 법Frontend 2023. 1. 4. 22:18
npm 을 이용하여 특정 모듈 설치시 모듈 이름만 명시하면 최신 버전이 설치된다. $ npm install vue-router 특정 버전을 설치하고 싶다면 아래와 같이 @뒤에 명시해준다. $ npm install vue-router@3.6.1 현재 설치된 버전 확인 $ npm show vue-router version 특정 버전중 가장 최신버전을 설치하고 싶다면 ^사용 하면 된다. ex) 3 버전 중 가장 최신 버전이 설치된다. 3.6.5가 설치됨 $ npm install vue-router@^3
-
NVM 에서 원하는 node 버전 설치 후 사용하는 법Frontend 2023. 1. 3. 19:22
nvm 을 통해 원하는 node 버전을 설치하는 방법은 아래와 같다. 1. nvm 저장소에 설치가능한 버전 확인 $ nvm ls-remote 2. 원하는 버전을 설치(LTS 붙은것을 추천) $ nvm install v18.12.1 3. 원하는 버전을 사용 (설치한 버전중 원하는 버전으로 변경가능) $ nvm use 18.12.1 4. 사용중인 node 버전 확인 $ node -v v18.12.1 5. 설치된 node 버전 리스트 확인 $ nvm ls
-
MacOS 에 NVM 설치 하는법(Node 설치)Frontend 2023. 1. 3. 19:12
NVM 은 Node Version Manager 라는 말에서 보듯 Node 버전을 관리할 수 있다. 즉, 프로젝트를 수행할 때 원하는 버전의 노드를 적용하여 사용할 수 있기에 노드를 설치하는것 보다는 NVM을 설치 후 원하는 노드의 버전을 선택하는것이 유용하다. 사전작업으로는 Homebrew 설치가 필요하다. 1. NVM 설치 $ brew install nvm 설치를 하게 되면 아래와 같이 친절히 추가 작업을 안내해준다. 2. 설치후 path 등록 $ mkdir ~/.nvm $ vi ~/.zshrc .zshrc 파일 들어간 뒤 i 를 눌러 insert 모드로 바꾼 후 아래 코드 저장 후 esc 키 > :wq 엔터로 변경 저장 export NVM_DIR="$HOME/.nvm" [ -s "/opt/homeb..
-
javascript 인수 vs 매개 변수Frontend 2022. 11. 15. 21:38
javascript 함수와 관련하여 인수(Arguments) 와 매개 변수(Parameters)가 헷갈릴때가 있는데 간단히 함수내에 들어가는 값은 매개변수고 함수를 호출할떄 들어가는 값은 인수다. 더 간단히 기억하려면 매개 변수는 function 내에서 사용하는 일종의 변수다. 아래 코드를 보면 이해가 쉽다. // a 와 b 는 매개변수다(Parameters) function add(a, b) { return a + b } // 함수를 호출할 떄 입력하는 1, 2 는 인수다 (Arguments) let temp = add(1, 3);