본문 바로가기

Study

 (46)
[Sass/SCSS] 변수 만들기 #1. 사용법 1. scss 파일에서 다음과 같은 형태로 넣어준다. $name: value; // $변수명: 값; * 이름지을때 유의사항 - 알파벳,-,_ ,숫자 사용가능 - 대소문자 구분함 - 변수명 숫자로 시작하지 말아야함. - 보통 아래 두가지 조합 많이 사용함 (강요적인건 아니니까, 회사에서 쓰는 방식에 따라 사용하는게 좋음) 1) sass에서는 보통 소문자로,- 조합 2) 대문자로 _ 조합 $color-red: red; // 1. 소문자 - 조합 $COLOR_BLUE: #0000ff; // 2. 대문자 _ 조합 2. scss 에서 변수가 필요한 곳에 그대로 사용하면 된다. $color-red: red; // 1. 소문자 - 조합 $COLOR_BLUE: #0000ff; // 2. 대문자 _ 조합 ..
[Sass/SCSS] Sass/SCSS style 쉽게 추적하기 Sass/SCSS 를 사용하는경우, 별다른 셋팅이 없으면 모든 style이 연결된 css로만 추적이된다.. 오늘은 개발의 편의를위해, 이를 scss파일로 추적 가능하게 만들어보도록 하자. 1. package.json 열기 2. "scripts" sass 를 정의한 라인에 하단 옵션 추가 --source-map true * node-sass option에 해당 옵션을 추가한거예요. 3. 터미널에서 npm run sass 4. 연결된 scss다시 저장 하면, 다음과 같이 css가 아닌, scss로 스타일을 추적할 수 있다.
[Sass/SCSS] Sass/SCSS 시작하기 - css 랜더링 자동화 앞서 npm run sass라는 명령어를 통해 scss파일을 css파일로 수동으로 랜더링하는 방법까지 알아봤다. scss의 기본적인 셋팅에 대해 알고싶다면 이전글을 참고하기 이번 포스팅에서는 매번 명령어를 통해 수동으로 파일을 랜더하기 어려우므로 이를 자동화 하는 방법을 메모하고자 한다. 1. package.json 열기 2. "scripts"의 "sass" 를 정의해놓은 영역에 -wr추가 "sass": "node-sass -wr styles/main.scss ./style.css" * -wr 뭔데 추가함? -w, --watch : 파일의 변화를 감지하여 작동하겟다는 뜻. -r, --recursive : 재귀적인 디렉토리나 파일도 감시하겠다는 뜻 3. 터미널에서 npm run sass 입력. 4. 이제 ..
[Sass/SCSS] Sass/SCSS 시작하기 - 셋팅 #1. node 설치 1. node 는 하단 링크에서 각자의 컴퓨터 사양에 맞게 설치하자. - LTS(Long Term Support, 장기 지원 버전) 설치 권장 : 큰 버그 없이 안정적으로 사용가능한 버전 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 터미널에서 하단 키워드를 입력후 버전 정보가 잘 나온다면 설치가 잘 된 것이다. node -v 3. 터미널에서 하단 키워드 입력하여 package.json 생성하기 - 생성된 package.json 에서는 node module을 사용하기 위한 여러가지 셋팅을 설정..
parseInt()와 Number() 차이점 문자열을 숫자로 바꿀떄 보통 Number()와 parseInt를 많이 사용했다. 그런데 이 두가지는 뭐가 다를까? 이번기회에 차이점을 정리하고자 한다. 1. Number(Str) - 문자열을 인자로 받으면 해당 문자열을 숫자로 바꿔준다. - 하지만 그 문자열은 숫자 형태로만 구성되어있어야 유의미하다. 아래의 예시를 참고하자. console.log(Number('1234')); // 결과값 : 1234 console.log(Number('100원')); // 결과값 : NaN console.log(Number('10.444')); // 결과값 : 10.444 - 위와같이 한글 등의 문자가 껴있으면 원하는 결과값이 출력되지 않는다. 2. parseInt(Str) - Nunber(Str)와 같이 문자열을 인자..
헷갈리는 IT용어 이해하기__9. 전체적으로 개발 과정은 어떻게 돌아가는가? # 클라/ 서버 우리는 다양한 기기를 사용한다. 스마트폰, 태블릿, 데스크톱, 노트북 등등. 이 기기의 공톰점은 '컴퓨터'라는 점이다. 컴퓨터는 CPU, 메모리, 보조기억장치 와 같은 부품을 가지고있다. 그런 부품들을 우리가 직접 제어하면서 컴퓨터를 사용하진 안흔다. 어떤 프로그램들이 그 역할을 대신 해주는데, 그것이 바로 '운영체제'다. 대표적으로 윈도우, Mac OS, iOS, 안드로이드 등이 있다. 이 운영체제 위에 올라가는 프로그램을 개발하는 사람을 클라이언트 개발자라고 한다. 서버사이드에는 서버 컴퓨터가 있다. 서버에서 많이 사용하는 운영체제는 리눅스이며, 기본적으로 안정적이고 무료이기 때문에 많이 쓴다. 그 위에 서버 프로그램을 돌린다. 이 서버 프로그램을 만들어서 서버 컴퓨터에 돌리는 사람을..
헷갈리는 IT용어 이해하기__8. 협업 (feat. git, xd ... ) # 개발자간의 협업 관리 - git - 개발 과정은 복잡하다. 이 복잡한 과정의 히스토리와 각각의 작업 영역을 겹치지 않게 하기위해 깃을 고안되었다. 깃은 다음과 같은 행위들을 거치며 개발 소스들을 관리한다. 1) 커밋 (commit) - 무슨 개발을 했는지 적어주는 메모, 이 커밋들의 내역를 커밋로그(Commit log)라고한다. - 개발 내역 분석및 추적 2) 브랜치(Branch) - '분기','가지'라는뜻으로, 새로운 가지를 뻗는 것을 의미. - 분석 기능과 동시에 진행해야하는 다른 코드들은 브랜치로 따로 관리한다. 각각 서로 다른 곳에서 개발하는 것. - 하나의 프로젝트를 진행할 때 동시에 여러 기능들이 충돌 없이 작업할 수 있다. 3) 머지(Merge) - 각각 브랜치에서 작업한 코드들을 합치는..
헷갈리는 IT용어 이해하기__7. 프레임워크, 라이브러리 #프레임워크? 애플리케이션을 혹은 웹을 더 쉽고 빠르게 개발하기 위해, 고안된 방법이다. IOS, Mac OS, WatchOS 등의 애플의 애플리케이션을 개발하기 위해서는 Swift 혹은 Object-C라는 언어를 사용해야한다. 여기에 애플에서 제공해주는 프레임워크인 코코아(UIkt, Appkit)를 사용하면 애플리케이션을 더 쉽고, 빠르게 만들 수있다. 안드로이드 또한 자바혹은 코틀린 이라는 언어를 사용한다. 그리고 안드로이드 프레임워크를 사용하면 안드로이드에 올라가는 애플리케이션을 더 쉽게 만들 수 있다. 문제는 웹이다. 웬은 특정회사의 소유가 아니다. 그래서 웹 프레임워크 및 라이브러리는 여러 사람이 만든다. 2020 기준, 가장 유명한 웹 프론트엔드 프레임워크는 다음과 같다. Angular.js ..

티스토리툴바