본문 바로가기

분류 전체보기328

[Sass/Scss] parcel 번들러로 Scss 프로젝트 시작하기 1. npm init으로 프로젝트에 package.json 파일 생성하기 여기서 y 플래그는 default 값으로 설정된package.json을 바로 설치하고 싶을때 사용한다. 참고로 -y는 yes를 의미한다. npm npm init -y yarn yarn init -y 2. npm i -D parcel-bundler로 parcel 번들러 설치하기 여기서 -D 플래그는 parcel이라는 번들러를 브라우저에 올리지 않고 개발용으로만 사용하도록 설치한다는 의미다. 설치가 완료되면 package.json에 parcel-bundler가 올라가고 node_modules 폴더, package-lock.json 파일이 생성된다. parcel 번들러는 Scss파일을 CSS로 변환시켜 웹브라우저가 해석할 수 있도록 도.. 2022. 4. 20.
[Sass/Scss] Sass/Scss란? Sass란 CSS 문법을 더 쉽게 사용할 수 있게 도와주는 CSS 전처리기(CSS Preprocessor) 도구다. 웹브라우저에서는 Sass 코드를 해석할 수 없으므로 Sass를 CSS로 변환하여 웹브라우저에 전송해야한다. Sass는 CSS로 변환하기 전에 사용하기 때문에 CSS 전처리 도구라고 부른다. CSS 전처리도구는 Sass 이외에도 less, stylus도 있다. 2022. 4. 20.
[Sass/Scss] 외부에 있는 다른 Scss 파일 불러오기 @import "./sub" sub.scss라는 파일이 같은 파일 경로에 위치해 있다면 아래의 코드와 같이 해당파일을 import 해준다 이때 확장자(scss)는 명시하지 않아도 된다 파일이름, 파일이름 으로 여러개의 파일을 한번에 import 할 수 있다 2022. 4. 20.
[Sass/Scss] 주석처리하기 Scss 코드를 주석처리하는 두가지 방법 1. /* ... */ 사용하기 2. // ... 사용하기 .container { h1 { color: royalblue; /* background-color: orange; */ // font-size: 60px; } } /* ... */와 //... 의 차이점 /*...*/로 주석처리를 하면 Scss 파일이 CSS로 컴파일이 된 후에도 해당 코드가 주석처리된채로 남아있다 //...로 주석처리를 하면 Scss 파일이 CSS로 컴파일이 된 후에 Scss파일에서 주석처리한 코드가 사라진다 2022. 4. 20.
[Sass/Scss] 사스의 데이터 타입 7가지 1. 숫자 데이터(number) 단위가 붙어 있는 숫자도 숫자 데이터로 취급을 한다 예) 100px, 1em 숫자 데이터 예시: 1, 0.5, 100px, 1em $number: 1; 2. 문자 데이터(string) 문자 데이터 예시: bold, relative, ".../img/profile.png" $string: bold; 3. 색상 데이터(color) 색상의 이름은 문자 데이터가 아닌 색상 데이터 타입이다 예) green 16진수 색상과 rgba도 색상 데이터다 예) #FFFF00, rgba(0, 0, 0, .1) 색상 데이터 예시: green, #FFFF00, rgba(0, 0, 0, .1) $color: green; 4. 불리언 데이터(boolean) 불리언 데이터 예시: true, false.. 2022. 4. 20.
[Sass/Scss] Scss 문법 정리 1. 셀렉터 중첩 (Nesting) 부모 셀렉터가 후손 셀렉터를 감싸고 있는 형식 Scss nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } CSS nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } 2. 속성 중첩 아래 코드에 있는 .box 셀렉터는 속성값으로 font.. 2022. 4. 20.
[Node.js/한줄정리] package.json과 package-lock.json package.json 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)를 통해 설치한 패키지를 관리해주는 파일 package.json에 작성되는 정보는 크게 2개로 나눌 수 있다: 프로젝트의 정보: 현재 프로젝트에 관한 정보를 명시 패키지 버전 정보: 패키지 매니저(npm, yarn)를 통해 설치한 패키지의 목록과 버전 명시 package-lock.json package.json에 명시된 패키지들이 동작하기 위해 필요한 다른 패키지들에 관한 정보가 명시된 파일 yarn을 통해 패키지를 설치했다면 yarn.lock 파일이 생성된다 package.json 파일은 직접 관리하지만 package-lock.json 파일은 package.json에 명시된 패키지를 설치하고 삭제할때 자동으로 업데이트(.. 2022. 4. 20.
[Node.js/한줄정리] npm init이란? npm init은 프로젝트에 package.json 파일을 생성하는 명령어다. 2022. 4. 20.
[웹개발/한줄정리] 네임스페이스(Namespace)란? 네임스페이스란 이름을 통해 구분 가능한 범위를 만들어내는 것으로 일종의 유효범위를 지정하는 방법을 말한다. 2022. 4. 20.
[웹개발/한줄정리] 번들러(Bundler)란? 번들러란 여러개로 나눠진 파일을 하나로 합쳐주는 도구를 말한다. 참고할 포스팅 [리액트] 리액트에서 자주 나오는 용어 정리 (컴포넌트, 모듈, 번들러, 웹팩, 바벨, 렌더링) [JavaScript] 번들러(Bundler)란? 2022. 4. 20.
[웹개발/한줄정리] 리팩토링(Code Refactoring)이란? 리팩토링이란 결과의 변경없이 코드의 구조를 재조정하는것을 의미한다. 2022. 4. 20.
[Sass/Scss] 색상 변수에 opacity값 넣기 $white: #fff; $white-50: rgba($white, 0.5); 2022. 4. 17.
[웹개발/한줄정리] 오픈소스(Open Source)란? 오픈소스란 누구나 프로젝트를 사용하고, 수정하고, 배포할 수 있는 프로젝트를 말한다. 2022. 4. 13.
[자바스크립트] 객체에서 key, value가 같을때 생략해주기 (단축 속성명) 일반적인 객체의 모습 오브젝트는 key와 value로 이루어져 있다 { key: value, key: value... } ES6 property shorthand(단축 속성명) 오브젝트의 key와 value가 같으면 생략할 수 있다 { key, key, key... } 예제 let a = "maple"; let b = 20; let c = ["alpha", "beta", "gamma"]; let obj = { a, b, c }; /* 위의 객체는 아래의 객체와 같다 obj = { a: a, b: b, c: c } */ console.log(obj.a) // "maple" 2022. 4. 13.
[자바스크립트] 함수 파라미터 기본값 설정 (디폴트 파라미터) 함수 파라미터에 기본값을 주지 않았을 경우 함수 호출시 파라미터를 넣어주지 않았다면 해당 파라미터는 undefined다. function sayHello(name) { console.log(`Hello ${name}!`); } sayHello(); // "Hello undefined!" sayHello("maple") // "Hello maple!" 함수 파라미터에 기본값을 주었을 경우 함수 호출시 파라미터를 넣어주지 않았다면 해당 파라미터에 기본값으로 설정된 값이 들어간다. function sayHello(name = "user") { console.log(`Hello, ${name}!`); } sayHello(); // "Hello, user!" sayHello("maple") // "Hello, m.. 2022. 4. 13.
[리액트/한줄정리] props와 state란? props 자식 컴포넌트가 부모 컴포넌트한테 전달받은 데이터 부모에게 전달받은 state 값 state 컴포넌트 내부에서 설정하고 바꿀 수 있는 데이터 본인 컴포넌트에 설정되어 있는 state 값 2022. 4. 12.
[리액트] 클래스형, 함수형 컴포넌트에서 state 값 관리하기 (state 설정과 업데이트) state란 컴포넌트 내부에서 설정하고 바꿀 수 있는 데이터를 의미한다. 클래스형 컴포넌트와 함수형 컴포넌트가 state를 설정하고 업데이트하는 방법에는 차이가 있다. 클래스형 컴포넌트 import React from 'react'; class StateClass extends React.Component { constructor(props) { super(props); this.state = { name: 'maple', }; } onClick = () => { this.setState({ name: 'lavender', }); }; render() { return ( 안녕하세요 저는 {this.state.name}입니다 이름을 라벤더로 바꾸기 ); } } export default StateClass.. 2022. 4. 12.
[깃] 깃 용어, 명령어 총정리 깃 용어 정리 명령어 의미 버전관리 프로젝트 상태가 변경되는 정보를 알고 있는 것으로 Git은 버전관리 도구중에 하나로 commit을 사용해 버전이 달라지는것을 관리한다 repository (리포지토리 / 저장소) git으로 관리되는 프로젝트 저장소 줄여서 리포라고 부른다 local repository (로컬 저장소) 내 컴퓨터가 git으로 관리되는 프로젝트 저장소일때 로컬 저장소라고 한다 remote repository (원격 저장소) 깃허브처럼 다른 곳에서 접속할 수 있는 git으로 관리되는 프로젝트 저장소를 말한다 tracking (추적) 로컬 repo와 원격 repo를 브랜치 단위로 연결하는 것 origin push할 원격 저장소(HTTPS)의 이름 branch 특정 커밋에서 갈라져나와 독립적으로.. 2022. 4. 12.
[리액트] react-router-dom v5 사용법 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술과 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 리액트를 다루는 기술 13장 리액트 라우터로 SPA 개발하기 리액트 기초반 3-3 리액트에서 라우팅 처리하기 (1) 3-4 리액트에서 라우팅 처리하기 (2) 1. react-router-dom 라이브러리 v5 설치하기 yarn add react-router-dom@5.2.1 2. index.js에 BrowserRouter 적용하기 로 프로젝트에 라우터를 적용한다. 컴포넌트는 1) 사용자가 입력한 주소를 감지하는 역할 2) 여러 종류의 라우터 컴포넌트를 제공 3) 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로.. 2022. 4. 11.
[리액트/한줄정리] 라우팅이란? 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정 브라우저 주소에 따라 다른 페이지를 보여주는 것 2022. 4. 11.