본문 바로가기

46

[React] 리액트 작업환경 준비하기 리액트 시작하기 전에 작업환경 준비 - Node.js 설치 Windows : Node.js 공식 홈페이지에서 LTS 버전 설치해주세요. macOS/Linux : nvm 이라는 도구를 사용하여 Node.js를 설치하시는 것을 권장드립니다. (나중에 업데이트 하기가 쉽습니다.) Node.js 공식 홈페이지 https://nodejs.org/ko/ - Yarn 설치 Yarn은 npm과 똑같이 패키지 매니저 도구이지만 npm보다 성능이 좋습니다. https://yarnpkg.com/en/docs/install#windows-stable - VSCode 설치 VSCode 공식 홈페이지 https://code.visualstudio.com/download 1. node와 yarn이 설치 되었는지 git bash로 .. 2020. 3. 22.
[scss] sass/scss 차이점, 컴파일 방법 /sass와 scss의 차이점은? 기본적으로 안에 들어있는 내용은 같지만 작성하는 문법에서 약간의 차이가 있습니다. scss는 css문법과 완벽하게 호환이 되는 그런 구문을 가지고 있습니다. ① 간단한 차이는 { } (중괄호)와 ; (세미콜론)의 유무입니다. *sass는 중괄호와 세미콜론을 가지고 있지 않습니다. ② 또 다른 차이는 Mixins('믹스인'은 재사용 가능한 기능을 만드는 방식을 의미합니다.) sass는 = 와 + 기호로 Mixins 기능을 사용했다면 scss는 @mixin과 @include로 기능을 사용했습니다. 컴파일 방법 scss는 웹에는 직접 동작할 수 없습니다. 최종으로는 표준 css로 동작해야 하며, 전처리기로 작성 후 css로 컴파일해야 합니다. 간단한 scss 코드는 컴파일러를.. 2020. 3. 21.
[Js] Prototype 이해하기 자바스크립트의 프로토타입 프로토타입이란 의미 자체가 원형, 원본이라는 뜻입니다. 자바스크립트에서 말하는 프로토타입 역시 문법적인 의미에서 크게 벗어나지 않습니다. 자바스크립트는 클래스라는 개념이 없는 대신 기존의 객체를 복사해서 새로운 객체를 생성해줍니다. 이는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냅니다. 이렇게 생성된 객체는 또 다른 객체의 원형이 될 수도 있고요. 간단하게 프로토타입 예제를 보여드리겠습니다. function Animal(type, name, sound){ this.type = type; this.name = name; this.sound = sound; this.say = function(){ console.log(this.sound); } } const dog = .. 2020. 3. 19.
[HTML] label/input 태그 정리 (웹 접근성) label 태그 label 태그는 양식 입력 창의 요소들을 위한 캡션을 나타냅니다. 코드 작성 방식에는 명시적(explicit)과 암시적(implicit)으로 분류됩니다. label 태그를 쓰는 가장 큰 이유는 웹 접근성을 위함입니다. 먼저 명시적 작성 방식과 암시적 작성 방식에 대해 알아보겠습니다. 1. 명시적 작성 방식 명시적 작성 방식은 label 의 for 속성과 input의 id 속성을 명시함으로써 연결해주는 방식입니다. 2. 암시적 작성 방식 암시적 작성 방식은 label 태그 안에 input 태그를 넣음으로써 for 속성을 명시하지 않더라도 암묵적으로 연결하는 방식입니다. 대부분은 명시적 방식을 선호하고 있습니다. 이유는 오래된 통신 기기는 아직 암시적 방식을 지원하지 않기 때문입니다. in.. 2020. 3. 18.