본문 바로가기

전체보기

 (286)
객체지향 프로그래밍이란? 자바스크립트에서 객체를 생성하는 4가지 방법, 프로토타입은 무엇이고 왜 사용해야하는가? 객체지향 프로그래밍이란? 철학적인 개념과 닮아 있어 어렵게 느껴지는 것 같다. 객체를 쉽게 말하자면 세상 곳곳에 있는 사물이라고 비유할 수 있다. 예를 들어 책에는 책만의 네모진 형태가 있고, 종이로 돼 있고, 겉 표지가 있고, 한 장씩 넘길 때마다 새로운 내용이 나오는 등의 공통된 속성이 있다. 여기에 세부적으로 크기는 어떤지, 종이 재질은 어떤지, 디자인은 어떤지, 내용은 어떻느냐에 따라서 개별 책들이 정의된다. 프로그래밍에서도 공통으로 묶을 수 있는 요소들이 존재하고 개별 사물들이 그러하듯 이 공통된 요소들에 저마다의 다른점들을 붙여 다양한 것들을 만들 수 있다. 책을 정의할 수 있는 공통된 요소들과 각 책을 구분할 수 있게 해주는 요소들이 합쳐져 개별 책이 되는 것이다. 전자는 모든 책에 적용되는..
nvm과 node.js 설치법 NVM은 Node Version Manager의 약자로 말그대로 Node.js의 버전을 관리해준다. 쓰고 싶은 버전으로 손쉽게 움직일 수 있도록 해준다. nvm 설치 1. 다음을 입력한다. (맥 터미널) touch ~/.bash_profile curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash 2. 다음을 입력해서 nvm의 버전이 나오면 성공적으로 설치한 것이다. nvm --version node 설치 1. 다음을 입력한다. nvm install 10.13.0 2. 다음을 입력해서 node의 버전이 나오면 성공적으로 설치한 것이다. node -v
package.json 사용법 클라우드 상에서 프로젝트를 공유할 때 프로젝트에서 사용하는 모듈의 용량이 클 경우 클라우드 서버, 업로드, 다운로드 모두에 무리가 생긴다. 대신 파일 하나에 필요한 모듈들을 기록해 놓으면 클라우드 상에서 모듈을 주고 받을 필요 없이 사용자가 알아서 설치할 수 있다. Package.json이 이러한 역할을 해준다. 편리하게도 npm install을 입력하면 Package.json에서 필요하다고 적혀 있는 모듈을 모두 다운 받아 node_modules라는 폴더에 저장한다. Package.json의 내용은 다음과 같다. "dependencies": { "react": "^16.8.6", } dependencies 속성에는 프로젝트가 돌아가기 위해 반드시 필요한 모듈이 적혀있다. npm install을 입력하면..
ESLint 설치와 기본 사용 방법 - Linting Tool 1. 터미널에서 프로젝트 폴더로 들어간다. 2. 다음을 입력해서 ESLint를 설치한다. npm install eslint --save-dev 3. 다음을 입력해서 configuration 파일을 설정한다. npx eslint --init 4. 다음을 입력해서 ESlint로 폴더나 파일을 검사할 수 있다. npx eslint 파일.js 5. .eslintrc 파일 설정에 따라서 통과 여부가 달라진다. { "extends": "eslint:recommended", "rules": { "semi": ["error", "always"], "quotes": ["error", "double"] } } rules의 키에 뭐가 오느냐에 따라 에러로 표시되는 코드가 달라진다. error는 semi 조건에 해당하는 코드..
깃을 이용한 패어 코딩 Pair 1 관점 1. Fork : 원본 리파지토리를 가져온다. 2. git clone URL : 리모트 리파지토리를 로컬 리파지토리로 복사해서 가져온다. 3. git remote add pair URL : 패어의 리모트 리파지토리를 연결한다. 4. git add FILE : 파일을 수정 후 깃을 추가한다. 5. git commit -m 'MESSEGE' : 깃 메시지를 작성한다. 6. git push origin master : 로컬 리파지토리를 리모트 리파지토리로 올린다. Pair 2 관점 1. Fork 2. git clone URL 3. git remote add pair URL 7. git pull pair master : pair의 리파지토리를 가져온다. (리파지토리가 이미 연결돼 있어야 함) ..
의미론적 HTML 태그 구조 header : 위쪽에 위치하는 섹션으로 제목, 로고, 검색, 이름 등이 온다. main : 핵심 기능이나 내용이 오는 섹션 (페이지에 하나만) aside : 메인과 직접적으로 관련이 없는 사이드바 등 (광고) footer : 아래쪽에 위치하는 섹션으로 저작권, 관련 문서 등이 온다. section : 그밖에 딱히 의미가 없는 섹션 nav : 다른 페이지로 넘어가는 링크가 있는 섹션으로 메뉴, 목차, 색인 등이 온다. article : 사용자의 입력 등으로 내용이 바뀌는 섹션 (독립적 콘테이너) address : 연락처 정보가 있는 섹션 글자 검색 엔진을 위해 강조하고 싶은 내용의 글자를 넣는다. 은 이탤릭채가 되고 은 볼드채가 되니 CSS에서 적당히 바꿀 필요가 있다. 같은 CSS 효과가 있는 와..
엘리먼트를 배경처럼 활용하는 CSS 예제 엘리먼트를 배경처럼 활용하기 body, ul { margin: 0; padding: 0; } body { background-color: #d2d1d1; } .backGround { position: fixed; z-index: 0; height: 100vh; top: 0px; right: 0; left: 0; width: 75vw; margin: auto; background-color: white; box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.1); } .main { position: relative; z-index: 1; padding: 20px; } li { display: flex; flex-direction: row; ..
CSS 스마트폰 그라데이션 상단바 예제 Relate + h1, body, html { margin: 0; padding: 0; } span { font-size: 20px; font-weight: bold; } .header { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); background-image: linear-gradient(to right, #a274f7, #83b8f1); color: white; display: flex; align-items: flex-end; justify-content: space-between; padding: 40px 15px 10px 15px; }

티스토리툴바