본문 바로가기

IT 개발85

Sass(Scss) 설치하기 및 기초 Sass와 Scss는 CSS의 PreProcesseor로 CSS의 전처리기 역할을 한다단순한 스타일링을 주는 CSS에 변수를 담아놓고 조건문을 사용하는 등 프로그래밍적으로 CSS를 사용 가능하게 만든다 Sass와 Scss는 거의 같다고 볼 수 있는데 Scss가 상위 호환 버전이며 사용이 더 권장되는 편이다둘 다 CSS와 자유롭게 호환이 가능하지만 왜 Scss의 사용이 권장되는 편 일까? 우선, 공식 사이트에서도 Scss 문법 기준의 설명이 있으며 문법적으로 CSS와 같아서 익숙하게 배우는 게 가능하다또한 Sass는 CSS와 Scss에서 사용하는 {} 중괄호와 ; 세미콜론 대신 들여 쓰기 및 줄 바꿈으로 대신 사용하기 때문에이 요소들이 매우 중요하며 여러 줄을 사용하면 에러가 발생한다. 물론 Sass를 사.. 2021. 9. 2.
Vue cli 환경에서 axios 사용하기 깃허브 저장소에 있는 Vue 프로젝트를 클론 해서 가져가면 node modules가 존재하지 않는다그래서 이를 제대로 사용하기 위해선, 클론을 받은 후 package.json이 존재할 수 있도록 npm install을 통해설치해줘야 한다    오늘 배운 내용은 axios!axios는 Vue의 기본 기능은 아니다하지만 리액트, 뷰 같은 프레임워크와 사용하기에 좋다    위처럼 npm install axios를 입력하고 package.json을 확인해보면 axios가 설치되어있다    axios를 함수로 보고 then을 보면 프로미스로 리턴하는 걸 알 수 있다    res 타입은 오브젝트이다여기에 data라는 방이 존재하는데 이 방은 오브젝트 또는 배열이 될 수 있다   이것이 우리가 사용하는 백엔드의 멤버.. 2021. 8. 30.
classList.toggle과 querySelectorAll 사용 예제 별 아이콘의 색이 채워졌다 사라졌다 하는 효과를 버튼에 클릭 이벤트가 발생할 때마다 적용시키고 싶었다 처음에 querySelector를 생각했다가 생각해보니 카드가 하나만 생기는 게 아닌 여러 개의 카드가 계속해서 추가될 예정이라 (=> 별 아이콘의 개수도 똑같이 늘어남) 일반적인 querySelector를 사용했더니 맨 처음에 찾아진 starIcon 클래스에만 적용이 되었다. 그래서 querySelectorAll을 사용했다 처음에 querySelectorAll을 사용하면 반복문이 가능한 유사배열인 Nodelist가 반환된다는 걸 생각 못해서 왜 계속 에러가 나는거지.. 했었는데 같은 조원인 친구가 알려줬다 (..!) 코드의 마크업 부분이다 여기서 아이콘의 변화는 class에 far가 있을 경우엔 바탕색.. 2021. 8. 24.
Vue 시작하기 ⑩ 앞의 포스팅에서도 언급했지만 다시 정리하기 위해 작성해본다! vue를 사용하기에 앞서, 먼저 node.js를 설치해야 한다. node.js란? 자바스크립트 해석기! 텍스트로 프로그래밍하지만 결국은 C언어로 프로그래밍하는 거나 마찬가지이다 노드제이에스를 설치하면 자바스크립트를 사용하지만 C언어로 프로그래밍하는 효과를 준다노드제이에스 설치하면 서버에서 자바스크립트를 해석할 기능이 생긴다! 그리고 npm이라는 응용프로그램이 같이 설치되는데 (= node package manager)라이브러리 관련 다운로드는 npm js 사이트에서 다운로드가 가능하다   vue도 node.js 응용프로그램이다    결국은 자바스크립트를 얻어내는 것소스코드의 품질을 높이기 위해 타입 스크립트 사용하기도 한다타입 스크립트는 tsc.. 2021. 8. 16.
Vue 시작하기 ⑨ 개발환경 셋팅 및 프로젝트 생성 뷰 개발환경은 node js server이다그리고 node js를 설치하면 npm이 같이 설치되는데 이는 node package manager의 줄임말이다    웹브라우저에서 ajax 요청은?우리는 자바 기반의 서버를 배웠는데 뷰를 node.js 서버 기반에서 개발해야 하는데그럼 ajax 요청을 어디로 해야 하나?    결국 서버를 두 개 돌려야 한다. 개발환경에서 계속 개발하기 쉽지 않은데뷰는 이렇게도 가능하지만 리액트 같은 경우엔 cli 개발환경에서만 가능하다    dist 최종적으로 심어놓으면 그 밑에 꺼는 다 필요 없다 (개발과정일 뿐)    새로운 프로젝트를 생성하고 폴더를 확인해보면 다양한 폴더와 파일들이 존재한다    새로 만든 프로젝트 파일 안에서npm run serve를 입력해보자    .. 2021. 8. 15.
Vue 시작하기 ⑧ v-if 첫 번째가 false면 그 밑에 있는 v-else가 실행된다 자바에서는 이런 for문이 가능하지만vue는 안된다 (오직 배열에서 빼내는 거만 가능하다)   배열의 아이템 빼내는 것만 가능한데그렇다면 아이템 배열이 1 - 5면 12345, 6-10이면 678910 이렇게 되도록 만들 수 있을까?   1~5번까지 이 5개의 값은 관리가 되어야 한다pageNum 초기값은 1로 설정되야하고 각 링크 누를 때 다른 값들을 서버로부터 지속적으로 받아와야 한다 v-bind 줄이면 콜론: 만 사용해도 되며 여러 단어를 조합할 땐 언더바 사용이 제일 마음 편하다 (카멜 케이스 신경 써야 하기 때문)    href=""로 비워 놨기 때문에 클릭하면 현재 페이지로 새로 로딩되는데, 다른 페이지 혹은 원래 페이지에서.. 2021. 8. 14.
반응형

티스토리툴바